11 фантастических преимуществ дизайн-систем

Они делают вашу работу проще, быстрее и дешевле, вам даже больше не нужны дизайнеры — или все таки нужны?

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

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

Преимущества дизайн-системы можно разделить на четыре группы:

• масштабируемость;
• скорость и качество;
• документация;
• бренд и культура.

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

Масштабируемость

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

Масштабирование команды

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

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

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

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

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

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

Поддержка и постоянное развитие

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

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

• повысить доступность интерфейса;
• оптимизировать конверсии после А/Б-тестирования;
• обновить ваш бренд или операционную систему.

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

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

Скорость и качество

Почему все-таки дизайн-системы заслуживают такого внимания? Многие команды, с которыми я разговаривал,  считают главной причиной внедрения дизайн-систем совокупность следующих характеристик:

• повышение скорости;
• поддержание единообразия;
• улучшение качества продуктов в долгосрочной перспективе.
  

Перечисленные характеристики оказывают большое влияние на показатели вашего бизнеса по следующим причинам:

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

Все эти факторы оказывают огромное влияние на чистую прибыль вашей компании.

Производительность — повышение скорости и сокращение затрат

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

Дизайн-системы повышают производительность в основном за счет:

• стандартизации решений для всех продуктов;
• передачи управления этими решениями определенной команде.
  

Продуктовые команды работают только с компонентами и дизайн-токенами, представленными в системе, что существенно упрощает процесс:

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

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

Качество кода и дизайна

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

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

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

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

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

Единообразие

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

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

• все приложения будут работать одинаково;
• они будут работать так же, как и другие приложения на его телефоне;
  

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

Эти два фактора, в свою очередь, приводят к следующим результатам:

• улучшение конверсии;
• более качественный опыт взаимодействия;
• пользователи делают выбор в вашу пользу, а не конкурентов.
  

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

В продуктовых командах единообразие упрощает работу над чужим проектом. Разработчику будет легче заменить своего коллегу, когда у всех будет общее понимание того, как писать код.

Документация

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

Обмен знаниями

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

Если вы сделаете все правильно, никакой другой документации не потребуется для того, чтобы познакомить кого-то с проектом. И вы должны сделать все правильно: если дизайн-система — это продукт, то документация — его интерфейс. Это первая точка соприкосновения с системой, которая задает ожидания относительно качества продукта.

Особенность документации дизайн-системы состоит в том, что она является таргетированной. Вы точно знаете, кто ваша аудитория и почему она приходит. Соответственно, вы знаете основные потребности ваших пользователей, благодаря чему можете легко направлять их  в определенные разделы. У вас может быть раздел “Начало работы”, “Дизайн-токены и компоненты” и страница “План действий и релизы”.

Ваша аудитория становится еще более точно сегментированной при разделении контента на темы: “дизайн” и “реализация”. Это упрощает обмен конкретными знаниями и рекомендациями:

• Дизайнеры получают информацию о бренде, визуальной доступности, принятых UX-практиках;
• Разработчики узнают о программной доступности, стиле написания кода, подходе к тестированию.
  

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

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

Автобусный фактор

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

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

С одной стороны, вы стандартизируете “где” и “что”. Все знания, связанные с пользовательским интерфейсом, закрепляются в дизайн-системе: от доступности, цветов и типографики до тестирования интерфейса. Все это определяется здесь и только здесь. Это важно, поскольку если что-то отсутствует в документации дизайн-системы, значит, этого не существует.

С другой стороны, вы также стандартизируете “как”, сюда относится:

• присвоение имен;
• использование компонентов;
• методологии;
• стиль написания кода.
  

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

Бренд и культура

Устраняем разрыв между брендом и продуктом

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

Создание библиотеки компонентов пользовательского интерфейса на основе философии бренда может быть непростой задачей:

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

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

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

Одним словом, тщательно продуманная дизайн-система гарантирует, что индивидуальность бренда будет отражена во всех его продуктах.

Общая дизайн-философия и принципы

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

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

Философия дизайна отвечает на вопросы “что” и “почему”. Например, “дизайн решает проблемы, чтобы привлечь более широкую аудиторию”. Другой вариант философии: “дизайн, включающий детали, которые делают задачи приятными и полезными”.

Принципы дизайна связаны с этими идеями и отвечают на вопрос “как”. Например, “наш основной приоритет — доступность, поскольку мы хотим, чтобы каждый мог получить прекрасный опыт”. Это могло бы быть одним из аспектов первой философии. “Игривые анимации используются для передачи изменений состояния” — это один из принципов, который соответствует второй философии.

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

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

Совместное обладание

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

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

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

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

Вовлечение людей в работу над дизайн-системой имеет много преимуществ:

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

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

Обеспечьте равенство

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

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

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

Старайтесь придерживаться следующих рекомендаций:

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

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

Резюме

Вот 11 наиболее важных преимуществ дизайн-системы, которые я обнаружил:

• Масштабируемость
• Удобство эксплуатации
• Производительность
• Единообразие
• Улучшенный код и качество дизайна
• Лучший обмен знаниями
• Исключение разрозненных знаний
• Устранение разрыва между брендом и продуктом
• Продвижение философии и принципов дизайна
• Более качественное восприятие бренда и общих директив посредством совместного обладания
• Обеспечение равенства
  

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