Інтернет Мастерская
Подборка полезных статей для веб-мастеров и заказчиков

версия для печати

Дизайн меню: 15 принципов юзабилити, для того, чтобы помочь пользователям

| KATHRYN WHITENTON | источник: www.nngroup.com

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

Определение: меню навигации – это  список категорий, разделов или функций, как правило, представленный в виде сгруппированных вместе набора ссылок, значков, со стилем, отличным от дизайна остальной части контента.

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

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

Сделайте его заметным

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

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

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

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

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

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

Связь меню с текущем  местоположением

6.      Покажите  пользователю,  где  видимый в данный момент контент  находится в меню. Ответ на вопрос пользователя  "где я?" - является одним из основных, чтобы успешно ориентироваться на сайте. Люди полагаются на визуальные сигналы от меню, чтобы ответить на этот важный вопрос. Не указывать текущее местоположение в структуре сайта является, пожалуй, самой  распространенной ошибкой, которую мы встречаем  в меню сайтов. Часто пользователи заходят не с главной страницы и в этом случае возможность  ориентироваться на сайте для  пользователей  очень актуальна.

Координация меню с пользовательскими задачами

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

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

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

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

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

Сделайте меню удобным для работы

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

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

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

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

Попытка произвести эффект "Ничего себе"

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

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

Поставить ссылку в соцсети

комментарии

Чтобы поместить сообщение или комментарий вам нужно войти под своим логином  »»