Главная

Навигация на главной странице
сайта

Никита Семенов

26 Апр 2019

Время чтения: 2 минуты

Навигация на главной странице сайта

Вы узнаете:

Разбор меню и слайдера

Какими они должны быть

2 примера топовых компаний

0

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

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

Большой плюс тестирования на ГС — это большой объем трафика: результаты теста вы получите быстро.

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

Меню

Выполняет роль удобной навигации — переход с главной страницы в конкретный раздел или товар. Правила идеального меню:

1. Понятные категории

2. К каждой категории иконки
Мы все воспринимаем визуальную информацию быстрее текстовой, поэтому визуализация (иконки) должна быть! Также, когда везде только один текст, сайт становится «сухим» — иконки разбавляют сайт и делают его более живым.

3. Выпадающий контент
При наведении на категорию должен быть выпадающий контент, который пользователю помогает попасть в подкатегорию.

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

Если не углубляться, это все. Идеальное меню у Эльдорадо:

Навигация на главной странице <br>сайта
Единственно, я бы добавил легкое затемнение, чтобы пользователь не отвлекался от поиска и был сфокусирован только на меню (так как меню сливается с общим фоном сайта, хоть и разграничено тенью):

Навигация на главной странице <br>сайта

Слайдер

У него 2 задачи: чтобы пользователь увидел акции или новости компании и перешел в раздел.

Чтобы пользователь ознакомился со всеми слайдами, нужны понятные кнопки переключения и подсказки, сколько именно слайдов. Отличный пример сайта банка Home Credit:

Навигация на главной странице <br>сайта
Еще чем хорош слайдер у Хоум Кредит: вы видите центральный слайд и чуть-чуть боковые. Так боковые слайды заинтриговывают и вы сильнее хотите увидеть «что же там?».
Чтобы пользователь переходил внутрь слайдов, в слайдере должны быть понятные кнопки как визуально, так и с понятным призывом к действию. Это тоже хорошо реализовано у Банка.

Закрепим

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

Узнайте слабые места и получите конкретные рекомендации по увеличению конверсии

Бесплатные материалы на темы: аналитика, А/В-тесты, персонализация и детальные кейсы