{"id":13516,"url":"\/distributions\/13516\/click?bit=1&hash=37bd7b4748a2966bbc26730b25e2618c42f364e4b1fef4e1064b7cb954a0c2b0","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u0438 \u043e\u0442 \u00ab\u0413\u0430\u0437\u043f\u0440\u043e\u043c \u043d\u0435\u0444\u0442\u0438\u00bb","buttonText":"\u0417\u0430 \u0447\u0442\u043e?","imageUuid":"9ff0d7f7-ef07-5cab-961b-7241d5749f52","isPaidAndBannersEnabled":false}
Uliana Salo

Как мы обновили интерфейс Яндекс.Дзена в десктопе: дизайн-процесс

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

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

Задача: помочь пользователям быстрее находить материалы по интересам

Яндекс.Дзен — платформа, где каждый пользователь находит интересные ему публикации по любым темам. Чтобы показывать людям только релевантный контент, летом 2019-го мы ввели новую категорию «интересы».

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

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

Так выглядел интерфейс главной страницы Яндекс.Дзена до ноября 2019-го

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

Оставалось решить, как именно это сделать.

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

Мы изучили крупные медиа-сервисы, чтобы понять, как они справились с проблемой роста и какие сценарии поддерживают с технической стороны. После этого в течение 2019 года провели две встречи со специалистами дизайн-студии Charmer, которая работает с «Новой газетой», «Медузой» и «Ведомостями». Разобрали дизайн Дзена, поговорили о паттернах медиапотребления, способах издательств решать похожие задачи. В итоге заострили внимание на нескольких моментах:

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

2. В контентных страницах правое поле отведено под рекламу. Это удобно для создателей сайтов и рекламодателей, потому что у рекламных блоков фиксированный размер. Но в итоге правая часть страницы воспринимается как «мусорный блок»: реклама там работает хуже, а остальная информация проходит мимо внимания.

3. Чаще всего люди уходят со страницы либо после первого абзаца (когда становится ясно, что материал неинтересный), либо в самом конце.

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

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

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

7. Социальный граф активно развивается. Даже сервисы, где не предусмотрена социальная активность, рекомендуют материалы, «которые нравятся людям, похожим на вас».

Вынесли список интересов в боковое меню, а не в шапку

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

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

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

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

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

А еще пользователи теперь видят, как в зависимости от потребления контента меняются интересы: появляются новые и исчезают те, которые стали неактуальными. Например, если у пользователя первое место в блоке интересов занимает «политика», но он начинает читать и лайкать много статей о спорте, то интерес «спорт» поднимается выше в списке — и в какой-то момент он может сменить «политику».

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

Добавили два блока с рекомендациями в правое поле страницы статьи

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

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

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

Подружили визуальный стиль Дзена с навигацией

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

Экспериментируя с визуальным отображением интересов, мы использовали фирменные цвета, баблы и текстовые стили

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

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

​По итогам UX-исследования мы убедились, что теги со звездой воспринимают верно

В планах — объединить страницу материала и ленту в бесшовный сценарий

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

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

0
8 комментариев
Написать комментарий...
Татьяна Романова

Спасибо за такие статьи! Жду ещё) Очень интересно читать почему были приняты разные дизайн-решения в сервисах)

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

У меня дзен то англ, то русский) С локацией не может определиться и взять ее корректно с паспорта).

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

Спасибо, классная статья.

Ответить
Развернуть ветку
Эдуард Бакшеев

Последняя анимация - это просто ПУШКА

Ответить
Развернуть ветку
Мехман Агаев

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

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

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

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

Было бы еще здорово редактировать этот список интересов. 

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

Иконка напоминает логотип «Юлы»

Ответить
Развернуть ветку
Читать все 8 комментариев
null