Навигация по веб-страницам – процесс очень важный на протяжении сессии посетителя. Основные задачи создателей интерфейса заключаются в том, чтобы пользование сайтом было комфортным и не вызывало сложностей. Не исключено, что Ваш сайт имеет классные фичи, отличные предложения или качественный отменный контент, но вдруг клиенты попросту не могут все это найти? В данном случае необходимо корректно подойти к проектированию меню, что и сделает навигацию по ресурсу качественной с позиции юзабилити.
Нижеприведенные подсказки пригодятся Вам в создании удобного и предельно ясного меню.
- 1.Не экспериментируйте с местом – меню должно быть в привычном месте. Посетители
желают видеть кнопки там, где они размещены и на других ресурсах, посещенных недавно. Исследования поведения пользователей сети с помощью технологии eye-tracking, курсора мышки и скроллинга показали, что основное внимание пользователя концентрируется на конкретных областях страницы. Левый верхний угол и левая часть ресурса, центральная область экрана. На основании этих исследований было создано правило F-образного шаблона, суть которого заключается в том, что пользователи считывают сайт одинаково: сверху вниз и слева направо. Такой формат внешним видом напоминает английскую букву F. Поэтому расположить меню лучше горизонтально сверху страницы, или по вертикали слева.
- 2.Пусть кнопки будут интерактивными!
Многие люди даже не подозревают, что какой-либо элемент меню кликабелен. А если учесть популярную сегодня концепцию минимализма, то такая ситуация становится привычной. Или наоборот сайты очень часто перегружены разнообразной графикой, на фоне которой сложно усмотреть активные клавиши. Меню должно быть отделено от всего остального на страницах. Чем лучше посетитель будет ориентироваться на Вашем сайте, будет понимать его структуру, тем лучше для Вас.
- 3.Визуализация. Современные веб-дизайнеры проявляют креативность в различных формах.
Отсюда тысячи неординарных сайтов. Кроме удобного расположения меню в привычном месте, позаботьтесь о визуальном акцентировании – дайте подсказку человеку, что это активная кнопка, а не просто слова.
- 4.Применяйте контрасты для кнопочных текстов, также не забывайте о фоне. Для юзабилити это чрезвычайно важно.
- 5.Активный пункт должен быть всегда подсвечен. Сориентируйте посетителя на его местоположении, дайте понять, где он находится на сайте. Подсветка кнопок поможет в этом.
- 6.Изъясняйтесь с людьми обыкновенным языком. Терминология и использование жаргона тут не актуально. Отдавайте предпочтение простой и понятной всем речи. Установите, что чаще люди пытаются найти на Вашем ресурсе, а потом адаптируйте текст пунктов соответственно контенту.
- 7.Если сайт крупный, внедряйте многоуровневое меню с превью при наведении курсора.
Пользователь наводит мышь, и меню аккуратно открывается.
- 8.Схожие элементы сортируйте в группы. Группировка подразумевает размещение по
соседству. Посетитель не должен метаться в поисках по сайту, чтобы сравнить похожие продукты. Помимо этого сортируйте элементы по разным параметрам: к примеру, горизонтальное меню будет включать опции: доставка, оплата, о нас, а вертикально можно поместить категории продуктов.
- 9.Размер имеет значение. Обратите внимание: достаточно ли крупны кнопки в Вашем меню,
легко ли их обнаружить на сайте. Оформляйте так, чтобы с одной стороны кнопки бросались в глаза, а с другой – были легко кликабельны. Учитывайте то, что посетители будут заходить на сайт с разных устройств. Продумайте еще один важный момент: стоит ли повторить важные компоненты меню в футере.
- 10. На больших страницах меню лучше закреплять при прокрутке. Посетителям крайне
неудобно крутить вверх, чтобы попасть в другой пункт. В процессе прокрутки меню может быть зафиксировано и человек в любое время им воспользуется.
Резюме
Итак, на последок скажем: совсем не обязательно стараться удивить посетителей эксцентричным меню. Не забывайте о правиле юзабилити – люди дольше сидят на других ресурсах, старайтесь соответствовать их ожиданиям. Взаимодействие с меню должно быть простым и ясным, не вызывая сложностей.
Написать комментарий