Навигационные паттерны в мобильных приложениях. Как сделать правильный выбор?

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

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

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

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

Простота и ясность: Элементы навигации видны и основаны на иконках. Иконки могут быстро передать основную информацию о содержании раздела.

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

Рекомендуемое количество элементов для этого типа навигации - от 3 до 5. Все свои сценарии вы должны организовать в эти 3-5 условных "папок". Кроме того, мы сильно ограничены в количестве символов и размере шрифта. Придумать лаконичные и понятные названия разделов может быть довольно сложно.

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

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

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

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

Такой тип поведения выбирается реже. В качестве примера можно привести приложение Fitness от Apple.

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

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

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

Навигация "запоминает" наш выбор. Если мы перейдем к тренировке в разделе Fitness+, а затем перейдем на вкладку Summary, то при повторном нажатии на вкладку Fitness+ мы вернемся на страницу медитации, а не на главный экран Fitness+. Чтобы вернуться к главному экрану раздела, можно снова щелкнуть на вкладке Fitness+.

Этот тип навигации также активно используется. Например, в приложении Medium он используется. Пользователь видит навигацию на экранах основных разделов приложения. Если пользователь переходит к статье, он видит навигацию, но она исчезает, как только он начинает читать и прокручивать страницу вниз.

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

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

Binance выделил главное действие специальной иконкой в центре. При нажатии на центральную иконку открывается шторка с действиями (купить, продать, конвертировать и т. д.). Такой тип поведения не оговорен в руководстве, но реализовать его несложно даже в рамках нативной навигации.

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

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

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

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

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

В этом типе навигации он скрыт за иконкой и появляется сбоку (обычно слева) после нажатия на иконку. В разных платформах они называются "боковые панели" в Human Interface и "навигационные ящики" в Material guidelines. Значок, который часто выбирают для запуска этого типа навигации, принято называть "гамбургером".

Этот тип навигации имеет множество привлекательных преимуществ, например

Согласно многочисленным исследованиям, этот тип навигации менее удобен для пользователей. Он также известен как "скрытая навигация", и вот некоторые из его недостатков:

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

Вот еще один интересный пример - приложение Microsoft Teams для iOS. Здесь одновременно используются и тап-бар, и боковая панель (хотя это не рекомендуется рекомендациями). Как и в Foodpanda, здесь можно найти данные, связанные с профилем пользователя - управление уведомлениями, настройками и сохраненными закладками. Это также точка входа для добавления другого аккаунта.

Еще один интересный пример - приложение Gmail. В Gmail используется два типа навигации. Основная навигация по почте осуществляется через бургер. Навигационная панель используется для продвижения другого продукта - Google Meet. Это довольно интересное и, вероятно, эффективное маркетинговое решение, которое мало кто может себе позволить.

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

Однако не все пункты меню работают таким образом. При переходе к настройкам открывается ящик, а для раздела помощи - имитация страницы с кнопкой "назад", которая на самом деле является модальным окном.

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

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

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

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

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

В приложении Instagram поиск настолько важен, что для него выделен отдельный раздел в навигации. Это комплексный поиск по всему приложению. Foodpanda также имеет универсальный поиск, доступный на главной странице, выделенный акцентным розовым фоном. Такой дизайн делает его очень заметным для пользователей.

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

Поле поиска позволяет людям искать в коллекции контента по определенным словам, которые они вводят.

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

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

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

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

Верхние панели приложений отображают навигацию, действия и текст в верхней части экрана.

Я считаю важным отметить расхождения в размещении заголовка относительно стрелки назад на разных платформах.

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

В человеческом интерфейсе рядом со стрелкой часто пишут название раздела, к которому нас вернет нажатие на стрелку, или текстовую подсказку вроде "Назад".

Стоит также отметить, что в приложениях для iOS и Android для перехода назад обычно используются разные иконки. В библиотеке иконок Material для iOS даже есть отдельные иконки для перехода назад и вперед.

На этом я хотел бы завершить эту статью, хотя мне еще многое предстоит сказать о навигации. Большое спасибо всем за поддержку, добрые советы и рекомендации. Отдельное спасибо Артемову Росту, Денису Кожухарю и Алексею Телышеву за консультации, а также Игорю Долгову за отзывы.

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

Эти вопросы помогут вам запомнить ключевые элементы навигации в вашем приложении.

Перевод статьи от Ксении Толокновой на Medium