Ланч-тайм 281: краткий
перевод свежих статей о digital

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

1) То, где находится меню, — важно

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

2) Пользователь должен понимать, где он находится

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

3) Мегаменю vs выпадающее меню

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

4) Заголовки для ссылок в меню

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

5) Количество разделов

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

6) Не скрывайте меню

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

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

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

Гамбургер-меню появился более 30 лет. Его успели и полюбить, и поненавидеть. Конечно, у него есть и недостатки и преимущества. Тем не менее, гамбургер-меню может быть полезным как для владельцев сайтов, так и для их пользователей.

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

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

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

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

Его все знают

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

Чистенький дизайн

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

Больше воздуха!

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

Прямой доступ

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

С глаз долой, из сердца вон

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

Труднее охват = более низкий рейтинг кликов

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

Те самые лишние телодвижения

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

Ну что, товарисчи, с 17ти-летием нас! Уихаааа!