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

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

Анастасия Харитонова, ведущий 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

Корректировка мобильной версии сайта

Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.

Дополнительно можно изменить размеры отступов между блоками для мобильных, настроить диапазон видимости блока на разных устройствах, сделать свою адаптивную версию с помощью редактора Zero Block либо отключить адаптивность сайта.

Как сделать разные версии блока для компьютера и мобильных
Как поменять величину отступов для мобильных
Как сделать свою версию для мобильных с помощью редактора Zero Block
Как отключить подстройку сайта для разных экранов
Диапазон видимости на устройствах

Функция, которая определяет, на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.

Зачем нужно и как это работает

Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на экране мобильного отражается плохо, вы можете установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.

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

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

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

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

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

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

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

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

Теория взаимодействия, 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

Базовые модели мобильной навигации

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

В своей статье Ник Бабич, специалист по разработке мобильных приложений и UX дизайну, рассматривает три базовых модели навигации — меню-гамбургер, Tab bar и управление жестами — и описывает их сильные и слабые стороны.

Меню-гамбургер

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

Как видите, собственно меню скрыто за иконкой.

Плюсы

Большое количество вариантов навигации. Главное преимущество навигационного меню в том, что с его помощью можно уместить большое количество вариантов на маленьком участке.

Аккуратный дизайн. Освободите место на экране, перенеся все варианты с него на боковое меню.

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

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

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

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

Советы

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

Если у вас небольшое количество пунктов меню с высоким приоритетом, подумайте о том, чтобы перенести их во вкладки или на Tab bar.

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

Tab bar

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

В Твиттере Tab bar позволяет пользователю переходить непосредственно на экран, связанный с выбранным объектом.

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

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

Минусы

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

Логика и расположение панели вкладок у iOS и Android отличаются. У каждой из этих платформ свои правила и рекомендации, касающиеся UI и юзабилити; их следует принимать во внимание, создавая Tab bar для того или иного устройства. Панель может находиться в верхней (преимущественно на Android) или нижней (преимущественно на iOS) части страницы. Кроме того, на iOS нижняя панель часто используется, чтобы переключаться между экранами приложения. На Android же, напротив, принято отображать вкладки для визуального управления сверху. К тому же на нижнюю панель иногда выводятся действия.

Не делайте иконки слишком маленькими. Они должны быть достаточно крупными, чтобы на них легко было нажимать. Чтобы рассчитать размер каждой иконки действия на нижней панели, разделите ширину экрана на количество действий. Или же подгоните размер всех иконок под самую большую из них.

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

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

Управление жестами

29 июня 2007 года наступил поворотный момент. Как только компания Apple выпустила на рынок первый смартфон с полностью сенсорным экраном, взаимодействие с тачскрином стало доминирующим типом управления для мобильных устройств.

Жесты быстро приобрели популярность среди дизайнеров; появилось множество приложений, которые экспериментировали с управлением жестами.

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

Пример

Tinder совершил переворот в своей индустрии при помощи жеста swipe, который стал практически визитной карточкой продукта. У людей это приложение ассоциируется с «проведите вправо» и «проведите влево».

Плюсы

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

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

Минусы

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

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

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

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

Вывод

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