Меню-гамбургер: способна ли иконка повысить конверсию на сайте?

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

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

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

Согласно исследованию CatalystGroup 52% людей старше 45 лет вообще не понимают значения этой иконки — и это на западном рынке — рынке бургеров и продвинутых бабушек :) У нас же показатель «незнания» скорее всего будет еще выше. Поэтому кликать такой посетитель на гамбургер станет либо после некого обучения на стороннем сайте, либо из интереса, что тоже вряд ли. Однако, у этой фичи существует и ряд сильных сторон, о которых мы и поговорим дальше.

Гамбургеры в юзабилити сайтов: преимущества и недостатки

Согласно концепции минимализма нужно делать вещи понятными и простыми. Поэтому часто с помощью гамбургера можно прятать лишние элементы меню. Это в первую очередь способствует концентрированию пользователей на контенте страницы. Если данный контент содержит конверсионный элемент, то уменьшение количества отвлекающих факторов способствует повышению конверсии. Кроме того, спрятав навигацию за иконку гамбургера, вы избавляете пользователей от проблем выбора и дезориентации — им приходится полностью фокусироваться на содержимом этой страницы, на заранее приготовленном вами пути. «Каком таком пути?» — спросите вы. Не забываем, что существование каждой страницы должно приследовать определенную цель, поэтому всегда четко фокусируйтесь на том, что должен сделать пользователь на странице в процессе достижения макро- (микроконверсии). Используйте понятные и заметные призывы, чтобы подтолкнуть посетителя к нужному действию, но чтобы выглядело это так, будто он сам принял решения. Мы считаем использование меню-гамбургеров уместным, если:

  • Сделать процесс клика по ним очевидным. Оформляйте гамбургер как полноценную кнопку, а не просто украшение сайта. Люди должны понять, что это один из навигационных элементов;
  • Добавить четкий CTA: «прятать» лишние элементы стоит только в том случае, если на странице есть конкретный призыв к действию. Размещать этот призыв в виде кнопки, формы, демо-услуги для скачивания и т.д. можно хоть в районе хедера, хоть по центру страницы, но скрыть отвлекающее внимание от главного действия меню вполне уместно в данном случае и модет стать очень выгодным.
  • Оставить ключевые навигационные элементы видимыми. В некоторых случаях наиболее важные кнопки меню лучше не скрывать за гамбургером. Это позволит дать пользователю быстрый доступ к важным разделам для полноценной работы с сайтом.

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

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