Протухнет ли гамбургер? Или UI/UX дилемма мобильного меню.
Немного о гамбургере
Проектирование интерфейсов — дело увлекательное и непростое. С приходом новых устройств, паттернов поведения пользователей и сложностей в пользовательском опыте перед проектировщиком интерфейса становится задача разработать удобный для пользователей продукт, по возможности не нарушая привычные для них сценарии.
Самой большой привычкой для пользователей стала иконка меню, называемая в простонародье гамбургером из-за сходства с Биг Маком. Придумал ее Норман Кокс в 1982 году для Xerox Star, первого компьютера с графическим интерфейсом.
Задача состояла в том, чтобы создать простой и понятный знак, который можно вписать в квадрат размерами 16х16 пикселей. Но иконка исчезла с мониторов и вновь появилась только с появлением iPhone 3Gs в ряде приложений под iOS. И понемногу начала распространяться по сети среди приложений, сервисов и соцмедиа.
Первопроходцем, начавшим использовать иконку в контексте перехода к навигации, стал сервис Path.
Замена гамбургеру
В последнее время многие могли заметить появление новых типов меню на мобильных устройствах. Так, к примеру, в гайдлайне Material design от Google появилось Bottom Menu, а в iOS — Tap Bars.
Пример с официальной документации Google Material Design
https://material.io/guidelines/iOS TapBars в приложении
Google пока не может отказаться от иконки гамбургера в верхнем левом углу, и нижнее меню используется как меню быстрого доступа к главным разделам приложения или сайта.
Приложения под iOS также не избавились от привычного всем гамбургера, но переносят его в Tap Bar, как например это делает Facebook.
Заметно одно: практически вся навигация переезжает с верхней части экрана устройства в нижнюю. Давайте разбираться, чем это вызвано.
Причины переезда вниз
Главная причина – новые устройства и физиология человека.
Когда только появился прорывной iPhone , экран его был всего 4 дюйма, Apple ориентировался больше на поколение миллениумов. Большому пальцу одной руки легко доступна любая точка экрана.
Давайте посмотрим статистику
Статистика пользования мобильными устройствами и приложениями у разных поколений (кликабельно)Но технологии не стоят на месте, дизайн смартфонов меняется, экраны увеличиваются и возникает дискомфорт в управлении приложениями, сайтами и сервисами. Приходится либо неестественно далеко тянуться, либо подключать вторую руку, что рушит привычные паттерны поведения пользователя. Он начинает искать новые сценарии, или проектировщики делают это за него.
Все это является причиной смещения меню в нижнюю часть или даже полный отказ от привычного гамбургера.
Так уйдет или нет?
Этот сокровенный вопрос остается в подвешенном состоянии. На ресурсах, где слишком большое количество разделов и категорий, скорее всего, привычный гамбургер никуда не денется. Возможно переместится в нижнюю панель, но точно останется или приобретет несколько иной вид. К примеру, сейчас активно начинает использоваться кнопка «Еще» (троеточие), как в обновленном приложеним Битрикс24.
Битрикс24 мобильное приложение новый Bottom Menu
Итак, вряд ли нас в ближайшее время ждет полное забвение данной иконки и паттерна взаимодействия с ним. Значок дискеты для сохранения документа до сих пор живее всех живых, хотя молодое поколение никогда не видело такого носителя.
Преобразования неизбежны в любом случае, и они уже весьма активно происходят, но до финиша еще далеко. Используйте новые паттерны, приучайте пользователей к успешному опыту взаимодействия. Главное, не стойте на месте.
Как редактировать мобильное меню в Webflow – GmodZ.ru
Простое и интуитивно понятное меню навигации — один из важнейших элементов дизайна вашего веб-сайта. Он действует как карта, направляя посетителей за пределы главной страницы. С ростом числа людей, использующих Интернет на своих мобильных устройствах, ваш веб-сайт также должен иметь удобное меню навигации для мобильных устройств.
К счастью, Webflow упростил добавление сворачиваемой строки меню-гамбургера, которая упростит ваш мобильный сайт. Продолжайте читать, чтобы узнать, как редактировать это мобильное меню в Webflow.
Как добавить панель навигации
Гамбургер-меню — жизненно важный элемент дизайна при работе с ограниченным горизонтальным пространством. Это устраняет необходимость в громоздкой фиксированной панели навигации, которая занимает ценное пространство.
В Webflow это меню и его функции встроены в элемент NavBar. Чтобы добавить этот элемент в свой дизайн, нужно выполнить четыре простых шага:
- Нажмите значок “+” значок в верхней части левой панели, чтобы открыть окно “Добавить” панель.
- Прокрутите вниз до “Компоненты” раздел.
- Нажмите и удерживайте “NavBar” element.
- Перетащите элемент в заголовок страницы.
Как изменить мобильное меню
После того как вы добавили панель навигации на свой веб-сайт, вы можете придать этому меню стиль и индивидуальность несколькими различными способами.
Как добавить дополнительные ссылки в меню
Элемент панели навигации содержит кнопку меню и меню навигации, причем последнее содержит навигационные ссылки. Когда вы добавите его в свой дизайн, будет несколько заполнителей ссылок, которые вы можете удалить или изменить вместе со ссылками на свой веб-сайт.
Выполните следующие действия, чтобы добавить дополнительные навигационные ссылки:
- Нажмите на любой элемент внутри панели навигации.
- Перейдите к разделу “Настройки элементов” панель справа.
- Нажмите значок шестеренки, чтобы открыть &ldquo ;Настройки.”
- Перейдите к “Настройки NavBar” раздел.
- Коснитесь кнопки “Добавить ссылку” button.
Теперь, когда у вас есть достаточное количество ссылок для всех релевантных страниц вашего веб-сайта пришло время сделать реальную ссылку.
- Выберите навигационную ссылку.
- Перейдите в раздел “Настройки элементов” панель.
- Найдите “Настройки ссылки”
- Введите указанный URL-адрес веб-страницы в поле “URL” field.
Как изменить анимацию меню
В Webflow вы также можете изменить способ отображения мобильного меню, когда посетители нажимают кнопку меню. Вы можете выбрать один из трех типов анимации раскрытия:
- Раскрывающийся список – По умолчанию мобильное меню выпадает из панели навигации, когда посетитель нажимает кнопку меню. Он будет занимать всю ширину окна браузера.
- Справа – Если вы выберете эту анимацию раскрытия, ваше мобильное меню появится с правой стороны экрана. Это меню займет всю высоту окна браузера.
- Над левым – Этот тип меню идентичен верхнему правому, за исключением того, что меню навигации перемещается с левой стороны экрана.
Чтобы установить желаемую анимацию раскрытия, выполните следующие действия:
- Выберите любой элемент внутри панели навигации.
- Перейдите в раздел “Настройки элементов” панель в правой части экрана.
- Коснитесь значка шестеренки, чтобы открыть “Настройки”
- Навигация в “Настройки NavBar”
- Нажмите “Тип” option.
- Выберите нужный стиль в раскрывающемся меню.
В “Настройки NavBar” раздел, вы также можете управлять следующими параметрами:
- Замедление открытия: тип кривой, используемый для анимации открытого перехода.
- Замедление close: тип кривой, используемый для анимации перехода при закрытии.
- Duration: сколько времени требуется для отображения меню.
Обратите внимание, что продолжительность перехода измеряется в миллисекундах.
Как изменить стиль меню
Webflow упростил стиль любой части панели навигации, что позволяет легко вписать мобильное меню в дизайн вашего веб-сайта.
Стиль кнопки меню , выполните следующие действия:
- Нажмите кнопку меню.
- Перейдите к “Стиль” панель справа (значок кисти).
Панель «Стиль» позволяет изменить каждый аспект кнопки меню. Чаще всего дизайнеры меняют цвет и размер фона кнопки.
Чтобы изменить цвет фона, выполните следующие действия:
- Перейдите в раздел “Фоны”
- Нажмите значок в виде капли, чтобы открыть “Цвет Пикер»
- Выберите нужный цвет.
Если вы хотите изменить размер значка гамбургера, выполните следующие действия:
- Перейдите к разделу “Типографика” раздел.
- Увеличьте или уменьшите размер значка в “Aa” поле.
Вы также можете изменить цвет значка в поле выше, отмечена буквой A и цветной каплей.
Несмотря на то, что существует множество способов настроить кнопку меню, вы не можете заменить ее текстовым элементом или пользовательским изображением.
Мобильная навигация стала проще
Разрабатывая мобильное меню, вы хотите получить максимальную отдачу от довольно ограниченного пространства. Итак, постарайтесь не перегружать меню опциями, чтобы не сбивать посетителей с толку. Кроме того, убедитесь, что пункты меню короткие, четкие и легко читаемые.
После этого вы можете поиграть со стилем и анимацией меню, чтобы заинтересовать посетителей на каждом этапе пути.
Вы пробовали добавить мобильное меню на свой сайт? Сколько вариантов вы включили? Дайте нам знать в разделе комментариев ниже.
Как использовать гамбургер-меню на настольных веб-сайтах | by Melody
Фото Startup Стоковые фото с PexelsМы все видели гамбургер-меню во многих приложениях, мобильных и даже настольных веб-сайтах… но какой из них является наиболее эффективным способом их использования?
Для мобильных форматов они, скорее всего, будут использовать гамбургер-меню, потому что дизайнеры пытаются втиснуть всю свою информацию и контент на этот крошечный экран.
Но какое оправдание для использования гамбургер-меню на настольном веб-сайте? Здесь так много места, чтобы разместить горизонтальное навигационное меню, но некоторые веб-сайты все еще предпочитают меню-гамбургер.
Иногда лучше иметь его. На ум приходит несколько веб-сайтов, которые чрезвычайно загружены контентом и нуждаются в умном и эффективном способе организации своего контента для своей аудитории.
Гамбургер-меню помогает этим веб-сайтам легко и просто организовать и представить информацию. Вот два примера веб-сайтов, которые отлично используют гамбургер-меню:
Reddit.com
r/strangerthings Reddit — один из моих любимых веб-сайтов, потому что есть сабреддит для буквально все, что вы можете себе представить. Мне не стыдно признаться, что я часами просматривал и читал пост за постом из разных сабреддитов. Я думаю, что причина того, что я могу сделать это, не теряя рассудка, заключается в том, как организован сайт.
Когда я захожу на Reddit, я обычно начинаю с главной страницы, где отображаются самые популярные сообщения из субреддитов, на которые я подписан. После того, как я проверю, что происходит на главной странице, я перехожу к меню гамбургеров в верхнем левом углу и решаю, какой сабреддит я хочу изучить еще больше в этот день.
Весь этот процесс всегда очень прост для меня как пользователя, и я могу найти нужную информацию, не расстраиваясь.
Reddit.comReddit также имеет горизонтальное меню на первой странице, но я, честно говоря, никогда туда не заглядываю. Возможно, это потому, что я так привыкла к их гамбургерному меню.
Поскольку существует бесконечное количество субреддитов, пользователю может быть сложно пройти через горизонтальное меню навигации.
Позволяя своим пользователям персонализировать свое собственное гамбургер-меню с помощью своих любимых субреддитов, Reddit позволяет своим пользователям невероятно легко поглощать как можно больше контента.
Youtube.com
YouTubeНастольная версия сайта Youtube также использует гамбургер-меню для своего контента.
Неудивительно, что Youtube — еще один веб-сайт, на котором я могу часами смотреть видео экскурсий по квартирам. Правдивая история.
Youtube похож на Reddit, но сильно отличается по содержанию. Они похожи, потому что у них обоих есть большой объем контента для предоставления своей аудитории. Reddit использует субреддиты для организации своего контента, а YouTube использует каналы и категориальные плейлисты.
Мне нравится думать о каждом канале YouTube как о сабреддите информации. В гамбургер-меню на YouTube вы увидите список категорий видео. После того, как вы войдете в свою учетную запись, все каналы, на которые вы подписаны, появятся под категориями.
YouTube YouTube не имеет горизонтального меню, но у них есть большая панель поиска, которая эффективна, потому что в большинстве случаев люди заходят на YouTube с целью найти конкретное видео.
Поскольку на YouTube так много каналов и категорий видео, имеет смысл иметь минимальное горизонтальное навигационное меню, предназначенное для панели поиска, и оставить меню-гамбургер для остальной части навигации.
Выводы
Это правда, что гамбургер-меню лучше всего использовать на мобильных устройствах из-за нехватки места на экране. Однако в случае Reddit и YouTube использование гамбургер-меню в их настольных версиях более эффективно из-за огромного количества контента, содержащегося на каждом сайте.
Гамбургер-меню на этих веб-сайтах позволяют пользователям персонализировать свои собственные меню, добавляя в них свои любимые сабреддиты или каналы YouTube.
Если ваш веб-сайт насыщен контентом, для навигации будет удобнее использовать гамбургер-меню. Пользователи смогут быстрее и проще достичь своих целей, если контент будет хорошо организован. Кроме того, выбор того, что включить в их гамбургер-меню, может быть полезным, потому что пользователи будут чувствовать, что веб-сайт создан специально для них.
Стоит ли избегать гамбургер-меню на настольных веб-сайтах?
в Дизайн
Панель навигации является обязательной, если на вашем веб-сайте более одной страницы. Эта важная часть — то, что объединяет большинство веб-сайтов. Когда дело доходит до разработки параметров меню, вы можете выбрать меню-гамбургер, горизонтальное навигационное меню, расширяемое навигационное меню, мегаменю, раскрывающееся меню, активируемое наведением, и другие. Однако одна из этих реализаций дизайна пользовательского интерфейса вызвала немало споров. Мы говорим о дизайн гамбургер-меню и его реализация для настольных веб-сайтов . TechCrunch назвал гамбургер-меню «дьяволом».
В этой статье мы подробно рассмотрим преимущества и недостатки реализации этого варианта, а также узнаем, следует ли его избегать, особенно для настольного веб-сайта.
Что такое гамбургер-меню? При просмотре таких веб-сайтов, как Youtube, вы могли заметить значок тройной полосы, обычно расположенный в верхнем левом или правом верхнем углу веб-страницы.
Это значок навигации в виде гамбургера, и он используется для хранения всех параметров навигации. Вы также можете назвать его боковым меню или панелью навигации, поскольку оно скрывает все ваши функции навигации и открывается только при нажатии на него. Значок меню гамбургера получил свое название, потому что дизайн напоминает сложенный гамбургер.
Кнопки-гамбургеры широко используются на мобильных сайтах, в приложениях и на сайтах с адаптивным дизайном. Это популярный вариант, поскольку место на экране мобильного устройства ограничено. Однако вы также найдете значок меню гамбургера на веб-сайтах для настольных компьютеров.
Стоит ли использовать гамбургер-меню на своем веб-сайте? Часто, когда пользователи впервые попадают на ваш веб-сайт, они ищут ваше меню, так как это самый простой способ узнать, что предлагает веб-сайт и как найти путь к интересующим их продуктам/услугам/страницам. . Их первое взаимодействие с вашим онлайн-бизнесом имеет решающее значение для определения того, превратятся ли они в клиентов или уйдут и больше никогда не вернутся.
Это основная причина, по которой вам следует обратить внимание на элементы навигации и на то, какие стили навигации вы будете реализовывать.
Давайте посмотрим, когда скрытие основной навигации на рабочем столе может иметь некоторые преимущества без ущерба для пользовательского опыта.
- Ваш веб-сайт содержит второстепенных (вторичных) страниц, которые не привлекают столько трафика, сколько основные страницы, такие как услуги, о нас, блог, контакты и т. д. Скрытие этих элементов навигации сделает ваш веб-сайт страницы чище, а если поместить их в боковое меню, ваш сайт будет казаться более организованным и гладким.
- Если ваш веб-сайт требует настроек профиля или списков , сгруппировать их внутри значков-гамбургеров кажется более интуитивно понятным и логичным. Все настройки профиля, списки желаний, избранное, лайки, сохраненные элементы или списки не будут мешать пользователю перемещаться по его шаблонам навигации.
- Если у вас есть веб-сайт электронной коммерции, второй уровень взаимодействия с профилем пользователя, списком пожеланий, корзиной, поиском и избранным можно сохранить в меню-гамбургере, чтобы не загромождать веб-страницу.
- Когда у вас есть страницы с одиночным и четким призывом к действию (CTA).
Три встроенных значка легко узнаваемы благодаря их широкому использованию в приложениях, компьютерном программном обеспечении и видеоиграх. Пользователи знают, для какой цели это служит. Более того, бургер-меню придает вашему веб-сайту ощущение чистоты , поскольку оно не перегружает пользователей слишком большим количеством опций. Наконец, бургер-меню — отличный вторичный инструмент навигации , где вы можете указать все менее важные параметры.
Проблемы с гамбургер-меню на настольном веб-сайте Для настольных пользовательских интерфейсов скрытое меню, такое как значок гамбургера, менее удобно в использовании, чем видимое меню, такое как навигационные ссылки в верхней части страниц.
1. Возможность обнаружения
При обсуждении дизайна рабочего стола с большим пространством на экране мы заверяем вас, что навигационные ссылки верхнего уровня намного лучше, чем панель навигации. Когда пользователи этого не видят, для них этого не существует. Поскольку все функции и контент скрыты в меню боковой панели, пользователи с меньшей вероятностью будут использовать навигацию. Чтобы посетители веб-сайта обнаружили доступные параметры, они должны сначала коснуться значка меню, и для поиска того, что они ищут, требуется больше времени. В исследовании Nielsen Norman Group 39% пользователей настольных компьютеров медленнее выполняли задачи и сочли задачу сложной, когда элементы навигации были скрыты в боковом меню. Поэтому, если вы не покажете пользователям все их варианты, вы рискуете остаться незамеченной. Более того, с навигацией по ящикам вероятность обнаружения снижается более чем на 20%, чем на сайтах с навигацией верхнего уровня или комбинированной навигацией.
2. Важность элемента
Скрытие элементов в гамбургер-меню автоматически уменьшит их значение. Когда вы считаете что-то важным, вы пытаетесь представить это людям как можно больше, но, помещая их на меньшую сцену, вы считаете их не такими важными, как другие. Даже когда посетители знакомы с бургерной навигацией, они все равно требуют, чтобы они открывали пункты меню, и только после этого они могли видеть и достигать своих целей. Этот распространенный шаблон по-прежнему вызывает трения и может повлиять на путь пользователя.
3. Вовлеченность
Согласно тому же исследованию, упомянутому ранее Nielsen Norman Group, они узнали, что пользователи настольных компьютеров использовали скрытую навигацию только в 27% случаев. Напротив, видимые меню использовались в два раза чаще. Тем не менее, на мобильных устройствах скрытая навигация работала лучше, но все еще не превосходила веб-сайты, которые использовали комбинированную навигацию (видимые параметры навигации и скрытая навигация).
Это может привести к снижению уровня вовлеченности на вашем веб-сайте из-за дополнительного шага по поиску и переходу по скрытым ссылкам.
4. Многоуровневое меню
Если на вашем веб-сайте есть конкретная потребность в меню категорий и организации подкатегорий, сложно включить все в скрытое меню, сохраняя при этом легкодоступность и видимость. Меню рабочего стола, перечисленное в верхней части экрана, на горизонтальной панели навигации, добавление подкатегорий в раскрывающееся меню кажется естественным, а архитектура веб-сайта логичной. Однако вы можете добавить подкатегории к каждой основной категории в вашем списке меню, но вы рискуете визуальной простотой, а ее структура не кажется естественной.
5. Дополнительный шаг
Некоторые могут подумать, что дополнительный щелчок не кажется чем-то особенным. С точки зрения того, как мы, как пользователи, используем Интернет и ожидаем, что для всего потребуется как можно меньше кликов и шагов, добавление небольшого дополнительного шага в процесс навигации может потерять интерес пользователей, потому что они не хотят прилагать усилия.
Веб-сайт, который прост в использовании и не требует лишних кликов, имеет первостепенное значение для дизайна вашего пользовательского интерфейса.
Мы считаем скрытую навигацию менее эффективной, чем горизонтальное меню, например, на десктопной версии сайта. Мы думаем, что скрытая навигация малозаметна и ее трудно заметить на большом экране рабочего стола. Более того, на больших экранах бургер-меню бессмысленно . Пользователи хотят видеть, что предлагает ваш сайт, и как можно быстрее достигать своих целей. Даже если в мобильном дизайне предпочитают использовать гамбургер-меню, на десктопе они не так популярны, и это не является распространенным шаблоном для пользователей.
Мы рекомендуем отображать опцию навигации верхнего уровня или комбинированную опцию навигации для настольной версии, где на экране достаточно места. Юзабилити и удобство использования веб-сайта имеют решающее значение, чтобы избежать ужасного пользовательского опыта.
Предоставление ссылок на странице важно для вашей важной информации, и они поддерживают вашу стратегию. Даже если вы выберете индивидуальное решение для разработки своего веб-сайта или готовое решение, обратите внимание на навигацию, поскольку это основная функция любого веб-сайта в Интернете. Если вам нужна помощь в вашем онлайн-бизнесе, свяжитесь с нами сегодня. Вы также можете прочитать наш блог, чтобы найти больше полезных статей.
Для чего предназначено меню гамбургеров?
Назначение гамбургер-меню — скрыть список функций — навигацию по меню вашего веб-сайта.
Кто создал меню гамбургеров?
Интерактивный дизайнер Норм Кокс.
Является ли гамбургер-меню лучшим решением для основной навигации по веб-сайтам для компьютеров?
Нет. Мы рекомендуем комбинированную навигацию, если вы должны включить бургер-меню в свой интерфейс.
