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

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

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

Проблема с иконкой-гамбургером

Многие дизайнеры подвергают сомнению саму ценность иконки-гамбургера. Часто ее воспринимают как символ для стиля iOS, хотя ее использовали еще до Apple.

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

Еще больше проблем с иконкой-гамбургером

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

Во-первых, и пожалуй это главный минус, иконка-гамбургер добавляет лишнее действие в навигацию. Вместо того, чтобы просто кликнуть по пункту меню, пользователь должен сначала открыть меню, кликнув по иконке. Одно из правил веб-дизайна гласит, что действие должно происходить максимум в три клика (конечно где это возможно). Таким образом, решая одну проблему навигации, иконка-гамбургер просто меняет ее на другую. Конечно, это проблема не только данной иконки, но и любой навигации, построенный подобным образом. Вы можете использовать слово «Меню» и получить ту же проблему. Разница лишь в том, что иконку-гамбургер можно использовать только таким образом.

Способ оформления навигации гамбургером скрывает содержимое. С точки зрения UX пользователь не должен совершать действие для того, чтобы узнать какие именно действия он может совершить. Очень легко забыть «опубликовать в Twitter» или «оформить заказ», если эти опции не находятся перед глазами. Посетитель просто не начнет искать ссылку, о существовании которой не догадывается.

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

Что хорошего в иконке-гамбургере?

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

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

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

Хотелось бы сказать, что такой метод решения проблем слишком объемного меню идеален, но это не так. Скорее это наименьшее зло. 

Корень проблем

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

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

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

Лучшее решение

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

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

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

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

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

Автор статьи Paddi MacDonnell

Перевод — Дежурка

Смотрите также:

• Советы по дизайну страницы «404»
• Как превратить случайного посетителя в фаната вашего бренда
• Творческий подход к реализации полей заполнения