Проектируем удобное меню на сайте: 10 простых советов.

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

10 советов по проектированию меню сайта

Мы собрали 15 подсказок, которые помогут вам создать удобные и понятные менюшки:

1. Размещайте меню в привычных местах. Пользователи ожидают увидеть кнопки меню там же, где и на сотне других сайтов, которые они посетили до этого. Многократные исследования поведения Интернет-юзеров через технологии отслеживания глаз (eye-tracking), указателя мыши и скроллинга показали, что основное внимание посетителя сосредоточено на определенных местах страницы. Это левый верхний угол, верхняя и левая части сайта, а также центр страницы. На основании этого было разработано правило F-образного шаблона, согласно которому посетители сайтов преимущественно «читают» его одинаково: сверху вниз и слева направо, при этом визуально этот формат напоминает букву F. На фоне этого рекомендуем размещать меню горизонтально вверху страницы, вертикально в левой части или одновременно и там, и там.

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

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

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

5. Всегда подсвечивайте активный пункт меню. Помогите пользователю сориентироваться, где он находится, путем подсветки активного пункта меню или использования «Хлебных крошек«.

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

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

8. Группируйте подобные элементы. Под группировкой мы имеем в виду размещение по соседству — не заставляйте пользователя летать по сайту для сравнения похожих товаров или категорий. Кроме того, добавляйте элементы в меню по определенному критерию: например, в горизонтальном меню вверху интернет-магазина бытовой техники можно разместить кнопки на разделы сайта (Доставка, Контакты, Сертификаты, Команды и т.д.), а в вертикальном меню слева — предлагаемые категории товаров (Стиральные машинки, Телевизоры,  Микроволновые печи и т.д.).

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

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

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