21 ux-референс туров, обучений и туториалов: акцент, поощрение, персонализация и минимум контента.
Каждый день я тренирую насмотренность в UX. Мощные, необычные и редкие находки публикую в телеграмм-канале.
При поиске референсов я стараюсь не привязываться к UI, бренду или продукту. Только решения, которые улучшают пользовательский опыт и помогают решить задачу. В этом материале покажу какие решения используют компании в своих турах и туториалах по продукту.
Из чего состоит
В обучениях чаще всего используется тултип, который содержит:
— Заголовок;
— Описание;
— Кнопки «Вперед»/«Назад»;
— Кол-во шагов;
— Возможность пропустить;
— Ссылка на более подробное инфо.
Но все зависит от сложности фичи, уровня знакомства пользователя с продуктом, этапом, на котором показываем, и контекстом.
Виды обучалок
Текст — стандарт. Просто описание внутри тултипа. Обычно тултип дергается: появляется в рандомном месте → исчезает и появляется в другом рандомном месте. Пример гугла при выборе темы:
(В следующих двух примерах обрати внимание как плавно передвигается точка, не исчезает и удерживает на себе внимание в течение всего обучения)
Видеоэлементы во время обучения у GitBook:
Аудиосопровождение у Arcade:
Акцент
Затемнение экрана у Стокманн:
Анимация у Google Meet:
Приближение к контенту у Figma:
Размытие экрана фона у Золотого Яблока:
Где обучать
В самом начале пользования продуктом. Например, во время онбординга...
... у Яндекс Почты:
... у TradingView:
В зависимости от страницы где находишься и какое задание выполняешь. Пример Duolingo:
Как взаимодействовать
Туториал не просто «показывает» что где находится, а ты вместе с ним делаешь задания и переходишь на следующий шаг у Craft:
и Toggl:
Есть прогресс-бар
У Авито:
и Readymag. При чем прогресс сохраняется, если с первого раза не получилось:
Возможность узнать больше информации
У сложных продуктов. Например, Binance:
и Figma:
Разделение по задачам
Туториалы разделены по разным задачам и можно запустить в нужный момент у ClickUp:
Поощрения и вознагрождения
после каждого выполнения у Mural:
Персонализация
во время онбординга у Dropbox:
Без лишнего текста и описания
просто стрелки у Arc:
просто показать функцию в нужном контексте у Самокат. При чем несколько раз, чтобы запомнить:
Мысли
— Использовать туториалы в самых крайних случаях;
— Постараться сократить кол-во шагов;
— Обучать тогда, когда пользователь дошел до нужной страницы;
— Не просто показывать, а чтоб пользователь сам сделал. Так действие лучше закрепится;
— Как можно меньше текста. Идеальнее всего — у самоката;
— Вознаграждать!
Спасибо за внимание!)
Ещё больше UX-референсов тарифов, туториалов, онбордингов, слайдеров, форм и тд в телеграм-канале.
Самокат "Впереди планеты всей"! Осталось только айфон там купить)
Мне больше всего у Авито нравится - более наглядно, как по мне. Но по-моему они эту идею подсмотрели у какого-то забугорного сервиса.
У гугла более интуитивно по-моему, поэтому и новичкам более понятно. А вот Arc со своими стрелками - фигня полная. Но оно и понятно - бюджеты совершенно разные у компаний.
Понравились:
1. GitBook за красивую анимацию точки
2. Arc за ненавязчивые стрелки
3. Самокат за нативные подсказки функций зе бест оф зе бест
Пользовалась бы сама онбордингом? Нет))
Я за упрощать там, где это возможно по максимуму.
Выбесило через экран: не везде интуитивно было понятно как закончить режим обучения
Четко, по факту. Спасибо)
хооший UI дизайн крайне важен для удержания своей аудитории на сайте, потому что он всегда цепляет глаз, и после этого помогает в приятном использовани сайта. направленность на создание удобных интерфейсов в первую очередь, перед созданием красивого дизайна крайне интересна. также мне понравились примеры хорошего использования блюра и затемнения, которые вы показали
В контексте это, конечно, высший пилотаж. А то новая функция есть, показана, но вот прям сейчас не нужна. А когда до дела доходит, то все кнопки перетыкаешь, пока вспомнишь где лежит)) Хотя часто удобство/понятность упирается исключительно в бюджет, к сожалению.
Комментарий удален модератором
UX-дизайн остается важным аспектом разработки любого продукта, и анализ примеров из реальной жизни может быть ценным опытом для профессионалов в этой области.
Как же я долго ждал выхода новой статьи.. Статья просто огонь! 🔥
Как же я долго ждал твоего комментария!
... и услуги заказывать
Отличная статья! Важно подчеркнуть, что ключевым аспектом успешной коммуникации о сложном интерфейсе и новых функциях является ясность. Предоставление наглядных примеров, пошаговых инструкций и преимуществ продукта поможет удержать внимание пользователя, обеспечивая понимание и комфорт при освоении изменений.
База
Arc со стрелками - для новичков самое то, просто привыкнуть нужно. А кто не любит привыкать тому на - Самокат)
В этих примерах еще более-менее нормально туториалы для новичков сделаны. А вот бывают сервисы, где туториалы настолько коряво сделаны, что больше запутаешься, нежели научишься работать с сервисом или продуктом.
Самый лучший и простой интерфейс я считаю у авито, с одной стороны простота с другой стороны большие возможности. Кстати обязательно зайду на ваш телеграм канал, чтобы узнать больше, вам спасибо!
Тебе спасибо!
Гугл в этом плане больше всех преуспел. У Авито, на мой взгляд, не очень.