Релиз 1
Главная страница, поиск и навигация
Главная страница, поиск и навигация
Задача
Клиент обратился с сырым вариантом дизайна главной страницы. На первом этапе необходимо было сформулировать гипотезы относительно существующего и нового варианта, провести опросы и собрать обратную связь от пользователей. На основе полученных данных предстояло подготовить редизайн главной страницы, а также переработать логику поиска и навигации, чтобы улучшить пользовательский опыт и сделать интерфейс более удобным.
На первом этапе я проанализировала данные Яндекс.Метрики, чтобы определить ключевые сегменты аудитории. На их основе я сформировала целевую группу для опросов и подготовила методологию исследования, сосредоточив внимание на самых важных пользовательских сценариях.
UX-аудит + тесты
На следующем этапе был проведён UX-аудит текущего и нового варианта главной страницы. На основе анализа сформулированы ключевые гипотезы о возможных барьерах в пользовательском опыте, а также подготовлен список исследовательских вопросов, которые позволили подтвердить или опровергнуть предположения. После согласования с клиентом был разработан сценарий тестирования.
Исследование проводилось на платформе Яндекс.Взгляд и включало две группы: действующих пользователей сайта и дополнительную аудиторию, подобранную с учётом демографических характеристик и заданных критериев. Тест состоял из 12 вопросов, всего было собрано 400 ответов. Такой объём обеспечил репрезентативность выборки и дал возможность выявить реальные модели поведения, ожидания и боли пользователей. На основе этих данных были приняты обоснованные дизайн-решения, которые легли в основу редизайна.
Исследование проводилось на платформе Яндекс.Взгляд и включало две группы: действующих пользователей сайта и дополнительную аудиторию, подобранную с учётом демографических характеристик и заданных критериев. Тест состоял из 12 вопросов, всего было собрано 400 ответов. Такой объём обеспечил репрезентативность выборки и дал возможность выявить реальные модели поведения, ожидания и боли пользователей. На основе этих данных были приняты обоснованные дизайн-решения, которые легли в основу редизайна.
Поисковая строка
Проработала функционал поисковой строки, опираясь на уже устоявшиеся UX-паттерны. Было важно, чтобы взаимодействие с поиском не требовало от пользователя дополнительных усилий: ему не нужно угадывать или тратить время на изучение интерфейса. Вместо этого он мог интуитивно использовать поиск, исходя из привычного опыта взаимодействия с другими сервисами.
Были внесены ключевые улучшения в функционал поисковой строки:
Эти изменения не только расширяют функционал поиска, но и делают процесс выбора и покупки более наглядным, быстрым и удобным для пользователя.
Были внесены ключевые улучшения в функционал поисковой строки:
- Placeholder, который подсказывает пользователю, как правильно ввести запрос для поиска нужного товара.
- Автоподсказки: при первом взаимодействии с поиском пользователю показывается комбинированный саджест — популярные запросы и рекомендуемые мини-карточки товаров; если пользователь уже использовал поиск, отображается история его запросов и просмотров.
- Кнопка «В корзину» на мини-карточках товаров, позволяющая добавить товар в корзину без перехода на страницу продукта.
- Кнопка «Все результаты», которая переводит пользователя на страницу полной поисковой выдачи каталога.
Эти изменения не только расширяют функционал поиска, но и делают процесс выбора и покупки более наглядным, быстрым и удобным для пользователя.
Дизайн
Поскольку этап проектирования по инициативе клиента был пропущен, я сразу приступила к работе над дизайном. Особое внимание уделила поисковой строке и навигационной панели, так как именно они определяют удобство и скорость навигации по сайту.
Каталог товаров
Из-за большого ассортимента компании было решено использовать мега-меню с поэтапным раскрытием категорий и подкатегорий. Такой подход позволяет пользователю быстро ориентироваться, снижает когнитивную нагрузку и ускоряет процесс выбора товара, что повышает удобство и вовлечённость на сайте.
Первый экран
Для увеличения конверсии и вовлечённости на первом экране принято решение использовать промо-блок вместо обычного баннера. Он сочетает промо-баннер серии и мини-карточки товаров, чтобы пользователь сразу видел доступные продукты и мог мгновенно добавить их в корзину. Такой формат снижает лишние клики и упрощает взаимодействие с сайтом. Особенно эффективно это для моно-товаров, не требующих выбора параметров, — пользователь быстро ориентируется и совершает покупку без лишней нагрузки.
По итогам исследования лента Highlights была сохранена в интерактивном формате, но её функционал адаптирован под особенности целевой аудитории. Чтобы сделать взаимодействие более интуитивным и предсказуемым, добавлен текстовый дескриптор, поясняющий назначение блока. Визуальный паттерн усилен за счёт обводки в стиле социальных сетей, которая показывает статус просмотра, а вместо абстрактных маркеров использованы контентные превью.
По итогам исследования лента Highlights была сохранена в интерактивном формате, но её функционал адаптирован под особенности целевой аудитории. Чтобы сделать взаимодействие более интуитивным и предсказуемым, добавлен текстовый дескриптор, поясняющий назначение блока. Визуальный паттерн усилен за счёт обводки в стиле социальных сетей, которая показывает статус просмотра, а вместо абстрактных маркеров использованы контентные превью.
В предыдущей версии дизайна ключевые рекламные баннеры, несмотря на их визуальную яркость, не выполняли свою функцию. Из-за сформировавшейся у пользователей «баннерной слепоты» эти элементы воспринимались как фоновая реклама и целенаправленно игнорировались, что снижало конверсию и вовлеченность.
Цель редизайна:
Превратить баннер из игнорируемого рекламного элемента в органичную и полезную часть пользовательского пути, повысив его ценность и кликабельность.
Предлагаемое решение:
Был реализован гибридный формат, который сочетает в себе:
Цель редизайна:
Превратить баннер из игнорируемого рекламного элемента в органичную и полезную часть пользовательского пути, повысив его ценность и кликабельность.
Предлагаемое решение:
Был реализован гибридный формат, который сочетает в себе:
- Статичный баннер-заголовок, который визуально интегрирован в общий стиль платформы и выполняет роль понятного нативного указателя.
- Интерактивную карусель товаров, которая напрямую связана с контентом баннера (товары из подборки).
Итоги редизайна главной страницы
Редизайн главной страницы значительно упростил пользовательский опыт: теперь клиенты быстрее находят товары и принимают решения о покупке.
Ключевые улучшения:
Сократилось время на ориентирование, а процесс покупки стал максимально простым и удобным.
Ключевые улучшения:
- Умный поиск с автоподсказками, категориями и карточками товаров.
- Структурированное меню с логичной поэтапной навигацией
- Гибридный формат промо-блоков, привлекающие внимание к акциям и новинкам и дают возможность добавить товар, не переходя в карточку товара.
Сократилось время на ориентирование, а процесс покупки стал максимально простым и удобным.
