Тестирование «гамбургера»: Может ли популярная иконка меню в приложениях увеличить доход компании

Аналитик компании Markitekt Пип Ладжа поделился исследованиями использования иконки «гамбургер», которая пользуется популярностью среди разработчиков приложений. Согласно его данным, обозначение меню «гамбургером» может привести к увеличению дохода компании. Однако аналитик советует не злоупотреблять удобством пользователя.

#самизнаетекакиекнопки

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

Дизайнеры приводят убедительные аргументы против «гамбургера». Он неинтуитивный, незаметный и создает путаницу. Но далеко не все ненавидят его. Например, портал Exis Web провел тест «гамбургера» против слова «Меню»:

Хотя тест проходил только пять дней, полученные предварительные результаты показали, что слово «Меню» в сочетании с иконкой «гамбургера» или кнопкой срабатывало лучше, чем простой «гамбургер». А представители портала Booking.com тоже протестировали кнопку — в их случае они не увидели никакой разницы в результатах.

Тестирование «гамбургера»

Один из клиентов Markitekt — интернет-магазин, занимающийся продажей ароматических свечей. В их случае мобильный трафик был важнее, чем пользователи, заходящие на сайт со стационарных компьютеров. Эксперимент длился 30 дней:

В тестировании участвовали несколько вариантов: слово «Меню» в сочетании с иконкой «гамбургер» и без нее.

Дополнительно Markitekt сделали еще один вариант, в котором иконка «гамбургер» и слово «Меню» были розовыми (один из цветов сайта).

Тестирование проводилось в течение шести недель. Общий размер выборки составил около 240 тысяч пользователей, на каждую вариацию пришлось почти 2800 покупок:

Основной результат: все четыре варианта принесли компании больше дохода, чем контрольный образец. «Такой результат приведет вас к дополнительной паре сотен тысяч долларов в год. Неплохо для простой смены иконок», — отмечают аналитики Markitekt.

Победителем оказался вариант с розовым цветом и словом «Меню»:

Markitekt также провели трехнедельный контрольный тест, пытаясь посмотреть как поведут себя другие варианты, но никакого прогресса команда не добилась — победитель первого теста оказался лучшим:

Почему иконка «гамбургер» может вводить в заблуждение

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

Эти иконки означают:

Кнопка «Меню» в устройствах Motorola.
Кнопка маркированного списка в Microsoft Word.
Иконка Composition в требованиях Android Holo.
Иконка раскрытия контекстного меню на Android.

Не удивительно, что она может запутать, считает Пип Ладжа. В руководстве по созданию иконок дизайнер Норман Нильсен рекомендует пользоваться правилом пяти секунд: «Если на то, чтобы придумать подходящую иконку у вас уходит более пяти секунд, то маловероятно, что такая иконка сможет эффективно передать свое значение».

Что лучше

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

UX-дизайнер Адриан Цумбруннен предлагает для начала устанавливать контекст:

Мы знаем из теории принципов Гештальта, а если быть точнее из принципа близости, что объекты, которые расположены близко друг к другу, воспринимаются как группа. Так почему бы не создать начальный контекст используя этот принцип, и затем, когда пользователь начинает прокручивать материал, сделать так, чтобы иконка «Меню» исчезала?

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

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

Тестируйте свою иконку меню, проводите и пользовательские тесты и A/B-тестирование. Изучайте, как ваша аудитория отвечает на изменения, и выясняйте, что для вас срабатывает лучше.