Иконка-гамбургер — достаточно распространенный сейчас элемент веб-дизайна, воображающий собой три горизонтальные полосы, расположенные приятель над втором и символизирующие навигационное меню.
Не обращая внимания на то, что данный вид отображения меню видится частенько, ни пользователи, ни сами разработчики его почему-то не обожают. То же относится и к пользователям мобильных платформ, каковые требуют от мобильных предположений сайтов большей интуитивности.
Иконка-гамбургер, наоборот, вынуждает сделать лишний клик и, по сути, усложняет опыт пользовательского сотрудничества.
- Введение в юзабилити
Результаты тестов
Свободное интернет-издание Exis Web совершило сравнительный анализ иконки формата «гамбургер» и более привычной кнопки с надписью «меню» на предмет того, какой из вариантов приведёт к большему отклику у пользователей.
В таблице ниже вы имеете возможность видеть результаты этого опыта:
Варианты: кнопка со словом «Меню» в рамке дала прирост конверсии в 12,9 % от начального значения; композиция из слова «Меню», рамки-и иконки гамбургера — 5,7%; слово «Меню» без рамки ухудшило начальный итог на 22,2%.
Разумеется, что вариант со словом «Меню» трудится лучше, чем легко иконка-гамбургер.
Разглядим второй пример. В маркетинговое агентство ConversionXL обратилась компания, которая занималась продажей ароматических свечей. Главный поток клиентов шел через мобильную версию сайта:
В контексте оптимизации мобильной версии сайта было решено протестировать иконку-гамбургер подобно обрисованному выше кейсу: были созданы четыре варианта иконок-гамбургеров, со словом «Меню» и без него. Вы имеете возможность видеть их на рисунке ниже:
Четвертый вариант — экспериментальный. Это иконка-гамбургер со словом «Меню», но выполненная в розовом цвете. Цвет был выбран неслучайно: в дизайне сайта преобладал как раз розовый.
Решено было определить, ответствен ли цвет для привлечения внимания визитёров.
Тест продолжался около 6 недель, на сайте побывало более 240 000 пользователей, на любой вариант было нужно около 2 800 приобретений. Результаты были следующими:
Все четыре варианта повысили прибыль. Не число кликов либо просмотров. Они конкретно повысили доходы сервиса. Маленькое изменение в дизайне сайта может принести несколько дополнительных тысяч долларов.
Достаточно хорошо.
А вот и победитель теста:
Скоро был совершён еще один тест. В этом случае маркетологи сравнили уникальный вариант (слово «Меню» вместе с иконкой-гамбургером в розовом цвете) с громадной розовой кнопкой без текста и розовым текстом «Меню». Превзойти итог не удалось ни одной кнопке:
- Как оптимизировать юзабилити иконок интерфейса?
Каковы минусы иконки-гамбургера?
В действительности, первый прототип данной иконки был создан в 1900 году. Как вы осознаёте, тот мир разительно отличался от нынешнего. И люди в том месте были другие.
Сейчас возможно тяжело додуматься, в чем значение знака, не видя его раньше. Быть может, вы уже встречали что-то подобное:
1. Кнопка меню в Motorola
2. Кнопка «Перечень» в MS Word
3–4.Элемент меню ОС Android
Неудивительно, что эта иконка приводит большая часть пользователей в замешательство. В соответствии с управлению по веб-дизайну от маркетинговой компании Norman Nielsen при разработке элементов веб-среды необходимо руководствоваться правилом 5 секунд: в случае если в течение 5 секунд пользователь неимеетвозможности осознать значение иконки, значит данный символ не следует применять, потому, что он не показывает положенный в него суть.
Иконка-гамбургер все еще незнакома практически всем пользователей, а потому и приводит к недоумению.
- 14 современных трендов в веб-мобильных интерфейсах и дизайне
Какие конкретно смогут быть альтернативы иконке-гамбургеру?
Эксперт по маркетингу Луис Эбрю (Luis Abreu) рекомендует не прятать меню, а, наоборот, демонстрировать его как имеется. «Визитёрам будет очень комфортно изучать интернет-ресурс, в то время, когда под рукой у них будет таковой путеводитель».
Но, пожалуй, одно из самых компромиссных ответов предлагает UX-дизайнер Эдриан Замбруннен (Adrian Zumbrunnen): опираясь на кое-какие правила гештальт-психологии (в частности — объекты, расположенные рядом между собой, воспринимаются как единая несколько), он предлагает в начале страницы применять привычное слово «Меню», дополненное иконкой-гамбургером, а при скроллинге — прятать слово «Меню», оставляя лишь те самые «три горизонтальные полосы».
Заключение
Меню формата «гамбургер» имеет плюсы и свои минусы. С одной стороны, оно экономит место на странице и упорядочивает дизайн. С другой — данный элемент ухудшает пользовательский опыт и обычно выясняется совсем непонятен визитёрам всех возрастов.
Что случится конкретно на вашей странице, неизвестно никому, исходя из этого не следует уповать на экспериментальные результаты (каковые, как вы имеете возможность подметить, время от времени обосновывают прямо противоположные вещи), но лучше совершить сплит-тесты и взять четкий ответ.
Высоких вам конверсий!
По данным conversionxl.com, image source redhotsaigon
Случайные статьи:
- Почему исключительные предложения кажутся более привлекательными?
- Какая роль отводится активации в рамках aarrr-модели?
Что если есть только фаст фуд 15 лет подряд
Подборка похожих статей:
-
Как оптимизировать юзабилити иконок интерфейса?
Кроме формирования индивидуальности бренда при помощи цветового оформления и стиля, иконки интерфейса должны прежде всего передавать сущность собственных…
-
Иконки и стартовые наборы для материального дизайна
Превосходно иметь комплект инструментов, что окажется под рукой тогда, в то время, когда он нужен. Что если вы планируете начать работу над новым…
-
Как использовать «аккордеон»-меню для мобильной версии лендинга?
Раскрывающееся меню (accordion menu) способно сэкономить место на экране мобильного устройства, но у него имеется и «побочные эффекты». К примеру,…
-
Идеальное меню навигации: 5 вещей, на которые стоит обратить внимание
Задача любого дизайнера, веб-разработчика и, само собой разумеется, маркетолога пребывает в том, дабы всегда изобретать что-то новое и неповторимое….