Как обучить пользователя с первого экрана

23 сентября 2015

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

С целью обучения пользователя используются специальные элементы дизайна.

Демо-тур

Демо-тур (start wizard) — это послайдовый гид по приложению, который позволяет провести обучение пользователя по основному функционалу приложения или его части.

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

Особенности демо-тура

  • Показывается пользователю только при первом взаимодействии.
  • Длится не более 30 секунд.
  • Пользователь не взаимодействует со слайдами, а только просматривает.

На что обратить внимание

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

Демо-тур приложения MyFun (PepsiCo)

Help

Демо-тур Google Диск

New Project

Демо-тур Dropbox

New Project (3)

Подсказки

Современные устройства с мультитач-экранами поддерживают одновременно до 10 точек касания. Это создаёт разработчикам дополнительные возможности при решении проблем с навигацией, а пользователю — проблемы в её понимании. Чтобы помочь пользователю с управлением, в нужный момент появляются подсказки.

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

Всплывающая подсказка Instagram

S50911-013240

Выпадающая подсказка — относиться только к одному элементу страницы.
Выпадающая подсказка Instagram

S50925-122144

Оверлей — наложение подсказки на экран.

Оверлей в Google Диск

S50907-022416

Пустые экраны

Пустые экраны (или экраны нулевого состояния) — это экраны, на которых пользователю нужно добавить содержимое. Они могут быть пустыми только при первом запуске, когда данные для отображения ещё нужно создать или от действия к действию (например, выбрать товары и наполнить корзину).

Страницы, на которые чаще всего попадают пустые экраны:

  • корзина,
  • избранное,
  • папка мессенжера в которой нет писем,
  • плейлист, в котором ещё нет песен,
  • блокнот без записей и пр.

Проблема пустого экрана

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

Первый сценарий:

я загрузил приложение — я вижу пустой экран — я не знаю что делать дальше — возникают ошибки (состояние неудачи) — я удаляю приложение.

Второй сценарий:

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

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

Пустой экран нужно дизайнить

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

В идеале на пустом экране нужно:

  • пояснить пользователю, что это за экран и почему он пустой;
  • как наполнить экран содержимым;
  • что делать с этим содержимым дальше.

Как разработчики популярных приложений решили проблему пустого экрана

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

Photo Studio

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

preview_map

Google Диск

Пустые экраны приложения Google Диск 

New Project (1)

Clip Studio

При первом запуске редактора Clip Studio пользовательские файлы отсутствуют. Чтобы создать контент, нужно коснуться выделенного поля с плюсиком.

6_clip_clear copy

 

Instagram

Пустой экран Instagram

S50911-013417

Viber

Разработчики решили нарисовать на пустом экране вызовов грустного кота. Получилось интересно и понятно.

Пустой экран Viber

S50905-231556

Pinterest

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

Пустые экраны в Pinterest

New Project (2)

 

Inbox

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

Пустой экран Inbox

S50922-090958

Вспомогательные экраны

Существуют экраны, которые имеют минимум элементов, но при этом не считаются пустыми.

Экран загрузки

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

Фоторедактор Snapseed

S50923-174117

 

Экран обработки фото в Instagram

S50923-174623

Экраны ошибок

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

Однако главная цель этих экранов — помочь пользователю разобраться и снизить степень его раздражения.

Экран ошибки в приложении Amplify

S50922-201830

Что между ними общего?

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

Нестандартное вовлечение

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

AnyDo

Хороший пример вовлечения пользователя в популярном приложении AnyDo. В нем пользователь создает свой контент — списки личных дел для выполнения. Чтобы легче было понять, с чего начать, приложение предлагает дефолтный список задач, который можно отредактировать и сохранить как свой. Умелый маркетинг разработчиков формирует и поддерживает у пользователя ощущение успешно выполненной задачи.
Рассмотрим подробнее, как это работает.

1. Экран приветствия показывает стандартный список и предлагает пользователю начать работу.

Screenshot_2015-07-15-13-58-07

 

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

any

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

Clip2net_150925123929
3. Экран объясняет типичные касания для этого приложения, в том числе нестандартные:

 

Screenshot_2015-07-15-14-01-27

Ощущение успеха и поддержки

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

AnyDo

Разработчиков AnyDo точно все видят так:

S50922-202127
За успешное выполнение списка пользователя тут же ждёт сюрприз. А подарки любят все.

 Вовлечение пользователя в Pinterest

Разработчики Pinterest решили взять своего пользователя мотивацией. Судя по всему, у них получилось.

Стартовый визард Pinterest

New Project (4)

И вместо итога

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