Дизайн
UI сайта: элементы, подписи и состояния интерфейса
Пользовательский интерфейс: элементы и способы взаимодействия человека с системой, через которые он получает информацию, выбирает действия и видит их результат.
Редакция:
На сайте UI включает навигацию, кнопки, поля, подписи, сообщения и их представление в разных состояниях. Это больше, чем палитра и шрифт: интерфейс должен сообщать, что можно сделать, что происходит и чем закончилось действие.
Пример: отправка запроса
Учебная форма с кнопкой «Отправить» выглядит законченной только в одном состоянии. Для реального взаимодействия нужно решить, как человек увидит ошибку, ожидание и итог. Пример набора вопросов:
| Состояние | Что должен понять посетитель |
|---|---|
| До ввода | Какие сведения нужны и что означает каждое поле |
| Фокус | С каким элементом он сейчас взаимодействует при работе с клавиатурой |
| Ошибка ввода | Что требуется исправить и где находится соответствующее поле |
| Ожидание | Обрабатывается ли действие и можно ли выполнить его повторно |
| Результат | Принят ли запрос или произошёл сбой, какой следующий шаг доступен |
Текст успеха должен соответствовать подтверждённому результату системы. Сообщение после одного клика не доказывает доставку запроса. При ошибке объясните возможное действие, а не оставляйте человека перед надписью «Что-то пошло не так» без продолжения.
Что проверить в реализации
Пройдите нужный сценарий мышью, клавиатурой и на узком экране. Посмотрите, читаются ли подписи, виден ли фокус, доступны ли элементы и понятно ли сообщение об ошибке. Длинный текст и отсутствие необязательных данных тоже могут менять интерфейс.
Проверка по макету показывает расположение и визуальные варианты, но не подтверждает работу клавиатуры или доступное объявление сообщений. Для форм руководство W3C рассматривает подписи, структуру и уведомления; раздел об уведомлениях объясняет информирование об ошибках и результате. Это ориентиры для проверки реализации, а не заявление о соответствии конкретного сайта всем требованиям доступности.
Чем UI отличается от UI-kit и UX
UI-kit — повторно используемый набор элементов, из которого можно собрать интерфейс. Сам интерфейс — их применение в конкретных экранах и взаимодействиях. Передача набора макетов не означает готовность этих экранов в коде.
UX описывает опыт человека шире: может ли он решить задачу и как воспринимает взаимодействие. Хорошо различимая кнопка помогает, но не заменяет нужную информацию или работающий процесс обработки обращения.
Как согласовать результат с подрядчиком
Назовите страницы и сценарии, затем согласуйте нужные состояния и способы проверки. Например: «Для формы запроса показать ошибку поля, ожидание и подтверждение; после реализации проверить ввод и повторное действие». Это конкретнее, чем требование «сделать современный UI».
При обсуждении дизайна сайта связывайте комментарий с элементом, его назначением и ситуацией. Пожелание к стилю запишите отдельно. Зафиксируйте, что принимается сейчас: внешний вид, поведение в прототипе или работающий интерфейс. Для каждого этапа нужны свои доказательства.