Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как выбрать меню для сайта. Принципы юзабилити

Дата:6.04.16 в 14:12

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

Как ведет себя посетитель

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

Есть такое понятие, как F-Shaped Pattern, которое характеризует поведение пользователя при быстром просмотре страницы. Внешне это выглядит как заглавная буква «F», полностью читается верхний горизонтальный ряд и вся левая часть экрана сверху вниз, а вот по центру взгляд захватывает примерно половину содержимого.

Горизонтальное меню

Верхнее горизонтальное меню отлично подходит для таких сайтов, как блог, визитка или корпоративный веб-сайт. Выбор объясняется тем, что на таких проектах меню состоит из основных пунктов, например «Главная-Услуги-Акции-Новости-О нас-Контакты». То есть, меню достаточно простое для того, чтобы лаконично поместиться в одну строку и находиться в зоне повышенного внимания посетителя.

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

Вертикальное меню

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

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

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

Где расположить целевую кнопку

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

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

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

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

Оценок: 2 (средняя 4 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям: