Краткое изложение: используйте этот контрольный список в приложениях и на веб сайтах для поиска контента и использования функций, чтобы убедиться, что ваши меню выполняют свою работу.
Одним из высших приоритетом каждого сайта или приложения должна являться помощь пользователю в навигации. В конце концов, даже самая крутая особенность или наиболее интересное содержание бесполезно, если люди не могут его найти. И даже если у вас есть функция поиска, вы, как правило, не должны полагаться на нее, как единственный способ навигации. Большинство дизайнеров понимают это, и включают в свои дизайны разные формы навигационных меню.
Определение: навигационные меню — это списки категорий контента или функций, в основном представленные в виде набора ссылок или значков, сгруппированных вместе, используя отличный, от основного дизайна визуальный стиль.
Навигационные меню включают в себя меню «гамбургер», но не ограничиваются им.
Меню настолько важны, что вы найдете их практически на всех веб-сайтах, программном обеспечении. Но не все меню одинаковы. Слишком часто мы видим пользователей, которые пытаются справиться либо со сбивающими с толку меню, либо с меню, которыми трудно манипулировать, или которые просто трудно найти.
Избегайте распространенных ошибок, выполняя следующие рекомендации для создания хороших навигационных меню:
Сделайте их видимыми
- Не используйте крошечные меню (или иконки меню) на больших экранах. Меню не должны быть скрыты, когда у вас есть достаточно места, чтобы их отобразить.
- Поместите меню в знакомых местах. Пользователи ожидают найти элементы UI там, где они видели их раньше на других сайтах или в приложениях (например, слева, в верхней части экрана). Заставьте эти ожидания работать на вас, разместив меню там, где люди хотят их найти.
- Заставьте ссылки меню выглядеть интерактивно. Пользователи могут даже не осознать, что это меню, если опции не выглядят интерактивно. Меню может показаться просто декоративным рисунком или заголовком, если вы примените слишком много графики, или будете слишком строго придерживаться принципов плоского дизайна.
- Убедитесь, что ваши меню имеют достаточный визуальный вес. Во многих случаях, чтобы быть заметными, меню, которые размещаются в знакомых местах не требуют большого белого пространства или насыщенной цветности вокруг себя. Но если дизайн беспорядочен, то меню, которым не хватает визуальной выразительности может легко потеряться в море графики, рекламы и заголовков, соревнующихся за внимание зрителя.
- Используйте для ссылки такой цвет, который контрастирует с цветом фона. Удивительно, как многие дизайнеры игнорируют рекомендации по контрасту; навигация по цифровому пространству и без упорного вглядывания в экран для прочтения меню сильно дезориентирует.
Даже дизайнеры, знакомые со всеми этими рекомендациями могут в конечном счете создать меню, которые пользователи просто не заметят, потому что довольно сложно объективно оценить свою собственную работу — особенно по субъективным критериям, вроде, заметен ли тот или иной элемент. Если вы знаете где он (потому, что вы его там разместили), то, конечно, вы его заметите! Вот почему так важно, проводить пользовательское тестирование ваших меню.
Сообщайтесь с настоящим местоположением
- Скажите пользователям, «где» расположен видимый в данный момент экран внутри меню опций. «Где я?» является одним из основных вопросов, на которые пользователь должен быть способен ответить, чтобы успешно ориентироваться. Пользователи полагаются на визуальные подсказки в меню (и в других элементах навигации, таких, как хлебные крошки), чтобы ответить на этот важный вопрос. Плохое отображение текущего местонахождения, наверно, единственная, наиболее частая ошибка, встречающаяся в меню веб сайтов. По иронии, как раз именно эти меню наиболее необходимы для ориентирования пользователей, поскольку посетители часто заходят на веб сайт не с домашней страницы .
Координируйте меню с пользовательскими задачами
- Используйте понятные метки. Выясните, что ищут пользователи, и используйте категорийные метки, которые знакомы и актуальны. Меню — это не место для выдуманных слов и внутреннего жаргона. Придерживайтесь терминологии, которая четко описывает контент и функции.
- Сделайте ссылки легкими для просмотра. Вы можете сократить время, которое пользователь потратит на чтение меню выровняв по левой стороне вертикальные меню, и обозначив их ключевыми понятиями.
- Для крупных веб — сайтов, используйте меню, чтобы позволить пользователям просматривать низкоуровневый контент. Если обычный пользовательский просмотр включает в себя путешествие на несколько уровней — мега-меню (или традиционные выпадающие списки) могут сэкономить время пользователей, позволяя им пропустить пару уровней.
- Предоставьте локальные навигационные меню для тесно связанного контента. Если люди часто хотят сравнить схожие продукты или выполнить ряд задач в рамках одной секции, сделайте эти страницы видными из локального навигационного меню, а не заставляйте людей скакать вверх и вниз по иерархии.
- Усильте визуальную связь. Изображения, графика, или цвета, могут помочь пользователям понять пункты меню. Но убедитесь, что изображения поддерживают пользовательские задачи (или по крайней мере не делают их сложнее).
Сделайте так, чтобы ими можно было легко управлять.
- Сделайте ссылки меню достаточно большими для того, чтобы по ним можно было удобно нажимать или кликать. Расположенные близко друг к другу ссылки являются огромным источником разочарования для мобильных пользователей, а также делают широкоэкранные дизайны излишне сложными в использовании.
- Убедитесь в том, что выпадающие списки не слишком малы или слишком велики. Слишком короткие Hover — activated выпадающие списки — быстро приводят в отчаяние, потому что они, как правило, исчезают в то время как вы пытаетесь попасть в них мышью, чтобы кликнуть. С другой стороны, слишком длинные вертикальные выпадающие списки, затрудняют доступ к ссылкам в нижней части списка, потому что они могут быть обрезаны ниже края экрана и требуют прокрутки. И, наконец, слишком широкие hover — activated выпадающие списки, легко принять за новые страницы, приводя пользователя в замешательство, почему страница изменилась, даже если он ничего не нажимал.
- Рассмотрите «липкие» меню для длинных страниц. Пользователи, которые достигли низа длинной страницы могут столкнуться с необходимостью долгой прокрутки, прежде чем смогут вернуться к меню в верхней ее части. Меню, которое остаются видимым в верхней части окна просмотра даже после прокрутки может решить эту проблему, и особенно приветствуется на маленьких экранах.
- Оптимизируйте меню для легкого физического доступа к часто используемым командам. Для выпадающих меню, это означает, расположение наиболее распространенных элементов, ближе к самой кнопке, которая запускает выпадающий список (чтобы мыши или пальцу пользователя не пришлось ехать далеко). В последнее время некоторые мобильные приложения даже начали возрождать меню «пирог», которое держит все пункты меню рядом, располагая их по кругу (или полукругом).
Удивите пользователя инновационными и интересными методами взаимодействия меню
Хотя, вообще… не стоит.
Произведение впечатления на своих пользователей крутыми эффектами не должно быть одним из приоритетов при создании меню. Другие дизайнеры могут быть поражены новым дизайном меню, но пользователи, как правило, гораздо сильнее впечатляются широким, красиво представленным контентом, к которому можно легко получить доступ из привычного меню.
Конечно, иногда новые виды меню улучшают пользовательский опыт. (Мега-меню являются отличным примером этого явления.) Или, иногда новые технологии настолько отличаются, что некоторые из этих рекомендаций станут неприменимы — например, рекомендация по визуальному весу не имеет значения применимо к системам распознавания голоса. Но таких случаев очень мало, и большинство интерфейсов будет проще использовать, если они будут придерживаются этих принципов.
