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

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

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

Не выделенная активная кнопка

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

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

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

Стандартный способ выделить пункт меню — нижнее подчеркивание. Вы также можете создать контур по периметру кнопки, однако в этом случае будьте внимательны, чтобы этот элемент не конкурировал с кнопками призыва к действию на этой же странице.

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

Низкий цветовой контраст выделенных кнопок

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

Из-за низкого контраст текст кнопки сложнее прочесть. Пользователь напрягается, чтобы понять куда он кликнул. Получится намного быстрее если пользователь сможет понять где он, лишь взглянув на меню.

Активный пункт меню должен быть контрастнее остальных кнопок. Так посетитель моментально поймет где он.

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

Низкий контраст неактивных кнопок

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

Отсутствие области вокруг текста

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

Отсутствие эффектов наведения мыши

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

Будьте внимательны к кнопкам навигации

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

• 4 простых шага для улучшения веб-навигации
• Какой индикатор загрузки выбрать
• Почему полям заполнения обязательно нужна маска ввода