Что такое гамбургер-меню — и во сколько обходится спрятанная навигация

Три полоски в углу экрана кажутся бесплатным решением. Меню не мешает, шапка чистая, всё помещается.

Цену посчитали. Nielsen Norman Group провела исследование: 179 человек, шесть сайтов, телефоны и компьютеры. На компьютере спрятанным меню воспользовались в 27% случаев. Видимым — в 48%. Почти вдвое чаще.

Исследованию десять лет, и выглядит оно как приговор иконке. Но смотри внимательнее: на телефоне всё не так однозначно.

Что это такое

Гамбургер-меню — кнопка с иконкой из трёх горизонтальных полосок (похоже на булку с котлетой, отсюда и название). Нажимаешь — выезжает список разделов сайта.

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

Проблема в том, что спрятанное меню работает как любая спрятанная вещь. Чтобы им воспользоваться, надо сначала догадаться, что оно есть.

Что показало исследование

NN/g сравнивала три варианта: навигация видна целиком, спрятана под иконку, и комбо — часть пунктов видна, остальное под «Ещё». Цифры из отчёта 2016 года:

• Десктоп. Спрятанным меню пользовались в 27% случаев, видимым — в 48%, комбо — в 50%. Задачи со спрятанным меню занимали минимум на 39% дольше.
• Телефон. Спрятанное меню открывали в 57% случаев, комбо — в 86%, в полтора раза чаще. Время на задачу — на 15% дольше, чем с комбо.
• Ощущение сложности. Со спрятанной навигацией люди оценивали задачи на 21% сложнее, чем с видимой.

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

Любопытная деталь: на телефоне меню открывали охотнее, чем на компьютере. Похоже, сказывается привычка: исследователи пишут, что на телефонах паттерн уже начал складываться, а на десктопе единого стандарта нет. Там и штраф больше.

Почему спрятанное меню проигрывает

Исследователи называют три причины:

• Её не видно. Маленькая иконка на большом экране теряется. Видимое меню занимает больше места — его просто замечают.
• Нет единого стандарта. Одни сайты прячут меню, другие нет. Иконка стоит то слева, то справа, подписана по-разному. Привычка не складывается.
• Не все знают иконку. Три полоски понятны тем, кто много сидит в телефоне. Остальные не догадываются, что это кнопка.

Добавь сюда поиск: на компьютере он заметнее. Не нашёл меню — полез в поиск или ушёл.

Когда гамбургер — нормальное решение

Вывод NN/g не «никогда», а жёстче и точнее одновременно:

1. На компьютере — не прячь. Места хватает, штраф самый большой.
2. На телефоне, если разделов 4–5 — покажи их открыто. Строка вкладок внизу или вверху экрана справится.
3. На телефоне, если разделов больше — прятать разумно. Штраф есть, но альтернативы хуже.
4. Лучший компромисс — комбо. Три-четыре главных раздела видны, остальное под «Ещё». В исследовании именно у комбо были лучшие цифры на телефоне.
5. Сделай кнопку заметной. У двух лучших сайтов исследования меню открывала крупная кнопка со словом — «Browse» у одного, «Menu» у другого, — а не одинокая иконка. Ещё помогает закрепить меню, чтобы оно не уезжало при прокрутке.

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

Как сделать гамбургер, который работает

Самая частая ошибка в сгенерированном коде — иконка сделана картинкой или div с обработчиком клика. С клавиатуры до неё не дойти, скринридер не поймёт, что это кнопка.

Руководство W3C по ARIA описывает это как паттерн «раскрытие»: настоящая кнопка, у которой aria-expanded меняется между true и false. Открывается по Enter и пробелу.

<button aria-expanded="false" aria-controls="site-menu">
  <span aria-hidden="true">☰</span> Меню
</button>
<ul id="site-menu" hidden>
  <li><a href="/catalog/">Каталог</a></li>
  <li><a href="/delivery/">Доставка</a></li>
</ul>

Скрипт при нажатии переключает aria-expanded и атрибут hidden у списка. Слово «Меню» рядом с иконкой — не украшение: оно одновременно подпись для скринридера и подсказка для тех, кто иконку не узнаёт.

Проверь на своём сайте, как он выглядит на телефоне: доходишь ли до меню одной клавишей Tab и видно ли, что оно открыто.

Гамбургер-меню на десктопе — это ошибка?

По данным NN/g — да, если это главная навигация. На компьютере место есть, а спрятанным меню пользуются почти вдвое реже, и задачи занимают дольше.

Сколько пунктов можно показать без гамбургера?

NN/g ориентирует на 4–5 разделов верхнего уровня: столько обычно помещается открыто даже на телефоне. Больше — оставь видимыми главные, остальные убери под «Ещё».

Что сделать, если разделов много, а прятать не хочется?

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

Нужна ли подпись «Меню» рядом с иконкой?

Да, это дёшево и полезно. Слово делает кнопку заметнее и понятнее тем, кто не знает три полоски, а скринридеру даёт внятное название кнопки.