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