Дизайн мелочей: пустые представления (перевод)

Перевод статьи Design the Details: Empty States

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

Теплый прием

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

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

Даже простые слова "Добро пожаловать в {Название приложения}" помогут  показать пользователю, что его ценят. Это простая вежливость - поприветствовать новых пользователей по прибытию. Однако, важно решить, что сказать дальше:

• Должны ли быть представлены ключевые функции приложения?
• Должен ли там быть "пустой" контент предназначенный для манипулирования пользователем?
• Нужно ли показать пользователю, как добавить свой контент?

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

Не выводите слишком много справочной информации, помогающей пользователю начать работу при первом запуске. Даже не думайте акцентировать внимание пользователя на какой-либо новой функции, просто ради того чтобы привлечь к ней внимание. Легко ли новые (или существующие) пользователи ее найдут? Если да, то может и нет смысла ее выделять.

Дизайн Apple является хорошим примером того, сколько информации стоит показывать новым пользователям. iBooks и iTunes используют похожие экраны первого запуска.

Apple хочет, чтобы пользователи перешли в iBook Store?

iBooks сообщает пользователю о том, чего здесь не хватает в этом представлении. Приложение смело заявляет, что у него в библиотеке нет книг, в тоже время понятно объясняя пользователю, как их добавить. iBook Store направляет пользователя не только стрелкой  акцентирующей внимание на кнопке Store, но и призывом нажать кнопку, находящуюся в неактивном состоянии.

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

       

Itunes показывает пользователям, как могла бы выглядеть их библиотека.

Представленный здесь пример на самом деле – идеальный пример того, как может выглядеть библиотека пользователя в приложении, установленном на чистую ОС. Такое потенциально сложное приложение как iTunes в тоже время кажется красивым и простым при первом запуске, что служит для поощрения пользователей сделать первые шаги или начать полностью использовать приложение.

Пустые входящие

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

Прекрасным примером данного факта являются «Пустые входящие», — самое известное из всех пустых представлений. «Пустые входящие» по сути являются представлением информации, в котором пользователь удалил, очистил или что-то еще сделал со всем контентом (явный пример – электронная почта). Такие представления разрабатываются, чтобы быть полезными пользователю, и чтобы он регулярно пользовался приложением.

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

Обратите внимание на пустые входящие, ведь я не столь часто их рассматриваю. Более подробно я коснусь этой темы в следующих постах..

Исследовать

Мне нравится сначала исследовать приложения на предмет пустых представлений, различных пояснений и функций, о которых я могу не знать пока во всех деталях. Опять же у Apple раздел «Near me» (имеющий хорошее пустое представление) в рамках AppStore, позволяет обнаружить еще больше приложений.

Apple представляет новым пользователям раздел «Popular Near Me».

Раздел «Near Me» не только является визуально привлекательным, с чистой графикой иллюстрирующей его очевидное использование, но и содержит краткое описание, ненавязчивый призыв к действию и наконец сведения о конфиденциальности пользователя (о том, что данный будут отправляться в Apple и местонахождении).

Это еще один замечательный пример, как можно лаконично показать сложную информацию в дружеской и личной манере.

Без тупиков

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

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

Совет: Обратите внимание на страницы ошибок на вашем сайте (например 404 страница). Посмотрев, что запрашивают пользователи перед тем, как попадают на эту страницу, вы можете уменьшить количество страниц ошибок за счет перенаправления ошибок ввода URL и поиска.

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

Dropbox не только успокаивает пользователей, но и показывает им, куда они могут обратиться за помощью.

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

Уникальность

Последовательное использование  пустых представлений для разных платформ или устройств может помочь в разработке бренда или уникальности приложения, но нужно ли это?

В Ember для Mac мы разместили несколько красивых иллюстраций в рамках пустых представлений, но в  Ember для iOs было решено отказаться от иллюстраций, т.к. мы делали приложение специально для iOs, в дизайне которой превалирует акцент на простоте и тексте.

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

Цитаты, показанные в рамках Clear

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

Наконец, стоит уделить дополнительное время для проверки  пустых представлений, особенно, если они были добавлены в конце проекта.

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