Главная задача, с которой сталкивается пользователь сразу после установки приложения, — разобраться, что и как делается. Поэтому в задачи дизайнера входит не только архитектура и красивый интерфейс, но и пояснение людям, как работать с приложением.
С целью обучения пользователя используются специальные элементы дизайна.
Демо-тур (start wizard) — это послайдовый гид по приложению, который позволяет провести обучение пользователя по основному функционалу приложения или его части.
Демо-тур применяется, если в приложении есть функции, по которым недостаточно подобного пользовательского опыта. Также он частично решает проблему неинтуитивного интерфейса.
Демо-тур приложения MyFun (PepsiCo)
Демо-тур Google Диск
Демо-тур Dropbox
Современные устройства с мультитач-экранами поддерживают одновременно до 10 точек касания. Это создаёт разработчикам дополнительные возможности при решении проблем с навигацией, а пользователю — проблемы в её понимании. Чтобы помочь пользователю с управлением, в нужный момент появляются подсказки.
Всплывающая подсказка — относится ко всей странице и может появляться на весь экран, снизу, сбоку экрана.
Всплывающая подсказка Instagram
Выпадающая подсказка — относиться только к одному элементу страницы.
Выпадающая подсказка Instagram
Оверлей — наложение подсказки на экран.
Оверлей в Google Диск
Пустые экраны (или экраны нулевого состояния) — это экраны, на которых пользователю нужно добавить содержимое. Они могут быть пустыми только при первом запуске, когда данные для отображения ещё нужно создать или от действия к действию (например, выбрать товары и наполнить корзину).
Страницы, на которые чаще всего попадают пустые экраны:
Большинство пользователей сразу не вспомнят, когда они видели пустые экраны в приложениях. Взаимодействие с пустым экраном обычно происходит в начале использования. В этом случае есть два пользовательских сценария развития событий для приложения с пустым экраном.
Первый сценарий:
я загрузил приложение — я вижу пустой экран — я не знаю что делать дальше — возникают ошибки (состояние неудачи) — я удаляю приложение.
Второй сценарий:
я загрузил приложение — я вижу пустой экран — я знаю что делать дальше — состояние успеха — я работаю с приложением.
Пустой экран без интуитивной подсказки — типичная и дорогостоящая ошибка проектирования. Этот экран считается второстепенным элементом UI, поэтому на него не всегда обращают внимание. Но с архитектуры пустой экран никуда не денешь: девелоперы обнаружат и добавят сами стандартное изображение, не попадающее в ваш дизайн и вызывающее сценарий № 1.
Пустые экраны — простой способ создать харизму приложения и хороший пользовательский опыт.
В идеале на пустом экране нужно:
Пустой экран легко вписать в общий UI приложения. Он вполне может быть изящными дополнять ключевые экраны, а в некоторых случаях — вовлекающим элементом. Это самое место для того, чтобы высказать свое расположение пользователю и добавить позитива в его жизнь.
Это приложение — мощный фоторедактор для мобильных устройств.
В нём пустой экран поясняет следующее действие и его результат: если нажать на кнопку, то начнется процесс обработки пользовательских фото.
Пустые экраны приложения Google Диск
При первом запуске редактора Clip Studio пользовательские файлы отсутствуют. Чтобы создать контент, нужно коснуться выделенного поля с плюсиком.
Пустой экран Instagram
Разработчики решили нарисовать на пустом экране вызовов грустного кота. Получилось интересно и понятно.
Пустой экран Viber
Разработчики этого приложения поместили в пустых экранах информацию, которая понадобится пользователю для работы с приложением.
Пустые экраны в Pinterest
Почтовый клиент выполняет также функции органайзера. Поэтому, когда задач нет, на пустом экране просто солнечно.
Пустой экран Inbox
Существуют экраны, которые имеют минимум элементов, но при этом не считаются пустыми.
Отличительный элемент — индикатор загрузки приложения или любого другого процесса в нём.
Фоторедактор Snapseed
Экран обработки фото в Instagram
Это экраны, уведомляющие пользователя про возникновение ошибки в его действиях или в самом приложении. С них чаще всего нет выхода в приложение до тех пора, пока ошибка не будет устранена. Например, когда прерывается соединение с интернетом и продолжить работу приложения невозможно.
Однако главная цель этих экранов — помочь пользователю разобраться и снизить степень его раздражения.
Экран ошибки в приложении Amplify
Они все не должны быть похожими по оформлению на пустые экраны, чтобы пользователь смог решить основную задачу.
Приложения с нестандартной навигацией и функциональностью вызывают непонимание у пользователей. Поэтому людям нужно помочь дизайном и взаимодействием. Ощущение заботы и успеха — эти чувства должны возникать при пользовании приложением.
Хороший пример вовлечения пользователя в популярном приложении AnyDo. В нем пользователь создает свой контент — списки личных дел для выполнения. Чтобы легче было понять, с чего начать, приложение предлагает дефолтный список задач, который можно отредактировать и сохранить как свой. Умелый маркетинг разработчиков формирует и поддерживает у пользователя ощущение успешно выполненной задачи.
Рассмотрим подробнее, как это работает.
1. Экран приветствия показывает стандартный список и предлагает пользователю начать работу.
После регистрации пользователь тут же получает письмо от исполнительного директора AnyDo и шоу-рил с демонстрацией работы приложения. Согласитесь, такое внимание очень приятно.
2. Пустой экран поясняет, что нужно сделать, чтобы добавить задачу в приложение.
3. Экран объясняет типичные касания для этого приложения, в том числе нестандартные:
За каждым проектом мобильного приложения стоит компания-создатель. Но пользователь продукта желает видеть не мегакорпорацию, а команду людей, проявляющих к нему интерес и заботу. Поэтому взаимодействие с приложением должно напоминать общение с человеком, который вас понимает и готов помочь в случае трудностей. Тогда приложение будут воспринимать как “человеческое лицо” компании.
Разработчиков AnyDo точно все видят так:
За успешное выполнение списка пользователя тут же ждёт сюрприз. А подарки любят все.
Разработчики Pinterest решили взять своего пользователя мотивацией. Судя по всему, у них получилось.
Стартовый визард Pinterest
Каждая проработанная деталь взаимодействия — это проявление искреннего уважения к вашим пользователям, выходящее за рамки одного приложения. Покажите, что ваш продукт сделан с любовью к человеку и мыслями о человеке.