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

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С другой стороны, вы также стандартизируете “как”. Присвоение имен, использование компонентов, методологии, стиль написания кода - все определяется здесь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

Источник:
vea.re
·
comments powered by HyperComments