{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

Onboarding как отражение продукта

Батищев Кирилл
Product Designer FindMyKids

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

Мы как команда роста должны постоянно искать точки развития продукта, нам свойственно придумывать что-то кардинально новое. В это статье речь пойдет о том, как мы переделывали онбординг, опираясь на метрики, анализ пользовательских интервью и «ux-коридорки». Давайте начнем.

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

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

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

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

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

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

Не рассматривайте онбординг как первую часть знакомства с пользователем

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

Сформируйте гипотезу

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

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

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

Всегда формируйте и фиксируйте гипотезу в своей команде, это помогает избежать расфокусировки и размытых ожиданий

Начало работы

Для того, чтобы начать двигаться вам нужны некие аксиомы (как в геометрии). Те вещи, проверять которые не нужно — это уже сделали за вас. Просто запомните, что они будут работать:

  • Пользователи понимают смысл с большей вероятностью, когда информация разделена на фрагменты (слайды в онбординге)

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

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

Рассмотрим дизайн онбординга и выпишем его минусы:

Не нужно смотреть на элемент или сценарий в user-flow как на замкнутую систему отделенную от других. Помните, что это часть чего-то общего

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

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

  • Перед онбордингом мы спрашиваем возраст ребенка, но этот элемент персонализации плохо считывается
  • детское приложение «Pingo» ранее не было упомянуто, некоторые воспринимают его как рекламу
  • Просто не понимают принцип работы работы родительского и детского приложения

  • Не понимают куда конкретно нужно вводить код, себе или ребенку,

    экран имеет большую когнитивную нагрузку, на нем много информации разного рода


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

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

От текста к форме

Мы решили вообще уйти от слайдов, нужно было показать юзеру работу приложения уже в онбординге («Aha moment»), попутно познакомив его со сторонним приложением, чтобы когда дойдет дело до ключевого экрана - большинство пользователей продолжали регистрацию.

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

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

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

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

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

  • Геймификация (подарки, персонажи, прогресс, закономерность действий)
  • Интерактивность (пусть юзер видит, что интерфейс с ним взаимодействует

    одинаковый паттерн поведения

  • Новая информация (рассказывайте новое в интересной форме)
  • Сторителлинг (интересная связанная история)
  • Интересная подача (покажите фичу так, чтобы было понятно без слов)

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

Сперва сторифреймы потом варфреймы

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

Если вы дизайнер, который работает по метрикам и A/B тестам необходимо понимать, что новый юзер флоу необходимо разбить на отдельные части, которые будут отдельно протестированы. Иначе вы не поймете, что конкретно у вас работает, а что нет. Но не нужно крайностей, бывает и такое, что решение будет работать только в комплексе, поэтому подходите с умом к этому моменту.

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

Вот такой дизайн мы в итоге согласовали:

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

Дальше самое сложное — провести исследование и внести нужные правки в нужном месте.

Перед исследованием

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

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

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

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

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

Список критерий (требований) к вопросам:

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

Далее формируем сами вопросы

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

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

Просто будет только на бумаге

Чтобы не затягивать нашу статью и превращать ее в войну и мир, основные правила составления вопросов для ux-исследования вы можете погуглить сами). Я лишь скажу то, чего я не встретил в интернете, но по моему мнению это очень важно.

Что важно знать перед самим интервью:

  • Будьте готовы к критике. И сразу же вытекает следующий момент: не говорите людям, что дизайн делали вы — так им будет легче критиковать
  • Не относитесь к списку вопросов как списку который вы будете читать слово в слово. Люди разные, у них разное настроение и вы будете общаться с ними в разных ситуациях, особенно это касается живого общения
  • Нужно полюбить процесс общения с людьми или хотя бы не бояться его, иначе ничего не получится и будет геморой
  • Не начинайте ваш разговор с банального приветствия, не следуйте списку как робот. Люди это видят и ощущают себя подопытными — это мало кому приятно. Для нужно добиться от человека простого непринужденного разговора. Вспомните моменты, когда вы общались с таксистами, когда разговор начинался сам собой. С чего начинались такое легкое общение? С чего то общего, с того, что было понятно вам обоим, с того что вас объединяло.
  • Не обязательно тратить время на поиск респондентов, это можно делать в любое удобное время, когда подвернется случай. Всегда есть знакомые которые могут рассказать много важного, если они ваша целевая аудитория, можно поговорить с человеком на остановке если у вас завязался разговор, попробуйте замечать такие моменты. Если вы дизайнер — нужно узнавать людей, а не прятаться от них.
  • Слушайте человека с которым говорите, даже если его понесло не туда, не нужно сразу прерывать, показывая своим видом, что вам это не интересно. Пусть закончит мысль.
  • Будьте готовы, что пойдет что-нибудь не так. К примеру в случае с online опросами некоторые не могут зайти в зум или расшарить экран, подобных случаев будет много.

  • Иногда люди врут, говорят то, что им комфортно говорить. Такие моменты важно видеть, ведь когда у вас выборка всего из 4, 5 респондентов, то один такой неверный ответ может вносить большие неверные корректировки в статистику.
  • Относитесь хладнокровно к своему дизайну, не нужно переформулировать в голове ответы респондентов и записывать их так как вам удобно. В чем сила, брат? Сила в правде!
  • Подготовьте все заранее, чтобы не было технический проблем. Это банальный на первый взгляд пункт, но про него нельзя забывать
  • Уберите мысли из головы, что нужны какие-то плюшки или вознаграждения за интервью
  • Перед исследованием максимально хорошо подготовьте прототип, он должен быть максимально похож на реальный продукт, никаких нелогичных и дешевых анимаций, западаний, нерабочих кнопок. К примеру, мы работаем в редакторе figma и использовали специальное приложение figma mirror, которое позволяет запускать прототипы на мобильном устройстве. Будет замечательно, если люди не поймут, что это вообще был прототип
  • И последнее, если вы уже в начале исследования понимаете, что ваш дизайн не работает и вы знаете в чем проблема — не тратьте время на остальных респондентов, лучше оставьте их на потом, когда поправите свое решение

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

Оцениваем результаты тестирования

Цветами в таблице представлены итерации тестирований.

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

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

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

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

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

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

Делаем версию для A/B теста и выкатываем (дробим на эксперименты).

Замкнутый круг продуктового дизайна

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

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

Итоги

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

0
26 комментариев
Написать комментарий...
Дмитрий Перепёлкин

Пингвин на подсказках какой-то страшноватый получился

Ответить
Развернуть ветку
greg chudnoff
Цель нашей компании помогать родителям и детям стать ближе с помощью мобильного приложения

Спасибо, но родителям это нах не нужно )) Родителям нужно, чтобы дети меньше торчали в мобильнике и чаще общались вживую.

Ответить
Развернуть ветку
Сергей Беляков

Вы их об этом спрашивали и точно знаете это?)

Ответить
Развернуть ветку
greg chudnoff

Много лет общаюсь с родителями школьников. Сам родитель. Богатый опыт.

Ответить
Развернуть ветку
Сергей Беляков

Странно, я помню по своему детству и детству многих обычных детей 90х-2000х годов рождения - всегда мать / бабушка в окно кричали "не долго давай" или "куда пошел"
Так что думаю, не надо об этом Вам так высказываться, как минимум, вы не большинство

Ответить
Развернуть ветку
greg chudnoff

Ума палата - делать по личному опыту 30-летней давности выводы о современных проблемах родителей и детей.

Ответить
Развернуть ветку
Я не скажу свое имя машине

Сама идея такого приложения ужасна и антигуманна

Ответить
Развернуть ветку
Ваня С

Вроде бы интересно, но ошибки в тексте очень отвлекают внимание 😬

Ответить
Развернуть ветку
Василий Сергин
Ответить
Развернуть ветку
Bartholomew Cubbins

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Сергей Добрицкий

Цитата из фильма "Лицо со шрамом"
"Ты коммунист? Тебе бы понравилось, если бы другие решали, что тебе делать, о чем думать, что чувствовать? Ты бы хотел жить в стаде, где все как овцы? Хотел бы работать по десять часов в сутки и при этом быть нищим? Ты бы хотел, чтоб на каждом углу было по стукачу, который о любом твоём слове доносит? Тебе бы так!"

Ответить
Развернуть ветку
Сергей Беляков

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

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

С какого черта вы на автора кидаетесь? Он вам что - то продает здесь? Что-то я не заметил

Ответить
Развернуть ветку
Павел Репкин

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

Ответить
Развернуть ветку
Кирилл Батищев
Автор

Это кстати, хорошая тема для статьи

Ответить
Развернуть ветку
Виктор Власов

Кирилл, спасибо за статью! Очень полезно и развёрнуто. Понравились отсылки к книгам и фильмам)

Ответить
Развернуть ветку
Rick Chanel
Ответить
Развернуть ветку
Grigoriy Malyshev

вооброжение дорисовало:
дизайн более строгий, "сдержанный синий" (#2862AC),
на логотипе - щит,
маскот - Дзержинский в стиле Tropico

Ответить
Развернуть ветку
greg chudnoff

на логотипе - shit, впрочем как всегда

Ответить
Развернуть ветку
Alexander Designer

Хорошая статья! 👍 Несколько грамматических ошибок роли не играют, если написано со смыслом и знанием дела :) Автору спасибо!

Ответить
Развернуть ветку
Сергей Добрицкий

Шикарная статья, ещё бы термины простым языком, и воспринималась бы ещё лучше, спасибо автор.

Ответить
Развернуть ветку
Кирилл Батищев
Автор

Спасибо, в следующий раз обязательно учту)

Ответить
Развернуть ветку
Vladimir Tselikov

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

Ответить
Развернуть ветку
greg chudnoff

обожрался амфетаминов

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Katya Kauer

Отличная статья)

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

В шоке от комментариев, ситуация «люди которые ставили дизлайки под видео с солнышком и водопадом»

Ответить
Развернуть ветку
Кирилл Батищев
Автор

Все комментарии это отратная связь) не более.. спасибо, что прочитали статью

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Sultan Kogan

Вспомнился эпизод Черного зеркала "Аркангел". Отстаньте уже от детей! Тебе бы, автор, надо поставить приложение, чтобы жена всегда знала где ты.

Ответить
Развернуть ветку
23 комментария
Раскрывать всегда