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

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

• Основные типы навигации, которые существуют
• Как логически работает навигация
• Некоторые особенности и различия в платформенных решениях (iOS vs. Android)

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

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

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

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

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

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

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

• Навигация видна только на основных экранах. Например, предположим, что у вас есть 3 раздела в нижней навигации - Главная, Каталог и Профиль. Когда пользователь углубляется в раздел "Каталог", он больше не видит нижнюю навигацию.
• Навигация видна везде. Даже если пользователь перейдет внутри приложения на вложенную страницу второго или третьего уровня, он все равно увидит нижнюю навигацию.
• Навигация по умолчанию видна в основных разделах, а на внутренних страницах она появляется при прокрутке вверх. Такая логика предлагается в руководстве Material как одна из возможных.

В приложении 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. Значок, который часто выбирают для запуска этого типа навигации, принято называть "гамбургером".

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

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

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

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

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

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

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

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

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

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

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

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

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

• Навигационные ящики обеспечивают доступ к пунктам назначения и функциям приложения, например, к переключению учетных записей.
• Навигационные ящики рекомендуются для приложений с 5 или более направлениями верхнего уровня, приложений с 2 или более уровнями навигационной иерархии и быстрой навигации между несвязанными направлениями.
• Избегайте использования навигационного ящика с другими основными компонентами навигации, такими как панель навигации.
• Руководство Material рекомендует использовать такую навигацию на больших устройствах (планшетах и мониторах), хотя и не запрещает ее использование на мобильных телефонах.

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

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

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

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

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

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

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

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

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

• Стрелка "Назад" (иногда с надписью) для перехода на страницы второго или более высокого уровня или значок бургера для доступа к боковой навигации.
• Заголовок, который может располагаться по центру (в основном для iOS) или ближе к значку "Назад" (в основном для Android).
• Подзаголовок, который может отображаться над заголовком для лучшего понимания контекста (в основном для iOS).
• Иконки для дополнительных действий. В руководстве по материалам рекомендуется размещать от 1 до 3 иконок в порядке приоритета.

• Разместите заголовок в один ряд с кнопкой "Назад". Его можно либо выровнять по центру (чаще встречается в iOS), либо разместить рядом со стрелкой "Назад" (чаще встречается в Android).
• Отобразите заголовок в виде большого заголовка под стрелкой "Назад". В этом случае он не будет виден при прокрутке вниз.
• Отобразите заголовок в виде большого заголовка, но при прокрутке вниз переместите его вверх рядом со стрелкой назад. В этом случае заголовок сначала будет большим и читаемым, а затем станет меньше, но останется видимым.

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

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

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

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

• Используйте верхнюю панель приложений для отображения содержимого и действий, связанных с текущим экраном, например навигации, заголовков и действий на экране. Существует четыре типа верхних панелей приложений: Выровненная по центру, S, M или L.
• Верхние панели приложений содержат необязательный ведущий значок навигации (значок меню или стрелка назад).
• После заголовка, в конце контейнера, можно разместить до трех интерактивных значков.
• Расположите наиболее часто используемые действия ближе к ведущему краю и продвигайтесь к концу.

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

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

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

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

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

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

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

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

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