Иконка-гамбургер, всем известная конструкция из нескольких полосок, расположенных горизонтально, всегда была весьма спорным элементом веб-дизайна. Противоречивые чувства насчет «гамбургера» испытывают как сами дизайнеры, так и пользователи. В последнее время можно наблюдать новую волну обсуждений и различных тестов, связанных с попытками определить место иконки-гамбургера в виртуальном пространстве. Сейчас можно встретить самые разнообразные мнения относительно того, должна ли вообще продолжать свое существования известная нам всем иконка, и если да – то в какой именно форме? Противоречивость и проблемы, связанные с использованием этого вездесущего элемента, происходят из нескольких факторов. Некоторые из них относятся к концептуальным недостаткам иконки-гамбургера, а другие являются следствием неумелого и неправильного использования иконки дизайнерами и разработчиками. Основные принципиальные недостатки иконки достаточно очевидны. Во-первых, наличие дополнительного элемента противоречит главным принципам юзабилити, согласно которым пользователь не должен совершать никаких лишних кликов, в то время как дополнительная надстройка из иконки-гамбургера как раз требует от пользователя совершать на один клик больше. Собственно говоря, такая же проблема характерна для любых кнопок и иконок, выполняющих функцию доступа к пунктам меню. Второй момент проистекает из первого – иконка-гамбургер прячет пункты меню и, соответственно, те возможные опции, которыми пользователь может захотеть воспользоваться. Опять же, рассуждая с позиций юзабилити, пользователь не должен прилагать дополнительных усилий для того, чтобы увидеть, какие именно действия ему доступны – он изначально должен видеть их перед собой. Третий недостаток, присущий самой идее кнопки-гамбургера – при использовании ее на сайте, когда иконка играет роль элемента навигации, она может вводить пользователя в заблуждение относительно того, где именно он находится в данный момент. Что касается недостатков, которые иконка-гамбургер приобрела в процессе эксплуатации, то все они являются следствием бездумного и неупорядоченного использования этого символа. Проблем с идентификацией иконки-гамбургера у аудитории было бы значительно меньше, если бы она всегда безоговорочно означала только одно – доступ к меню. В реальности же можно привести огромную массу примеров нерелевантного использования иконки из нескольких горизонтальных полосок – достаточно вспомнить функцию выравнивания в Microsoft World и множество других аналогичных способов использования нескольких горизонтальных полос. И если более опытная аудитория испытывает меньше проблем с пониманием того, какую функцию, в подавляющем большинстве случаев, выполняет иконка-гамбургер, то среди массового пользователя нередки случаи принципиального непонимания того, чем является иконка с горизонтальными полосками, зачем она нужна и что от нее следует ожидать. Что характерно, многие дизайнеры и эксперты подмечают любопытную тенденцию, выражающуюся в лучшем узнавании (и понимании) иконки среди младшего поколения пользователей, в то время как пользователи постарше чаще испытывают затруднения с идентификацией этого элемента.

Почему иконка-гамбургер продолжает набирать популярность?

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

Меню, спрятанное за «гамбургером» на Geektimes.ru Такой подход во многих случаях напоминает избавление от симптомов вместо непосредственного лечения болезни. Более логичным и дружественным пользователю методом является последовательная работа над упрощением меню и грамотным сокращением или распределением всех опций, которые можно скрыть под «гамбургером». Примечательно, что мобильные приложения, в которых иконка-гамбургер используется особенно часто, становятся со временем все более узкоспециализированными и компактными, решающими конкретные задачи. В таких приложениях, сосредоточенных на какой-либо одной функции, иконка-гамбургер встречается довольно редко, так как лаконичность и отсутствие всего лишнего позволяет обойтись без сокрытия множества опций под одной кнопкой. Хороший пример такого подхода – эволюция приложения Facebook, которое изначально представляло собой достаточно многофункциональный инструмент для осуществления всевозможных операций с социальной сетью. В дальнейшем Facebook совершили удачный ход, разделив в определенном смысле перегруженное приложение на два независимых – теперь вместо иконки-гамбургера можно было обойтись панелью вкладок, а все функции, связанные с отправкой и получением сообщений были выделены в отдельное приложение под названием Facebook Messenger.

Старое мобильное приложение Facebook с иконкой-гамбургером.  

Facebook Messenger, значительно облегчивший функционал основного приложения.

В работе над сайтами можно и нужно использовать аналогичный подход – как показывает опыт и результаты различных тестов, лаконичность и простота всегда будут востребованы пользователем, который по достоинству оценивает ваши усилия по упрощению его пользовательского опыта. Разрабатывая сайт и правильно распределяя весь функционал по различным его частям, вы избегаете скопления большой концентрации всевозможных опций в одном месте. Таким образом, вы не только избавляетесь от необходимости работать с противоречивым «гамбургером», но и сразу же, без дополнительных процедур, предоставляете пользователю все возможности, которые могут его заинтересовать на данном этапе. Еще одна причина роста популярности иконки-гамбургера – распространение концепции mobile first. Мобильные устройства, начинающие заявлять свои права на безраздельное доминирование в сфере интернет-серфинга, предъявляют новые требования к дизайнерам и разработчикам, которым уже приходится не просто «иметь ввиду» мобильный сегмент и уделять внимание адаптивному дизайну, но и все чаще начинать создание сайта не с привычной десктопной версии, а с мобильной. В этом свете иконка-гамбургер обретает новый смысл – даже достаточно компактный и лаконичный сайт в своем мобильном проявлении, как правило, не может похвастаться возможностью безболезненно предоставить пользователю весь необходимый функционал, не скрытый за какой-либо кнопкой. В таком контексте все более узнаваемая иконка-гамбургер оказывается наилучшим решением.

Тестирование и вариации на тему иконки-гамбургера

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

Три одноцветных варианта иконки, использовавшихся в тесте. Результаты теста оказались весьма красноречивыми. Во-первых, все разновидности кнопки показали значительное увеличение конверсии. Во-вторых, самой эффективной оказалась розовая кнопка с иконкой-гамбургером и подписью «Menu» – она повысила число завершенных и оплаченных покупок на 5%. При проведении дальнейших тестов, связанных с попытками найти альтернативу магической конвертирующей розовой кнопке, специалисты не смогли улучшить или хотя бы достичь показателя в 5%, продемонстрированного «гамбургером» в формате цветной кнопки.

Четвертый и самый эффективный вариант иконки, конверсионные показатели которого превзойти не удалось. Второй показательный тест был проведен на ресурсе Booking.com. Изначальная иконка-гамбургер в своем простейшем виде – три белые полоски на синем фоне шапки сайта – была заменена на надпись «Menu», обведенную рамкой. Примечательно, что подобные изменения не оказали решительно никакого влияния на конверсию или поведение пользователей сайта. Они одинаково воспринимали как иконку-гамбургер, так и кнопку «Menu», что говорит о том, что в глазах посетителей Booking.com оба использованных способа спрятать опции меню были равноценными.

Первоначальный вариант с иконкой-гамбургером.

Кнопка «Menu» вместо иконки-гамбургера. Рассматривая результаты подобных тестов, можно сделать два вывода. Первый и косвенный – цвет, оказывающий огромное влияние на пользовательский опыт, также влияет и на восприятие иконки-гамбургера, так что, вероятно, в своих изысканиях не стоит ограничиваться нейтральными белыми или черными полосками с фоном из шапки сайта. Второй и более общий вывод – все решает только А/В тестирование. То, что справедливо для одного сайта и одной группы пользователей, может быть совершенно неприменимо в другой среде с другой аудиторией. Отталкиваясь от результатов чужих наработок, ошибок или исследований, вы должны проводить собственные тесты, чтобы определить, нужна ли вам кнопка меню в формате иконки-гамбургера, и если нужна, то в каком именно виде. Результаты чужих тестов говорят нам об одном – ваше внимание к такой, казалось бы, небольшой детали, как иконка-гамбургер, может напрямую конвертироваться в прибыль.

Пара слов об альтернативных подходах

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

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