Material Design на русском. Часть 45 — Коммуникация: Онбординг

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Использование

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

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

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

При проектировании онбординга учитывай экраны, которые были до него, и те, которые будут после него по смыслу.

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

Типы

Существует три модели онбординга: помоги себе сам, быстрый старт, топ фичи

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

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

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

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

Короткие выводы на основе таблицы выше:

Когда в твоем приложении UI можно сильно кастомизировать — можно использовать модель «помоги себе сам»
Если твое приложение требует перед работой дополнительной настройки, то необходимо использовать модель «помоги себе сам»
Модель онбординга «быстрый старт» можно использовать как перед первым взаимодействием, так и спустя погодя какое-то время использования. Зависит от того, если требуется контекстно донастроить что-то во время флоу
Модель онбордина «топ фичи» лучше работает при анонсе новых фичей или когда пользователь заходит в новый раздел, в котором есть уникальные или очень важные функциональности
Не используй модель «помоги себе сам» с моделью, где ты демонстрируешь «топ фичи»
Модель «Быстрый старт» вполне можно показывать до первого взаимодействия приложения, т.е. сразу после стартового экрана
Модель онбординга «топ фичи» подходит тогда, когда пользователь уже попользовался приложением и зашел в какой-то особый или сложный раздел, в котором есть основные функциональности (топ фичи), о которых следует узнать.

Модель «Помоги себе сам»

Данная модель онбординга позволяет пользователю настроить приложение перед первым взаимодействием.

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

Экран авторизации

Пример онбординга «помоги себе сам»

Предоставление выбора

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

Включай в онбординг:

Значимы и заметные опции/фичи и прочее
Показывай какую-то новую или уникальную информацию
Будь краток

Значение и разборчивость

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

Правильно: спрашивай пользователя о том, хочет ли он получать уведомления.

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

Спрашивай то, чего ты не знаешь как проектировщик

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

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

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

Не делай длинных онбордингов

Ограничивай количество настроек или экранов. Каждый экран должен иметь менее 10 опций.

Правильно: 3 шагов вполне достаточной

Неправильно: Тут явно перебор

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

Дизайн

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

Ниже представлены базовые паттерны этой модели:

Сгруппированный список по какому-то признаку

В виде сетки или коллекции элементов

Плоский список

Модель быстрого старта

В модели «Быстрый старт» пользователя надо сразу погрузить в интерфейс без погружения в онбординг (кроме самого начала и первоначальной настройки).

Модель быстрого старта:

Позволяет пользователям быстро приступить к работе
Сразу приоритезирует и показывает ключевое действие
Дает дополнительные пути узнать больше о функциональностях или попросить помощи в поддержке/справке

Лучшие практики

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

Правильно: Дай пользователю пару опций выбора и сразу погрузи в UI

Неправильно: Совсем ничего не показывать плохо

Предлагай обучение

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

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

Неправильно: Не навязывай обучение.

Делай акцент на первом ключевом действии

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

Правильно: Приглашай или подталкивай пользователя к первому ключевому действию.

Неправильно: Не оставляй пользователя без подсказок

Модель «топ фичи»

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

Выбор правильных «топ фич»

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

При определении того, какие фичи следует показать, учитывай:

Проблемы, которые решает приложение
Основные фичи, которые имеет приложение
Функции, которые пользователь будете использовать хотя бы один или два раза в день, то есть частоиспользуемые

Как интегрировать онбординг

Карусель

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

Покажи кнопку «Начать» на каждом экране карусели. Нажатие на эту кнопку должно закрывать онбординг и увести в интерфейс приложение.

Экраны должны листаться с помощью свайпа вперед-назад.

Пример карусели

Видео

Еще один способ продемонстрировать возможности — это видео или полноценная анимация, в конце которой будет кнопка «Начать».

Пример видео с демонстрацией функциональности

Лучшие практики

Консистентный визуал

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

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

Упрощение

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

Правильно: Упрости визуал, если того требует твоя визуальная концепция, но понми о точке фокуса: на пример важно нажать кнопку «Начать»

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

Не используй мокапы приложения

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

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

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

Дизайн

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

Эти варианты макетов демонстрируются для того, чтобы иллюстрация с соотношением сторон 1:1 консистентно умещалась на любых экранах всех платформ. Убедитесь, что цвет фона и текста соответствует минимальным коэффициентам контрастности для обеспечения доступности.

Мобильные устройства и планшеты в портретной ориентации

Центрируй текст и интерактивные элементы под изображением.

Мобильная версия в портретной ориентации.

Планшетная версия в портретной ориентации.

Мобильные устройства и планшеты в альбомной ориентации

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

Мобильная версия в альбомной ориентации.

Планшетная версия в альбомной ориентации.

На десктопе

Размещай контент (иллюстрацию, текст и интерактивные элементы) друг под другом в карточке. Не забудь показать кнопки «Вперед» и «Назад» побокам карточки, а также пагинацию.

Десктопная версия

Характеристики

Мобильные устройства и планшеты в портретной ориентации

Параметры текста и отступов:
Headline: Type 24sp, Leading 32sp
Subhead 1: Type 15sp, Leading 24sp
32sp line height
56dp отступ от текста до кнопки
24dp вертикальный отступ до пагинации

Мобильные устройства и планшеты в альбомной ориентации

На десктопе

Параметры текста и отступов:
Headline: Type 24sp, Leading 32sp
Subhead: Type 16sp, Leading 24sp
Line Height: 32sp
Отступ от текста до кнопки: 56dp (allowing for 1–3 lines of text)
Вертикальный отступ до пагинации: 24d
Горизонтальный отступ до стрелок: 48dp

Как следить за обновлениями гайдлайна и переводом?

Структуированный документ в Notion
Официальные обновления Google на странице what’s new