ДизайнУха
21
Aug

Сценарии UX: Как превратить онбординг в незабываемое первое свидание с пользователем

источникdtelepathy.com
авторMK COOK

bЛадно. Вы разобрались с тем, как побуждать пользователей к регистрации. А как после этого вы помогаете им ориентироваться в сервисе? Ведь вам нужны уверенные пользователи? У вас есть все шансы произвести хорошее первое впечатление (после регистрации) и по-настоящему зацепить пользователей с помощью отличного онбординга (onboarding — обучение человека пользованию вашим продуктом).

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

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

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

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

Когда нужен онбординг?

Вполне логичен вопрос: когда нам нужен онбординг? В большинстве случаев, когда ваш сайт или приложение отличаются от того, к чему привыкли ваши пользователи. Это часто происходит на мобильных девайсах — если вы вводите весёлое и новое действие. Например, проводить пальцем по экрану, чтобы увидеть скрытый предмет. В вебе часто можно увидеть презентацию нового продукта. Для меня таким продуктом был Pinterest в 2010 или Quora в прошлом году. Онбординг на таких сайтах жизненно необходим. Если пользователи не завершат регистрацию, её конверсию можно будет смело отправить на свалку.

Приём «обзорная экскурсия»

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

Squarespace GIF

Squarespace представляет пользователям свой продукт с помощью приветственного видео. Оно показывает, как пользоваться сервисом. Затем следует «обзорная экскурсия» с полезными советами, поясняющими функционал сервиса.

Siasto GIF

Siasto сделала всё, чтобы пользователь лучше и быстрее понял приложение, при этом самостоятельно пользуясь мышью. Это настоящее сочетание приёмов «обзорная экскурсия» и «сделай что-нибудь».

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

Приём «сделай что-нибудь»

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

Ness GIF

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

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

Tumblr GIF

Процесс регистрации в Tumblr содержит несколько шагов, но весёлый тон общения и понятные CTA-кнопку делают этот путь для пользователей проще.

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

Приём «настройка»

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

«Настройка» часто сочетается с приёмом «обзорной экскурсии». Онбординг на сайте Keep в виде нескольких вопросов помогает вам начать пользоваться сервисом.

Keep GIF

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

Недостатки: В исключительных случаях пользователи всё равно могут сталкиваться с проблемами при работе с вашим сервисом. Этот приём работает при наличии понятного UI. В обратном случае пользователи могут столкнуться с проблемами в понимании принципов работы вашего сервиса.

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

UXflows_GifGraphic_Fitbit

Приём «Всё и сразу»

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

Pinterest GIF

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

Говоря о «непрерывном онбординге»

Что мы называем «непрерывным онбордингом» — это тактика, с помощью которой сайт удерживает юзера в процессе использования веб-приложения. На LinkedIn, например, есть понятный чеклист с задачами вверху вашего профиля. Чаще всего они предлагают вам добавить больше информации в ваш профиль и призывают вас «поддерживать» ваши связи. Достижение заполненного на 100% профиля является стимулом и признаком «непрерывного онбординга». Но завершение этой задачи почти невозможно!

LinkedIn

LinkedIn побуждает пользователей к действиям, постоянно задавая им вопросы по ходу работы с приложением. Пошаговый раздел «Let’s get started!» всегда на своём месте, даже при наличии более 500 контактов!

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

Empty States from iOS

Пустые экраны больше распространены в мобильниках. Примеры выше взяты из Instagram, Facebook Messenger и Dropbox, все для iOS.

Выводы

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

1. Если ваша идея сложна, сформулируйте её точнее

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

2. Будьте предприимчивы

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

3. Делайте всё весело и с юмором

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