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

📍Меню-гамбургер
Меню-гамбургер, или навигационное меню — распространенный значок с 3 горизонтальными линиями. Пользователь нажимает на значок, и открывается меню. За счет этого меню-гамбургер экономит место на экране.

Преимущества:
— Упрощает компоновку экрана
— Обеспечивает прямой доступ к навигации
— Идеально подходит для вторичного доступа
— Легко распознать

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

Преимущества:
— Занимает мало места
— Легко распознать

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

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

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

📍Подменю навигации
Этот тип шаблона навигации обеспечивает несколько уровней иерархии в приложении. Один из лучших примеров — приложение Амазон.

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

Преимущества:
— Простой в использовании
— Упорядочивает содержимое приложения
— Помогает легко перемещаться между страницами
— Легко распознать

📍Полноэкранная навигация

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

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

📍Навигация по вкладкам

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

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

Преимущества:
— Легко распознать
— Улучшает пользовательский опыт

📍Навигация по боковой панели

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

Преимущества:
— Позволяет включать различные пункты меню
— Все элементы заметны
— Поддерживает настраиваемую навигацию
— Простой в использовании
— Занимает мало места на экране

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

Источники:
— Mobile App Navigation| Patterns and Examples.
— Mobile Navigation Guide: Basic Patterns & Examples
— Basic Mobile Navigation Patterns
— Navigation guides users through different parts of your app.

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

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

Самые распространенные ошибки в применении модальных окон:
🛠Размещать перед загрузкой содержимого страницы
🛠 Отображать сразу после авторизации пользователя
🛠 Запрашивать данные, например, электронную почту, еще до того, как пользователь начал взаимодействовать с сайтом
🛠Запрашивать обратную связь до того, как пользователь завершил действие
🛠Отображать несколько модальных окон, которые наслаиваются друг на друга
🛠 Показывать окно перед переходом пользователя на другой сайт
🛠 Отображать сообщение перехода с сайта на мобильное приложение
🛠 Размещать обширный объем информации, который не помещается в 2 скрола

Прежде чем применять модальные окна, подумайте об альтернативных решениях. Чтобы сообщить пользователю об ошибке, ожидании, успешном действии, можно использовать компоненты Tooltips или Lightbox, а для больших форм подойдет Sidepage или Drawer.

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

Источники:
— Nielsen Norman Group. «Popup Problems»
— Контур.Гайды. «Модальные окна»