UI-дизайн

Что это значит

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

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

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

Как это работает на практике

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

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

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

На что обратить внимание

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

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