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

6 типов UX/UI-шаблонов онбординга: что и когда использовать?

6 типов UX/UI-шаблонов онбординга: что и когда использовать?

Свое руководство по UX/UI-шаблонам адаптации Серра Альбан (Serra Alban), автор UX-текстов для онбординг-платформы UserGuiding, предваряет предисловием, в котором объясняет, что послужило поводом для создания рассматриваемого ниже путеводителя:

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

Я думала, что приду, мне сделают укол, и я уйду.

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

Не сочтите это за неуважение к медицинским работникам, но в тот момент я могла думать только об одном:

“Все это чертовски плохо организовано”.

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

К счастью, существует способ не становиться частью этой безрадостной тенденции.

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

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

Что такое онбординг?

Что такое UX/UI-шаблон онбординга?

Категории UX/UI-шаблонов онбординга

Ознакомительный обзор
Контекстный онбординг

Типы шаблонов онбординга UX/UI

1. Туры по продуктам
2. Самостоятельная сегментация
3. Чек-листы
4. Интерактивные руководства/пошаговые руководства
5. Горячие точки
6. Всплывающие подсказки

Когда и что использовать?

1. Каков ваш контент?
2. Кто увидит ваш шаблон?
3. Когда он появляется?

Вывод

Что такое онбординг?

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

Что такое UX/UI-шаблон онбординга?

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

Вы можете спросить: «Но зачем нам нужны различные типы шаблонов адаптации к опыту пользователя для разных контекстов?»

Короткий ответ: психология пользователя.

UX — это то, что пользователи ожидают увидеть, услышать и испытать.

Следовательно, шаблон онбординга для UX — это то, что пользователь видит, слышит и испытывает в процессе онбординга.

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

О каких же именно типах шаблонов онбординга для UX мы говорим? Рассмотрим каждый из них подробнее.

Категории UX/UI-шаблонов онбординга 

Условно существует 3 категории  UX-шаблонов для онбординга:

  1. Аннотированные — шаблоны для случаев, когда вы хотите указать на что-то конкретное.
  2. Встроенные — шаблоны на тот случай, когда вы хотите о чем-то объявить или предупредить.
  3. Выделенные — шаблоны для случаев, когда вы хотите заинтересовать пользователей или спросить их о чем-то.

Однако обычно предпочитают разделять UX-шаблоны онбординга на две категории: ознакомительный обзор (тур по продукту) и контекстный онбординг.

Ознакомительный обзор

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

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

Ознакомительный обзор

Зачем использовать ознакомительные обзоры?

Спросите себя: «Какие у меня шансы, что новые пользователи знают, как использовать мой продукт?» 

Честным ответом будет: «Исчезающе малые». 

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

4 причины, почему интерактивный тур нужно запускать целиком

Контекстный онбординг

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

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

Контекстный онбординг

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

Контекстный онбординг обладает как раз тем, чего не хватает ознакомительным обзорам.

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

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

Конечно, в любом случае онбординг — это непросто.

Дальше мы рассмотрим отдельные типы шаблонов онбординга UX.

Контекстный онбординг: что это такое и почему он так важен?

Типы шаблонов онбординга UX/UI

Когда мы скажем вам, что существуют сотни шаблонов онбординга UX/UI, мы нисколько не преувеличим.

Практически все может послужить шаблоном: от определенного типа справочников до «чистого листа».

Однако можно составить общую картину наиболее часто используемых типов шаблонов онбординга для UX/UI. Именно о них пойдет речь далее.

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

1. Туры по продуктам

Давайте подтвердим очевидное: все ненавидят туры по продуктам.

Или то, как они сделаны?

Вот что думает по этому поводу Серра: «Я считаю, что мы все ненавидим плохие обзоры продуктов. И да, если в нем более 5 шагов, это автоматически плохо. Извините, но не я устанавливаю правила».

Например, посмотрите на этот 4-шаговый тур по продукту от PayPal.

Один шаг из тура по продукту от PayPal.

Один шаг из тура по продукту от PayPal.

С помощью всплывающих подсказок (4 + 1) PayPal объясняет наиболее важные особенности продукта/услуги, и самое приятное то, что существует опция «завершить тур».

Возьмите себе на заметку: настолько качественно сделанный тур по продукту увидишь не каждый день

Конечно, помогает и естественная простота использования PayPal.

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

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

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

Зачем использовать туры по продуктам?

Достоинства

Недостатки

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

Идеальный тур по продукту от InVision

2. Самостоятельная сегментация

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

Но вот в чем загвоздка.

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

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

И, конечно же, такой онбординг не будет раздражать пользователей.

Рассмотрим классический пример от Pinterest.

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

И именно поэтому этот поход работает.

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

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

Последний шаг! Расскажите, что вас интересует

Последний шаг! Расскажите, что вас интересует

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

Зачем использовать самостоятельную сегментацию?

Достоинства

Недостатки

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

Гуру онбординга: с чего начинался Pinterest?

3. Чек-листы

Вспомните это великолепное чувство: галочки проставлены во всех пунктах чек-листа.

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

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

Можете ли вы представить себе чек-лист для онбординга, включающий в себя более 10 пунктов, но не имеющий индикатора выполнения и без последующего сообщения о завершении процесса?

Для меня это выглядит похожим на пытку.

Давайте вместо этого поговорим о хороших чек-листах. Посмотрите на этот прекрасный образчик, взятый из онбординга платформы UserGuiding». 

Добро пожаловать на борт! Вот, что вам нужно сделать: 1. Установить расширение Google Chrome. 2. Создать свой первый гайд. 3. Завершить установку. 4. Опубликовать. Начать!

Добро пожаловать на борт! Вот, что вам нужно сделать: 1. Установить расширение Google Chrome. 2. Создать свой первый гайд. 3. Завершить установку. 4. Опубликовать. Начать!

  • Дружелюбный прием? Да
  • Очень мало задач, и они несложные? Да.
  • Индикатор выполнения имеется? Да.
  • Можно прервать процесс в любой момент? Да!

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

Есть сотни шаблонов, помните?

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

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

Но не думайте об этом, просто составьте хороший чек-лист.

Зачем использовать чек-лист?

Достоинства

Недостатки

  • Работает лучше, чем обзоры продуктов, особенно для более масштабной продукции
  • С самого начала позволяет пользователям достигать результатов
  • Помогает более эффективно управлять когнитивной нагрузкой
  • Без индикатора выполнения или со слишком большим количеством задач может не произвести положительного впечатления
  • По сути, как и обзор продукта, онбординг терпит неудачу, если ничего не происходит после завершения этапа (в данном случае — заполнения чек-листа)
  • Возникнет проблема, если чек-лист не появится заново после одного пропуска

Как создать чек-лист для онбординга: 6 приемов

4. Интерактивные руководства/пошаговые руководства

Серра дает еще один совет: «Если бы у меня была возможность сказать всем начинающим UX-дизайнерам только одну вещь, это было бы:

“Показывайте, а не рассказывайте".

При проектировании онбординга UX мы, похоже, забываем о самом важном факторе.

О пользователях.

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

Так что покажите им, как работает ваш продукт».

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

Посмотрите, например, как на нашей онбординг-платформе Experrto мы применяем интерактивное руководство для помощи пользователю в создании тура: 

Хотя поначалу это напоминает обзор продукта, существует одно существенное отличие.

Пользователи не смотрят, они делают.

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

Зачем использовать интерактивные руководства?

Достоинства

Недостатки

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

28 бесплатных плагинов для создания руководств по продукту

5. Горячие точки

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

Хотите указать на что-то важное?

Поставьте на это горячую точку (hotspot).

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

Zakeke

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

пример от Plandisc

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

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

Зачем использовать горячие точки?

Достоинства

Недостатки

  • Легко привлекают внимание и направляют пользователей
  • Помогают избежать использования слишком большого количества всплывающих окон
  • Действуют как дополнительная подсказка и снижают когнитивную нагрузку
  • При чрезмерно частом использовании могут вызвать раздражение
  • Если важная информация будет передаваться через горячие точки, может случиться так, что пользователи не будут осведомлены о ней
  • Бесполезны, если не используются для конкретных кнопок

Hotspots и Tooltips: что это и когда использовать?

6. Всплывающие подсказки

В онбординге всплывающая подсказка является эквивалентом словосочетания «К вашему сведению».

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

Или «введите пароль — к вашему сведению, он должен включать строчные и прописные буквы».

Но нигде и никогда: «Укажите способ оплаты, — к вашему сведению, в следующем месяце мы взимаем с вас дополнительно 20 долларов».

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

Конечно, есть всплывающие подсказки, которые мы не пропускаем.

Почему нет?

Потому что они правильно спроектированы.

Посмотрите, положим, на этот пример из приложения Duolingo. 

Нажмите на слово, чтобы увидеть перевод!

Нажмите на слово, чтобы увидеть перевод!

В этот момент пользователи еще не знают значения выделенного слова.

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

Вот это и называется «прекрасно спроектированная всплывающая подсказка».

Зачем использовать подсказки?

Достоинства

Недостатки

  • В случае более простых продуктов это отличная альтернатива ознакомительным обзорам, лучше всего подходит для дальнейшего изучения сложных продуктов
  • Менее раздражает, чем ознакомительные обзоры или путеводители
  • Может использоваться практически на всех уровнях онбординга — от регистрации до подсказок в приложении
  • Если подсказки нельзя отключить, это, как правило, раздражает пользователей
  • Слишком большое количество подсказок, показываемых одновременно, может обескуражить пользователей
  • Подсказка может включать в себя только очень маленький контент

Различные варианты подсказок можно легко воплотить в жизнь с помощью онбординг-платформы Experrto — ее полностью визуальный редактор не потребует от вас знаний кода.

Адаптивные системы помощи: всплывающие подсказки и справка

Когда и что использовать?

А теперь самое главное: знание шаблонов онбординга UX/UI и понимание того, как и где их использовать, — это две разные вещи.

Но не волнуйтесь: мы о вас позаботимся.

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

1. Каков ваш контент?

Как выглядит вход в ваш процесс онбординга?

Что вы пытаетесь сказать пользователям?

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

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

2. Кто увидит ваш шаблон?

Как существуют самые разные виды SaaS-компаний, так же существуют всевозможные типы персон пользователей.

Подумайте об этом.

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

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

Cuepath

Когда вы создаете онбординг, обращайте внимание на персоны пользователей и на их поведение.

3. Когда он появляется?

Онбординг пользовательского опыта работает весьма таинственным образом.

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

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

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

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

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

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

Вывод

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

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

Не упустите свой шанс.

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

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

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

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

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