Проектируем экраны онбординга в мобильном приложении: 100 гайдлайнов

Экраны онбординга в приложении (или app tour) позволяют донести до клиента ключевую ценность вашего продукта на самом раннем этапе его использования.

Как спроектировать экраны онбординга так, чтобы первое впечатление пользователя от приложения стало позитивным? Есть много нюансов, и, как всегда, разница между вершиной и дном – в деталях. Сегодня разберем 100 гайдлайнов с примерами по результатам анализа 300+ приложений.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.

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

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

Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.

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

Ценностное предложение

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

Выход за рамки приложения

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

Только ключевые элементы

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

Экранов не слишком мало

Другая крайность – слишком мало экранов. В этом случае можно создать у клиента ощущение, что преимущества сервиса ограничиваются лишь одним-двумя.

Основное – в начале

Разместите ключевые, максимально полезные для пользователя экраны в самом начале. Так он с большей вероятностью их заметит.

Призыв – в конце

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

Занимает всю площадь экрана

Экраны онбординга должны занимать всю площадь экрана приложения. От формата pop-up'а на мобильных устройствах лучше воздержаться.

Первичная настройка

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

Highlight акций

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

Не начинаем с ограничений

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

Кнопка действия

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

Смахивание

Прокрутка с помощью жеста смахивания (свайпа) – широко распространенный паттерн. Будет хорошо, если вы также его предусмотрите при прокрутке экранов.

Тапы по сторонам экрана

Нестандартная, но удобная механика – это прокрутка экранов онбординга вперед и назад при тапе по правой и левой сторонам экрана, соответственно.

Page control

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

Без scroll bar'а

Если в экранах онбординга используется page control, нет необходимости дублировать уровень прокрутки с помощью дополнительного ползунка.

Реакция на свайп

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

Направление свайпа

Направления свайпа и прокрутки должны совпадать. Если клиент хочет вернуться и смахивает вправо, экраны не должны прокручиваться вперед.

Длина свайпа минимальна

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

Прокрутка назад возможна

Реализуйте возможность прокрутки назад, если пользователь захотел повторно ознакомиться с экраном. Сделать это можно с помощью свайпа.

Прокрутка анимирована

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

Нелинейная анимация

Скорость анимации может быть нелинейной. Например, ближе к окончанию анимации ее скорость может замедляться, делая ее более плавной.

Без прокрутки за рамки экранов

Жестко зафиксируйте область прокрутки экранов онбординга. У пользователя не должно быть возможности смахивать левее первого и правее последнего экрана.

Авто-прокрутка

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

Скорость авто-прокрутки

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

Индикация авто-прокрутки

Снабдите функцию авто-прокрутки progress bar’ом, который визуально отображал бы, сколько времени осталось до смены экрана.

Блокирование авто-прокрутки

При использовании авто-прокрутки, как и в stories, блокируйте ее при зажатии пальцем экрана.

Вертикальная прокрутка?

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

Текущий экран при деактивации

Если пользователь сворачивает приложение и затем возвращается в него, уровень прокрутки не должен меняться.

Первый экран при закрытии

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

Тактильная обратная связь

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

Хорошо читается

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

Доносит суть преимущества

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

Содержит призыв к действию

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

Highlight ключевого текста

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

Краткий

Не размещайте в заголовке слишком много текста. Он должен доносить основной посыл максимально кратко. Для пояснения можно использовать подзаголовок.

Локализован

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

Корректный перенос строки

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

Без отрыва от визуализации

Изображение и текст должны восприниматься, как единое целое. Не стоит создавать между ними «пропасть» из пустого пространства.

Фиксирован

Спроектируйте верстку таким образом, чтобы заголовок не «скакал» от слайда к слайду при прокрутке и пользователь мог привыкнуть к его расположению.

Без ошибок

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

Дополняет заголовок

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

Визуально вторичен

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

Легко читается

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

Корректно форматирован

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

Локализован

Как и в случае с заголовком, убедитесь, что текст подзаголовков переведен на все языки, поддерживаемые приложением, и отображается корректно.

Рядом с заголовком

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

Текст вписывается в экран

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

Без ошибок

Как и в заголовке, в тексте подзаголовка не должно быть каких-либо ошибок: ни орфографических, ни пунктуационных.

В едином стиле

Убедитесь, что текст написан в едином стиле, включая расстановку знаков препинания.

Корректный перенос строки

Как и в случае с заголовком, спроектируйте верстку таким образом, чтобы текст переносился корректно и не обрывался наполовине.

Используется

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

Релевантна

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

Анимация

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

Видео-ролики

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

Highlight интерфейса

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

В фирменном стиле

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

Без резкой смены визуала

Постарайтесь спроектировать экраны таким образом, чтобы цветовая гамма не менялась от экрана к экрану слишком сильно и не «резала» пользователю глаза.

Панорамный эффект

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

Не обрезается

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

В хорошем качестве

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

Актуальна

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

Локализация

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

Предусмотрена

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

Содержит аффорданс

Иными словами, кнопка должна выглядеть, как кнопка. Пользователю должно быть понятно, где ее кликабельная область.

Контрастна

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

Не выглядит неактивной

Кнопка не должна выглядеть неактивной. Иначе это может ввести пользователя в заблуждение и снизить шансы на выполнение целевого действия.

Достаточно широкая

Сделайте кнопку достаточно большой по ширине – вплоть до 80-90% экрана, чтобы пользователю было легче на нее нажать.

Высота достаточна

Как и в случае с шириной, высота кнопки должна быть достаточной, чтобы на нее легко было нажать пальцем. Рекомендуемая высота – как минимум 44 пикселя.

Текст кнопки контрастный

Сделайте текст кнопки контрастным относительно ее фона, чтобы пользователю было легче его прочитать.

Динамический текст

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

Текст легко читается

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

Положение фиксировано

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

Не перекрывает контент

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

Реагирует на нажатие

Чтобы сделать интерфейс более отзывчивым, реализуйте визуальную реакцию кнопки как на нажатие (touchDown), так и на отжатие (touchUp).

Функция кнопки понятна

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

Добавлен

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

Привычно расположен

Разместите page control там, в наиболее привычном для пользователей месте, где его размещают чаще всего – в нижней центральной части экранов.

Видны все точки

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

Точка текущего экрана выделена

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

Прочие точки заметны

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

Точки впереди vs. пройденные точки

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

Своевременно обновляется

Page control должен обновляться сразу после переключения между экранами. Каких-либо задержек возникать не должно.

Своевременны

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

Не конкурируют между собой

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

Сопровождаются пояснениями

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

Визуализация пояснений

Сделайте пояснения визуально привлекательными. Не ограничивайтесь форматом системного всплывающего окна.

Текст пояснения легко читается

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

Примеры использования

При запросе доступа можно подсветить примеры того, как он будет использоваться компанией. Например, можно показать примеры push-уведомлений.

Без жаргонизмов

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

Уровень точности геолокации

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

Альтернативы запросу доступа

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

Отработка события отказа

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

Без возможности отказаться?

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

Возможность отложить

Если клиент откажет в доступе при системном запросе, восстановить его будет сложнее. Поэтому предусмотрите возможность пропустить ответ в экране с пояснением.

Текст запроса локализован

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

Добавлена в интерфейс

Если пользователь по какой-то причине не хочет пролистывать экраны, не заставляйте его это делать: добавьте в интерфейс кнопку пропуска онбординга.

Привычно расположена

Разместите кнопку пропуска онбординга там, где ее ожидают увидеть большинство пользователей: в правом верхнем углу.

Визуализация привычна

Реализуйте кнопку пропуска онбординга в наиболее привычном для пользователей формате – в виде крестика.

Заметна

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

Визуально вторична

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

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

Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.

Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.