Как делать правильно и удобно

Nikita Morozov
Aug 8, 2016 · 8 min read

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

Начинающие свой путь в гуях и уиксах дизайнеры натыкаются на нее родимую сразу, а читать гайдлайны (где тоже про навигацию отведено где-то около 1/50 всего объема) никогда не было модно. Как и инструкцию от бытовой техники… Ну да Бог с ними, с гайдами, все равно потом прочтете и не один раз.

Какие паттерны бывают?

Как таковых, паттернов навигации не то чтобы вон как много. Давайте их перечислим:

  • Drawer — он же гамбургер меню.
  • Tab bar
  • Modal view
  • Wizard
  • Breadcrumbs—редчайший представитель навигации в мобилках.

Но прежде чем рассмотреть каждый из них, давайте разберемся с понятием “Погружение”.

Иерархия

Пользователь путешествует по аппу при помощи погружения внутрь (вниз по иерархии). Также этот термин зовут Pushin, drill down. Суть название не меняет ибо в 99.9% случаев в мобильных аппах навигация погружная.

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

Пример:

  1. Открыл, значит, Вася приложеньку и оказался на Главной странице. Далее в верхних табах выбрал он “Контрагентов”. Затем он тапнул на имя контрагента “ООО “Рога и копыта” и “провалился” на →
  2. → страницу с информацией о компании. Решил он посмотреть кто там работает, ткнул в “Сотрудники компании” и “провалился” на →
  3. → страницу со “Списоком контактов” этой компании. И тут Вася увидел нужного ему человека, Остапа, и ткнул кривым пальцем прямо в его имя. “Провалился” Василий на →
  4. → страницу “Профиль” Остапа! Ура, Василий оказался на третьем уровень вложенности приложеньки! 🚀

Схематично выглядит это примерно так:

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

А теперь обратите внимание: слева на страницах “ООО “Рога и копыта” и “Профиль” есть стрелочка-кнопочка “Назад”! Тапнув по ней наш герой “поднимается” на уровень выше.

И самое главное! Кто заметил, что на главной странице “Контрагенты” нет кнопочки-стрелочки “Назад”?

Молодец, дорогой читатель, ее там просто НЕ МОЖЕТ БЫТЬ потому что подняться на уровень выше мы не сможем ибо некуда уже.

Это было просто. Но не все это понимают, к сожалению. Кстати, уровней иерархии может быть бесконечно много, но все же стоит спроектировать систему так, чтобы пользователь не мог гулять на 20 уровней иерархии вглубь аппа. 5–6 уровней вложенности будет за глаза иначе пользователь в какой-то момент гарантированно потеряется и будет страдать.

А теперь — к самим паттернам.

Паттерн №1

Drawer

Тап пальца на иконку “Гамбургер” открывает нам навигацию поверх экрана.

Кто-то когда-то назвал его “Гамбургер меню”. Не знаю за что этот индивид так его ненавидит…

Главная особенность паттерна состоит в том, что при открытии навигации само меню занимает почти всю страницу. Обычно затемняют фон, а навигацию располагают слоем выше основного экрана.

Паттерн сий популяризовал Google, но прижился он и в iOS и внутри web apps. Давайте рассмотрим, чем он так хорош и почему сейчас куча народу в голос вопит о его недопустимости.

Плюсы:

  • Drawer обладает бесконечной почти емкостью. То есть в него можно засунуть от 1 до 100 пунктов меню.
  • Если вы точно не представляете сколько разделов будет в вашей приложеньке, то Drawer точно вас спасет.
  • Если вы делаете что-то вроде CRM, ERP с динамическими разделами, зависящими от роли и security пользователя — Drawer only.

Минусы:

  • Если в вашем аппе ТОЧНО будет от одного до пяти разделов, Drawer явно будет лишним. Вместо него используйте Tab bar.

Паттерн №2

Tab bar

Tab bar — самый любимый в Apple паттерн навигации.

Эта панелька знакома всем владельцам устройств, работающих на Apple iOS. Любимый паттерн Apple для всего на Свете. Проблема у него только одна: если разделов в аппе больше пяти — страдай. С точки зрения скорости переключения Tab bar’у нет равных. Главное —не забывать нарисовать его максимально понятным.

Еще один неприятный аспект Tab bar — иконки. Иконки-то сами по себе клевые, НО бывают такие случаи, когда слово ну вообще никак не “переводится” в иконку, вот хоть убейся и все тут. Если каменный цветок не выходит, попробуйте под иконкой написать текстовое название раздела приложения. Но не будем забывать, что пользователь — зверушка умная, и ко всему привыкнет если польза есть. Запомнит, куда деваться-то.

(Youtube для Android) Tabs (расположенные сверху) используют для навигации по разделам приложения. Они аналогичны Tab bar в iOS, но всегда располагаются сверху.

Внимание! Tabs, которые в Android находятся вверху на главной странице аппа по сути выполняют ту же самую функцию, что и Tab bar.
Но важно не путать, так сказать, “Навигационные табы” с “Табами группировки”.

“Табы группировки” несут абсолютно иной смысл для пользователя и спользуются для группировки объектов по смыслу. Пример из трех текстовых табов: (НЕДАВНИЕ | МОИ ФАЙЛЫ | ДОСТУПНЫЕ МНЕ).

Плюсы Tab bar:

  • Иконки просты и понятны. Если все же непонятны, то iOS предлагает снабдить иконки текстовыми подписями.

Минусы:

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

Паттерн №3

Modal View

С экрана “VIP клиенты” пользователь может открыть только два Modal view: новый email / новый контакт. Иконка “телефон” запустит другое приложение-звонилку.

Modal view — модальное окно. Фактически, модальное окно открывается поверх главного окна приложения при создании / редактировании какого-либо объекта.

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

Отсюда становится понятно, что это окно блокирует доступ к остальной части аппа, включая навигацию.

У Modal view всегда есть две кнопки для выхода:

  1. Cancel (либо Х иконка) — для выхода из окна БЕЗ сохранения данных. То есть, если вы начали создавать новый контакт, то тапнув на Cancel, новый контакт не создастся и все введенные данные не сохранятся.
  2. Save (либо Done) — выход из Modal view с сохранением всех изменений.

Как ни странно, есть еще третья опция выхода из Modal view. Работает она так.

Представьте себе, что вы создали новое письмо (email). Вы что-то написали и решили, что сейчас отправлять не будете. Вы жмете Cancel (X).
И тут появится Action sheet, предлагающий вам выбор из трех вариантов:
- Save as draft (сохранить как черновик)
- Delete (удалить)
- Cancel (отменить действие и вернуться к редактированию email).

Такой мини-паттерн поможет вам предотвратить случайную потерю данных. Не забывайте использовать этот подход при проектировании Modal view.

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

Паттерн №4

Wizard

Wizard — последовательное прохождение серии экранов.

Wizard — один из самых известных и распространенных паттернов, без которого начать работу с аппом, порой, попросту невозможно.

В основном его используют для сбора базовых данных при:

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

Все, кто хоть раз устанавливал Фотошот или Винду этот паттерн знают с детства.

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

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

!!! Помните !!!
Если Wizard состоит из более чем четырех шагов, хорошенько подумайте, не фигней ли вы занимаетесь.

Плюсы:

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

Минусы:

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

Паттерн №5

Breadcrumbs

Сначала пользователь Василий вошел в компанию “Рога и Копыта”, затем он тыкнул в “Документы”, и потом, найдя нужный файл, ткнул в него пальцем и вошел в режим просмотра этого файла.

Breadcrumbs, они же Хлебные крошки (в одной детской сказке им отведена важная роль), знакомы всем нам еще со времен Norton Commander.
C:\PROGRAM_FILES\vot_eto_vot_vse.exe

Многие еще помнят Breadcrumbs в таком виде :)

Breadcrumps есть схема иерархии, развернутая горизонтально. Не трудно догадаться, что использовать Breadcrumbs на айфончике не имеет смысла, так как скудность пространства на экране Хлебным крошкам явно не друг. Логично предположить, что данный паттерн можно использовать только на планшетах и внутри web apps.

На закономерный вопрос “А на кой он вообще нужен?” я отвечу так:

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

PS: e-commerce от него вообще без ума.

Пользователь всегда может понять в каком отделе магазина он сейчас находится.

Плюсы:

  • Сильно упростит жизнь на планшетах в больших системах (CRM, ERP, Облачных системах хранения данных типа Dropbox).
  • Тапнув на любом пункте Breadcrumbs пользователь попадет на этот уровень иерархии сразу же. Не забывайте делать Breadcrumbs-иерархию кликабильной!
  • Весь путь, проделанный пользователем наглядно виден. Когда пользователь отвлечется (уйдет в другой апп или пойдет за кофе с печеньками), а затем вновь откроет ваш апп — он сразу же поймет где находится.

Минусы:

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

Помимо описанных выше паттернов есть еще Dashboard. Он заслуживает отдельной статьи, поэтому его мы оставим на потом.


UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Nikita Morozov

Written by

UI/UX Lead, продакт менеджер, преподаватель. Обладает огромным опытом в проектировании, дизайне B2C, ERP и BPM мобильных и веб приложений.

UX / UI insane

Секреты профессии UX/UI дизайнера: инсайд, немного про дизайн, запретные темы, о которых вам не расскажут в институте

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade