Как сделать бургер-меню для мобильных пользователей сайта на WordPress
От автора: перед тем как сделать бургер-меню для сайта, нужно понять, зачем оно вообще нужно. Если вы хотите, чтобы ваш сайт был адаптивным (а кто не хочет?), важно обеспечить, чтобы главное меню навигации работало на маленьких экранах.
Большие меню навигации могут занимать слишком много места на мобильном телефоне, или они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку.
Бургер-меню — один из способов решить эту проблему. Это меню скрыто, пока пользователь не нажмет на него. Причина, по которой оно называется бургер-меню, состоит в том, что символ, который обозначает его, представляет собой три горизонтальные линии, расположенные одна над другой, что немного напоминает гамбургер.
Существуют плагины, которые превращают ваше главное меню навигации в бургер-меню в WordPress (в том числе доступные на Code Canyon), но что, если вы захотите закодировать его в своей теме? В этом руководстве вы узнаете, как это сделать.
Чтобы следовать этому руководству, вам понадобится:
Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
тема, которую вы можете редактировать (если вы используете стороннюю тему, вам нужно создать дочернюю тему)
Стартовое меню
Код, который мы напишем, будет применяться к меню, сгенерированному WordPress с использованием системы меню навигации. Вам не нужно кодировать новое меню для мобильных устройств. (Это одна из часто встречаемых мною проблем, когда сайты имеют разную навигацию на настольном и мобильном устройствах, поскольку это обычно делается в ущерб пользовательскому опыту на мобильном телефоне.)
Я собираюсь продемонстрировать эту технику на примере меню на моем собственном сайте и добавить код в файл header.php, а также в таблицу стилей и новый файл JavaScript. Вот меню для настольных устройств:
Это горизонтальное меню под изображением баннера и заголовком, и над основным контентом. На мобильном телефоне изображение баннера не видно. Я хочу удалить меню и заменить его символом бургера. Когда пользователь нажимает на этот символ, отображается меню. Вот код меню:
Почему все используют иконку «гамбургер» и откуда она появилась Статьи редакции
Читатель ЦП, директор студии Samplar Антон Григорьев перевел для ЦП заметку дизайнера Карлы Урбина о том, как появилась популярная иконка, обозначающая меню в современных мобильных приложениях и сайтах.
Все мы видели иконку-гамбургер. Фактически, многие используют её каждый день. Она стала стандартом в дизайне сайтов и приложений. Прямо сейчас я вижу её в правом-верхнем углу своего Google Chrome.
Google Chrome
В последнее время много спорили, хорошая ли была идея использовать иконку-гамбургер для боковых меню. Но всё больше людей задаются вопросом, откуда она вообще взялась и почему так широко распространилась.
Создатель
Создатель иконки
Придумал её Норм Кокс для Xerox Star, первого в мире компьютера с графическим пользовательским интерфейсом. Норм — сооснователь Cox&Hall и консультант по интерактивному дизайну и дизайну пользовательского интерфейса с 1982 года. Для этого интерфейса он создал ещё иконку документа.
Геофф Элдей, проектировщик программного обеспечения, нашёл создателя и заполучил это видео:
Он связался с Нормом, который был рад поделиться своей историей. Вот что он сказал:
Изображение должно было быть простым как дорожный знак, функционально запоминаться и быть похожим на список, который в результате отображался. Пикселей для работы было мало, но иконка должна была быть простой и чёткой. Для отрисовки изображения у нас было всего 16×16 пикселей или даже 13×13, уже не помню точно.
Однако, после Xerox Star иконка-гамбургер на какое-то время исчезла.
Возрождение
Для интерфейса смартфонов, гораздо меньшего по размерам, дизайнерам пришлось искать способы уместить всё на четырехдюймовом экране. Сейчас сложно найти самое первое приложение, в котором появилась иконка-гамбургер, но первым из запомнившихся пользователям было:
Голосовые заметки в iOS
Похоже, это самое первое появление иконки-гамбургера (кроме Xerox) в роли кнопки меню. Приложение появилось 17 июня 2009 года и было доступно на iPhone 3Gs. Нажатие на иконку открывало список записей и опции. Эпл уже позаимствовали мышь и рабочий стол у Xerox, когда создавали Макинтош, маленькая иконка не значила многого.
Голосовые заметки в iOS
Tweetie for iPad
Tweetie было первым приложением для Twitter. Оно вышло в 2008 году и использовало иконку-гамбургер для списков. Приложение создал Лорен Брихтер, поработавший до этого в Apple (июнь 2006 — июнь 2007). То, что дизайнер из Купертино использовал эту иконку, не похоже на простое совпадение.
Facebook задаёт тренд
Facebook очень сильно повлиял на распространение иконки-гамбургера в связке с боковым меню. В 2008 году они начали с такой сеточной иконки:
Приложение Facebook с сеточной иконкой
Затем в 2009 году они добавили ещё один ряд.
И закончилось всё тем, что в 2010 году сетка превратилась в полоски.
Приложение Фейсбук с иконкой-гамбургером
В приложении уже было боковое меню, всё что они сделали, это просто соединили его с сеткой. Пожалуй, это самое значимое из первых появлений иконки-гамбургера.
Выходит, Apple стала главной причиной возрождения иконки-гамбургера. Они переизобрели смартфон и заставили всех думать над компактным отображением. Вдохновлённые идеями Xerox, они воплощали их в своих интерфейсах. Затем эстафету переняли популярные соцмедиа-приложения, а все остальные последовали за ними.
Сейчас иконка-гамбургер используется на сайтах и в приложениях для вызова бокового меню, а также для отображения списков. Она есть в таких популярных приложениях как:
Reeder
Иконка открывает список ваших подписок.
Reeder
Path
Path был одним из первопроходцев, использовавших иконку-гамбургер (и сейчас использующий) для перехода к навигации.
Path
Также вы можете найти её в навигации Twitter Bootstrap и «Старбакса».
Twitter Bootstrap и «Старбакс»
Она встречается в большом количестве приложений и стала индустриальным стандартом для отображения дополнительных меню.
Не так давно сайты тоже её приняли. Скрытые меню хорошо работают в минималистичном дизайне и потому очень популярны на сайтах дизайнеров.
Будущее
Иконка-гамбургер стала стандартом в дизайне сайтов и приложений и, похоже, обосновалась здесь надолго. Сообщество UX/UI-дизайнеров встретило её не очень тепло. Кто-то говорит, что она ужасна, её нужно отовсюду убрать и заменить на простое меню или удобные вкладки. Кто-то её ненавидит, кто-то любит.
Другие составляют подборки сайтов, где иконка-гамбургер задействована в чудесном минималистичном дизайне. Так может, смысл не в самой иконке, а в том, где и как она используется?
Показывать бургер в мобильной версии что это
Часто на самых инновационных дизайн решениях мы можем увидеть использование меню-гамбургер.
Он позволяет спрятать элементы навигации для того, чтобы в освободившемся месте дизайнер мог осуществить свои творческие идеи. Но насколько уместно и востребовано для пользователя его использование?
Скорость работы с сайтом
Исследование NNGroup направлено на проверку гипотезы: замедляет ли меню-гамбургер работу с сайтом?
В удаленном юзабилити-тестировании приняло участие 179 человек. Испытуемым нужно было найти определенную информацию на мобильных и десктопных версиях сайта с разными типами навигации.
На сайтах с гамбургер-меню, просматриваемых через компьютер, информацию находили в 54% случаев, а на мобильных версиях — в 64% случаев.
В то время, как на десктопных версиях сайтов с классическим или смешанным меню, информацию находили гораздо чаще: 77% и 80% соответственно. Самые лучшие результаты поиска показали мобильные версии сайтов со смешанной навигацией — 85%.
В этом же исследовании выяснилось, что пользователи тратят гораздо больше времени на поиск нужной информации на сайтах с гамбургер-меню, нежели с видимой навигацией. На десктопных версиях сайтов гамбургер замедлил поиск информации на 39%, а на мобильных версиях — на 15%.
Более того, люди тратят больше времени, чтобы воспользоваться гамбургер-меню, по сравнению с видимой навигацией: на десктопной версии сайта — на 5-7 секунд больше, а на мобильных версиях или в приложениях — на 3-5 секунд больше.
Гамбургер замедляет и усложняет процесс поиска нужной информации на сайте. К тому же, в отличии от видимой навигации, людям требуется больше времени, чтобы воспользоваться “гамбургером” как на десктопных, так и на мобильных версиях сайта.
Как взрослая аудитория относится к гамбургер-меню?
Исследование Люка Вроблески направлено на изучение того, сложно ли пользователям более возрастной группы распознавать иконки меню-гамбургера.
В исследовании приняло участие 15 человек. Пока участники занимались поиском конкретной информации на сайте, в это же время отслеживалось, догадаются ли они, что три горизонтальные полоски подразумевают под собой меню или будут использовать другие методы поиска.
В результате, 3 человека из 15 искали информацию на сайте при помощи меню-гамбургера, а остальные 12 человек игнорировали иконку и пытались выполнить задание с помощью прокрутки и других способов. Более того, оказалось, что 9 из 10 пользователей в возрасте 30-50 лет не знают, что такое меню-гамбургер, как он выглядит и для чего используется.
В исследованиях Нильсен Норман Групп за 2019 год представлена следующая статистика: способность аудитории 25-60 лет использовать веб-сайты ежегодно снижается на 0,8% из-за скрытой и интуитивно не понятной навигации. Взрослая аудитория не может найти нужную информацию на сайте, поскольку не понимает, что означает иконка гамбургер-меню.
До сих пор не все пользователи знают что такое меню гамбургер, особенно люди старше 30-50 лет. Поэтому они вынуждены искать информацию при помощи прокрутки или других способов, которые значительно увеличивают время поиска.
Стоит учесть, что с каждым годом всё больше и больше пользователей отказываются от взаимодействия с сайтом из-за скрытой или непонятной навигации.
Резюме
Меню гамбургер создает дополнительный шаг, таким образом замедляя и усложняя процесс поиска навигации на сайте. В условиях высокой конкуренции, это является весомой причиной, чтобы отказаться от его использования в коммерческих проектах. Особенно в проектах, рассчитанных на пользователей возрастной категории от 35 лет и старше. Для данной возрастной аудитории меню-гамбургер является непонятным элементом и в большинстве случаев полностью игнорируется.
Если количество разделов меню настолько велико, что не помещается в размеры экрана, то лучший вариант — когда часть разделов открыта, остальная скрыта в меню-гамбургер. По опыту рекомендуем вам использовать этот вариант как самый оптимальный.
Когда стоит убрать гамбургер-меню из вашего продукта
Один из самых популярных элементов интерфейса в приложениях может не всегда быть подходящим выбором. Почему так происходит и как понять, что гамбургер-меню нужно заменить?
Многие любят хороший гамбургер, одно из самых популярных блюд в мире. Таким же популярным оказалось и гамбургер-меню в мире дизайна, и сегодня я хочу обсудить с вами именно его.
История гамбургер-меню
Гамбургер-меню спроектировал Норм Кокс для Xerox Star, первого в мире графического интерфейса. Норм является сооснователем Cox & Hall и работает консультантом по дизайну пользовательского опыта и взаимодействия с 1982 года. Для того же интерфейса он создал иконку с документом. Правда, после Xerox Star иконка на какое-то время исчезла.
Зато гамбургер-меню восстало из мертвых, когда дизайнерам пришлось придумывать способ вместить все нужное в 4-дюймовый экран смартфона. Хотя сейчас невозможно определить, какое приложение начало использовать эту иконку первым, но точно гамбургер-меню уже используется достаточно много лет. Многие приложения используют эту навигацию, хотя вокруг гамбургер-меню ведется много споров. Даже Apple выступает против его использования.
Я смотрел выступление от одного из UX-евангелистов Apple по имени Майк Стерн на WWDC 2014, который рассказывал, почему не стоит использовать гамбургер в приложениях. Я хочу выделить несколько его аргументов:
“Гамбургер-меню ужасны, потому что меню нет на экране. Видна только кнопка меню. И мой опыт показывает, что разработчики сами это понимают”.
“Помните, что интуитивные системы навигации говорят вам, где вы находитесь, и показывают вам, куда ещё вы можете пойти”.
Это было хорошее выступление с множеством хороших аргументов, которые не поместятся в этой статье.
обнаружили, что с исчезновением кнопки навигации количество кликов по элементам навигации выросло на 30%. YouTube и Facebook сделали то же самое и перешли к меню на основе вкладок, что улучшило удобство их приложений для пользователя.
Гамбургер-меню конфликтует с моделью навигации платформы
Представьте, что вы создали приложение. Вы хотите, чтобы пользователи его исследовали, но прячете всю навигацию внутри гамбургер-меню. Как тогда будет выглядеть кнопка “Назад” при переходе на конкретную страницу?
Вы хотите, чтобы пользователи смогли перемещаться по приложению без проблем, поэтому резервируете часть интерфейса под гамбургер-меню. Но пользователю нужна возможность возврата на предыдущий экран. В таком случае дизайнер может совершить ошибку и перегрузить панель навигации, не оставив места под название экрана. Эта проблема чаще встречается на iOS, где на предыдущий экран можно перейти только при нажатии кнопки или свайпе.
Гамбургер-меню неэффективно
Гамбургер-меню чаще всего встречается в верхнем левом углу приложения или мобильного сайта. Исследование показало, что экраны смартфонов становятся больше с каждым годом, и левый верхний угол становится самым малодоступным местом для пользователей-правшей.
При этом пользователи не могут видеть доступные опции: им придется дотянуться до этого угла два раза, чтобы открыть меню, а затем выбрать нужный вариант. Если нужного варианта в меню не окажется, пользователям нужно будет возвращаться через несколько экранов, чтобы продолжить навигацию через сайт.
Непонятная архитектура информации
Когда вы создаете архитектуру сайта или приложения, то можете забыть, что пользователи ничего о ней не знают. Такой диалог вполне может состояться между дизайнерами:
— Что если пользователь захочет найти свой аккаунт?
— Все просто: нужно нажать на меню, потом на профиль, и там будет вся информация о профиле!
Да, звучит логично. Но дизайнер предполагает, что пользователь знает, что находится в меню до того, когда открывает приложение в первый раз. Но пользователи размышляют не так. Не нужно делать предположений.
Многие люди ориентируются при помощи “информационного чутья”. Когда они видят набор вариантов, они выберут опцию, которая будет ближе всего к тому, то им нужно. например, если пользователи ищут свой аккаунт на сайте, они будут искать слова “профиль”, “аккаунты”, “имя” и так далее. Если они ничего не найдут, они перейдут к плану B и начнут искать слова “зарегистрироваться”, “войти” и подобные. Они продолжат расширять круг понятий, пока не найдут что-то похожее или откажутся от поиска.
Гамбургер-меню совсем не похоже на то, что хотят пользователи. Это маленькая иконка в углу приложения. В ней нет никакой информации, и она не привлечет пользователей, даже если у них кончились варианты. Они могут не догадаться, что ответ спрятан за этими тремя полосками.
Что тогда делать?
Да, мобильная навигация сложна, потому что должна не только подходить под маленький экран, но и быть достаточно крупной для управления пальцами, а также учитывать разные точки назначения. Но это не значит, что ничего нельзя сделать.
Пересмотрите свою архитектуру информации
Люди используют гамбургер-меню, когда не могут добавить больше предметов без последствий. Это работает, только если ваши пользователи действительно используют меню и не путаются в интерфейсе.
Со временем ваше приложение начнет расти и приобретать больше функций, а информационная архитектура будет становиться все сложнее. Проведите исследование пользователей при помощи метода сортировки карточек. Позвольте пользователям разделить информацию на категории согласно интуиции и “информационному чутью”, чтобы узнать, как люди хотят использовать ваше приложение. После этого вы сможете создать новую архитектуру приложения. Сотрудники Mozilla использовали этот метод, когда создавали новый дизайн настроек.
Используйте вкладки
Вкладки кажутся мне лучшим решением для мобильного приложения. Вы можете поместить их в верхней или нижней части экрана: всё зависит от вас, но если вы создаете дизайн для респонсивного веба, лучше будет поместить вкладки в верхнюю часть. С новой архитектурой информации вы сможете выделить 4–5 иконок и текстовых кнопок для главных пунктов навигации. Этот подход применяет Facebook в структуре своих приложений:
Главное преимущество использования иконки и текста — это позволяет вам вместить весь нужный текст, сохранив кнопку достаточно большой. И такое меню доступно, когда пользователь находится глубоко в приложении.
Но мне нужно больше!
Не беспокоитесь, навигацию со вкладками можно расширить. Если вам нужно больше пяти вкладок, вы можете использовать последнюю вкладку для остальных опций. Если у ваших приложений для десктопа есть более надежное меню, возьмите из него главные элементы и превратите их во вкладки. Другие элементы могут быть доступны через вкладку “больше” или “другое”.
Интересную навигационную систему создали в Product Hunt. Они используют текстовую навигацию в мобильной версии и назвали эту вкладку “Навигация”.
А вот что с навигацией сделали в Medium:
Новую навигацию создать вполне можно. Да, это непросто, но UX-дизайнер должен быть готов к сложностям.
Используйте гамбургер-меню для особых случаев
Все вышесказанное не означает, что от гамбургер-меню нужно совсем отказаться. В некоторых случаях оно может быть идеальным выбором. Например, Uber использует кнопку с призывом к действию в качестве основной навигации, а гамбургер-меню — в качестве вторичной. Так они выделяют кнопку “Куда?” в качестве главного элемента.
Они создали заметную иконку меню, которая сообщает пользователю о вариантах навигации за этими линиями.
Заключение
Гамбургер-меню могут быть как хорошим, так и плохим вариантом для навигации. Их можно использовать так же хорошо, как и Uber, но можно и создать с их помощью непонятный и плохой интерфейс. Все зависит от того, как будут выглядеть ваши приложения и сайты и как пользователь будет ориентироваться в вашем продукте. В конечном счете все зависит от контекста.