Редизайн вложений «ВКонтакте», весь путь от идеи до реализации

Привет, меня зовут Влад, я дизайнер ленты «ВКонтакте» и хочу поведать вам про то, как происходил процесс редизайна вложений, какие были проблемы на пути и как круто мы провели время с командой.

В ленте новостей ВКонтакте очень важна метрика Time Spent (время проведенное пользователем). Чем больше человек проводит времени в ленте, тем больше прибыли получает компания за рекламу. Соответственно, наша глобальная задача — увеличить это время, но не во вред пользователю. Благодаря исследованиям и череде AB-тестов мы пришли к выводу, что есть несколько проблем, которые нужно решить на пути увеличения метрик.

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

Фотография, Музыка, Опрос, Файл, Товар, Услуга, Геоточка, Клип, Видео, Статья, Альбом, Стикер, Подкаст, Сюжет, Мини апп (Сервис), Плейлист и тд.

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

1. Высота поста (публикации)

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

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

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

2. Различие форматов вложений

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

3. Коммуникация между командами

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

4. Разные платформы

В дополнение к этому, все решения должны подходить ко всем платформам, потому что у нас практикуется подход, при котором весь продукт ВКонтакте должен едино выглядеть на всех платформах Android, iOS, Web, mVK (мобильная версия)

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

Далее мы договорились подготовить концепты того, как может выглядеть будущая лента новостей с вложениями каждого продукта. По итогу мы пришли к единому формату, а именно - концепция Primary и Secondary аттача (далее будет эта аббревиатура). Что это и чем они отличаются?

📌 Существует фиксированный в пропорциях Primary аттач, у которого есть 3 формата отображения: квадратный, горизонтальный и вертикальный.

📌 А также существует Secondary аттач, любой другой аттач, который идет после Primary.

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

Итак, мы все вместе договорились о формате, что здорово.

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

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

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

Проблема в процессе

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

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

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

Долго думая, я пришел к варианту некого компромисса для всех, а назвал я его “Свободная высота”. Что это такое? Суть в том, ограничение высоты фотографии остается до тех же параметров 4х3 (Вертикальный формат), 3х4 (Горизонтальный формат), но любой формат между публикуется в исходном виде, чтобы не кропать (обрезать) изображение и не добавлять на каждую фотографию блюр. Эта логика так же идеально подходила для другой фичи (Карусель), но о ней можно почитать в другой статье.

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

Думаю сложно смотреть на эти сущности в отрыве от того, как это выглядит привычно для нас в ленте новостей, поэтому посмотрите всю разницу ниже в примерах. Как вы видите:
1. Посты стали занимать меньше места в ленте
2. Структурированные и логичные
3. Единые на всех платформах
4. Стали визуально привлекательнее
5. Дали прирост метрик и показали, что автором понравились обновленные вложения

Спасибо за ваше внимание и то, что дочитали статью до конца! Буду рад вашим вопросам и комментариям.

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