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

21 ux-референс туров, обучений и туториалов: акцент, поощрение, персонализация и минимум контента.

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

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

В обучениях чаще всего используется тултип, который содержит:
— Заголовок;
— Описание;
— Кнопки «Вперед»/«Назад»;
— Кол-во шагов;
— Возможность пропустить;
— Ссылка на более подробное инфо.
Но все зависит от сложности фичи, уровня знакомства пользователя с продуктом, этапом, на котором показываем, и контекстом.

Текст — стандарт. Просто описание внутри тултипа. Обычно тултип дергается: появляется в рандомном месте → исчезает и появляется в другом рандомном месте. Пример гугла при выборе темы:

(В следующих двух примерах обрати внимание как плавно передвигается точка, не исчезает и удерживает на себе внимание в течение всего обучения)

Видеоэлементы во время обучения у GitBook:

Аудиосопровождение у Arcade:

Затемнение экрана у Стокманн:

Анимация у Google Meet:

Приближение к контенту у Figma:

Размытие экрана фона у Золотого Яблока:

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

... у Яндекс Почты:

... у TradingView:

В зависимости от страницы где находишься и какое задание выполняешь. Пример Duolingo:

Туториал не просто «показывает» что где находится, а ты вместе с ним делаешь задания и переходишь на следующий шаг у Craft:

и Toggl:

У Авито:

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

У сложных продуктов. Например, Binance:

и Figma:

Туториалы разделены по разным задачам и можно запустить в нужный момент у ClickUp:

после каждого выполнения у Mural:

во время онбординга у Dropbox:

просто стрелки у Arc:

просто показать функцию в нужном контексте у Самокат. При чем несколько раз, чтобы запомнить:

— Использовать туториалы в самых крайних случаях;
— Постараться сократить кол-во шагов;
— Обучать тогда, когда пользователь дошел до нужной страницы;
— Не просто показывать, а чтоб пользователь сам сделал. Так действие лучше закрепится;
— Как можно меньше текста. Идеальнее всего — у самоката;
— Вознаграждать!

Спасибо за внимание!)

Ещё больше UX-референсов тарифов, туториалов, онбордингов, слайдеров, форм и тд в телеграм-канале.

💬 Всегда готов дать совет, проконсультировать, стать ментором и обсудить сотрудничество