Возможные состояния интерфейса

Экран приложения может находиться в различных состояниях. Мы рассмотрим все возможные состояния интерфейса.

Краткий итог: Создание дизайнов различных состояний экрана является обязательной составляющей работы дизайнера интерфейсов. Я в своей работе выделяю 7 различных состояний интерфейса: Загрузка, пустой, один элемент, идеальное состояние, слишком много элементов, ошибка, успешно выполненное действие.
Мы с вами хорошие дизайнеры, поэтому разберемся с тем, какие состояния интерфейса существуют. И в дальнейшем будем создавать дизайны для всех возможных состояний, а в ответ получать лучи любви от разработчиков. Ведь, если дизайнер не продумал, как должен выглядеть экран в случае ошибки, это за него сделает разработчик. И сделает совсем не так, как должно быть (не в упрек разработчикам, просто это не их работа).

Состояние загрузки

Данное состояние интерфейса показывает, что происходит с интерфейсом до того, как контент загрузится. В идеальном мире этого состояния существовать не должно. К сожалению, в реальном мире, это состояние все еще существует. А учитывая то, что большая часть населения все еще пользуется EDGE/GPRS интернетом (это боль), необходимо обязательно продумать, как будет выглядеть ваш интерфейс во время загрузки контента.

Мне очень нравится решение Facebook. Они показывают расположения элементов серыми блоками. Когда данные подгрузятся, они просто заменяют эти блоки.

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

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

А еще, самое время призвать пользователя к какому-либо действию. Например, если у вас приложение “Заметки”, то можно уведомить пользователя, что он еще не создал никаких заметок и предложить ему создать свою первую заметку (покажите ему кнопку).

Один элемент

Интерфейс загружен, все работает нормально, есть один элемент. Например, пользователь уже добавил заметку либо получил письмо (приложение мессенджер). Как будет выглядеть интерфейс, если элемент только один?

Существуют разные способы показать один элемент. Можно просто отображать один элемент, можно дополнить текстом и предложить выполнить действие (например: “Этой заметке здесь очень одиноко, давайте создадим еще одну!”). Здесь все зависит от вас.

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

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

Много элементов

Данное состояние возникает, когда необходимо показать слишком много элементов. Возможно, самое время добавить кнопку “Загрузить больше” либо или же добавить постраничную навигацию, чтобы уменьшить загруженность интерфейса.

Ошибка

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

Не нужно писать бездушный код ошибки (как делает Windows) и посылать пользователя искать решение проблемы в Google. Нужно подсказать пользователю, как можно решить проблему.

Успешное выполнение действия

Пользователь успешно совершил какое-либо действие. Больше от него ничего не требуется. Уведомите пользователя, что все прошло успешно и дайте возможность вернуться на нужный экран (например, на главный либо тот, на котором он был до выполнения действия).

Итог

Продумывание всех возможных состояний интерфейса имеет колоссальное значение, ведь от этого зависит целостность интерфейса. Вы не можете избежать ошибок и загрузок, но вы можете сделать их приятными и полезными (например, можно показывать интересные факты во время загрузки).

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