Аналитик компании 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-тестирование. Изучайте, как ваша аудитория отвечает на изменения, и выясняйте, что для вас срабатывает лучше.
About the author
