Дизайн-система: что это и в чем ее ценность для продукта

Это первая глава | Продолжение (Глава 2) →

(Перед вами бесплатный курс от InVision Studio «Дизайн-системы. Погружение». В курсе 7 глав, в которых доходчиво и на наглядных примерах создатели дизайн-систем в Atlassian, Salesforce, LinkedIn, Shopify, Amazon, Etsy и GitHub отвечают на вопросы: зачем нужна дизайн-система, какие преимущества она даёт и кто особенно оценит ее в работе).

Над переводом работали: Валерия Новожилова, Анастасия Свеженцева и Егор Хлебников.

Автор оригинальной главы Marco Suarez — создал руководство по бренду для Facebook. Опыт проектов с Grab, Toasts и Brightwater.

Содержание:

В 1960-х годах компьютерные технологии начали опережать скорость разработки программного обеспечения. Компьютеры становились мощнее и дешевле, но процесс разработки программного обеспечения оставался все еще слишком медленным, сложным в обслуживании и напичкан ошибками на каждом шаге. Этот этап в истории стал известен как «Кризис программного обеспечения».

А в 1968 году на конференции НАТО по программной инженерии Дуглас Макилрой (Douglas McIlroy) представил компонентный подход к разработке ПО как возможное решение этого вопроса. Данный подход позволил увеличить скорость создания программных систем за счет того, что код теперь можно было быстрее повторно использовать. Такое решение сделало процесс более эффективным и легким в масштабировании. Компонентный подход снизил затраты и увеличил скорость разработки программного обеспечения, что в итоге позволило программному обеспечению эффективнее использовать мощности современных компьютеров.

Теперь, 50 лет спустя, мы сталкиваемся с аналогичной проблемой, но на этот раз в дизайне. Дизайн с трудом масштабируется с приложениями, на которых вертится, так как он все еще разрабатывается под заказ — все это выглядит, как частные решения для частных задач и ситуаций.

Вы когда-нибудь проводили аудит пользовательского интерфейса и обнаруживали, что в системе используется несколько десятков похожих оттенков синего или разные варианты одной и той же кнопки? Умножьте это на каждый кусочек пользовательского интерфейса в своем приложении, и вы начнете понимать, насколько непоследовательным, неполным и сложным в поддержке стал ваш дизайн.

Рисунок 1. UI Аудит помогает увидеть множество вариаций пользовательского интерфейса. После такой процедуры легко заметить дизайн-долг.

Чтобы дизайн в таком состоянии не отставал от скорости разработки, компании могут выбрать 1 из 3 стратегий:

Нанимать больше людей
Проектировать быстрее
Создавать решения, которые подходят для решения различных задач в различных ситуациях

Даже если в команде станет больше рук, и они будут работают быстрее, реальность такова, что сделанный на заказ дизайн (без учета развития) масштабируется крайне сложно. Уникальный дизайн, сделанный под конкретные случаи (без учета развития), со временем все труднее поддерживать.

Дизайн-системы призваны помочь командам ускориться в разработке и поднять качество продуктов на новый уровень. Дизайн-системы помогают увеличить количество повторно используемых компонентов и достичь легкости в масштабировании. Именно этот аспект и есть сердце и главная ценность дизайн-систем.

Дизайн-система — это набор повторно используемых компонентов, направляемых четкими стандартами, которые можно собрать вместе с целью создания любого количества приложений. За более, чем 50 лет, инженеры наладили свою работу. Пришло время и дизайнерам полностью реализовать свой потенциал и присоединиться к ним.

Масштабирование дизайна и системное мышление

Дизайн-системы все еще очень горячая тема в индустрии программного обеспечения — и на это есть причины. Дизайн шагает по миру. Многие компании вкладывают в него ресурсы, поскольку осознают, что клиентский опыт их продуктов — это конкурентное преимущество. Именно пользовательский опыт привлекает и удерживает клиентов и снижает расходы на поддержку.

Вот как обычно развиваются события в компании, которая вкладывается в дизайн:

Команда дизайнеров растет
Дизайн внедряется в команды по всей компании, даже распределенные территориально
Дизайн начинает играть ключевую роль во всех продуктах на всех платформах

С позиции дизайнера, такие вложения в дизайн могут показаться захватывающими, но это также связано с множеством вызовов, которые предстоит преодолеть.

К примеру, как вы будете создавать согласованные пользовательские интерфейсы под разные платформы, когда несколько команд развивают различные части ваших продуктов?

Еще вопрос, как вы поможете всем этим командам ускорить циклы релизов? А также как вы планируете разбирать дизайн-долг, который, как ни крути, накапливается по мере того, как команды дизайнеров создают новые уникальные дизайн-решения?

Чтобы понять, как создание дизайн-системы помогает решить эти проблемы, мы должны сначала разобраться с тем, что же такое дизайн-системы. Дизайн-системы объединяют две концепции с индивидуальными достоинствами каждой, создавая в итоге нечто более мощное.

«Было нетрудно указать дизайнерам следовать гайдлайнам, но было чертовски трудно донести им важность делать это и добиться их согласия».
Lori Kaplan, ATLASSIAN

Стандарты

Понимание не только того, что, но и почему стоит за дизайн-системой, имеет решающее значение для создания блестящего пользовательского опыта. Определяете, соблюдаете и развиваете стандарты — вот как проверяется понимание не словом, а делом. Такой подход устраняет субъективность и двусмысленность, которые часто создают трения и путаницу в группах разработчиков.

Конечно, понимание технических тонкостей под капотом пользовательского интерфейса Macintosh — ключевой фактор в дизайне продукта, но именно понимание теории, лежащей в основе пользовательского интерфейса, помогает дизайнерам биться за отличный продукт.

Стандарты охватывают как дизайн, так и разработку. Стандартизация таких вещей, как соглашения о наименованиях, требования к доступности (accessibility) и структура каталогов, поможет командам работать согласованно и снизить количество ошибок.

Визуальный язык — это ключевая часть дизайн-системы. Определение цели, цвета, формы, шрифта, иконок, работа с пространством и движением имеет важное значение для создания согласованного с брендом и единообразного взаимодействия с пользователем. Каждый компонент дизайн-системы прошит этими элементами, и каждый из них играет в нем существенную роль в выражении индивидуальности бренда.

Без стандартов решения становятся похожими на свободное искусство, и их трудно критиковать. Такая тактика крайне сложно масштабируется, и к тому же создает непоследовательный и разочаровывающий пользовательский опыт.

Профессиональный лайфхак
Платформа Transcend. Ваш визуальный язык может выходить за рамки платформ, раскатываясь по всему интернет-пространству, iOS, Android-платформам и электронной почте. Опишите и доносите до каждого участника команды ваш визуальный язык. Для этой цели можно даже создать отдельный сайт, как делают многие компании. Такой подход помогает держать в курсе всю команду о том, как компоненты должны выглядеть и работать.
Например, Google Material Design глубоко погружает во все аспекты их визуального языка. Зацените их страницу про культуру применения цвета.

Компоненты

Компоненты — это части повторно используемого кода в вашей системе, они – строительные блоки интерфейса вашего приложения. Компоненты различаются по сложности. Упрощение компонентов до одной функции, например кнопки или раскрывающегося списка, повышает их гибкость и делает их пригодными для повторного применения. Сложные компоненты, такие как таблицы, могут хорошо служить для определенных кейсов (вариантов использования), но их сложность делает их заложниками ограниченного количества сценариев использования. Чем больше возможностей повторного использования заложено в ваши компоненты, тем меньше вы будете заниматься поддержкой и сопровождением (отвечать на кучи вопросов и делать правки), и тем легче будет проходить масштабирование.

Дополнительные сведения о создании компонентов описаны в главе 3: «10 ключевых принципов хорошей дизайн-системы».

Компонентный подход к разработке снижает технические расходы, помогает сделать код повторно используемым. Стандарты регулируют цель, стиль и использование этих компонентов. Такой подход помогает снабдить всю продуктовую команду годной в использовании дизайн-системой и дать всей команде ясный ответ на вопросы что и почему.

Ценность дизайн-систем

Далее вы на примерах увидите, в чем сила дизайн-системы, какие значимые преимущества она дает и кому дизайн-система особенно полезна.

Обеспечивает масштабируемость дизайна

Команды дизайнеров частенько концентрируются на отдельных модулях приложения, таких как поиск и обнаружение, управление учетными записями и многое другое. Такой подход приводит к фрагментированному визуальному языку — выходит эдакая Вавилонская башня дизайна — когда каждый дизайнер говорит на своем языке. Так происходит, потому что дизайнеры подходят к решению задач и устранению проблем с собственным особым подходом, а не системно.

Без общей дизайн-культуры и единого дизайн-языка, объединяющего продукт, пользовательский опыт начинает ухудшаться, как и сам процесс проектирования. Критика дизайна с целью развития становится непродуктивной, так как не хватает дизайнерских договоренностей и соглашений. Добиться согласованности внутри команд помогает общий источник истины — место, куда можно отправить для изучения официальных шаблонов и стилей.

Чаще всего это статический артефакт, эдакий новенький макет дизайна, но все-таки статичный эталон почти сразу устаревает. Вот почему команды создают что-то более фундаментальное, к примеру живые ресурсы, такие как Shopify Polaris — сайт системы дизайна, созданный вместе с системой. На таком ресурсе задокументированы все аспекты дизайн-системы, включая компоненты, гайдлайны и лучшие практики UX. И поскольку он построен с помощью системы, он всегда будет актуальным.

Сайт дизайн-системы — лучший и самый доступный источник истины для продуктовых команд. Такой подход помогает добиться притяжения участников команды и их согласованной работы.

Дизайн-система организует управление дизайн-долгом

По мере того, как продуктовые команды развивают приложения, они накапливают долг. Этот долг не финансовый, а технический и дизайнерский. Долг копится из-за гонки за краткосрочными целями. Дизайнерский долг складывается из перенасыщения одноразовыми и несовместимыми стилями и соглашениями. Со временем долг становится настолько большим, что рост продукта замедляется очень сильно.

Применение дизайн-системы позволит вам взять ситуацию под контроль, уменьшить расходы на дизайн и код, и в то же время поможет вам ускорить рост и развитие приложения.

Задает последовательный процесс проектирования дизайн-решений

Стандартизация компонентов, поддержание их целостности, стремление к повторному использованию помогают создавать предсказуемые и простые для понимания приложения. Стандартизация компонентов также помогает дизайнерам сжигать меньше времени на стиль и вкладывать больше энергии в разработку лучшего пользовательского опыта.

Ускоряет прототипирование интерфейсов

Работа в рамках существующей дизайн-системы позволяет комбинировать сценарии и интерактив так же быстро, как вынимать блоки LEGO из корзины. Это позволяет создавать бесконечное количество прототипов и вариантов для экспериментов, помогая вашей команде быстрее добывать инсайты и данные о настоящих пользователях.

Помогает проворачивать циклы итераций быстрее

Независимо от того, развиваете ли вы стиль вашего пользовательского интерфейса или вносите изменения в UX, применение дизайн-системы сокращает усилия с сотен строк кода до нескольких символов. Это ускоряет итерации фантастически и снимает головняк, а еще помогает экспериментировать в разы быстрее.

Прокачивает юзабилити

Разрозненные соглашения о проектировании интерфейса бьют по юзабилити. С каждым новым уникальным элементом интерфейса растет и количество уникальных CSS-стилей, что ведет к увеличению нагрузки на сознание пользователя, технического веса страница и ее скорости отдачи. Все это вместе создает ужасный пользовательский опыт. А еще может приводить к конфликтам CSS и JavaScript, которые потенциально могут нарушить работу вашего приложения. Применение дизайн-систем, поможет вам избежать этих конфликтов, а также позволит создать целостную библиотеку компонентов. В общем такой подход поможет тратить меньше времени на обеспечение качества.

Помогает соблюдать принципы доступности интерфейсов для людей с ограничениями по здоровью

Доступность может быть реализована на уровне компонентов путем оптимизации для людей с ограниченными возможностями, для медленного интернета-соединения или для старых компьютеров. Это плюс один в удобстве использования. В главе 3 «10 ключевых принципов хорошей дизайн-системы» Katie Sylor-Miller объясняет, как дизайн-системы могут помочь улучшить доступность вашего продукта и привести его в соответствие к законам вашей страны.

Мифы о дизайн-системах

Дизайн-система дает целый спектр преимуществ, но несмотря на это продать саму идею о ее внедрении команде крайне сложно. Дизайнеры начинают тут же чувствовать себя ограниченными или сдерживаемыми, но эти предполагаемые недостатки и являются самыми сильными сторонами дизайн-системы.

Давайте развенчаем распространенные мифы, которые вы услышите, продавая идею создания дизайн-системы.

Миф 1: Дизайн-система ограничивает и сковывает

Миф: дизайнеры, ответственные за развитие определенных модулей приложения, глубоко понимают специфику и контекст работы конкретных модулей, поэтому воспринимают универсальный подход ко всей системе поверхностным, ограничивающим и сдерживающим стремление к блестящему пользовательскому опыту.

Реальность: дизайнеры частенько создают собственные решения с целью улучшить определенные области приложения, но при этом наращивают дизайн-долг и технический долг. С помощью дизайн-системы можно создавать новые решения и сделать их доступными каждому в команде.

Миф 2: Дизайн-система снижает креативность

Миф: если дизайнеры ограничены использованием дизайн-системы, они больше не смогут свободно исследовать стиль. Бэклоги фронтэнд-разработки больше не будут полны обновлениями. Развитие визуального стиля приложения встанет. А еще это просто большой риск, поскольку тянет ресурсы от работы над новыми функциями и скажется негативно на удобстве использования.

Реальность: компоненты дизайн-системы взаимозависимы. Это означает, что когда изменение производится в одном месте, изменение будет унаследовано по всей системе. Это делает обновление стиля в системе тривиальным, но гораздо более действенным. То, что раньше делалось неделями, если не месяцами, теперь можно сделать за полдень.

Миф 3: Один раз сделаешь дизайн-систему хорошо и всегда будет хорошо

Миф: как только дизайн-система спроектирована и построена — работа завершена.

Реальность: дизайн-система — живая система, а это значит, что она будет требовать постоянного обслуживания и улучшений по мере необходимости. Однако, поскольку ваше приложение работает на повторно используемых компонентах вашей системы, оно автоматически наследует улучшения системы, что снижает усилия по поддержке приложения. Это и есть сила масштабирования, которую предлагает дизайн-система.

«Наше видение на старте касалось визуальной идентичности… только спустя время мы начали понимать, что это должна быть система с действительно сильными основами дизайна взаимодействия».
Rich Fulcher, GOOGLE

Вывод и рекомендация

Дизайн-системы — это уже не прихоть и даже не гипотеза. Дизайн-системы помогают добиться масштабирования дизайна, его соответствия быстрорастущим технологиям, а разработка на основе компонентов — это проверенное и надежное решение.

Теперь, когда вы увидели истинную ценность создания дизайн-системы, давайте в погрузимся в сам процесс создания дизайн-системы.