{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

Кликать, свайпать, залипать: как мы учили людей смотреть ролики Дзена

Я Лена Рамазанова, дизайнер продукта в команде Дзена, которая отвечает за видео. Весь прошлый год я занималась Роликами. Да, именно с большой буквы! Так мы называем раздел коротких видео в Дзене, который появился совсем недавно, около полутора лет назад, но уже занимает важное место в нашей продуктовой экосистеме. Ежедневно в Дзен загружаются тысячи новых роликов. Но научить аудиторию нашей платформы пользоваться новым форматом оказалось не так-то просто! Я расскажу, как мы сделали это с помощью дизайна.

Пролог

Дзен — это контентная платформа для блогеров. Здесь есть несколько основных форматов, которые позволяют авторам самовыражаться: лонгриды (они же статьи), короткие текстовые посты, длинные видео и ролики. И если текстовый формат существовал достаточно давно (читай: с самого основания платформы), то с видео мы начали свои отношения всего четыре года назад. Спустя еще пару лет мы заметили успех видео у пользователей Дзена и прибавили к этому мировой тренд на потребление коротких форматов. Тогда мы приняли решение запустить ролики — вертикальные залипательные видео длительностью от 5 секунд до 2 минут.

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

И мы взялись за дело. С помощью разных интерфейсных паттернов.

Часть 1. В которой мы понимаем Самую Главную задачу

Начать придется издалека. Раньше ролики в Дзене можно было найти дважды: целенаправленно пойти в специальный раздел или случайно встретить, листая ленту (АПД: сейчас ролики тоже можно встретить в ленте, но не по одному, а в общей карусели).

В ленте ролик представлен карточкой: это обложка плюс названия видео и канала, на котором оно размещено.

Точки входа в Ролики

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

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

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

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

Часть 2. В которой пользователю очень захочется развернуть ролик

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

Сначала мы применили так называемую механику Stop&Go (англ. «остановись и иди»), которая отключала автоповтор видео в общей ленте. Теперь после его завершения пользователя встречала кнопка «Смотреть еще ролики». Нажал ее — и из общей ленты переносишься в отдельную ленту роликов.

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

Эти эксперименты увенчались успехом! Пользователи начали активнее переходить в ленту роликов. Ура!

Часть 3. В которой мы учим людей свайпу

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

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

Компонент с таймером

В результате эксперимента мы получили классные результаты:

● +2% к суммарному времени, которое пользователи проводят в ленте роликов

● +11% к сессиям с двумя просмотрами

● + 6% к сессиям с тремя просмотрами

Последний показатель говорит о том, что часть пользователей научилась свайпать ролики.

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

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

Онбординг свайпа карточек

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

Онбординг лайка
Онбординг ленты автора

Специально для онбординга наша иллюстраторка Таня Комарова нарисовала несколько вариантов иконки руки.

Из них мы выбрали вариант № 1 — что-то среднее между самой строгой (№ 4) и игривой, похожей на мультяшную перчатку (№ 6), иконками.

Результаты эксперимента показали, что благодаря онбордингу время, проведенное в ленте роликов, увеличилось на 3,5%, а количество сессий с двумя и тремя просмотрами — до 13,9% и 10,5% соответственно.

Часть 4. В которой поиск новых роликов становится намноооого удобнее

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

Раздел «Интересное» в Дзене (или витрина)

Исторически сложилось так, что в материалы витрины попадало не очень много роликов. И нам захотелось это изменить.

Мы подумали, что было бы здорово учитывать, откуда пользователь переходит в раздел роликов, — то есть сделать поиск и витрину контекстными. Так родилось еще одно продуктовое изменение: при переходе в раздел Поиска из Роликов для пользователя формируется собственная витрина с короткими видео. И не рандомными, а подобранными алгоритмом специально для него.

В первой версии мы стали показывать ролики в виде простой сетки. Сначала она выглядела так:

Первый вариант витрины Роликов

Во второй итерации мы изменили сетку так, чтобы разбавить стандартные ячейки более крупными, как на этом скрине:

Второй вариант витрины Роликов

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

Часть 5. В которой лента роликов становится максимально интересной (а подписки на авторов растут)

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

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

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

Эксперимент с кнопкой подписки

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

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

Увеличенная кнопка подписки

Потом мы взяли и анимировали маленькую кнопку подписки — ту, что выглядит как знак «+» в кружочке. С того момента и до сих пор она завлекательно покручивается и манит на себя нажать. Она находится на видео все время, но двигаться начинает, только если пользователь лайкнул ролик или посмотрел его несколько раз.

Анимированная кнопка подписки

Эксперимент с игровой механикой

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

Интерфейсно мы решили использовать такой снек-бар:

Разные варианты снек-бара

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

Когда пять подписок собраны, поздравляем пользователя фейерверком из конфетти:

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

Эксперименты удались! Вот как выглядит часть их результатов:

● количество пользователей с одной новой подпиской увеличилось на 1,7%

● пользователи с 5+ подписками приросли на 15%

● число подписок в роликах стало выше на 9%.

Часть 6. В которой ролики чувствуют себя как дома

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

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

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

Эпилог

В этой заметке мы рассказали лишь о небольшой части того, что происходит с дизайном в Дзене. Мы планируем продолжать эксперименты — чтобы делать наш продукт удобнее для пользователей. Хотите знать больше про дизайн в Дзене? Подписывайтесь на наш Дзен-канал.

0
16 комментариев
Написать комментарий...
Vadim Anjelov

учить людей свайпать видео как в тик токе?

Ответить
Развернуть ветку
Грекова Агата

ну а вдруг кто-то не умеет ._.

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

забавно

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

Илюстраторка 🤦‍♂️🤦‍♂️🤦‍♂️

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

Хорошо, конечно, что работа идет постоянная, но частенько не понять этих дзеновцев.
Сначала в нём закрыли нарративы, потому что ими никто не пользовался.
Потом закрыли замечательный формат галерей — их постигла судьба нарративов, потому что авторы стали создавать текстовые галереи (т.е. с текстами на слайдах). Дзен начал пессимизировать текстовые галереи и, в итоге, закрыл весь формат.

Теперь Дзен-журнал учит авторов делать информационные карусели…

Ответить
Развернуть ветку
Илья Бабин

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

Ответить
Развернуть ветку
Юра Туривный

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

Ответить
Развернуть ветку
Никита Федосеев

Согласен. С точки зрения дизайна и тестирования гипотез работа классная. Но это всё не про этику современного времени.

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

Ответить
Развернуть ветку
Юра Туривный

Согласен. В том числе и в руках разработчиков

Ответить
Развернуть ветку
Иван Афонасов

Привет!
Хочу спросить про прогресс-бар:

1) Не кажется ли вам, что в случае, когда человек только начал оформлять подписки, выделять красным 1/5 и даже само колечко красить в красный — странная идея? Может первым делом (перед текстом) считаться, как некая опасность? В том числе, это же пересекается с элементом автопрокрутки ролика, который, как я понял, вы тоже имплементировали? Почеум не тот же зелёный или нейтральный (белый)?

2) Вы говорите «так мы вызываем у пользователя азарт: хочется поскорее заполнить прогресс-бар». Это какая-то гипотеза, или это точно? Да, все мы слышали про концепцию Нира Эяля «Hooked up», но не совсем понятна откуда берётся азарт? Не может быть такого, что геймификацию впилили туда, где она по сути не нужна? Цифры по росту метрик я вижу, но ... Другие методы не пробовали, не тестировали? В друг они бы лучше себя показали?

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

Привет! Спасибо за вопросы по теме )

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

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

Ответить
Развернуть ветку
Генрих Элер

Леночка, ты лучшая, помни об этом, чем бы ты не занималась. Опг 🤍

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

После "иллюстраторка" перестал читать

Ответить
Развернуть ветку
Михаил Нежник

Громкие заявления про то, что учите людей свайпать видео, не вы ведь придумали сторисы, шортсы и рилсы. Это всем понятный формат взаимодействия, люди километры видосов наматывают уже за день 😌😌😌

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

цифры не врут, мы не просто так этим занимались:)
специфика платформы + специфика аудитории = далеко не всем понятный формат

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

А онбординг на ограниченную аудиторию выкатывали для эксперимента? Аудиторию как-то выбирали? Долго эксперимент длился? Сколько времени прошло после внедрения автосвайпа до окончания эксперимента по онбордингу?

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

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