Глава 3: Навигация в приложениях
Такая простая и, казалось бы, очевидная тема как навигация выливается для 2/3 начинающих UX-дизайнеров в беспросветный ночной кошмар. Я тоже страдал и до сих помню этот ужас... Прежде чем идти дальше, давайте уясним одну железо-бетонную аксиому: все разделы вашего приложение равны.
— — —
Логика навигации
Что это значит?
Например, в приложении есть такие разделы: Кино | Театры | Концерты | Профиль. Все эти разделы равны по своей важности. С точки зрения логики это означает, что если вы в разделе Кино нажали на фильм «Эффект бабочки», то вы как бы проваливаетесь вглубь раздела Кино и приземлитесь на экран с описанием фильма. Вроде просто, да? Бывает так, что некоторые дизайнеры умудряются отправлять пользователя в раздел Театр. Правда! Какую только дурь люди не творят.
Так вот, мы всегда проваливаемся внутрь раздела. И так уровень за уровнем...
Level 1 — Раздел Кино. Самый верхний уровень. Выше него уже ничего нет.
Level 2 — подразделы (например, боевики, комедии, драма)либо описание одного объекта, например, информация о фильме «Эффект бабочки».
Level 3 — детали фильма. Например, актёрский состав.
Level 4 — вложенный объект. Например, биография актёра (и в нашем приложении нет отдельного раздела Актёры, поэтому биографию актёра можно найти только внутри конкретного фильма).
То есть, ваша навигация схожа с файловой системой на ПК: Мой компьютер > Disc C > папка Кино > папка «Эффект бабочки» > папка Актёры > ...
— — —
Модальное окно
С навигацией вроде разобрались. И теперь, вот прямо так, какое-то модальное окно. Что это? Это экран или серия последовательных экранов, которые служат нескольким целям:
1. Создание нового объекта (контакт, новый e-mail, профиль пользователя, новая заметка, новый маршрут). Понимайте это как способ создания чего-то нового в мобильном приложении.
2. Редактирование. Редактировать можно не только те объекты, которые пользователь создал, но и некоторые объекты, созданные в приложении разработчиком.
3. Wizard, он же мастер настройки. Помните, когда в Windows (да и в OS X)? Устанавливаете программу, вам показывают несколько последовательных экранов с кнопкой «Далее», где нужно выбрать куда на жёсткий диск установить программу, какие компоненты установить, отображается прогресса установки, появляется сообщение о том, что всё удалось. Вот то же самое можно сделать и в мобильных приложениях при помощи Wizard: создавать и настраивать аккаунт, показывать инструкцию из нескольких шагов, создавать сложные объекты с огромным количеством полей (инпутов).
Вот мы и разобрались в вопросе зачем нужен modal view. Теперь два слова про его главную особенность — модальное окно ВСЕГДА находится поверх экранов. Например, вы хотите создать новую задачу, находясь внутри проекта. Или же вам нужно отредактировать свой профиль. Самый частый пример: вам нужно авторизоваться (залогиниться) в интернет-магазине, находясь в процессе оплаты внутри «Корзины».
Есть ещё один пример, который уж точно прояснит суть модального окна: pop-up на веб сайте! Pop-up всегда появляется поверх любого окна, затемняя ниже лежащий экран. Поскольку modal view на смартфоне занимает 100% экрана, затемнение фонового экрана попросту не показывают.
— — —
Типы навигационных контролов
Надеюсь вы разобрались в иерархии и погружении внутрь раздела, поняли зачем вам нужен modal view (он же аналог pop-upна сайте). На деле всё предельно просто, главное не запутаться.
Теперь поговорим про навигационные панели и «Гамбургер»-меню. Их не так много, буквально несколько типов. Сайты имеют несколько больше вариантов навигации и могут иметь несколько навигационных панелей на страницу. Но пока мы разберёмся с мобильными приложениями.
• Tab bar — панелька, прибитая гвоздями к низу экрана. С недавних пор она представлена не только в iOS и Windows Phone, но и на Android (Bottom navigation называется). Как гласят гайдлайны Apple и Google, и то же самое вторит нам опыт и здравый смысл — располагать в tab bar более пяти разделов неудобно и бессмысленно. Капитан очевидность подсказывает нам, что одновременно может быть выбран только один из 2–5 разделов и в tab bar не может быть неактивных разделов. Если по какой-то причине либо ввиду ролевой модели такие фантомные разделы есть — просто спрячьте их.
• Hamburger menu — это панелька почти во всю ширину экрана, выезжающая слева после тапа (tap — касание пальца; терминология для десктопа — клик)по иконке «три горизонтальные линии». Кто-то увидел в этой иконке гамбургер (что он курил...),потому и название несколько странное. Для чего нужен «Гамбургер»-меню, если есть tab bar? Если вы ещё помните, то в tab bar стоит располагать не более пяти разделов, а в «Гамбургер» можно запихать бесконечное количество разделов. Зачастую такое количество разделов возникает в двух случаях: кривое проектирование приложения и реальная необходимость(бизнес-приложения, очень большие бизнес-приложения). В идеальной ситуации вам стоит избегать «Гамбургера», запихивая все в tab bar. Но если совсем не лезет, то он ваш!
• Tabs — в описании энтропии контролов я упоминал о табах как о разновидности bolean-контрола, но их происхождение никак не влияет на использование в навигации. Обычно табы решают проблему группировки по типу объекта. Например, в разделе Кино могут быть табы: Новинки | В прокате | Скоро. Смысл должен быть понятен. Но обратите пристальное внимание! На сайтах и в веб-приложениях табы могут выполнять роль навигации между разделами! В мобильных приложениях — никогда. А если вы такой пример встретите, задумайтесь крепко и так не делайте.
• Breadcrumps — хлебные крошки. Помните, мы говорили с вами про погружение в разделы — от экрана раздела в глубь него же. Так вот, хлебные крохи наглядно иллюстрируют подобную иерархию для пользователя. Но это не простое иллюстрирование иерархии, каждый раздел ещё и тапабельный/кликабельный (можно кликнуть на название экрана в breadcrumps и перейти на этот экран). Пример: Кино > Фильм «Эффект бабочки» > Актёрский состав > Актёр Василий. Использование хлебных крошек в UI-дизайне приложений является крайней мерой (совсем крайней, но иногда без них ну никак), а вот в приложении для планшета, на сайте или в веб-приложении breadcrumps — желанный гость. Тот же Google в гайдлайнах по Material design уделяет им достаточно внимания, тогда как Apple о них не упоминает...
— — —
Подведём итоги
В большинстве ситуаций выбор навигационного паттерна очевиден — tab bar. При усложнении приложения в вашем арсенале появляются «Гамбургер»-меню (Google называет его Drawer — шкаф), табы и хлебные крошки. А если вам нужно что-то создать, отредактировать, доставить и оплатить — смело берём pop-upmodal view и развлекаемся.