Разработка дизайна для пустых экранов

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

Пустые экраны – это области приложения, не заполненные контентом или данными. Они пусты. Пустая страница. Обычно на пустые экраны дизайнеры не обращают внимания, так как они концентрируются на том, как бы наилучшим образом представить большие объемы контента или данных. Общим для пустых экранов является то, что дизайнеры занимаются ими на случай, если они вызваны исключениями (к примеру, отсутствует соединение с сетью Интернет). Они зачастую просто копируются, поэтому их может быть непросто понять, или их оставляют со стандартными стилями. Не лучшая комбинация. Они должны разрабатываться так же, как и все остальное, однако обычно этого не происходит.

Существует три основных типа пустых экранов. Первый вход, Удалено пользователем и Ошибки (например, отсутствует соединение с сетью Интернет).

Первый вход

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

Когда кто-либо запускает приложение, шансы на то, что человек знает, что делает это приложение, довольно высоки. Тем не менее, ему может быть не совсем понятно, «как» оно это делает. Когда вы запускаете или авторизуетесь в первый раз, у вас нет никаких сведений. Это прекрасная возможность протянуть руку помощи пользователю и дать ему возможность получить как можно лучший опыт пользовательского взаимодействия. Если недостаток сведений выходит за пределы их возможностей, расскажите им, облегчите им задачу, покажите им, что ваше приложение имеет некоторую индивидуальность. Посмотрите, как это сделали в Buffer, Timehop и Dropbox. Buffer использовали те же самые техники на своем полноформатном сайте, показывая тем самым, что размер экрана и платформа ни на что не влияют.

Удалено пользователем

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

Посмотрите, как Sparrow, Gmail и стандартный почтовый клиент iOS Mail показывают страницу полного удаления писем.

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

Gmail пошли еще дальше, введя некую олицетворенность в приложение в виде улыбающегося солнца. Очеловечив приложение, пользователи могут наделить приложение человеческими эмоциями и установить с ним связь на более глубоком уровне. Отличительные черты делают понятным, хорошо ли, плохо ли, правильно ли, неправильно ли они используют приложение. При взгляде на Sparrow, можно ли сказать, что пустой почтовый ящик = это хорошо?

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

Ошибки

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

Посмотрите, как Chrome и Opera Mini представляют это по сравнению с Safari.

У Chrome мы видим большое количество навевающего скуку текста, который смогут понять только люди с техническим складом ума. Opera Mini показывает нам нечто, напоминающее стандартное окно, и ничего более. Язык сообщения более живой, чем у Chrome, но все равно, понять сообщение намного труднее, чем аналогичное сообщение у Safari.

Safari же, с другой стороны, представляет наиболее симпатичную страницу, объясняющую проблему в нескольких словах, но дающую нам наиболее приятный опыт взаимодействия. Какой вариант, по-вашему, придает людям уверенности, если у них произошел сбой соединения? Один вариант – успокаивающий, второй выглядит сломанным. Вовсе нет нужды пугать людей, если произошла ошибка соединения.

Даже если ваше приложение – не браузер, все равно это имеет значение, и другой пример из приложения GMail показывает нам, как приложение показывает проблемы с соединением – опять же при помощи эмоций. Вы видите, что приложение как будто загрустило, однако не чувствуете себя ответственным за это. Сравните эту страницу с аналогичными страницами сообщения об отсутствии соединения Instagram и YouTube. Слегка огорошивает теперь, когда вы знаете, как это может выглядеть. Приложение Twitter даже не говорит нам о том, что вообще есть какие-то проблемы с соединением.

Заключение

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

Некоторые компании начинают уделять особое внимание пустым экранам; либо частично по рекомендациям опыта пользовательского взаимодействия, либо следуя по стопам законодателя стиля – компании. Nokia, которая уделяет особое внимание разработке дизайна для пустых экранов и – даже если это не делает какой-то великой работы – они хотя бы включили это в свои рекомендации. Первые шаги.

Важная вещь, о которой стоит помнить – это то, что вы добавляете новый слой очарования в свое приложение. Даже если это скучные приложения.

1. Поддерживайте людей, добавляющих данные туда, где их нет. Вырваться из традиционного оформления – хорошая идея.
2. Подумайте о целях, которые преследуют люди, пользующиеся вашим приложением. Будут ли они часто удалять все данные, или это будет редкостью? Придумайте соответствующий приятный сюрприз. Если это частое явление, подумайте над тем, чтобы сделать несколько различных дизайнов и распределить их в случайном порядке для придания особого очарования.
3. Не пугайте пользователей сообщениями об ошибках. Думаете, они имеют смысл для кого-то, кто не понимает, что они делают? Старайтесь поменьше пугать пользователя и побольше радовать.

Прежде всего, подумайте, кто будет использовать ваше приложение и с какой целью. Любое приложение великолепным делают детали. Очаруйте ваших пользователей, и, если вы позже ошибетесь, они будут снисходительнее к вам.

Это перевод статьи под названием “Designing for the empty states” от Craig Dennis. Перевели в компании UXDepot с одобрением издания Codrops.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂