1. Ничего не происходит
Что происходит до того, как ваш компонент что-нибудь сделает? Возможно, это первый раз, когда пользователь его видит. Компонент существует, но ещё не запущен.
2. Загрузка
Страшное состояние. В идеальном мире никто и никогда не увидит экран загрузки.
Увы, мы иногда попадаем на него. Есть много способов сделать этот экран лёгким и ненавязчивым. Неплохое решение предлагает Facebook.
3. Нет данных
Ваш компонент инициализирован, но он пуст. Нет данных. Самое время призвать пользователя ввести их («Сделай это!») и вознаградить за ввод («Отлично, дальше всё будет работать само»).
4. Один элемент
У вас появились какие-то данные. Это может быть первая буква в тексте или первый элемент в списке.
5. Данных достаточно
Обычно об этом думают в первую очередь. Идеальное состояние компонента. Ваши данные загружены, а пользователь познакомился с интерфейсом и ввёл свои.
6. Слишком много данных
Пользователь перестарался. Слишком много элементов списка (вы разбиваете их на страницы), слишком много символов (ставите многоточия).
7. Неверное действие
Что-то не так с компонентом. Произошла ошибка.
8. Верное действие
Всё отлично! Пользователь ввёл данные правильно.
9. Сделано
Приложение приняло данные, которые ввёл пользователь, и успешно их использует. Больше не о чём беспокоиться.
Эти состояния будут повторяться в ходе взаимодействия с продуктом. Детально продумав изменения интерфейса, вы сможете создать приятный опыт пользователя независимо от того, в какой ситуации он находится.
Многие состояния забываются или игнорируются командами UX-дизайнеров. Это огромная ошибка и шанс для вас стать лучше конкурентов. Думая о рабочем потоке, как о смене состояний, вы сможете контролировать все процессы приложения и вместе с тем позаботиться о пользователях.
Девять состояний дизайна есть в любом продукте. Даже если после прочтения статьи вы решите игнорировать одно из них, это будет не плохо — вы сделали это осознанно, а значит, принимаете во внимание «дыры» во взаимодействии с продуктом.
Обсуждение
Похожее
10 крутых UI-наборов стоимостью от $5.
Кнопка и индикатор в одном элементе (для веб-интерфейсов) — codepen.io/hakimel/full/gkeha
Навык протаскивания приёма