I am ready for a long road flight for work with a week- or months-long projects.
Проектируем экраны онбординга
Лучшие практики UX/UI мобильных приложений
100
гайдлайнов
Экраны онбординга в приложении (или app tour) позволяют донести до клиента ключевую ценность вашего продукта на самом раннем этапе его использования.
Как спроектировать их так, чтобы первое впечатление клиента стало позитивным? Есть много нюансов, и, как всегда, разница между вершиной и дном – в деталях. Сегодня разберем 100 гайдлайнов с примерами по результатам анализа 300+ приложений.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Как спроектировать их так, чтобы первое впечатление клиента стало позитивным? Есть много нюансов, и, как всегда, разница между вершиной и дном – в деталях. Сегодня разберем 100 гайдлайнов с примерами по результатам анализа 300+ приложений.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Почему это важно?
Есть как минимум 3 момента, в которых экраны онбординга помогают разработчику приложения и улучшают клиентский путь:
Мы можем кратко подчеркнуть ключевые преимущества продукта, начав путь клиента в приложении с позитивных впечатлений.
Далеко не все клиенты пролистывают экраны предпросмотра перед скачиванием приложения в сторах, и это еще один шанс рассказать о себе.
Ценная информация (например, промокод на первый заказ) повысит шансы на активацию пользователя.
При этом, если экранов небольшое количество и есть возможность их пропустить, они не становятся барьером на пути к использованию приложения.
Структура статьи
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
P.S. Сегодня мы разберем экраны в рамках app tour. Но это лишь часть процесса онбординга, который может включать в себя множество интересных механик, помогающих активировать пользователя. О них – в одной из следующих статей.
1. Контент экранов онбординга
Ценностное предложение
На экранах онбординга фокусируйтесь не столько на функциях приложения, сколько на ценности, которую вы несете клиенту.
igooods
Выход за рамки приложения
Не ограничивайтесь в экранах лишь ценностью самого приложения. Подумайте, какие преимущества есть у вас, как компании или сервиса, и добавьте их в онбординг.
ОмолокО
Только ключевые элементы
Разместите в онбординге только то, что подсвечивает ключевую ценность приложения. Экранов не должно быть слишком много – клиент не должен устать в самом начале.
Farfor
Экранов не слишком мало
Другая крайность – слишком мало экранов. В этом случае можно создать у клиента ощущение, что преимущества сервиса ограничиваются лишь одним-двумя.
Магнит
Основное – в начале
Разместите ключевые, максимально полезные для пользователя экраны в самом начале. Так он с большей вероятностью их заметит.
СберМаркет
Призыв – в конце
На последнем экране разместите призыв к действию – началу использования вашего приложения. Это сделает переход от онбординга более бесшовным.
GrowFood
Занимает всю площадь экрана
Экраны онбординга должны занимать всю площадь экрана приложения. От формата pop-up'а на мобильных устройствах лучше воздержаться.
Hoff
Первичная настройка
В рамках экранов онбординга с пользователя можно собрать первичную информацию по его потребностям и персонализировать опыт последующего взаимодействия.
Авто.ру
Highlight акций
Размещая информацию об акциях и промо-коды на первом экране, вы повышаете шансы на активацию пользователя. Главное, чтобы промокоды были актуальны.
Перекрёсток
Не начинаем с ограничений
Если вы хотите подсветить акцию, но у нее есть значительные ограничения, может быть, не стоит выносить это на первый экран, с которым сталкивается пользователь?
Риф Гош
2. Прокрутка экранов
Кнопка действия
Предусмотрите в рамках экранов онбординга кнопку перехода к следующему слайду. Это сведет риски непонимания того, как их прокручивать, к минимуму.
Долями
Смахивание
Прокрутка с помощью жеста смахивания (свайпа) – широко распространенный паттерн. Будет хорошо, если вы также его предусмотрите при прокрутке экранов.
Wildberries
Тапы по сторонам экрана
Нестандартная, но удобная механика – это прокрутка экранов онбординга вперед и назад при тапе по правой и левой сторонам экрана, соответственно.
Все Инструменты
Page control
Прокрутка экранов с помощью page control также встречается не часто, но для части ваших пользователей может стать удобной альтернативой нажатиям и смахиванию.
Perform
Без scroll bar'а
Если в экранах онбординга используется page control, нет необходимости дублировать уровень прокрутки с помощью дополнительного ползунка.
Rendez Vous
Реакция на свайп
Экран должен начинать прокручиваться в тот момент, когда пользователь только начал смахивать его пальцем. Это даст визуальную обратную связь в моменте.
Perform
Направление свайпа
Направления свайпа и прокрутки должны совпадать. Если клиент хочет вернуться и смахивает вправо, экраны не должны прокручиваться вперед.
Вкусно – и точка
Длина свайпа минимальна
При прокрутке свайпом сделайте длину смахивания, необходимую для прокрутки, минимальной, а остальную часть прокрутки реализуйте с помощью анимации.
ОмолокО
Прокрутка назад возможна
Реализуйте возможность прокрутки назад, если пользователь захотел повторно ознакомиться с экраном. Сделать это можно с помощью свайпа.
Flor2U
Прокрутка анимирована
Вместо моментальной смены экранов реализуйте при прокрутке плановую анимацию, более приятную глазу.
Bookmate
Нелинейная анимация
Скорость анимации может быть нелинейной. Например, ближе к окончанию анимации ее скорость может замедляться, делая ее более плавной.
Без прокрутки за рамки экранов
Жестко зафиксируйте область прокрутки экранов онбординга. У пользователя не должно быть возможности смахивать левее первого и правее последнего экрана.
Подружка
Авто-прокрутка
Прокрутку экранов онбординга можно реализовать в формате stories. В таком случае пользователю не придется совершать каких-либо действий.
Скорость авто-прокрутки
Если используется авто-прокрутка, спроектируйте скорость смены слайдов так, чтобы пользователь успевал прочитать контент, но и не уставал от ожидания.
Все Инструменты
Индикация авто-прокрутки
Снабдите функцию авто-прокрутки progress bar’ом, который визуально отображал бы, сколько времени осталось до смены экрана.
Перекрёсток
Блокирование авто-прокрутки
При использовании авто-прокрутки, как и в stories, блокируйте ее при зажатии пальцем экрана.
Перекрёсток
Вертикальная прокрутка?
Изредка можно встретить примеры с вертикальной, а не горизонтальной прокруткой экранов. Как вам такое исполнение? Плюсы, минусы? Напишите в комментариях.
Авто.ру
Текущий экран при деактивации
Если пользователь сворачивает приложение и затем возвращается в него, уровень прокрутки не должен меняться.
Рив Гош
Первый экран при закрытии
Если пользователь выгрузил приложение из памяти, не закончив онбординг, и спустя какое-то время зашел в него заново, слайд-шоу должно начинаться сначала.
Долями
Тактильная обратная связь
При смене экрана визуальный эффект можно дополнить ненавязчивым виброоткликом, дающим тактильную обратную связь.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. Заголовок экрана
Хорошо читается
Сделайте заголовок экрана достаточно большим и контрастным по отношению к фону, чтобы он притягивал к себе максимум внимания и легко считывался.
La Redoute
Доносит суть преимущества
Убедитесь, что из заголовков всех экранов понятно, какие именно преимущества приложения / сервиса подсвечиваются.
Kazan Express
Содержит призыв к действию
Если заголовок фокусируется на выполняемой задаче, его текст можно реализовать в формате призыва к действию.
Жизньмарт
Highlight ключевого текста
Если в заголовке требуется сделать акцент, для этого можно использовать выделение цветом или подложки.
Перекрёсток
Краткий
Не размещайте в заголовке слишком много текста. Он должен доносить основной посыл максимально кратко. Для пояснения можно использовать подзаголовок.
Рив Гош
Локализован
Если ваше приложение поддерживает несколько языков, убедитесь, что текст экранов онбординга также переведен на другие языки и корректно отображается.
Ярмарка Мастеров
Корректный перенос строки
Во всех локализациях текст заголовка должен корректно переноситься на новую строку: не оканчиваться союзами, предлогами и не переноситься, если есть свободное место.
СберМегаМаркет
Без отрыва от визуализации
Изображение и текст должны восприниматься, как единое целое. Не стоит создавать между ними «пропасть» из пустого пространства.
EMenu
Фиксирован
Спроектируйте верстку таким образом, чтобы заголовок не «скакал» от слайда к слайду при прокрутке и пользователь мог привыкнуть к его расположению.
EMenu
Без ошибок
Перед публикацией приложения убедитесь, что заголовки не содержат ошибок ни в одной из локализаций.
Читай-Город
4. Подзаголовок экрана
Дополняет заголовок
Подзаголовок не должен быть оторван по смыслу от заголовка. Он должен дополнять и пояснять посыл, который вложен в заголовок.
Верный
Визуально вторичен
Сделайте подзаголовок визуально вторичным по отношению к заголовку. Этого можно достичь за счет более мелкого и менее жирного шрифта, а также цвета на тон светлее.
Цех85
Легко читается
При этом не стоит делать подзаголовок слишком блеклым и мелким, чтобы он легко читался. Также убедитесь, что он контрастен относительно фона всех экранов.
Корректно форматирован
Если уж вы решили как-то специально форматировать подзаголовок, убедитесь, что он будет выглядеть корректно, включая цвета, размер шрифта, отступы и т.д.
Снежная Королева
Локализован
Как и в случае с заголовком, убедитесь, что текст подзаголовков переведен на все языки, поддерживаемые приложением, и отображается корректно.
Рядом с заголовком
Между заголовком и подзаголовком должен быть отступ, но при этом они должны визуально восприниматься, как единое целое. Поэтому не делайте отступ слишком большим.
Сбер Фуд
Текст вписывается в экран
Спроектируйте размер подзаголовка таким образом, чтобы он полностью вписывался в экран и обрезался.