6 примеров мобильной навигации и 8 типов, о которых вам следует знать

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

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

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

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

Типы мобильных навигационных меню

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

Меню вкладок (или панель вкладок):

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

Нижняя навигация

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

Верхняя навигация (панель приложений)

Панели приложений являются стандартными для веб-сайтов и кроссплатформенных приложений и обычно содержат кнопку «Назад» или «Меню-гамбургер», заголовок страницы и другие кнопки действий.

Гамбургер-меню (или боковой ящик)

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

Навигационная панель

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

Плавающая кнопка действия (FAB)

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

Выдвижная панель

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

Навигация на основе жестов

Система навигации, основанная на жестах, дает возможность перемещаться по интерфейсу с помощью разнообразных сенсорных движений, таких как свайпы или щипки. Например, в приложениях для iOS можно встретить жесты свайпа для перемещения вперёд или назад. Такой подход к навигации делает интерфейс более интуитивно понятным и уменьшает необходимость в использовании дополнительной кнопки "Назад", которая может занимать лишнее место на экране.

Примеры мобильной навигации

Верхняя и нижняя навигационные панели Spotify

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

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

Календарь Google на Android

Календарь Google на Android использует несколько элементов мобильного навигационного пользовательского интерфейса:

• Панель приложений: в верхней части экрана расположены кнопка меню-гамбургер, поиск, иконка календаря (перемещает пользователя к текущей дате) и аватар пользователя для доступа к настройкам профиля.
• FAB: с помощью этой кнопки пользователи могут быстро создать новое событие.
• Нижняя панель навигации: включает три стандартные функции Android для навигации: обзор всех открытых приложений, кнопка выхода из приложения и кнопка возврата назад.

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

Карты Google на iOS

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

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

В нижней навигационной панели Google Maps пользователю предлагается пять основных пунктов меню:

• Что рядом?
• В путь
• Сохранено
• Добавить
• Новости

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

Адаптивная веб-навигация UXPin 

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

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

Креативная навигация по снэкбару от Dribbble

Ярек Мачкув из польского HeroDOT Digital House разместил эту нижнюю панель навигации с открытым исходным кодом на своем аккаунте Dribbble. 

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

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

Выдвижная панель для корзины интернет-магазина

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

Советы и рекомендации по эффективной мобильной навигации

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

1. Стремитесь к простоте: ограничьте количество вариантов навигации и используйте лаконичные и ясные названия в меню.
2. Расставьте приоритеты для важных функций: разместите наиболее часто используемые или важные функции на переднем плане навигации.
3. Сделайте навигацию доступной: элементы навигации должны быть удобны для использования, включая возможность управления одной рукой. Проверьте свою навигацию с помощью вспомогательных технологий, чтобы обеспечить интуитивно понятный пользовательский опыт.
4. Используйте стандартные шаблоны навигации: используйте знакомые пользователям решения, такие как меню с вкладками и гамбургер-меню, и избегайте непонятных обозначений.
5. Оптимизируйте работу с сенсорным интерфейсом: разработайте элементы навигации с достаточным расстоянием между ними, чтобы избежать случайных нажатий.
6. Предоставляйте ясные визуальные сигналы: выделяйте активный элемент и предоставляйте обратную связь при касании пунктов меню.
7. Адаптируйтесь к размеру и ориентации экрана: создавайте навигацию, которая адаптируется к различным размерам, ориентациям и устройствам экрана.
8. Предлагайте навигацию на основе жестов: интегрируйте такие жесты, как смахивание и сведение пальцев, чтобы сделать навигацию более интуитивно понятной и эффективной.
9. Обеспечьте контекстно-зависимую навигацию. Предоставьте параметры меню на основе текущей задачи или контекста пользователя.
10. Проводите тестирование и доработку: регулярно тестируйте навигацию с реальными пользователями и собирайте обратную связь для усовершенствования дизайна.

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