Значок трехстрочного меню: что такое гамбургер-меню?

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

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

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

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

На самом деле это икона.

Коснувшись, коснувшись или нажав на значок, он открывает боковое меню с выбором параметров или дополнительных страниц.

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

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

Или так вы можете подумать.

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

Кто «изобрел» значок меню гамбургера?

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

Однако после своего зарождения культовый образ как бы канул в период относительной безвестности.

Возрождение значка можно проследить до появления мобильных устройств. Именно в это время, в 2008 году, трехстрочная иконка начала возвращаться, впервые появившись в приложении Twitter, Tweetie.

В следующем году значок нашел новый дом в интерфейсе приложения Voice Memos для iPhone 3GS.

В интервью Small Business Trends Кокс поделился своим недоумением по поводу возрождения своего творения, заявив: «Я должен посмеяться над тем вниманием, которое в последнее время привлекает этот маленький символ «гамбургер». Примерно девять месяцев назад я не думал о «капле в ведре моей дизайнерской карьеры» более 30 лет!»

Во время мозгового штурма было рассмотрено несколько альтернатив:

• Направленная вниз стрелка в форме треугольника, указывающая направление, в котором появится результирующее меню. Это, однако, было отклонено, так как слишком часто интерпретировалось как указатель.
• Звездочка (*) или символ плюса (+) также рассматривались, но в конечном итоге от них отказались из-за их абстрактного характера.

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

Значок гамбургера, простой, но мощный элемент дизайна, таким образом, укрепил свое место в мире дизайна пользовательского интерфейса, став свидетельством вневременной привлекательности простоты.

Какие веб-сайты или приложения используют этот печально известный значок меню гамбургера?

Некоторые из известных имен, которые используют значок гамбургера в своих приложениях, включают Gmail, Facebook, Reeder, Twitter и Starbucks.

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

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

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

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

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

Действительно, в случае с Time.com слово «меню» пришлось добавить под значком, чтобы было более понятно, что это за символ.

Меньшая зависимость от гамбургер-меню

Различные разработчики выразили свое недовольство значком гамбургера и его недостатками.

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

Но самая известная компания, которая внесла изменения, — это Facebook. Чтобы быть абсолютно ясным, Facebook никогда публично не заявлял, что хочет полностью избавиться от него. Но Facebook раскрывает некоторые мобильные функции, которые ранее были скрыты за значком гамбургера.

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

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

Мы поговорили с Мриналом Десаи, генеральным директором и соучредителем Addappt. Он также стоял за Crossloop, краудсорсинговым приложением для удаленных технологий, которое в конечном итоге было продано AVG Anti-Virus.

«Меню гамбургеров на самом деле не для настроек», — сказал Десаи в интервью Small Business Trends. «Это почти как «больше», или можно даже думать об этом как об альтернативе «панели вкладок». Редко можно увидеть и то, и другое, но мы в Addappt изучили это с помощью прототипа, но в конечном итоге решили пойти по пути «панели вкладок».

«Эти решения часто зависят от цели приложения. Значок гамбургера имеет тенденцию отодвигать функции на второй план, тогда как панель вкладок делает их более очевидными», — добавил Десаи.

Последнее слово за создателем иконок гамбургеров

Так стоит ли использовать значок меню-гамбургера на собственном веб-сайте, в мобильной теме или в приложении?

Мы думаем, что последнее слово должно быть за первоначальным разработчиком иконки.

«Долговечность символа (с 1980-х годов) является свидетельством его простоты, полезности, обучаемости и запоминаемости», — сказал Кокс, когда его спросили о призывах убить значок гамбургера.

«Стремиться «убить» или «отменить» инструмент пользовательского интерфейса или виджет на основе плохого использования или реализации — это немного недальновидно и чрезмерно реактивно».

В этой таблице представлена ​​история значка и его использование в разные эпохи, от его создания до повторного введения и текущего широкого использования, и показано, как его восприятие и применение менялись с течением времени:

Гамбургер, красный значок Фото через Shutterstock