Неважно, насколько хороши функции и контент вашего мобильного приложения, если пользователь не может их найти, они никак не поспособствуют улучшению пользовательского опыта. Из-за небольшого экранного пространства, реализация навигации в мобильных интерфейсах является не самой простой задачей. Однако, существуют лучшие практики и рекомендации, которые помогут вашему мобильному приложению продвинуться в нужном направлении.
У пользователей смартфонов не всегда есть время на то, чтобы пытаться отыскать нужный им контент. С учетом того, что в среднем, пользователь взаимодействует со смартфоном 150 раз в день, чем проще ему будет добраться туда, куда он хочет, тем вероятнее ему понравится ваше приложение.
При разработке системы навигации для мобильного приложения нужно подумать о следующем:
- Инфраструктура верхнего уровня — как упростить перемещение пользователя по приложению
- Локальные подсказки — пространственные конструкции, которые позволяют пользователю понять, где он находятся
- Гайды — знаки, символы и т.д., которые помогают направлять пользователя по его текущему расположению
Инфраструктура верхнего уровня
Существует множество способов создания навигации верхнего уровня. Вот некоторые, из самых распространенных:
- Иерархическое дерево
- «Матрешка»
- Радиальная навигация
- Навигация «Bento Box»
- Фильтрованное представление
Иерархическое дерево
Это самая распространенная форма навигации традиционных веб-сайтов и приложений. Она обеспечивает категорию навигации верхнего уровня, за которой следуют дополнительные уровни контента в подкатегориях ниже этого уровня.
Недостатком этой модели является то, что ее сложно реализовать на мобильном экране; чем больше у вас контента, тем сложнее уместить все эти данные на экран.
«Матрешка»
Эта система навигации больше подходит мобильным приложениям. Каждый раз, когда пользователь переходит на новый уровень иерархии, ниже него появляются новые элементы. Этот метод использует переход от широкого представления к более конкретным деталям. Он хорошо работает на маленьких экранах, но плохо поддерживает горизонтальное перемещение.
Радиальная навигация
В этой модели используется один центральный экран, позволяющий пользователям исследовать разные секции приложения. Переход от одной секции приложения, к другой, осуществляется при помощи этого центрального экрана. Это хороший способ минимизировать количество элементов навигации на экран, и он отлично подходит приложениям, которые больше нацелены на выполнение задач, а не на отображение больших объемов контента.
Bento Box
Эта модель представляет собой дашборд, который передает на экран динамическую информацию. Чтобы увидеть больше информации, пользователь должен взаимодействовать с элементами, которые появляются на этом дашборде. Она хорошо подходит приложениям, которые работают с большим количеством источников информации.
Фильтрованное представление
Фильтрованное представление позволяет пользователям манипулировать одним набором данных с разных углов. Фильтры определяются и контролируются пользователями.
В более сложных приложениях будет полезно комбинировать различные типы навигации, таким образом, вы сможете поддерживать выполнение индивидуальной задачи или взаимодействия, а когда пользователь начнет выполнять другую задачу, система адаптируется под его выбор.
Локальные подсказки
Локальные подсказки помогают пользователю ориентироваться в его текущем расположении. Их лучше использовать экономно, чтобы когда пользователь с ними столкнется, он был бы полностью уверен в их значении.
Ориентиры
Ориентир — это мгновенно распознаваемый объект, который позволяет пользователю точно узнать, где он находятся. Типичными ориентирами мобильных приложений могут быть:
- Логотип или иконка «Домой»
- Хлебные крошки
- Строка поиска
- Заголовки разделов\баннеры
- Инструменты навигации раздела
- Слайдшоу, галереи, календари, и т.п.
В идеале, вы должны поддерживать постоянство, и внимательно относиться к форме, цвету, приоритету на странице, позиции и видимости ориентиров. Они могут отличаться друг от друга только в случае крайней необходимости.
Границы
Границы обозначают области, в которых можно проводить взаимодействия. Например, очертание кнопки показывает границу ее действия.
Гайды
Гайды — это визуальные указатели, которые помогают принимать решения в любой точке вашего сайта или приложения. Они, по большей части, невербальны (иконки, кнопки и изображения), но надписи, тем не менее, играют важную роль.
Иконки
Иконки должны соответствовать ментальной модели вашего пользователя. Не соответствующие этому критерию иконки будут усложнять выполнение задач. Ментальную модель можно определить при помощи проведения исследования. Помните — даже самый простой значок способен запутать пользователя. Например, значок карандаша может значить «нарисовать что-то» или «написать что-то». Ментальные модели ваших пользователей скажут вам, какое значение иконкам они придают.
Надписи
Надписи важны. Исследования показывают, что комбинация текста и изображений более эффективна, чем просто текст, но те же исследования говорят, что просто изображения менее эффективны, чем просто текст.
Заключение
Навигация — это жизненно важная часть пользовательского опыта мобильных приложений, и правильная ее реализация гарантирует, что пользователь сможет открыть ваше приложение, и выполнить интересующую его задачу. В свою очередь, это гарантирует создание долгосрочных отношений, в противоположность одноразовому использованию приложения и последующего от него отказа.
