Про видео в Дзене. Дизайн-рассказ

Привет, меня зовут Настя Миронова, я продуктовый дизайнер в команде Видео в Яндекс.Дзене, и сегодня я расскажу, как менялся формат видео на платформе для блогеров, которой пользуется 19 млн пользователей в день.

Про видео в Дзене. Дизайн-рассказ

Зачем нам всё это?

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

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

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

Прошлое. Эпоха коротких видео.

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

Тогда мы решили попробовать такой формат – короткие, вовлекающие ролики длительностью 5-10 секунд. Сделать видео больше похожим на гифки и коубы — только так удавалось захватить внимание читателя. Разработанный на тот момент дизайн отлично решал эту задачу: видео занимало всю карточку, у роликов были крупные заголовки. За кликом — полноэкранный расхлоп, в котором даже не было инструментов управления. А зачем? Ведь в 5-секундном видео это стало бы ненужным излишеством.

Видео в Дзене — Дизайн эпохи коротких видео
Видео в Дзене — Дизайн эпохи коротких видео

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

Настоящее. Видео от блогеров.

Уже через несколько месяцев после полноценного запуска блогеры стали публиковать по несколько тысяч роликов каждый день. Из ленты исчезли гифки, их заменили настоящие блогерские истории: от рецептов и мейкап-тьюториалов до тревел-блогов и инструкций по реставрации старинных книг. Появились разные форматы – вертикальные, горизонтальные, квадратные. Со временем видео стали длиннее, в них появились инструменты управления. Очевидно, что старый дизайн уже не справлялся с новыми задачами. Вот, например, как выглядел ролик Коммерсанта про Германа Грефа и его отношение к повышению налогов.

Старый дизайн не справлялся с новым типом видео-контента
Старый дизайн не справлялся с новым типом видео-контента

Проблемы налицо:

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

Первым делом мы договорились с разработчиками о том, что карточка теперь имеет динамическую высоту: у вертикального видео — высокая карточка, у горизонтального — короткая. После этого мы решили отделить содержание видеоролика от того, что пользователь видит на карточке в ленте. Заголовок и описание перестали перекрывать картинку – мы передвинули их на отдельный «этаж». А чтобы новые карточки не выбивались из остальной ленты, мы решили покрасить подложку в наш фирменный средний цвет обложки видео. Также мы обновили иконку звука и добавили таймер обратного отсчёта. Ура, теперь видеоролики любого формата выглядят аккуратно, и их удобно смотреть.

Изменения сразу принесли результаты: например, на десктопном сайте пользователи стали смотреть видео больше на 20%!

Обновлённый дизайн видеокарточек — чисто и аккуратно
Обновлённый дизайн видеокарточек — чисто и аккуратно

А что происходило после того, как пользователь кликнул на видео? В старом дизайне он попадал на полноэкранный расхлоп, который никуда не вёл и в котором с видео ничего нельзя было сделать. Мы решили это исправить. Теперь когда пользователь смотрит ролик, рядом появляется целая лента с другими видео, подобранными по его интересам. Нравится видео про Байкал? Внизу бесконечная лента видео про природу и путешествия.

Переход из основной ленты в контекстную ленту видео

Будущее. Видео-платформа.

После того, как мы разобрались с насущными проблемами, пришло время подумать о будущем. Чего мы хотим от видео в Дзене? Каким мы его видим? А что, если мыслить ещё шире и подумать о видео во всём Яндексе?

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

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

Видео-платформа будущего
Видео-платформа будущего

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

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

2626
15 комментариев

никогда прежде не было так интересно читать про дизайн!

12

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

4

Настя молодец! 

3

Уиии спасибо ^^

1