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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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