Гамбургер-меню в дизайне сайта

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

Введение в гамбургер-меню в дизайне веб-сайта

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

Чтобы помочь вам лучше понять меню гамбургеров, здесь мы обсудим:

• Что такое гамбургер-меню
• Концепция гамбургер-меню в дизайне сайта
• Споры, стоящие за этим
• Альтернативная реализация
• Общие плюсы и минусы гамбургер-меню в дизайне сайта

Что такое гамбургер-меню?

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

Все началось еще в 1981г. на рабочей станции Xerox Star. Норм Кокс, дизайнер графического пользовательского интерфейса того времени, сделал значок для открытия списка скрытых элементов. Намерение состояло в том, чтобы предоставить альтернативное компактное решение для длинных списков опций . Что-то похожее на концептуальное меню правой кнопки мыши на настольных компьютерах. Но до 2009 года меню гамбургеров не пользовалось особой славой. Только когда Facebook и несколько других веб-сайтов снова представили его, гамбургер-меню начало свое путешествие. Это было почти идеальное решение для экономии драгоценного места на экранах мобильных устройств того времени.

Но было ли это?

Вечный спор о гамбургер-меню

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

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

Альтернативное использование и реализация

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

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

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

Общие плюсы и минусы гамбургер-меню в дизайне сайта

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

Плюсы:

• Гамбургер-меню уменьшает беспорядок — оно работает, когда это важно. Правильное использование пространства иногда может означать все для мобильных веб-сайтов и приложений. Учитывая размер экрана в вашем распоряжении, все, что может дать вам больше места, хорошо. Также слишком много элементов на экране может только отвлекать внимание посетителей от нужного контента.
• Делает навигацию понятной — почти каждый сегодня понимает, для чего она используется, когда видит меню-гамбургер. Мы визуальные существа, и заметить значок, который выглядит как три горизонтальные линии в столбце, легко. Особенно, если это напоминает нам об одном из самых любимых блюд быстрого приготовления. Только подумайте, сколько различных значков и логотипов брендов вы знаете по названию.
• Может быть отличным вариантом, чтобы не мешать второстепенному элементу навигации — нет правила, согласно которому вам нужно поместить всю навигацию в меню-гамбургер. Довольно часто одним из лучших решений является оставить основные элементы навигации на веб-сайте и поместить все остальные второстепенные параметры в меню-гамбургер. Это в основном берет лучшее из обоих миров и по-прежнему служит своей цели.

Минусы:

• Важная навигация не видна . Преобразовывая навигацию в гамбургер-меню, вы делаете ее почти невидимой. Несколько исследований подтверждают, что вовлеченность веб-сайта может значительно снизиться по этой причине. Другими словами, некоторые люди не будут нажимать дальше, потому что это не сразу привлекает их внимание.
• Не все это понимают – реже, но все же есть посетители, которые впервые сталкиваются с гамбургер-меню. Это может показаться знакомым, но недостаточно мотивирующим или самоочевидным, чтобы заставить их совершить действие. Они оставят его как есть, потому что нет других указаний на то, для чего он используется. Это меняется, но иногда это может быть неинтуитивно. Особенно, когда дизайнеры используют слишком много свободы и делают ее полностью абстрактной. Или сам «гамбургер» визуально недостаточно различим.
• Меню-гамбургер требует дополнительных «усилий» для использования. Хотя это может показаться глупым, но технически меню-гамбургер требует на несколько шагов больше, чем обычная навигация. Не говоря уже о том, что не все могут дотянуться до него большими пальцами, держа телефоны в одной руке.

Каким бы ни было ваше субъективное мнение, никогда не забывайте учитывать, что является лучшим вариантом для ваших пользователей. Вам может нравиться гамбургер-меню, но в конечном итоге вы не будете его использовать, если обстоятельства выглядят неподходящими. Или вы можете полностью ненавидеть это, но это может быть лучшим решением для вашего сайта или приложения. Помните, что правильное применение гамбургер-мануса в дизайне веб-сайта может быть ситуативным и отличаться от случая к случаю . Чтобы понять, подходит ли это вам, проведите несколько A/B-тестов и посмотрите, что об этом думает ваша аудитория.