monp UI
UI- kit в стиле госуслуг
аналитика, доступность, расширяемость
Задача команды
Разработать абстрактный UI-kit и дизайн-систему для порталов в стиле госуслуг, чтобы на основе заранее подготовленных компонентов быстро проектировать и верстать страницы для портала: списки, формы для заполнения, карточки с информацией.
Когда мы столкнулись с этой задачей, у нас еще не было точного понимания будущего проекта. У нас были стилистические требования, обширный опыт разработки подобных учётных систем и мы знали основные возможности API.
Когда мы столкнулись с этой задачей, у нас еще не было точного понимания будущего проекта. У нас были стилистические требования, обширный опыт разработки подобных учётных систем и мы знали основные возможности API.
- Обзор опытаМы уже разработали несколько проектов на базе продукта Neat UI. Мы хорошо понимали паттерны структуры данных и работы API. Мы сразу выявили самые популярные компоненты и те, без которых можно обойтись, пока не будет узкой задачи.1
- Исследование доступностиВ этот кит необходимо было сразу заложить доступность. Реализовывать ее стандартным плагином не хотелось, потому что согласно референсным исследованиям они не так уж юзабильны. Так что мы заложили свой подход.2
- Анализ UI-кита госуслугУ госуслуг есть отличные гайдлайны и приветливый робот Макс, который подсказал основные направления в стилистическом развитии. Мы определились с архитектурой цветовых и текстовых стилей, выбрали для себя схожие паттерны, и то, в чем будем отличаться.3
- Кнопки и инпутыМы собрали все шишки на предыдущем опыте разработки и сделали полностью свои компоненты с учетом необходимых тэгов для доступности.4
- Меню, карточки, спискиПродумали способы навигации и заложили необходимую, но достаточную вариативность в системе.5
- РезультатНа основе этой компонентной базы мы реализовали два портала в сжатые сроки. Мы без проблем расширяли компоненты и улучшали UI дополнительными фичами.6
01
Обзор опыта
На основе имеющегося опыта был сформирован базовый состав компонентов.
Поля ввода
Однострочные, многострочные, селекты, автокомплит, даты, булены.
Кнопки
Главные и второстепенные, с иконками, кнопки опасных действий, паттерны группировки.
Формы
Паттерны построения форм ввода данных и просмотра данных.
Меню
В данном случае это набор ссылок внутри формы для перехода к связанным сущностям.
Списки
Карточки с превью сущностей одного уровня. От списков как правило идет переход к форме.
Навигация
Главное меню и второстепенное меню с отсылкой на госуслуги: крупные яркие иконки, крупный текст.
02
Исследование доступности
Был проведен ресерч статей и интервью с респондентами (нашлись знакомые с зрительными отклонениями). Основной фидбэк: люди не используют браузерные плагины, потому что они некорректно обрабатывают контент. Важно уметь брать в фокус элементы с клавиатуры, большие расстояния, минимум теней и обводок — то есть оставить выжимку сути из украшенного UI. На основе этого фидбэка и государственных регламентов мы разработали систему соответствий в наших компонентах: как цвета, текст, тени и бордеры преобразовываются при включении специального режима. И обязательно — компоненты обернуты в соответственные тэги, чтобы браузер нативно мог брать их в фокус.
03
Анализ UI-кита госуслуг
Составили мудборд госуслуг, изучили гайдлайны, выявили основные паттерны, которые запоминаются: яркие цвета, крупные иконки, много воздуха, округлые формы, мягкие тени.
Стили для преобразования текста
в режим для слабовидящих
в режим для слабовидящих
Цвета для преобразования текста
в режим для слабовидящих
в режим для слабовидящих
Цветовые и текстовые стили
цветовые стили привязаны к оттенкам,
но один из них продублирован в primary,
чтобы отличался основной на разных порталах
но один из них продублирован в primary,
чтобы отличался основной на разных порталах
текстовые стили
отражают в своем названии
семантику, размерность и вес
отражают в своем названии
семантику, размерность и вес
04
Кнопки и инпуты
Стандартный набор, но хочется отдельно рассказать об автокомплите и подходе к обязательности.
Автокомплит
Характеризуется возможностью поиска по списку в меню выбора. Часто встречаю в интерфейсах совмещение фукциональности: поисковый ввод осуществляется в том же поле, где лежит ранее выбранное значение. Мы ушли от этого решения.
Отдельное поисковое поле в дропдауне нужно для того, чтобы не потерять выбранное ранее значение, пока ищешь или проверяешь другие значения списка. На русско-государственном формулировки сложные, длинные, начинаются с одинаковых слов, и вероятность случайного тыка высока.
В нашем решении выбранное значение остается в поле, пока не кликнешь на новое значение из списка. При клике на автокомплит фокус автоматически переносится на поиск и экономит время оператора.
Профит: каждый компонент отвечает за свои функции, поведение интерфейса предсказуемо, в разработке прозрачно.
Характеризуется возможностью поиска по списку в меню выбора. Часто встречаю в интерфейсах совмещение фукциональности: поисковый ввод осуществляется в том же поле, где лежит ранее выбранное значение. Мы ушли от этого решения.
Отдельное поисковое поле в дропдауне нужно для того, чтобы не потерять выбранное ранее значение, пока ищешь или проверяешь другие значения списка. На русско-государственном формулировки сложные, длинные, начинаются с одинаковых слов, и вероятность случайного тыка высока.
В нашем решении выбранное значение остается в поле, пока не кликнешь на новое значение из списка. При клике на автокомплит фокус автоматически переносится на поиск и экономит время оператора.
Профит: каждый компонент отвечает за свои функции, поведение интерфейса предсказуемо, в разработке прозрачно.
Обязательность полей
Исследование обязательности проводилось мною ранее и оно отражено в отдельной работе: Нераздражающая валидация. Здесь я кратко отмечу основные моменты.
Апроксимировали звездочку:
— круг вместо шумной звездочки значительно разгружает наши сложные формы
— маркер находится внутри поля и не бьет верстку
Маркер меняет цвет при заполнении:
— фокус внимания переносится на другие поля
— оператор получает небольшую ачивку: «лампочка перестала гореть»
— форма дополнительно разгружается по мере заполнения
Исследование обязательности проводилось мною ранее и оно отражено в отдельной работе: Нераздражающая валидация. Здесь я кратко отмечу основные моменты.
Апроксимировали звездочку:
— круг вместо шумной звездочки значительно разгружает наши сложные формы
— маркер находится внутри поля и не бьет верстку
Маркер меняет цвет при заполнении:
— фокус внимания переносится на другие поля
— оператор получает небольшую ачивку: «лампочка перестала гореть»
— форма дополнительно разгружается по мере заполнения
05
Меню, карточки, списки
Одним настраиваемым компонентом мы покрыли 90% различных списков:
Уникальные карточки покрываются заранее известными паттернами:
06
Результат
Два разных портала на одной дизайн-системе. Критерий успеха: функционально очень разные порталы были реализованы в срок и с минимальными доработками компонентов. Основные работы по сборке форм выполнялись двумя младшими разработчиками под общим контролем ведущего.