Что Вы представляете, когда слышите слово «бургер»? Аппетитный, сочный бифштекс, нежно плавающий между двух ароматных булочек! Примерно так бургер видят нормальные люди.
Для дизайнеров и веб разработчиков «бургер» (или, как его чаще называют, «гамбургер») это иконка скрытого меню на сайте или в мобильном приложении. При нажатии на неё, открывается уже полное меню с разделами, находящимися друг над другом, что, собственно, и формирует принцип бутерброда.
Традиционно, иконка меню-бургера выглядит как три короткие полосы, размещенные друг над другом, хотя, конечно, есть и множество других вариаций на эту тему.
Основная задача бургера — экономия места на экране. Небольшая иконка смотрится компактнее, чем 25 кнопок меню в строчку или столбик. Отсюда вытекает и вторая ключевая функция бургера — организация удобной навигации на сайте или в приложении и сбор всех элементов меню в единое пространство.
Основные правила использования меню-гамбургеров
Usability тесты показывают, что применение в дизайне меню скрытого типа всегда снижает конверсию и увеличивает отказы. Происходит это потому, что большинству пользователей привычнее и удобнее сразу нажимать на кнопку с текстом, чем искать её в различных скрытых разделах. Здесь работает устоявшийся принцип UX дизайна— чем глубже и сложнее иерархия и структура сайта, тем сложнее пользователю понять, куда идти и что нажимать.
Это плохая новость. Но есть и хорошая. Процент отказов и «потеряшек» небольшой. И его вполне реально свести к нулю, если соблюдать простые рекомендации при работе с гамбургерами, о которых пойдет речь дальше.
Использование на десктопах и мобильных.
Классические меню всегда дают лучшую конверсию, чем любые другие типы. Это связанно, прежде всего, с привычками пользователей. Особенно плохо знакомы с новыми тенденциями в дизайне люди пожилого возраста.
Мы рекомендуем использовать меню-гамбургер как дополнение к основному меню, если речь идет о десктопном отображении. В мобильной же версии уместить классическое меню практически невозможно, поэтому гамбургеру там самое место.
Но, опять же, использовать гамбургеры повсеместно, без острой необходимости, при наличии большого количества свободного места на экране, мы не советуем.
Меньше экспериментов с расположением.
Пользователи привыкли видеть меню-гамбургер в правом верхнем углу. Это факт, к которому надо относиться с уважением. Все тесты с переносом меню в любое другое место дают неутешительные результаты. В 25% посетители вообще не могут обнаружить меню в течении длительного времени.
Отсюда правило номер один. Без крайней необходимости не стоит устраивать меню переезд в любое другое место, кроме правого верхнего угла. В мобильных версиях положение вверху по-центру тоже является оптимальным.
Классическая форма.
Существуют несколько стандартных форм меню-гамбургеров. Самая популярная и классическая из них — несколько горизонтальных полос (2-5) друг над другом. Есть вариации с вертикальными полосками, крестиком и квадратиками. Именно эти геометрические фигуры наш глаз начинает искать на дисплее инстинктивно.
Изменяя форму иконки на что-то более креативное, вы рискуете, опять же, затруднить пользователю поиск меню. Мы рекомендуем, придерживаться популярных форм.
Контрастность и анимация.
Также, не стоит забывать, что иконка должна быть контрастна к основному фону, не слишком мелкая, и не слишком большая. Использование анимации может несколько оживить дизайн иконки, но, главное, без сложных конструкций.
Спасибо за просмотр!