Про редизайн десктопа: как мы его делали и что получили

Меня зовут Карина Валеева, я продуктовый дизайнер в Дзене, и сейчас я расскажу вам, как в марте 2022 года мы одновременно обновляли dzen.ru и его версию на главной странице Яндекса.

ДИСКЛЕЙМЕР: С сентября 2022 года Дзен больше не часть Яндекса, но мы хотим рассказать про этот кейс — ведь он очень помог команде при выделении в самостоятельный портал dzen.ru.

А пока вы читаете, мы продолжим дотаскивать улучшения.

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

На март 2022 года у Дзена было приложение, мобильная веб-версия, десктопный сайт и интеграция на главную Яндекса. Все они отличались друг от друга: приложение недавно обновилось, сайт нуждался в редизайне, а интеграция на главную — в развитии. Проведя небольшое внутреннее расследование, мы определили две основные области, где нужно было потрудиться — сайт и интеграция на главную, — а также сформулировали 2 основные проблемы.

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

Лента из рандомных фото и текстов встречала каждого посетителя yandex.ru. При этом что именно это за контент и откуда он там взялся, пользователь как будто не считывал. Нам хотелось это изменить, а также дать возможность этой огромной аудитории переходить на другие разделы Дзена и создавать свой контент прямо из главной страницы Яндекса.

Проблема 2. Устарел сайт Дзена

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

Так мы выделили сразу несколько крупных задач на этом направлении:

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

Во-вторых, требовалось сделать единую для всех поверхностей ширину ленты с контентом: на тот момент ширина ленты на сайте Дзена была 614 px, это на 26 px меньше, чем было на главной Яндекса, — 640 px.

В-третьих — обновить шапку.

Ну и в финале смержить (визуально объединить. — Прим. ред.) сайт Дзена и главную страничку Яндекса за счёт таких общих констант, как цвет фона и меню.

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

На следующем этапе мы подсмотрели опыт контентных платформ, выделили для себя интересные приемы и способы организации информации.

Например, Medium, Twitter, Тинькофф Журнал размещают в правой колонке рекомендации для пользователя, которые потенциально могли бы ему понравиться.

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

Затем мы сравнили функциональность приложения Дзена (которое уже существовало для Android и iOS) и десктопного сайта — чтобы понять, что нужно визуально обновить, какие разделы из приложения можно добавить в боковое меню. Так, например, в приложении был табик Ролики, а на сайте Дзена — нет.

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

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

Боковое меню

Нам предстояло не только обновить меню сайта, но и встроить его на главную Яндекса. Поэтому важно было учесть ширину меню. Для свернутого вида она составляла всего 44 px. Очень мало! Кстати, самого свернутого состояния меню раньше не было, а если пользователь сворачивал окно браузера, делая его более узким, то основной контент скрывался, меню и контент не ужимались и не перестраивались.

Еще мы перерисовали иконки ленты и раздела «Интересное». Иконки сохранили визуальную метафору, но приобрели новое исполнение.

Шапка сайта

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

Карточки в ленте

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

Цвет фона и обновление токенов

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

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

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

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

P. S. Спасибо замечательной команде: разработчикам, продактам, дизайнерам, тестировщикам и всем причастным!

Ещё про дизайн в Дзене вы можете найти на нашем Дзен-канале. Подписывайтесь!