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
Легко читается
При этом не стоит делать подзаголовок слишком блеклым и мелким, чтобы он легко читался. Также убедитесь, что он контрастен относительно фона всех экранов.
Корректно форматирован
Если уж вы решили как-то специально форматировать подзаголовок, убедитесь, что он будет выглядеть корректно, включая цвета, размер шрифта, отступы и т.д.
Снежная Королева
Локализован
Как и в случае с заголовком, убедитесь, что текст подзаголовков переведен на все языки, поддерживаемые приложением, и отображается корректно.
Рядом с заголовком
Между заголовком и подзаголовком должен быть отступ, но при этом они должны визуально восприниматься, как единое целое. Поэтому не делайте отступ слишком большим.
Сбер Фуд
Текст вписывается в экран
Спроектируйте размер подзаголовка таким образом, чтобы он полностью вписывался в экран и обрезался.
Дикси
Без ошибок
Как и в заголовке, в тексте подзаголовка не должно быть каких-либо ошибок: ни орфографических, ни пунктуационных.
Улыбка Радуги
В едином стиле
Убедитесь, что текст написан в едином стиле, включая расстановку знаков препинания.
GrowFood
Корректный перенос строки
Как и в случае с заголовком, спроектируйте верстку таким образом, чтобы текст переносился корректно и не обрывался наполовине.
Сбер Фуд
5. Визуализация
Используется
Базовый момент: снабжайте ключевой текстовый посыл на каждом экране визуализацией, чтобы облегчить восприятие информации и заинтересовать пользователя.
Frank by Баста
Релевантна
Визуализация не должна быть слишком абстрактной. Она должна быть понятной и дополнять по смыслу то, что компания хочет донести с помощью текста.
GrowFood
Анимация
Помимо статичных изображений можно также использовать ненавязчивую анимацию, привлекая больше внимания пользователя.
Burger King
Видео-ролики
Некоторые компании идут дальше и используют в качестве визуализации в рамках онбординга фоновые видео.
Самокат
Highlight интерфейса
Если контент экрана связан с использованием конкретного интерфейса в приложении, этот интерфейс можно вывести в качестве визуализации.
Kolesa.kz
В фирменном стиле
Сделайте так, чтобы визуалы в онбординге согласовывались с фирменным стилем компании и тем, что клиент может увидеть в других точках контакта.
СберМегаМаркет
Без резкой смены визуала
Постарайтесь спроектировать экраны таким образом, чтобы цветовая гамма не менялась от экрана к экрану слишком сильно и не «резала» пользователю глаза.
Подели
Панорамный эффект
Если в рамках онбординга у вас несколько экранов, визуализацию можно выполнить так, чтобы она продолжалась из экрана в экран, подталкивая пользователя к прокрутке.
Bookmate
Не обрезается
Спроектируйте верстку так, чтобы визуализация полностью вписывалась в экран на всех моделях устройств и не обрезалась.
iHerb
В хорошем качестве
Убедитесь, что изображения для визуализации каждого из экранов загружены в хорошем качестве и не пикселят.
Subway
Актуальна
Своевременно обновляйте визуализацию. Это касается как интерфейса приложения, так и моделей смартфонов, если они включены в изображения.
Star Hit Cafe
Локализация
Не забывайте предусмотреть локализацию визуала: языки, региональные и культурные особенности. В частности, это касается интерфейса, если вы его показываете:
Цех85
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
6. Кнопка действия
Предусмотрена
Реализуйте кнопку действия на всех экранах. Там, где прочих целевых действий нет, при нажатии на кнопку должна происходить прокрутка к следующему экрану.
Joom
Содержит аффорданс
Иными словами, кнопка должна выглядеть, как кнопка. Пользователю должно быть понятно, где ее кликабельная область.
Rendez Vous
Контрастна
Кнопка действия должна быть контрастна по отношению к фону каждого из экранов и хорошо заметна.
Четыре Лапы
Не выглядит неактивной
Кнопка не должна выглядеть неактивной. Иначе это может ввести пользователя в заблуждение и снизить шансы на выполнение целевого действия.
Faberlic
Достаточно широкая
Сделайте кнопку достаточно большой по ширине – вплоть до 80-90% экрана, чтобы пользователю было легче на нее нажать.
Долями
Высота достаточна
Как и в случае с шириной, высота кнопки должна быть достаточной, чтобы на нее легко было нажать пальцем. Рекомендуемая высота – как минимум 44 пикселя.
Снежная Королева
Текст кнопки контрастный
Сделайте текст кнопки контрастным относительно ее фона, чтобы пользователю было легче его прочитать.
Вкусно – и точка
Динамический текст
Текст кнопки может меняться от экрана к экрану и соответствовать контексту той информации, которая презентуется в каждый конкретный момент.
Burger King
Текст легко читается
Выполните текст кнопки шрифтом достаточно большого размера, контрастным к ее фону, чтобы он легко читался даже пользователями со слабым зрением.
Магнит
Положение фиксировано
Спроектируйте верстку таким образом, чтобы положение кнопки действия не менялось от экрана к экрану.
СберМегаМаркет
Не перекрывает контент
При этом убедитесь, что кнопка действия не будет перекрывать собой контент ни на одном из экранов с учетом всех локализаций.
igooods
Реагирует на нажатие
Чтобы сделать интерфейс более отзывчивым, реализуйте визуальную реакцию кнопки как на нажатие (touchDown), так и на отжатие (touchUp).
Perform
Функция кнопки понятна
Функция кнопки не должна вызывать вопросов. Если клиент думает, что она отвечает за прокрутку, а она закрывает онбординг, это может стать негативным «сюрпризом».
Улыбка Радуги
7. Page control
Добавлен
Page control в экранах онбординга позволит лучше управлять ожиданиями пользователя по числу слайдов и облегчит навигацию.
Kazan Express
Привычно расположен
Разместите page control там, в наиболее привычном для пользователей месте, где его размещают чаще всего – в нижней центральной части экранов.
Zoom
Видны все точки
Ограничение числа видимых точек приведет к некорректному управлению ожиданиями. Клиент должен понимать, сколько экранов ему предстоит пролистать.
СпортМастер
Точка текущего экрана выделена
Сделайте так, чтобы точка, отвечающая за положение текущего экрана в общей презентации, выделялась и была хорошо заметна.
Долями
Прочие точки заметны
Хоть все точки, кроме текущего экрана и неактивны, не делайте их слишком блеклыми. Они должны быть заметны на фоне экранов.
Подружка
Точки впереди vs. пройденные точки
При прокрутке экранов онбординга точки, которые пользователь уже прошел, можно выделять другим цветом относительно тех, которые еще впереди.
GrowFood
Своевременно обновляется
Page control должен обновляться сразу после переключения между экранами. Каких-либо задержек возникать не должно.
Auchan Go
8. Запросы доступа
Своевременны
Гигиенический момент: запрашивайте доступы к уведомлениям, геолокации тогда, когда для этого есть контекст, потребность, а не сразу же при установке приложения.
Магнит Доставка
Не конкурируют между собой
Не отправляйте пользователю сразу несколько запросов. Это может ухудшить восприятие приложения и снизить шансы на то, что он предоставит доступ.
Tanuki Family
Сопровождаются пояснениями
Вместо того, чтобы просто запрашивать геолокацию и доступ к оповещениям, в явной форме поясните, зачем вам это требуется и какую ценность клиент от этого получит.
Перекрёсток Впрок
Визуализация пояснений
Сделайте пояснения визуально привлекательными. Не ограничивайтесь форматом системного всплывающего окна.
ASOS
Текст пояснения легко читается
Сделайте текст пояснения достаточно контрастным и большим, чтобы его легко было прочитать, даже если у клиента слабое зрение.
Kari
Примеры использования
При запросе доступа можно подсветить примеры того, как он будет использоваться компанией. Например, можно показать примеры push-уведомлений.
Ozon
Без жаргонизмов
Учтите, что не все пользователи могут быть хорошо знакомы с терминами, которые вы используете в работе. Поэтому лучше от них воздержаться.
Лабиринт
Уровень точности геолокации
Не запрашивайте у клиента его точную геолокацию, если можно решить все задачи, используя приблизительную геолокацию. Это повысит шансы на согласие клиента.
Снежная Королева
Альтернативы запросу доступа
Если пользователь по каким-то причинам решил не предоставлять доступ к геолокации, предоставьте ему альтернативные способы указания его местоположения.
Юла
Отработка события отказа
Если клиент запретил доступ к чему-либо, расскажите ему, как он может предоставить его в будущем. Сообщение можно снабдить прямой ссылкой перехода в настройки.
Wildberries
Без возможности отказаться?
Некоторые просят клиента поделиться обезличенными данными, но при этом не дают возможности отказаться. Как вам такое? Плюсы? Минусы? Напишите в комментариях.
lamoda
Возможность отложить
Если клиент откажет в доступе при системном запросе, восстановить его будет сложнее. Поэтому предусмотрите возможность пропустить ответ в экране с пояснением.
Sunlight
Текст запроса локализован
Если вы перевели приложение на другие языки, не забудьте и о тексте системного запроса. Ошибка встречается часто, т.к. переводить запросы нужно отдельно от основных текстов.
Wildberries
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
9. Кнопка пропуска онбординга
Добавлена в интерфейс
Если пользователь по какой-то причине не хочет пролистывать экраны, не заставляйте его это делать: добавьте в интерфейс кнопку пропуска онбординга.
Жизньмарт
Привычно расположена
Разместите кнопку пропуска онбординга там, где ее ожидают увидеть большинство пользователей: в правом верхнем углу.
EMenu
Визуализация привычна
Реализуйте кнопку пропуска онбординга в наиболее привычном для пользователей формате – в виде крестика.
Л'Этуаль
Заметна
Кнопка пропуска онбординга должна быть заметна, хорошо различима и не должна сливаться с фоном каждого из экранов.
Сбер Фуд
Визуально вторична
При этом, так как это не целевое действие, кнопка пропуска не должна визуально кричать и притягивать к себе слишком много внимания.
Perform
To be continued...
Итак, в этой статье мы разобрали экраны онбординга в мобильных приложениях. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce