Там всего один экран нарисовать…

Евгений Теслов из FutureAction написал о том, сколько на самом деле экранов кроется в каждом.

Иногда мне приходится слышать эту фразу от разных людей, меняется только количество: «пару», «пять», «точно не больше восьми», которое абсолютно ничего не значит. И в следующий раз, когда вы услышите её от клиента, менеджера, маркетолога, технического специалиста, коллеги по цеху или оценивая объём предстоящих работ, просто вспомните эту картинку.

На самом деле, у любого «экрана» интерфейса существует 5 пять основных состояний, спасибо за формулировки Скоту Харфу; более того, в каждом из них, скорее всего, будет ещё несколько экранов:

• идеальное состояние / Ideal State;
• пустое состояние / Empty State;
• промежуточное состояние / Partial State;
• состояние ошибки / Error State;
• активное состояние / Activity State.

Давайте же разберёмся на конкретном примере, сколько их действительно в одном простом «экране» на примере авторизации в приложении для одного из модулей проекта Teamshare.co  —  развивающейся платформы для совместной работы.

1 ≠ 1

Идеальное состояние

Идеальное  —  состояние, которое пользователь должен видеть чаще всего, когда решил задачу на этом экране и/или находится в одном шаге от полезного действия. А любые предыдущие его действия в конечном итоге должны приводить к этому состоянию.

В нашем случае  —  правильно заполненные поля и возможность начать работать с продуктом.

Пустое состояние

Пустое — состояние, которое видит пользователь:

• когда первый раз использует экран/онбординг;
• если очистил все данные или завершил сценарий;
• когда нет информации для отображения;
• специфические возвраты и отмены действий.

В любом случае, это состояние должно максимально стимулировать пользователя к дальнейшим действиям, поощрять его и помогать.

В примере  —  первое использование, очистка полей, отмена входа через Гугл и Выход из профиля (logout).

Промежуточное состояние

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

В нашем случае  —  небольшое поощрение-индикатор для пользователя о правильно заполненном поле электронной почты.

Состояние ошибки

Состояние ошибок  —  всё что может помешать достигнуть идеального состояния, когда что-то пошло не так. Важно предусмотреть даже самые неожиданные комбинации:

• контекстные ошибки;
• ошибки сервера;
• отсутствие интернета;
• незаполненные поля;
• и многое другое…

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

В примере  —  контекстные реакции на ошибки, которые подскажут, что делать дальше.

Активное состояние

Активность  —  состояние, которое позволит пользователю сохранять полный контроль над происходящим и помогает понять, что происходит в настоящий момент:

• загрузка данных;
• отклики интерфейса;
• подтверждения действий;
• контекстные реакции и т.д.

В нашем случае  —  процесс авторизации на сервере, реакции полей и кнопок интерфейса на действия пользователя.

И вы же всё ещё помните, что мы говорим только об одном экране? В примере, у которого специально опущен функционал восстановления пароля и регистрации пользователя.

Итак, у каждого «одного экрана» есть 5 основных состояний, но всё ещё интересней…

Есть сценарии пользователей, первое использование, последующие входы, состояния для авторизованных и не авторизованных пользователей, различные платформы, устройства, разрешения экранов и, конечно, анимация переходов и взаимодействия.

Одно знаю точно  —  это совсем не «всего один экран».

1 > 5

И, кстати, попробуйте Motivateo  —  трекер привычек и целей.