Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

Разбор 6 UX-шаблонов и 2 антипаттерна для умного онбординга

Разбор 6 UX-шаблонов и 2 антипаттерна для умного онбординга

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

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

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

Главные принципы онбординга
Шаблон №1: бесплатный образец (Free sample)
Шаблон №2: интерактивное руководство (Playthrough)
Шаблон №3: «Мастер установки» (Setup wizard)
Шаблон №4: встроенные подсказки
Шаблон №5: гид по продукту (Guided tour)
Шаблон №6: инструктирующие заметки (Coachmarks)
Анти-паттерн №1: вводный тур (Intro tour)
Анти-паттерн №2: стена регистрации (Signup wall)

Главные принципы онбординга

Взаимодействуйте, а не просто рассказывайте:

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

Предоставьте бесплатные шаблоны:

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

Всегда показывайте, что будет дальше:

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

Не распыляйте внимание:

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

А теперь перейдем к UX-шаблонам онбординга.

3 главных подхода к онбордингу

Шаблон №1: бесплатный образец (Free sample)

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

бесплатный образец (Free sample)

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

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

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

Достоинства паттерна:

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

Недостатки паттерна:

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

Рекомендации по использованию шаблона:

  1. На бесплатном экономить нельзя, поэтому в пробной версии контента должно быть достаточно и его качество не должно вызывать вопросов. Не ограничивайте пользователей настолько, чтобы они не могли ничего сделать без запроса на регистрацию.
  2. Убедитесь, что ваша бизнес-модель в принципе способна позволить себе условно-бесплатную модель использования продукта.
  3. Точки входа для входа/регистрации должны быть максимально очевидными и заметными.
  4. Дайте клиентам гарантии, что их данные, несмотря на отсутствие учетной записи, будут сохранены. Если же для их сохранения пользователю все же нужно будет обзавестись учетной записью, обозначьте это в самом начале, до того, как он успеет что-либо сделать.
  5. Не теряйте с клиентом связь на протяжении всего пробного периода.
  6. Сохраняйте все, что создал пользователь в течение пробного периода, и автоматически перенесите это в аккаунт при регистрации.

Быстрая vs. взвешенная подписка: что лучше для SaaS-продукта?

Шаблон №2: интерактивное руководство (Playthrough)

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

интерактивное руководство (Playthrough)

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

В руководстве, как правило, перед пользователем ставится вполне конкретная цель («Давайте создадим список!» или «Убей всех зомби!»), которая достигается в контексте обычного взаимодействия с продуктом. Пользователи осваивают продукт в удобном для них темпе, активируя текстовые, звуковые или визуальные подсказки при достижении ими определенных точек взаимодействия. Иногда подсказки появляются до того, как пользователю нужно выполнить действие, но бывает, особенно в играх, что подсказки появляются только после того, как у пользователя возникнут определенные  проблемы, которые нужно учиться как-то решать.

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

Руководство к игре «Plants vs. Zombies 2» задействует комбинацию задач и текстовых подсказок, чтобы научить пользователей основам игры. Опытные игроки легко могут пропустить этот этап

Руководство к игре «Plants vs. Zombies 2» задействует комбинацию задач и текстовых подсказок, чтобы научить пользователей основам игры. Опытные игроки легко могут пропустить этот этап

Достоинства паттерна:

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

Недостатки паттерна:

  • некоторые руководства не располагают возможностью его пропуска;
  • обилие инструкций и требование действовать по указке может быстро утомить.

Рекомендации по использованию паттерна:

  1. Ограничьте руководство основными задачами, релевантными базовым потребностям пользователя, и комфортной продолжительностью.
  2. Перенесите любые достижения в обычный опыт работы с продуктом.
  3. Предоставьте возможность пропустить руководство;
  4. Сделайте руководство немодальным, чтобы оно не прерывало и не мешало взаимодействию пользователя с продуктом.

Анализ онбординга в мобильной игре Two Dots

Шаблон №3: «Мастер установки» (Setup wizard)

«Мастер установки» (Setup wizard)

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

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

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

Процесс настройки весов Fitbit Aria допускает использование подсказок на весах, а также на телефоне или ноутбуке

Процесс настройки весов Fitbit Aria допускает использование подсказок на весах, а также на телефоне или ноутбуке

Достоинства паттерна:

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

Недостатки паттерна:

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

Рекомендации по использованию:

  1. Используйте мастер для настройки сложных продуктов, требующих от пользователя соблюдения определенных обязательных условий. При этом создание учетной записи не должно быть одним из таких условий.
  2. Используйте указатели, чтобы управлять ожиданиями пользователя и ориентировать его в процессе.
  3. Трудоемкие задачи разбивайте на совокупность из простых и понятных действий, но следите за тем, чтобы их было не очень много.
  4. Убедитесь, что пользователь может легко восстановиться (или вернуться на предыдущий шаг) после совершения ошибки.

Что нужно знать об адаптации к продукту и как ее улучшить?

Шаблон №4: встроенные подсказки

встроенные подсказки

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

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

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

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

Достоинства паттерна:

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

Недостатки паттерна:

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

Рекомендации по использованию:

  1. Убедитесь, что содержание подсказки соответствует окружающему ее контенту.
  2. Используйте встроенные подсказки для более полного раскрытия других инструкций.
  3. Не злоупотребляйте подсказками: они должны дополнять, а не замещать основной контент.
  4. Смиритесь с тем фактом, что пользователи могут легко пройти мимо них и даже не заметить (это не всегда плохо, кстати). Этот формат подсказок не следует использовать для вывода на экран каких-либо критически важных инструкций или сообщений.

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

Шаблон №5: гид по продукту (Guided tour)

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

гид по продукту (Guided tour)

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

«Чтобы просмотреть изображение, плавно наклоните телефон. Вот так!»

«Чтобы просмотреть изображение, плавно наклоните телефон. Вот так!»

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

В отличие от интерактивного руководства (playthrough), гид по продукту протекает в контексте использования решения.

Достоинства паттерна:

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

Недостатки паттерна:

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

Рекомендации по использованию паттерна:

  1. Отдайте предпочтение турам, ориентированным на пользователя: так вы позволите им обучаться в удобном для них режиме.
  2. Добавьте возможность ручного закрытия подсказок (не полагайтесь на один лишь таймер).
  3. Предоставьте возможность пропустить весь тур целиком.
  4. Используйте немодальные формы для отображения подсказок, чтобы пользователи могли продолжить взаимодействовать с элементами, о которых идет речь.
  5. Если подсказка просит пользователя выполнить задачу, убедитесь, что сообщение о ее завершении достаточно понятно.
  6. Разрешите пользователям повторно просматривать инструкции тура.

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

Шаблон №6: инструктирующие заметки (Coachmarks)

инструктирующие заметки (Coachmarks)

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

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

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

Этот паттерн не является чем-то новым в области UX-дизайна. Поначалу он был подобен гиду по продуктам; компания Apple начала использовать термин «coachmarks», когда запустила Apple Guide в System 7.5. Со временем такого рода заметки начали использовать в мобильном пространстве повсеместно. Дизайнеры, борясь с необходимостью организовывать обучение пользователя при минимальных затратах, добавляют все больше и больше контента в отдельные наложения.

Приложение Weather Channel использует наложение с метками, чтобы указать назначение различных элементов интерфейса, но опять же, этот контекст теряется, как только пользователь закрывает экран

Приложение Weather Channel использует наложение с метками, чтобы указать назначение различных элементов интерфейса, но опять же, этот контекст теряется, как только пользователь закрывает экран

Достоинства паттерна:

  • простой в реализации метод презентации интерфейса продукта для нового пользователя;
  • пользователь легко может получить к ним доступ повторно.

Недостатки паттерна:

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

Рекомендации по использованию:

  1. Сначала устраните все основные проблемы с пользовательским интерфейсом. Старайтесь вообще не использовать coach-метки.
  2. Отдайте предпочтение ориентированным на пользователя турам по продукту или интерактивным руководствам, позволяющим людям взаимодействовать с теми элементами, в отношении которых они получают инструкции.
  3. Если вы все же решили использовать наложение с метками, помните, что человек может удерживать в своей кратковременной памяти только 3-4 элемента.
  4. Убедитесь, что метки набраны удобочитаемым шрифтом, а использованная графика достаточно проста для понимания;
  5. Сделайте так, чтобы наложение с метками отображалось над обычным пользовательским представлением интерфейса / продукта, вместо того, чтобы размещать его на скриншоте. Это сделает переход от наложения к интерфейсу плавнее;
  6. Вместо того чтобы заставлять каждого нового пользователя автоматически просматривать coach-метки, подумайте о том, чтобы сделать их доступными по запросу.

Какой UI-шаблон лучше всего подойдет вашему туру по продукту?

Анти-паттерн №1: вводный тур (Intro tour)

вводный тур (Intro tour)

Вводный тур содержит заранее подготовленный контент, который объясняет особенности продукта и / или ценностное предложение. Как следует из названия, он запускается до того, как начинается реальная работа с решением, что отличает его от контекстного тура по продукту. Он может быть выполнен в формате статического или анимированного слайд-шоу, а также видеоролика. Вводный тур, как правило, модален (исключение составляют те, которые интегрированы с другим контентом на веб-сайте), и поэтому пользователю требуется просмотреть его до конца либо пропустить, чтобы перейти к решению.

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

Если зарегистрируешься сегодня, мы подарим тебе 40%-скидку на премиальный план Fitstar

Если зарегистрируешься сегодня, мы подарим тебе 40%-скидку на премиальный план Fitstar

Мобильное приложение Fitstar открывается туром в формате анимированного слайд-шоу (карусель). Обратите внимание на возможность пропустить вступление, нажав кнопку «Начать» с любой панели.

Достоинства паттерна:

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

Недостатки паттерна:

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

Рекомендации по использованию:

  1. Не делайте такие введения модальными. Сделайте его частью начальной страницы, чтобы пользователи не воспринимали его в качестве помехи.
  2. Если вам необходимо использовать модальный вводный тур, разрешите пользователю пропустить его с любого экрана.
  3. Ограничьте количество экранов в слайд-шоу или длительность видео. Следуйте правилу трех — оно работает всегда;
  4. Демонстрируйте функциональный контент, который действительно будет полезен пользователю при работе с приложением. Не пытайтесь что-то продать.
  5. Если в вашем туре используется звук для демонстрации какой-либо важной информации, добавьте его текстовый аналог. Некоторые пользователи могут отключать звук или испытывать неудобства при его воспроизведении, так что вам нужно суметь донести важную информацию и в беззвучном режиме.
  6. Сделайте тур доступным для повторного посещения.

6 UX-эмоций, которые возникают у пользователя в ходе изучения продукта

Анти-паттерн №2: стена регистрации (Signup wall)

стена регистрации (Signup wall)

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

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

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

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

Недостатки паттерна:

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

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

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

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

Прокачайте ваш онбординг!

По материалам: kryshiggins.medium.com Изображение: freepik.com

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto