Показывать бургер в мобильной версии что это

Показывать бургер в мобильной версии что это

Есть еще нюанс. В мобильном режиме логотип пропадает и остается только Бургер. А как же название нашей компании? Не беда. Заходим в соседнюю вкладку «Контент», и там есть пункт «Дополнительно», а в нем «Название мобильного меню». Вот туда и пишем название компании, название бренда или просто номер телефона. Теперь в мобильном режиме у нас есть наше название и иконка Бургера.

И опубликовать страницу. В десктопной версии можно видеть полное меню, а в мобильное — Бургер

Альтернативы бургерному меню в мобильной навигации

Анастасия Харитонова, ведущий UX/UI дизайнер в Preppy Consulting LLC и магистр Гильдии вольных проектировщиков, специально для «Нетологии» адаптировала статью Zoltan Kollin об альтернативах бургерному меню в мобильных интерфейсах.

Если вы работаете над цифровыми продуктами, наверняка прочли уже кучу статей о том, насколько и почему бургерное меню из-за своей незаметности и низкой эффективности вредит пользовательскому опыту в мобильных и десктопных интерфейсах.

К счастью, все больше сайтов и приложений экспериментируют с альтернативными, более эффективными, вариантами навигации. Разумеется, эффективность каждого варианта зависит от контента и контекста.

Жизнеспособность и эффективность вариантов мобильной навигации зависят от контента и контекста.

1. Вкладки

Если на сайте или в приложении ограниченное количество секций, пользователь должен быстро переключаться между ними, и лучшее решение здесь — это вкладки, например, Tab Bars в Android и iOS.

Tab bar в Android

Вкладки — один из самых простых паттернов навигации, однако, следует помнить основные принципы их применения:

• Показывать не более 5 вкладок.
• Одна из вкладок должна быть активна и выделена визуально.
• Первая вкладка должна быть главным экраном / главной страницей, а порядок вкладок должен соответствовать их смысловой иерархии и логическому порядку в соответствии с юзер флоу.
• Вкладки могут располагаться как сверху, так и снизу экрана, например, tab bars and bottom navigation в Android, tab bars в iOS.
• Иконки без текста применяются только для общепринятых действий и с помощью привычных изображений, а также в интерфейсах, которыми пользователи пользуются достаточно часто. Пример — соцсети.

Примеры: Google Photos и Instagram

Иконка+текст на вкладках в Google Photos и простые иконки на вкладках в Instagram

2. Вкладки с опцией «Еще»

В случае, если количество основных разделов больше пяти, хорошим решением будет отобразить четыре самых приоритетных вкладки, а на пятую вынести опцию «Еще» со списком всех остальных разделов:

Принципы дизайна для этого решения, в общем, те же, что и для простых вкладок.

Вкладка «Еще» может направлять к странице навигации или работать как выпадающее меню со ссылками на остальные разделы:

Конечно, можно поспорить, что вкладка «Еще» ничем не лучше бургерного меню: тоже скрыто, и наименование никак не соотносится с контентом. Однако если иерархия вкладок выставлена верно, большинство пользователей в любом случае будут искать одну из четырех показанных вкладок, поэтому опыт навигации все равно будет лучше.

Новостная лента, запросы в друзья, сообщения, уведомления и поиск всегда на виду, остальная функциональность доступна по кнопке меню.

Комментарий переводчика: несмотря на принцип «пяти вкладок», Facebook использует шесть.

3. Прогрессивно сворачивающееся меню

Наиболее продвинутая версия вкладок с опцией «Еще» — меню, которое подстраивается под ширину экрана, отображая столько вкладок, сколько позволяет экран, скрывая все остальное под кнопкой «Еще»:

Таким образом, чем ниже разрешение экрана, тем меньше вкладок отображается, и тем больше вкладок скрываются под «Еще». Такая гибкость улучшает пользовательский опыт в отличие от решения «фиксированные вкладки+еще», особенно на экранах промежуточного размера.

Главное меню BBC подстраивается под размер экрана, чтобы отобразить максимальное количество вкладок.

4. Навигация с прокруткой

Если разделов больше пяти, их важность примерно одинаковая, и прятать какие-либо из них под кнопкой «Еще» неправильно, то можно разместить их в пролистываемом горизонтальном списке:

Минус такого решения — все еще ограниченное количество отображаемых вкладок. Однако это приемлемо, если пользователи будут изучать контент, например, каталог в интернет-магазине или категории на новостном портале.

Проектируя такую навигацию, убедитесь, что оставили пользователю визуальные подсказки о наличии других элементов меню, доступных при горизонтальной прокрутке (например, угасание непрозрачности и/или смещение крайнего видимого элемента).

Примеры: Medium и Google

Основные разделы меню Medium.com прокручиваются на маленьких экранах

Категории на странице выдачи результатов поиска Google

5. Выпадающие меню

Не общепринятое, но интересное решение — использовать выпадающий список, когда видимость и доступность остальных разделов не критичны:

Выпадающее меню выполняет две задачи: во-первых, служит заголовком страницы, а во-вторых, направленная вниз стрелка показывает возможность быстрого переключения между схожими разделами. Несмотря на то, что в этом случае разделы скрыты, такой дизайн предполагает наличие аналогичных подразделов, в основном это решение следует использовать именно для таких целей.

Примеры: Barnes & Noble and Duolingo

На странице загрузки книг на bn.com текущая категория и фильтры всегда доступны в выпадающем меню

Duolingo предлагает непривычным образом быстро переключаться между языками

Иногда бургерное меню — отличное решение

Поскольку главный недостаток бургерного меню в том, что его сложно найти на экране, использовать его стоит только как альтернативу другим способам навигации.

В случае, когда есть второстепенные разделы, бургерное меню — вполне подходящее решение.

Если главные опции доступны в виде CTA-кнопок, то бургерное меню — отличное место для дополнительных опций:

Такое решение подходит, если основные действия легко доступны на одном экране. Отличный пример — приложение Uber:

Поскольку главная задача этого экрана — быстро вызвать такси, дополнительные опции (например, история и настройки) достаточно разместить в бургерном меню.

То же и для Google Translate:

Главные действия (переключение языков, ввод текста) занимают большую часть экрана, а скрытое меню — отличное место для разделов «Помощь» и «Оставить отзыв».

Вывод

Не существует единственного универсального решения мобильной навигации.

Не существует единственного и универсального решения мобильной навигации, всё зависит от вашего продукта, пользователей и контекста использования. Что хорошо работает для одних, для вас окажется провалом, и наоборот. Основа каждой хорошо спроектированной навигации — информационная архитектура: четкая и понятная структура, иерархия, заголовки, основанные на потребностях пользователей. Так почему бы не начать поиски наиболее эффективной навигации для вашего продукта прямо сейчас?

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Средняя оценка 5 / 5. Всего проголосовало 2

Панель ссылок, как альтернатива гамбургер-меню

Недавно проведенные AB тесты показали, что на многих мобильных версиях сайтов электронной коммерции можно наблюдать увеличение скорости конверсии, добавив панель навигационных ссылок вверху домашней страницы вместо того, чтобы полагаться исключительно на гамбургер-меню. Мы называем это «Верхняя панель навигационных ссылок» или просто «панель ссылок». Панель ссылок является альтернативой ненавистному «гамбургер-меню», которое скрывает ссылки за знаменитыми тремя полосками (гамбургером). Просто загуглите “hamburger menu” и вы увидите в топ-5 результатов статьи, критикующие гамбургер-меню! В этой статье мы обсудим концепцию панели ссылок на примере двух AB тестов, в которых мы увидели увеличение посещений страниц продуктов и увеличение коэффициента конверсии покупок. Мы также покажем примеры дизайна популярных онлайн-магазинов, которые по-разному реализуют концепцию панели ссылок. Наша гипотеза заключается в том, что панель ссылок позволяет покупателям быстрее загружать страницы продуктов, отобразив ссылки на страницы продуктов и категорий, которые обычно скрыты в гамбургер-меню. Требуется меньше кликов, а ссылки более заметны, поэтому увеличивается вероятность того, что пользователи перейдут по «нисходящей воронке» и посмотрят продукты. Давайте перейдем к нашим тематическим исследованиям.

Примечание: Мы также можем проанализировать ваш опыт работы с мобильным интернет-магазином. Узнайте больше о том, что мы здесь делаем, или присоединитесь к списку рассылки, чтобы получать на email новые статьи, подобные этой.

Панель ссылок в мобильной версии сайта магазина одежды увеличит число заказов на 5%

• Большие изображения без полей, которые изменяются в зависимости от текущей маркетинговой кампании (примерно раз в месяц)
• Основная навигация скрыта в гамбургер-меню
• Если вы прокрутите страницу вниз достаточно далеко, в конечном итоге вы увидите ссылки на категории

Вот тестируемые варианты: В этом варианте мы просто добавили панель ссылок, только на главную страницу сайта. Там было 9 категорий. Заметьте, что мы не заменили гамбургер-меню, оно все еще существует и по-прежнему является наиболее полным способом навигации по различным категориям продуктов. Но теперь самый простой способ навигации – панель ссылок Панель ссылок можно было прокручивать влево-вправо и у нее были стрелки, указывающие на эту функцию. Мы получили следующие результаты. Во-первых, завершенные заказы. Через 28 дней мы увидели увеличение на 5% со статистической значимостью 93%: Примечание. Механизм статистики Optimizely использует более строгий «двухсторонний» статистический расчет значимости, который не дает такого значения, но традиционное вычисление p-величины показывает это: Разумеется, это не «безусловный победитель». Согласно промышленной конвенции победитель объявляется, если он достигает 95% статистической значимости или больше, когда тест достигает вашего заранее определенного количества посетителей. Но это, в конце концов, лишь «конвенция». С более чем 80 000 посетителей, 2300 событий конверсии для каждого варианта, и проработав ровно 4 недели с вариациями, ведущими в основном на весь тест, мы пришли к выводу, что «это, скорее всего, победитель и, скорее всего, он лучше справится на 2% — 5% в течение более длительных периодов времени». Но это всего лишь один показатель (хотя и важный). Все куда интереснее, если вы посмотрите на дополнительные показатели.

Только страницы с включенным листингом показывали увеличение просмотров страниц

Просмотры страниц категорий товаров показали явное увеличение на 10% — 12% (с долей вероятности 99% +), подтвердив одну из наших критических гипотез о том, что панель ссылок отправит больше пользователей «вниз по воронке». Например, вот ссылка на первую категорию, которую мы добавили слева от быстрой панели ссылок (например, ссылка «TOPS» в макете «B» выше): Две другие страницы категорий показали аналогичный результат. Но увеличение просмотров страниц было заметно только для тех ссылок на категории, что лежали «на поверхности»: Как насчет ссылок, которые были «скрыты за прокруткой», другими словами, когда нужно было использовать либо стрелку, либо прокрутить вправо, чтобы открыть их? Для этих ссылок не было изменений в количестве просмотров страниц: И так было со всеми ссылками на страницы категорий, скрытыми за прокруткой. Это подтверждает первоначальную гипотезу этого теста:

Отображение ссылок на страницы продуктов и категорий увеличивает количество клиентов, перешедших по ним.

Скрытие всех ссылок за гамбургер-меню делает сайт не благоприятным с точки зрения нахождения покупателями товаров. Выводы для вашего мобильного сайта:

• Пробуйте размещать ссылки на наиболее популярные категории товаров в верхней части главной страницы вашего мобильного сайта.
• Попробуйте сделать панель прокручиваемой и посмотреть, можете ли вы повторить результат нашего теста в своем магазине.
• Видите ли, вы признаки увеличения количества выполненных заказов, как в нашем тесте? Возможно, ваш магазин покажет более точное увеличение коэффициента конверсии, чем небольшое увеличение, которое мы видели выше.

Пример 2: Бренд здорового питания получает увеличение конверсии на 29% при помощи навигационной панели ссылок на главной странице

Затем мы протестировали бренд электронной коммерции, работающий в области здорового питания, и имеющий 3 продукта (3 разных вкуса одного товара). Опять же, на главной странице был текст, изображения и ссылки, но вам приходилось прокручивать страницу вниз, чтобы найти ссылки на 3 продукта. Поэтому мы добавили панель ссылок для навигации так же, как и в первом примере: В этом случае мы разместили прямые ссылки на 3 разных вкуса. Через 14 дней мы увидели 29-процентное увеличение заказов с 98-процентной статистической значимостью. Однако трафик на этот сайт был ниже, поэтому в тесте только 139 против 107 конверсий на вариацию. Этого мало. Разница составляет всего около 30 заказов, поэтому нам нужно установить квалификатор, чтобы вариация «скорее всего» выполнялась лучше. Однако не было никаких указаний на то, что он будет работать хуже, чем без ссылок.

Панель ссылок может помочь пользователям находить новые продукты

В этом случае из 3-х вкусов второй и третий показали значительное увеличение просмотров страниц (шоколад и клубника в макете выше): + 25% посещений и 77% с 99,9% статистической значимостью и более 600 конверсий. Но самый популярный вкус не показал большого увеличения. Почему? Сайт был известен своим самым популярным вкусом. Исторически сложилось так, что на момент запуска бренда, это был единственный вкус. Реферальные ссылки непропорционально вели на эту страницу, ссылки в блогах непропорционально связаны с этим вкусом, а изображения на главной странице и текст в основном говорили о нем. Таким образом, в этом случае панель ссылок помогала большинству клиентов открыть для себя остальные предложения компании. Это приятное дополнительное преимущество панели ссылок. Обратите внимание, что эти альтернативные вкусы также находились в гамбургер-меню, но, как мы видели в первом примере, размещение прямых ссылок на них (через панель ссылок) показало увеличение числа посетителей для этих страниц.

Выводы и способы применения этого к вашему собственному мобильному сайту электронной коммерции

Оба этих теста двух очень разных магазинов электронной коммерции (1000 товаров против 3 товаров), демонстрируют аналогичный вывод: Сделайте для мобильных покупателей доступ к вашим продуктам максимально простым. Если у вас сотни или тысячи товаров, поместите ссылки на самые популярные категории как можно ближе к краю экрана. В первом примере, рассмотренном выше, естественная итерация теста (который еще не был протестирован) состояла в том, чтобы уложить ссылки в стек вместо того, чтобы они были в одной прокручиваемой строке. Это даст покупателям еще лучший обзор предложений магазина. Это должно послать еще больше посетителей «вниз по воронке». Если у вас есть лишь несколько продуктов, создайте верхние ссылки навигации на страницах подробных сведений о продукте. Вы должны проверить это самостоятельно. Не предполагайте, что эти результаты будут применимы к вашему магазину. Оба вышеописанных AB теста показали, что число посещений страниц категорий или продуктов значительно выросло. Но с увеличением скорости заказа не было «безоговорочных» победителей, которые мы определяем, как статистическое значение 99% + с сотнями или тысячами событий конверсии на каждый вариант. Как мы уже писали ранее, не все магазины электронной коммерции обладают роскошью таких данных. Это не значит, что вам надо опустить руки и ничего не тестировать. И не стоит использовать старомодный метод «устройте дебаты в комнате, кто будет кричать громче всех, тот и победил».

Кроме того: когда-то наш клиент, дизайнер интерьера, спросил, можно ли реализовать гамбургер-меню в декстопной версии сайта, потому что оно «выглядело гламурным». (Фейспалм)

Вот почему тестирование важно, даже если вы не получите идеальных показателей коэффициента конверсии (статистическое значение 99% и тысячи конверсий в течение многих недель).

Как насчет декстопных версий сайтов? Почему это касается только мобильных?

Причина, по которой это не актуально для десктопных версий сайтов, состоит в том, что почти у всех сайтов электронной торговли доступны ссылки на все категории (и часто выпадающие списки подкатегорий, ака «мега-меню»). Так что это по определению почти всегда уже реализовано в десктопной версии сайта. Просто в гамбургер-меню мобильных устройств имеются пространственные ограничения. Надеемся, что эта статья и данные, которыми мы поделились, помогут вам отойти от шаблона гамбургер-меню и начать открывать другие возможности. Предложенные нами варианты – не единственный способ реализации панели ссылок. Вот еще несколько примеров альтернативы гамбургер-меню разных мобильных сайтов электронной коммерции.

Примеры главных страниц мобильных сайтов электронной коммерции

Вот несколько брендов, имеющих четкие ссылки в верхней части главной страницы мобильной версии сайта. Это позволило им не зависеть от гамбургер-меню:

Gap.com

На сайте Gap множество продуктов и категорий. На главной странице их мобильного сайта вверху есть ссылки на главные категории товаров: Использование фотографий – это эстетически красиво и, возможно, увеличит взаимодействие пользователей со ссылками. Обратите внимание, что ссылки не привязаны к прокрутке, тогда как ссылки на Gap Incs другие бренды в верхней части страницы. Интересно.

Abercrombie

Abercrombie выбирает простое разделение одежды на мужскую и женскую. Стоит попробовать сравнить этот вариант с более глубокой категоризацией, как на сайте Gaps выше:

Lowe’s

Lowes.com – это отличный пример поиска и использования рекомендаций, чтобы продвигать ссылки на некоторые категории. Раньше мы не заходили на сайт Lowes.com с этого смартфона, поэтому в рекомендациях, скорее всего, были просто категории, которые они хотели рекламировать (вместо персонализированного списка, основанного на прошлых посещениях сайта). Наконец, вот более смелая концепция домашней страницы от Cos Clothing, которая не использует тонкую полоску предлагаемых категорий, а просто посвящает основную часть главной страницы отправке покупателей в нужные категории. (Примечание. К моменту публикации оригинала этой статьи, главная страница сайта Cosclothing была изменена, чтобы добавить рекламу вверху страницы, вместо фотографий, служащих переходом на женский и мужской разделы). У них полноразмерные изображения разделов для мужчин и женщин, за которыми следуют четкие ссылки. Мы хотели бы попробовать какое-нибудь смелое дизайнерское решение с одним из наших клиентов.

Идеальное меню для мобильных приложений

Как в приложениях, так и в сайтах, пользователи опираются на меню для поиска нужного контента и использования функционала. Меню — неотъемлемый компонент любого сайта или приложения, но не все меню одинаковы. Очень часто мы сталкиваемся с проблемами в меню — одни просто сбивают с толку, другими сложно управлять, третьи вообще сложно отыскать на экране.

Меню должно быть видимым

О габургер-меню было написано множество постов, и большинство отзываются о нем негативно. Эта небольшая кнопочка из трех линий – настоящая проблема. И это больше не о самой иконке, а о том, что она скрывает собой всю навигацию.

Вне поля зрения — вне памяти

Скрытая навигация — довольно логичное решение для маленьких экранов — не нужно париться об ограниченном пространстве экрана, просто поместите всю свою навигацию в прокручиваемую боковую панель, которая по умолчанию скрыта. Но кнопка гамбургер-меню менее эффективна по одной простой причине: вам нужно дополнительно кликнуть, чтобы увидеть желаемую опцию. Пример боковой панели

Вижу и использую

Теория взаимодействия, A/B-тесты и эволюция некоторых топовых приложений мира говорит о том, что демонстрация опций меню более видимым способом увеличивает вовлеченность и удовлетворенность пользователя. Вот почему многие приложения переходят с гамбургер-меню на более релевантные опции навигации, которые всегда на виду. Панель вкладки: Вместо скрытия опций навигации в сворачиваемую панель, вы выводите их наружу. YouTube всегда делает элементы ключевого функционала доступными в одно касание, позволяет быстро переключаться между функциями. Редизайн Android-приложения YouTube. Есть также умные способы прятать панель вкладок, когда она не используется. Если экран представляет собой прокручиваемую ленту, панель вкладок можно прятать, когда пользователь скроллит ее для подгрузки нового контента, и снова показывать ее, если они пытаются промотать ленту назад. Скрытая панель вкладок. И еще кое-что: многие дизайнеры ошибаются, скрывая параметры сортировки в выпадающем меню. Но это ведет к одной и той же проблеме — пользователи видят только выделенную опцию, а другие возможности сортировки скрыты. Меньшая видимость (выпадающее меню) и большая видимость (переключатель). Источник: uxmovement. Пример кнопки-переключателя для iOS: Вывод: многие приложения все еще используют гамбургер-меню, потому что это простой способ разместить уйму ссылок в приложении. Но это неверное направление, потому что если в ресурсе сложная навигация, спрятав ее, вы ухудшите юзабилити мобильного интерфейса.

Обозначение текущего местоположения

Отсутствие индикации текущего местоположения пользователя — это, возможно, самая распространенная ошибка в построении меню сайтов или приложений. “Где я?” — один из фундаментальных вопросов, на которые пользователю нужно ответить для успешной навигации. Пользователи опираются на визуальные подсказки из меню, чтобы ответить на этот критически важный вопрос. Но иногда они видят совсем не то, что ожидают увидеть.

Иконки

Есть универсальные иконки, с которыми пользователи хорошо знакомы, и которые представляют популярный функционал по типу поиска, почты, печати и т.д. К сожалению, “универсальные” иконки довольно редки. И дизайнеры приложения часто прячут функционал за иконки, которые очень сложно понять. Предыдущая версия приложения Bloom.fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвета

Текущее состояние можно напрямую обозначить в панели вкладок с помощью контрастных цветов. Как цвет кнопки управляет вниманием пользователя. Источник: uxmovement. Хороший пример выделения цветом. Выделенный элемент изменяет свой вид на панели вкладок. Вывод: Выделение иконки цветом поможет пользователям понять текущее местоположение. Если вы используете иконки, всегда проверяйте их юзабилити.

Координируйте меню с задачами пользователя

Вы должны использовать только понятные названия ссылок. Выясните, что ищет пользователь и используйте названия категорий, которые понятны и близки вашей целевой аудитории. Меню — это не то место, где стоит шутить с жаргоном. Используйте терминологию, которая четко описывает ваш контент и функционал. Пользователи любят мобильные приложения, которые быстро решают какой-то конкретный кейс. И вы можете сократить время, которое нужно потратить пользователю, на понимание меню. Меню Twitter для iOS Сложные функции должны всегда отображаться с соответствующей текстовой меткой. Вывод: Элементы меню должны быть легко сканируемы. Пользователи должны иметь возможность понимать, что конкретно происходит, когда они касаются пальцем того или иного элемента.

Делайте манипуляции простыми

Слишком маленькие или слишком близко расположенные друг к другу элементы доставляют огромный дискомфорт мобильным пользователям. Так что делайте ссылки меню достаточно большими, чтобы их можно было легко кликнуть или коснуться пальцем. В исследовании MIT Touch Lab было установлено, что средняя ширина указательного пальца взрослого человека составляет 1.6 — 2 см. Это равноценно 45-57 пикселям. Средняя ширина указательного пальца в пикселях. Источник: uxmovement. Ширина области касания в 45 — 57 пикселей позволяет пальцу пользователя легко выполнить свою задачу, получить четкий визуальный отклик. Вывод: меню должно иметь удобный для пальцев дизайн. Соразмерность элементов со средним размером пальцев гораздо улучшает юзабилити мобильных интерфейсов.

Заключение

Помощь пользователям в навигации должна быть в высоком приоритете практически для любого сайта или приложения. Цель удобной навигации — создание системы взаимодействия, которая естественным путем сочетается с ментальными моделями пользователей. Простые сценарии поведения пользователей, четкая графика и визуальные подсказки создают иллюзию того, что способности пользователя способствуют гладкому и удобному взаимодействию с приложением. И ваша система взаимодействий должна доносить задачи до пользователей через четкую визуальную коммуникацию. Вы создаете дизайны для своих пользователей. Чем проще ваш продукт в использовании, тем вероятнее, что его будут использовать. Спасибо! Перевод статьи Nick Babich