Лекция «Стили в UX/UI: что вас ждет в 2025 году» ЛЕКЦИЯ 25 декабря

Проектируем онбординг: уроки от Duolingo, Figma и не только

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

Давайте посмотрим, как проектируют онбординг эти и многие другие популярные бренды

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

Звучит странно?

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

Онбординг — пожалуй, самый важный сценарий для любого продукта (особенно SaaS). Согласно исследованию ProfitWell, он напрямую влияет на коэффициент удержания пользователей. Авторы изучили более 500 компаний и обнаружили, что клиенты, получившие положительный опыт онбординга, на 7,2% чаще возвращаются к продукту, чем те, кто остался недоволен. Кроме того, грамотный онбординг повышает готовность пользователей расстаться с деньгами, что сказывается на доходе компании.

За последние два месяца я проанализировал более 20 сценариев онбординга. И выявил несколько распространенных ошибок, а также попытался понять, как решают эту задачу ведущие технологические компании — Figma, Miro, Grammarly, Slack, Monzo и т.д. Сегодня я поделюсь с вами своими открытиями.

Распространенные ошибки

1. Онбординг заканчивается слишком рано

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

Один из примеров — Sketch, основной инструмент проектирования интерфейсов до появления Figma. После того как вы заполняете личные данные и регистрируете учетную запись, вы попадаете на экран, в котором отсутствуют какие-либо четкие указания, куда идти дальше. Скачать приложение для Mac? Изучить документацию? Пригласить других пользователей? Многие из этих функций не имеют отношения к основной специализации — созданию прототипов.

Sketch переносит пользователя на этот экран, не оставляя никаких указаний относительно того, что делать дальше

Другой пример — Spotify. Когда вы регистрируетесь, приложение запрашивает ваши данные, но сразу после вы остаетесь на странице одни без каких-либо дальнейших указаний.

После регистрации в Spotify пользователи попадают на стартовую страницу

Елена Верна, руководитель отдела роста Dropbox, написала: «Самая большая ошибка компаний — слишком быстро бросать пользователя на произвол судьбы, часто еще на этапе настройки продукта. Вы должны помочь ему сформировать первую петлю привычки. Только в этом случае вы сможете эффективно реализовать свои стратегии вовлечения и монетизации».

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

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

LinkedIn предлагает новым пользователям подписаться на страницы интересующих их компаний и людей

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

2. Онбординг начинается слишком поздно

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

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

Например, в выходные я листал свою ленту Instagram*, когда увидел рекламу Voiso. Никакого описания продукта не было. Мне стало любопытно, я кликнул по картинке, и только после этого узнал, что речь шла о ПО для создания контакт-центра на основе искусственного интеллекта... подождите, что? Зачем кому-то создавать контакт-центр на... телефоне?

Такое несоответствие между рекламой и продуктом может привести пользователей в замешательство и оттолкнуть их. 

Реклама Voiso

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

3. Требование оплаты до предоставления ценности

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

Очень странно, не так ли?

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

Я очень люблю электронные календари, поэтому, когда несколько месяцев назад в моей ленте стало мелькать приложение Motion, я сразу обратил на него внимание. Я попытался зарегистрироваться, и первое, что они попросили меня сделать — ввести номер кредитной карты. Ниже располагалось примечание о том, что с меня будет снято $228, если я не отменю подписку в течение 7 дней.

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

Страница оплаты Motion
4. Нерелевантные всплывающие подсказки

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

Скорее всего, нет.

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

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

Пример избыточности — интерфейс Toggl. Вот что ждало меня после регистрации:

Подсказки, подсказки, подсказки

Онбординг лидеров отрасли

Когда кто-то подписывается на продукт, за этим обычно стоит намерение. Мы редко заходим в магазин просто так (осмотреться — это тоже намерение!). 👀

В книге Product-Led Onboarding (Продуктовый онбординг) Уэс Буш сравнивает онбординг с боулингом. Представьте, что ваши пользователи — игроки, и их цель — выбить страйк. Если вы профессиональный игрок, это проще простого, но что если вы новичок? Скорее всего, ваш шар скатится с дорожки, если не встретит никаких препятствий.

Помогите новым пользователям сделать первый бросок (Product Led Onboarding)

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

Секрет 1. Персонализируйте опыт онбординга

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

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

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

Персонализированные шаблоны от Miro

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

Персонализированные шаблоны от Airtable

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

Вот почему такие продукты, как Calendly, BuyMeACoffee и Bento, предлагают пользователям выбрать персональный URL во время регистрации. Вы будто сразу становитесь его «владельцем», что побуждает вас завершить процесс регистрации, чтобы не потерять «своё».

Bento и BuyMeACoffee используют в своем онбординге эффект владения

Вы можете сделать онбординг еще более персонализированным с помощью искусственного интеллекта. Например, когда вы регистрируете в Typeform аккаунт компании, приложение автоматически брендирует формы (описание бизнеса, логотип, цвета), извлекая данные с сайта, указанного при регистрации. Это решение позволило увеличить конверсию на 5%.

Автоматическое брендирование форм от Typeform (Источник)

Секрет 2. Разбивайте сложные шаги на части

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

Прогрессивное раскрытие 

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

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

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

Пошаговый онбординг Duolingo
Закон Миллера и закон Хика

Количество опций, которые вы предоставляете на каждой странице, также имеет большое значение. По общему правилу их число не должно превышать 7±2 (закон Миллера). Чем больше вариантов доступно пользователю, тем больше времени ему потребуется для принятия решения (закон Хика).

Сравните эти страницы Grammarly и Webflow:

Значения по умолчанию

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

Онбординг Arc
Ловушка невозвратных затрат

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

Секрет 3. Используйте прайминг

Когда люди ждут свою очередь в МакАвто, они не тратят время впустую. McDonald’s использует подъездную дорожку для демонстрации рекламы, которая зачастую влияет на их выбор. Это называется прайминг. Мы предварительно знакомим пользователя с теми или иными концепциями и идеями, чтобы подтолкнуть его к принятию определенного решения.

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

Вот несколько примеров — BuyMeACoffee, Slite и Kitemaker:

Секрет 4. Отмечайте достижения пользователей 🎉

Люди склонны запоминать пиковые моменты опыта и его окончание (правило пика–завершения). Вот почему, когда вы смотрите фильм, у вас в голове обычно откладываются только лучшие/худшие моменты и финал.

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

Как Monzo, Mcdonalds и Buy Me A Coffee отмечают окончание онбординга

Заключение

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

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

Если вы затрудняетесь ответить, поговорите с пользователями или запустите опрос:

  • Как вы впервые узнали о нашем продукте?
  • Какую задачу вы надеялись решить с его помощью?
  • Что отличает его от продуктов конкурентов?
  • Помог ли он вам достичь поставленных целей?

Помните, первое впечатление очень важно!

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

* Meta признана в РФ экстремистской организацией.

Источник
и
:
arrow