Системы государства и больших компаний: GOV.UK, Carbon, Atlassian

GOV.UK Design System — система госуслуг Великобритании и образец понятных форм. Carbon от IBM учит порядку в данных, Atlassian — именованию токенов.

Три системы, у которых стоит поучиться

Системы Material, Apple и Microsoft задают облик платформ. Эти три другого рода: они лучше всех объясняют как решать конкретные задачи. GOV.UK учит делать понятные формы, Carbon показывает порядок и данные, а Atlassian дал образец говорящих токенов.

GOV.UK Design SystemCarbon (IBM)Atlassian Design System

Правительственная цифровая служба Великобритании (GDS)

Идея

Чтобы любой человек мог сделать государственную услугу в интернете понятной и доступной: проверенные исследованием компоненты и паттерны.

Токены

Основы: слой, цвет, типографика, отступы; значения собраны в пакете GOV.UK Frontend.

Компоненты

Компоненты (кнопка, поля, таблицы) и отдельно паттерны (как спросить имя, адрес, как собрать ошибки формы).

Доступность

Компоненты заявлены как доступные; страницы объясняют, когда компонент подходит и когда нет, и опираются на исследования.

Открытость

Материалы публикуются по Открытой правительственной лицензии v3.0 (кроме отдельно оговорённого); код открыт.

Что взять себе

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

Когда не брать

Как готовый внешний вид для коммерческого проекта: символика и фирменный шрифт GOV.UK предназначены для государственных служб Великобритании (проверьте условия). Берите правила, а не оформление.

Открыть документацию системы (откроется сайт системы)

GOV.UK: когда сайтом должен суметь воспользоваться любой

GOV.UK это единый сайт государственных услуг Великобритании, а его Design System поддерживает Правительственная цифровая служба (GDS). Причина, по которой его читают все: он вырос из задачи сделать так, чтобы любой гражданин мог оформить услугу сам: пожилой человек на телефоне, человек с нарушением зрения, тот, кто плохо читает. Поэтому в нём всё проверяется исследованием, а не вкусом.

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

Из неё стоит взять правила для форм. Вот самые важные, и каждое подтверждено на страницах системы.

• Подпись всегда над полем и всегда видна. Placeholder её не заменяет: он исчезает, когда человек начинает печатать, и не все экранные дикторы его читают.
• Подсказка отдельным коротким предложением, без ссылок, связанная с полем атрибутом aria-describedby.
• Атрибут autocomplete сообщает браузеру, что за данные просят (name, email, tel), и тот подставит их. Это ещё и требование WCAG 2.2 (критерий 1.3.5).
• Сводка ошибок. Если есть ошибка, наверху главного блока показывают сводку, фокус клавиатуры переходит на неё, а ссылки в ней ведут к полям.
• Сообщение рядом с полем говорит, что делать: «Введите адрес почты», а не «Неверное значение». Слово «Ошибка:» в разметке GOV.UK стоит перед сообщением как скрытый от глаз префикс для экранных дикторов; в нашем упражнении оно видимое, чтобы смысл не держался на цвете.

Нажмите «Отправить» в форме ниже сначала в одном режиме, потом в другом.

Сводка и сообщения (как у GOV.UK) Только красная рамка

Как к вам обращаться

Достаточно имени

Адрес почты

Отправить Очистить

Нажмите «Отправить» с пустыми полями.

Проверьте себя: почему placeholder не заменяет подпись?

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

Одна оговорка про лицензию. Материалы GOV.UK открыты по Открытой правительственной лицензии v3.0 (кроме того, что оговорено отдельно), но символика GOV.UK и фирменный шрифт предназначены для государственных служб Великобритании. Берите правила и код, а оформление делайте своё.

Carbon: порядок и данные

Carbon это дизайн-система IBM, и сделана она для деловых приложений: таблицы, панели, формы на десятки полей. Основы: 2x Grid (сетка, в основе которой мини-единица в 8 пикселей), типографика, цвет, отступы, значки, движение, темы и доступность.

Что в ней интересно новичку:

• Два режима шрифта. «Продуктовый» (productive) для плотных рабочих экранов и «выразительный» (expressive) для страниц, которые читают и разглядывают. Вы тоже можете держать два режима: плотный для таблиц и свободный для рассказа.
• Темы. Четыре цветовые темы: White, Gray 10, Gray 90 и Gray 100, от светлой к тёмной. Система показывает, как строить тёмную тему без инверсии.
• Данные. Подробные страницы о таблицах данных и о том, как рисовать графики: хороший ориентир, когда ваш сайт будет показывать числа.
• Открытость. Carbon открыт, и у него есть руководство по вкладу.

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

Atlassian: токены с именами

Дизайн-система Atlassian держит единый язык продуктов вроде Jira и Confluence. Нам она нужна ради одного: образца того, как называть токены. Имена у неё говорящие: color.text.accent.red, elevation.surface.hovered. Читается слева направо: свойство, роль, состояние. По имени видно, где это значение применяется, и сам цвет можно менять, не переписывая правил.

Отступы у Atlassian кратны 8 пикселям: space.100 это 8, space.050 это 4, space.200 это 16, space.300 это 24 пикселя. Число в имени это процент от базового шага. Вы делали то же самое в уроке про иерархию, только с одним числом: теперь видно, как это выглядит в большой системе.

Проверьте себя: что значит space.200 у Atlassian?

16 пикселей: число это процент от базового шага в 8 пикселей (200 %).

Что взять, что оставить

Система	Берите	Не берите
GOV.UK	формы, понятный язык, сводка ошибок, видимый фокус	символику и фирменный шрифт
Carbon	сетку, два режима шрифта, правила для данных	деловую плотность для сайта «для всех»
Atlassian	способ именования токенов, шаг в 8 пикселей	вид продуктов Atlassian

Практика

Контактная форма на вашем сайте есть почти у любого проекта, и от неё часто зависит главное действие. Соберите её по правилам GOV.UK: видимые подписи, подсказка, autocomplete, образец состояния ошибки со сводкой. Образцы ошибок помечены data-scaffold: они нужны, чтобы вы видели правильную разметку, а на готовом сайте будут показываться только скриптом (его вы напишете в части про JavaScript).

Что было не так с 2014 годом

В 2014 году формы красили в цвета и ставили подсказку внутрь поля: так выглядело аккуратно. Исследования доступности и юзабилити показали цену: подпись пропадает на ходу, а форма не говорит, что не так. Сегодня правила GOV.UK стали общепринятыми, и на них опираются требования доступности.