Одиннадцать разных кнопок

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

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

Что такое дизайн-система на самом деле

Это не папка с компонентами, хотя она и есть видимая часть. У работающей системы четыре слоя плюс одна вещь, которая слоем не является:

Токены — именованные значения, из которых собрано всё остальное: шкала отступов, шкала кеглей, цвета, радиусы, границы, длительности анимаций. Термин популяризировала команда Salesforce Lightning, и суть в именовании: space-md и text-secondary переживают редизайн, а 16px и #8a8a8a — нет.

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

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

Правила — когда что применять и, что важнее, когда не применять.

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

Зачем она нужна

Обычно перечисляют три выгоды, и третья важнее всего в ежедневной работе.

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

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

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

Система не ускоряет рисование. Она не даёт рисовать одно и то же снова.

Компонент владеет своими состояниями

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

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

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

Когда она не нужна

У систем есть стоимость поддержки, и она реальна.

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

И есть случай хуже отсутствия системы: система, которую никто не поддерживает. Устаревшая система врёт. Люди копируют паттерны, которые уже заменены, половина компонентов не совпадает с продакшеном, и все потихоньку начинают отсоединять и форкать — и вот ты платишь за поддержку и получаешь несогласованность в придачу.

Выращивай, а не проектируй

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

Надёжный метод — извлечение:

Правило трёх. В первый раз собери прямо на месте. Во второй скопируй и отметь дублирование. В третий сделай компонент. К этому моменту ты знаешь, что на самом деле меняется, а это единственный способ спроектировать верные параметры.

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

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

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

У согласованности есть пределы

Четвёртая эвристика Нильсена — про согласованность и стандарты, и её стоит читать внимательно: она означает, что человек не должен гадать, значат ли разные слова и действия одно и то же. Она не означает, что всё обязано выглядеть одинаково вечно.

Две честные оговорки:

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

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

На практике

Проведи аудит одного продукта на дубликаты. Посчитай стили кнопок, оттенки серого, радиусы и отступы модалок. Число всегда хуже ожидаемого, и именно оно продавливает согласование системы.

Сначала запиши токены. Отступы, шкала кеглей, цвета, радиусы. Список в файле. Всё остальное подождёт.

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

Примени правило трёх. Найди паттерн, который ты собрал уже трижды, и вынеси его на этой неделе.

Напиши одно «когда этим не пользоваться». Возьми самый неверно применяемый компонент и добавь раздел. Самый ценный абзац в документации любой системы.

Отслеживай переопределения месяц. Каждое повторяющееся — компонент, который ты ещё не сделал.

Проверь себя

Закрой статью и ответь своими словами:

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

Коротко

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