UI- система или хроники Хаоса
Всем доброго времени суток. Давно я что-то ничего не писал, и вот созрел. Предлагаю сегодня поговорить о ui-системе. Зачем она нужна, когда она нужна, что дает, какие минусы имеет и вообще стоит ли ввязываться в это блуд. Я часто слышу на разных конференциях, что панацея от всех болезней в бизнесе — это наличие дизайн-системы (ui-системы). Что, как только вы достигаете ее, то сроки сокращаются в 100500 раз. Что разработчики не хотят открутить голову дизайнерам, и, наоборот, что качество продукта возноситься до небес, и еще много всего восхитительного об этой сущности. Но так ли все это ? Или это просто розовые очки, которые застилают глаза всех причастных к созданию ui-системы в компании и побочка от постоянных нервных срывов, скандалов, поиска компромиссов и просто выгорания? В этой статье я постарался разобраться, а стоит ли игра свеч или как в анекдоте про нюансы.
Для начала, чтобы рассуждать, что чем является, нам потребуется разобраться в понятиях и терминах предметной области.
UI — kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей. Так мне сказал поисковик, я спорить не стал.
UI component являются основными блоками и элементами для дизайна пользовательского интерфейса. Они предоставляют пользователям способ взаимодействия с вашим веб-сайтом или приложением. Этими компонентами могут являться интерактивный текст и графика, которые сообщат пользователю, что делать дальше.
Гайдлайны — набор шаблонов и правил использования элементов, которые упорядочивают процесс работы. Благодаря гайдлайнам к простым задачам не привлекают дизайнера, а сразу подключают разработчика.
UI — система — это совокупность всего вышеперечисленного. Вся информация в UI — системе структурирована и разложена по полочкам, а на любой чих там найдутся ответы.
Звучит очень заманчиво, не правда ли? Давайте теперь поподробнее разберемся, что дает UI-система в абсолюте. То есть пока, для первого приближения, берем верхи.
Плюсы.
Аккумуляция знаний — все что может потребоваться при разработке или погружении нового дизайнера или разработчика заключена в одном месте. И, по сути, весь процесс обучения и погружения в продукт сводится к одному действию — к изучению UI — системы.
Консистентность — все интерфейсы выглядят одинаково, имеют одинаковую сетку, одинаково себя ведут.
Простота работы — так как все описано, отрисовано, протестировано и весь процесс создания сводится к тому, что ты берешь готовые кирпичики и разбрасываешь согласно гайдлайнам по экрану. Не пинайте, да, пример утрированный.
Скорость работы — как бы банально не звучало, но, как мне кажется, когда UI-система готова, то она не кисло сокращает время разработки в целом, включая создание новых экранов (дизайн). Как было замечено выше — просто двигай кирпичики.
Продуманность — так как UI- система никогда не делается впопыхах, а требует скрупулезной проработки, то, как правило, вся логика проработана до мельчайших деталей. Как пример: какое сообщение и когда выводить, состояния кнопок, или как выводятся ошибки.
Вот я пишу плюсы, и восторг меня захлестывает, я начинаю переобуваться в воздухе. НО…. К сожалению, я писал вначале черновик и поэтому знаю что будет дальше… Эх! Теперь давайте будем взрослыми людьми и поговорим о минусах.
Минусы.
Стоимость — создание простой дизайн системы обходится в стоимость космического шаттла, так как над дизайн-системой работает целая команда дизайнеров, аналитиков, разработчиков и проджектов. Все высказывают свои хотелки и стараются свести все воедино. Помимо прочего, вам потребуется внедрить созданную систему и поддерживать её в актуальном состоянии.
Многие скажут, что на создание всего уходят ресурсы. Да, но тут затраты в разы выше, чем просто разработка и поддержка продукта. UI-система это игра в долгую, и не всегда оправданная.
Гибкость — так как это большой пласт работы, то при каких-то изменениях надо задействовать множество ресурсов, а, значит, делается это не быстро. Давайте представим что у нас ребрендинг, который по статистике происходит раз в 3–5 лет. Получение результата займет 2 человека/года, если утрировано. Так же надо понимать, что помимо изменений потребуется еще и применить их к проектам.
Шаблонность -— шаг в сторону расценивается, как попытка побега, а прыжок приравнивается к попытке улететь. А, значит, если у вас передовой или креативный продукт — это будет очень больно. Вы либо получите очень неповоротливую систему, либо очень обширную, которая будет в себе содержать любой чих.
Добавление ресурсов -— если к вашему основному костяку потребуется добавить любое звено, будь то дизайнер, разраб или еще кто-то, то быстро это сделать просто физически не получится. Это связано с тем что, разрабу придется прочитать 2 «Войны и мира» для того чтобы вникнуть в подход, а дизайнеру прочитать 5 таких книг, так как придется ознакомиться со всеми стайл-гайдами и требованиями.
Стекозависимость -— разработанная дизайн система на ангуляре не будет работать на вью или реакте, так как созданные части не будут подходить. Как следствие, вы становитесь заложниками того, на чем у вас создана система. Высока вероятность того, что вам рано или поздно придется переписывать все, даже если будут просто серьезные изменения между версиями того стека, который вы выбрали. Как пример, vue 2 и 3. Или, например, произойдет обновление версий зависимых пакетов, которые будут содержать в себе синтаксические изменения, конфигурационные или обновления собственные.
Сложность интеграции с другими системами -— в некоторых случаях UI-системы могут быть сложно интегрированы с существующими системами или сторонними сервисами. Это может потребовать дополнительных усилий и времени.
Как вы могли заметить, минусов не так уж и много, но каждый из них может похоронить вашу идею о дизайн-системе на корню. Плюсы и минусы — это, конечно, аргументы, но, как мы все знаем, есть и другие переменные, которые вносят поправки на ветер.
Для каких проектов подходят UI системы?
По опыту могу сказать следующее: UI системы подходят только для кровавого энтерпрайза и точка. Для всех остальных — это неподъемный инструмент. Возьмем пример проекта: у вас есть один продукт, над которым работают несколько команд разработки, дизайнеров, но продукт один. Тогда создание системы оправдано. При игре «в долгую» дизайн-система себя окупит и сделает вашу жизнь проще.
Но если в компании несколько продуктов и, более того, если они несут разную смысловую нагрузку, тогда создание ui-системы бессмысленно. Причиной этому то, что, скорее всего, продукты имеют разный внешний вид, функциональность, паттерны и много чего другого. Сведение их в единую ui-систему приведет к замедлению скорости разработки, а продукты будут мешать друг другу развиваться.
Так же нельзя скидывать со счетов стоимость обслуживания и развития ui-системы. Да, кто-то скажет, что все стоит денег, и с этим я соглашусь. Но далеко не всем нужна дизайн-система. Большинству достаточно иметь полноценный гайдлайн, который создается в разы быстрее и поддерживается проще.
