Кнопка в макете обычно показывает одно состояние: значение по умолчанию. В реальном продукте одна и та же кнопка наводится, фокусируется с помощью клавиатуры, нажимается, отключается, пока форма не заполнена, и загружается при отправке запроса. Каждое из них представляет собой состояние пользовательского интерфейса, и каждому нужен дизайн.
Это помогает разделить две группы. Состояния взаимодействия исходят от пользователя: наведение, фокус, нажатие и отключение. Состояния данных поступают из системы: загрузка, пустые, частичные данные, ошибка и успех. Например, экран списка нуждается в дизайне для случаев, когда он загружается, когда на нем нет элементов, когда на нем есть один элемент, когда его сотни и когда запрос не удается.
Состояния фокуса заслуживают особого внимания. Люди, использующие клавиатуру или переключатели, зависят от видимого индикатора фокусировки, чтобы знать, где они находятся. Удаление контура фокуса браузера без замены — одна из самых распространенных проблем с доступностью.
Смена состояний также является частью замысла. Короткий, четкий переход от стандартного к нажатому подтверждает нажатие. Состояние загрузки, которое плавно переходит в успех, говорит людям, что их действия сработали. Резкие скачки или слишком медленная анимация делают интерфейс ненадежным.
Практический способ избежать пропущенных состояний — составить их список для каждого компонента перед проектированием или смоделировать компонент как конечный автомат: набор состояний и событий, которые перемещаются между ними. ExodeUI, который мы делаем, работает именно так. Вы проектируете каждое состояние и переходы между ними в одном файле, а ваш код отправляет события, которые переключают состояния в реальном приложении.