Posted:
Фев 19, 2023
Comments:
0 Comments

Яндекс дзен интерфейс: дизайн-процесс — Uliana Salo на vc.ru

дизайн-процесс — Uliana Salo на vc.ru

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

5337
просмотров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Яндекс.Дзен» обновил интерфейс и алгоритм выдачи материалов

Продолжение сюжета от

Новости СМИ2

Новости

13 мая 2021

Новости

13 мая 2021

Анастасия Марьина

Руководитель новостного отдела RB.ru

Анастасия Марьина

Блог-платформа «Яндекс.Дзен» обновила интерфейс и подход к формированию ленты контента: теперь в ней будет больше материалов из подписок, у публикаций появятся аватарки блогеров, а названия каналов сделают заметнее. Об этом RB.ru рассказали в пресс-службе «Дзена».

Анастасия Марьина

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

Изображение: пресс-служба «Яндекс.Дзена»

Также на карточках теперь видно количество лайков и комментариев к посту, а на видео — число просмотров.

Изображение: пресс-служба «Яндекс.Дзена»

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

В приложении «Яндекс» на Android свежие публикации из подписок будут появляться в ленте в первую очередь. Затем пользователь будет видеть ленту рекомендованного контента, основанную на его интересах.

Изображение: пресс-служба «Яндекс.Дзена»

«Яндекс.Дзен» также добавил отдельный раздел с видео в приложение «Яндекс». На него можно переключиться из ленты «Дзена». В планах платформы и дальше развивать формат видео и помогать видеоблогерам расти на платформе (сейчас пользователи проводят за просмотром роликов более 200 млн минут в день, около 25% от всего времени на платформе). 

Изображение: пресс-служба «Яндекс.Дзена»

Новый дизайн ленты уже можно увидеть как в мобильных приложениях «Дзена», «Яндекс.Браузере» и приложении «Яндекс», так и в десктопной версии сервиса и на главной странице «Яндекса».

Фото на обложке: Unsplash

  • Интернет
  • Образ жизни
  • Яндекс

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1

    «Яндекс. Бизнес» — полный гайд для компаний

  2. 2

    «Яндекс» будет доставлять посылки, а VK станет монополистом на рынке медиа — прогнозы

  3. 3

    Тренды на рынке недвижимости: что происходило с трафиком, стоимостью клика и сделками с января по июнь 2022

  4. 4

    Как работать с «Яндекс.Метрикой» — руководство по установке и настройке

  5. 5

    Что ждет «Яндекс Новости» и «Дзен» после покупки их VK?

ВОЗМОЖНОСТИ

13 января 2023

5G полигон на базе Боткинской больницы

15 января 2023

Багхантинг от Sber

15 января 2023

Академия Инноваторов

16 января 2023

«Финам Акселератор»

18 января 2023

Seasons Tech 3. 0

Все ВОЗМОЖНОСТИ

Новости

Опрос россиян обозначил 15 самых популярных региональных брендов

Колонки

РазвИТие в новой нормальности: ИТ-тренды на 2023

Истории

Подборка: 10 самых популярных ИИ-генераторов изображений

Новости

Названы самые популярные секс-игрушки у россиян

Новости

В России утвердили критерии для получения ВНЖ иностранными инвесторами

Launcher — Бесплатная загрузка и обзоры программного обеспечения

Yandex Launcher — это интеллектуальное приложение, которое позволяет вам настроить телефон Android в соответствии с вашим стилем и потребностями, а также оптимизировать ваше устройство.

Популярные функции

— Коллекция обоев и темы — выберите те, которые подходят вашему настроению

— Быстрый поиск — ищите контакты и приложения на телефоне и в Интернете

— 1-Tap Boost — автоматическое закрытие ненужных процессов на вашем Android устройство

— Виджет часов и погоды — смотрите прогноз погоды на сегодня и на неделю вперед

— Рекомендуемые приложения — получите рекомендации приложений от Яндекс.Лаунчера

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

Темы: Помимо классических темных и светлых тем, в Яндекс Лаунчере можно настроить цвета меню и других элементов интерфейса.

Меню приложений: Удобная навигация по приложениям — Yandex Launcher упорядочивает приложения по категориям или цветам.

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

Кнопка «Все приложения»: выберите размер, цвет и форму кнопки, которая открывает меню приложений — например, сделайте звезду со шкурой зебры или круглый круг с мордой собаки.

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

Сетка экрана: изменение количества отображаемых на экране значков и их размера.

УДОБСТВО ДЛЯ ТЕЛЕФОНА

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

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

1-Tap Boost: отслеживайте ненужные процессы, которые занимают память вашего телефона, и закрывайте их одним нажатием с помощью этого виджета.

Часы + Погода: смотрите не только текущее время, но и прогноз погоды с помощью этого виджета погоды.

Смарт-папки: Дайте каждой папке собственный экран с виджетами и фоном.

Поиск по цвету значка: найдите приложение по его цвету, даже если вы забыли его название или категорию, к которой оно относится.

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

ОТКРОЙТЕ ДЛЯ СЕБЯ НОВОЕ

Яндекс Дзен: проведите вправо от главного экрана, чтобы просмотреть неограниченный поток статей, видео и другого контента, выбранного в соответствии с вашими интересами. Чем больше вы используете Яндекс Дзен, тем лучше будет становиться ваша персональная подборка.

Рекомендуемые приложения: смотрите новые приложения, рекомендованные вам на основе приложений, которые вы уже используете — просто добавьте виджет «Рекомендации» на любой экран или в любую папку с помощью Yandex Launcher для Android.

ПРИНЯТЬ УЧАСТИЕ В РАЗРАБОТКЕ ЯНДЕКС ЛОНЧЕР

Все обновления Яндекс Лаунчера сначала проходят бета-тестирование. Чтобы попробовать последнюю версию приложения, подпишитесь на бета-версию здесь: https://play.google.com/apps/testing/com.yandex.launcher.

Поделитесь своим мнением по электронной почте [email protected] или оставьте комментарий на официальной странице Facebook:

https://www.facebook.com/yandexlauncher/.

Команда Яндекс Лаунчера благодарит вас за комментарии и внимательно рассмотрит присланные идеи.

Micromax объявляет о партнерстве с Яндексом для программного обеспечения на базе ИИ

7 января 2023 г. | Последнее обновление: 07:06 IST

РАЗРЫВ! :

BVR Mohan Reddy: живой пример успеха благодаря дизайну