5 самых распространенных ошибок в дизайне кнопок навигационной панели

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

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

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

1. Отсутствие выделения выбранной кнопки

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

Без этого они не будут знать, где они. Они могут спутать страницу, на которой они находятся, с другой аналогичной страницей.

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

Стандартный способ выделить форму - подчеркнуть текст командной кнопки. Также можно обвести его в рамку, убевшись, что это не отвлекает пользователя от кнопок “call to action”.

2. Низкий цветовой контраст на выбранной кнопке

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

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

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

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

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

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

4. Отсутствие “clickable” зоны вокруг текста командной кнопки.

Кнопки панели навигации имеют свободное пространство вокруг, которое отделяет их от других кнопок. Вы должны сделать периферийные пробелы “clickable” областью. Это поможет пользователям перемещаться по сайту быстрее и удобнее.

5. Отсутствие эффекта наведения и фокуса на кнопках

Создание эффекта наведения на кнопки навигации поможет легче нажимать на них. Это позволит пользователям понять, когда они находятся в “clickable” области. Без этого эффекта пользователи будут думать, что им нужно нажать на текст командной кнопки, что перейти на нужную страницу.

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

Ведите себя с кнопками панели навигации правильно

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

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