Основы мобильной навигации
Советы и рекомендации Adobe для UI/UX-дизайнеров на примере интерфейсов Google, Uber, Evernote и YouTube.
Когда пользователь открывает ваше приложение, он должен понимать, к каким результатам приведут его действия. Хорошая навигация — это проводник, который указывает пользователям направление.
Однако разработка хорошей навигации — это вызов для дизайнера из-за небольших размеров экрана мобильных устройств и необходимости создавать контраст между контентом и интерфейсом приложения.
Чтобы справиться с этими проблемами, дизайнеры придумали различные шаблоны навигации, но у каждого из них есть свои сильные и слабые стороны.
Меню «гамбургер»
Пространство на экране — самый ценный ресурс для смартфонов и мобильных устройств. Поэтому «гамбургер» (или выдвижное меню) — это один из самых популярных шаблонов, который помогает его сохранить. Выдвижная панель скрывает элементы и активизируется только в том случае, если пользователь нажмет на иконку в левом верхнем углу.
В каких случаях использовать
Главный недостаток такого шаблона — это неочевидность, поэтому он не рекомендуется для главного меню. Однако он может быть хорошим решением для вторичного меню.
Вторичная навигация — это пункты или функции, которые важны для пользователя только в определённой ситуации. Они второстепенны, а значит их не обязательно подчеркивать визуально — пусть будут скрыты до тех пор, пока не понадобятся пользователю. Так дизайнеры оберегают пользователей от избытка информации.
Uber использует «гамбургер» именно для этих целей. Поскольку все элементы главного экрана предназначены для вызова автомобиля, здесь не отображаются дополнительные опции, такие как «Оплата», «История» или «Настройки». Обычные действия пользователя не включают эти варианты, поэтому их можно скрыть за иконкой.
Достоинства
- большое количество вариантов навагации;
- экономия места;
- чистый дизайн;
- возможность «отфильтровать» опции главного меню.
Недостатки
- неочевидность: когда меню спрятано, то вероятность его использования снижается. И хотя пользователи начинают привыкать к такому навигационному шаблону, отсутствие видимых элементов может вызывать затруднения;
- противоречия с правилами навигации iOS: гамбургер-меню практически стало стандартом для Android (в «материальном» дизайне Google такой шаблон называется navigation drawer). Однако на iOS использование «гамбургера» приведет к конфликту с базовыми навигационными элементами, и может вызвать перегрузку панели навигации;
- значок «гамбургера» скрывает контекст. Текущее положение пользователя не видно с первого взгляда. Информация появляется только после нажатия на иконку;
- обязательно совершить лишнее действие, чтобы выполнить желаемое действие. Для открытия определённой страницы обычно требуется не менее двух нажатий (один раз на значок меню, а другой — на целевой параметр).
Советы
Приоритетом должна быть навигация. Если пользователям сложно взаимодействовать с приложением, то скрывать опции — не лучшее решение. Практика показывает, что открытость параметров меню увеличивает вовлечение и удовлетворённость пользователей.
Спросите себя, какие элементы настолько важны, что без них на экране не обойтись? Чтобы ответить на этот вопрос, сперва нужно узнать приоритеты пользователей.
Если количество важных навигационных опций ограничено, то лучше использовать табличное меню, как это реализовано в приложении YouTube.
Изучите информационную архитектуру продукта. Хорошие приложения очень сфокусированы. Поэтому если у вас есть одно сложное приложение, вы можете разделить его функциональность на два (или более) простых продукта. Так поступил Facebook, представив Messenger.
Панель вкладок
Этот шаблон — наследие дизайна для компьютеров. Обычно на панели размещается относительно небольшое количество кнопок, которые одинаково важны и требуют прямого доступа из любого места приложения. Вкладки не скрывают навигацию и дают прямой доступ к необходимому разделу.
В каких случаях использовать
Вкладки — это отличное решение для приложений с относительно небольшим количеством приоритетных вариантов навигации — до пяти штук. Панель открывает доступ к основным функциям с помощью одного нажатия, и пользователь может быстро переключаться между ними.
Достоинства
- панель вкладок довольно легко передает текущее положение пользователя в приложении — если правильно подобрать визуальные сигналы — значки, иконки и цвета;
- панель вкладок устойчива. Навигация остаётся в поле зрения независимо от того, какую страницу просматривает пользователь. Он ясно видит все основные функции приложения и имеет доступ к ним одним щелчком;
- Если панель расположена внизу экрана, ей удобно пользоваться, когда устройство держат одной рукой;
Недостатки
- варианты навигации ограничены. Если в вашем приложении более чем пять опций, то будет сложно установить их на навигационной панели и сохранить оптимальный размер;
- расположение и логика панели вкладок на iOS и Android отличается. У платформ разные правила и рекомендации для пользовательского интерфейса: вкладки на Android отображаются в верхней части экрана, а на iOS — в нижней. Помните, что это правило не распространяется на мобильные веб-сайты, поэтому опыт работы с ними должен быть одинаковым независимо от операционной системы устройства;
Советы
- сделайте иконки достаточно большими, чтобы их можно было легко нажать. Чтобы рассчитать размер каждой кнопки навигации внизу, разделите её ширину на количество действий. Либо сделайте все кнопки на нижней навигационной панели настолько широкими, насколько возможно;
- наведите порядок в панели навигации. Пользователи ожидают увидеть определённый порядок на панели вкладок. Первым элементом должен быть главный экран приложения, а последующие — в зависимости от их приоритета или логики в сознании пользователя. Одна из вкладок всегда должна быть активной и визуально выделенной;
- тестируйте иконки на юзабилити. Как видно в примерах ниже, дизайнеры приложений иногда скрывают функциональность за значками, которые довольно трудно распознать. Чтобы предотвратить это, тестируйте все иконки правилом пяти секунд — если требуется больше пяти секунд, чтобы понять, для чего предназначена иконка, то вряд ли значок обеспечит эффективную коммуникацию;
- если иконка провалила правило пяти секунд, её нужно дополнить текстовым описанием. Из-за отсутствия стандартов использования для большинства значков текстовое описание необходимо для передачи информации и исключения двусмысленности. Пользователь должен понимать, что именно произойдёт, когда он нажмёт на элемент.
Шаблон «Приоритет+»
Его придумал дизайнер Майкл Шарнагль для такого типа навигации, когда на экране отображаются более важные элементы, а менее важные — скрыты за кнопкой «Больше».
В каких случаях использовать
Этот шаблон может быть хорошим решением для приложений с большим количеством контента или для новостных ресурсов и крупных интернет-магазинов.
К примеру, издание The Guardian использует шаблон приоритета для навигации по разделам. Менее важные элементы отображаются, когда пользователь нажимает кнопку «Все».
Достоинства
- помогает расставить приоритеты в навигации. На первое место выходят самые используемые опции;
- шаблон экономит экранное пространство. Чемб ольше вободного пространства, тем больше появляется очевидных вариантов навигации. Это увеличивает понятность продукта и вовлеченность пользователей;
- меню легко адаптировать под различные устройства. Вы можете масштабировать его по размеру экрана без преобразования шаблона.
Недостатки
- могут скрываться некоторые важные элементы навигации. Шаблон приоритета требует от дизайнеров учитывать относительную важность элементов навигации. Имейте в виду, что элементы, которые вам кажутся приоритетными, могут оказаться бесполезными с точки зрения пользователей.
Всплывающая кнопка действия
Она изменяет цвет и «продавливается» при активации. Этот шаблон хорошо знаком пользователям Android, он — отличный элемент материального дизайна. Плавая над интерфейсом приложения, она подталкивает пользователя совершить действие.
В каких случаях использовать
Дизайн элемента зависит от того, как часто и какие именно действия будет выполнять пользователь. Вы можете сделать кнопку еще более внушительной, назначив ей основную функцию вашего продукта — для музыкального приложения это может быть функция воспроизведения.
Такая кнопка — естественный сигнал, что нужно делать дальше. Изучив пользователей, сотрудники Google обнаружили, что люди воспринимают кнопку в качестве инструмента поиска.
Когда вы сталкиваетесь с незнакомым экраном — например, при запуске приложения — вы интуитивно будете использовать всплывающую кнопку для навигации. Это хороший способ обозначить наиболее важные функции приложения.
Достоинства
- кнопка указывает на то, что важно. Это хороший способ подчеркнуть приоритетность функции;
- она занимает мало пространства на экране;
- кнопка несет эмоциональную нагрузку. Если пользователю приятно использовать приложение, это улучшает UX;
- улучшает удобство навигации. По данным исследования профессора Вашингтонского университета Стива Джонса, пользователям неудобно взаимодействовать с этим шаблоном только впервые — когда они привыкают, то могут использовать его более эффективно, чем традиционную кнопку действий.
Недостатки
- всплывающая кнопка может отвлекать пользователей от контента. Она отличается от фона, и разработана так, чтобы привлекать внимание. Поэтому иногда она отвлекает пользователя от основного контента;
- она может перекрывать контент. Например, в приложении Gmail видно, что кнопка блокирует звезду — значок меню «избранное», —, а также время на последней строке. Чтобы увидеть эту информацию, придется пролистать вниз;
- в навигации с помощью кнопки используются только значки. Как правило, кнопка — круглой формы, и там нет места для текста. Однако значки можно интерпретировать по-разному. Даже знак в виде карандаша в разных приложениях отвечает за разные действия;
Советы
- поскольку кнопка настолько заметна и навязчива, используйте не больше одной на экран;
- не стоит добавлять кнопку на каждый экран, потому что не каждый элемент имеет такое важное значение;
- кнопка связана с позитивными действиями, например «создать», «добавить в избранное», «переместить», «искать» и так далее. Не используйте её для деструктивных действий, таких как «удалить»;
- ее можно заменить последовательностью более конкретных действий. Она показывает набор, который на самом деле не виден сверху, но по-прежнему важен. Например, в приложении Evernote всплывающая кнопка вызывает наиболее важные опции;
- кнопка может улучшить переходы между экранами.
Полноэкранная навигация
Этот шаблон опирается на противоположный подход — он занимает все пространство и использует главную страницу приложения только для навигации. А по мере перемещения пользователи открывают другие элементы меню.
В каких случаях использовать
Этот шаблон хорошо работает для описания задач, особенно когда за сессию пользователи используют только одну ветвь навигационной иерархии. Перемещение пользователей с обзорных страниц на более подробные помогает им найти нужный контент и сосредоточиться на его содержании в отдельном разделе.
Достоинство
Полноэкранная навигация наиболее проста и последовательна. Вы можете оперировать большими фрагментами информации и раскрывать их, не перегружая пользователя. Как только пользователь примет решение, какой блок выбрать, ему можно показать весь необходимый контент.
Недостаток
В этом случае вы теряете главный экран — кроме параметров навигации вы не сможете показать какой-либо другой контент.
Совет
Используйте гамбургер-меню, чтобы скрыть вторичные функции и сосредоточьтесь только на главном, как в приложении Cookly.
Навигация с помощь жестов
После появления сенсорных экранов, управление с помощью жестов — свайпа, вращения, или масштабирования — сразу стало популярным среди дизайнеров. Сегодня успех мобильного приложения во многом зависит от того, насколько удобно управлять им с помощью жестов.
В каких случаях использовать
Этот шаблон хорош, когда пользователи хотят изучить детали конкретного контента. В этом случае они сосредоточатся именно на содержимом приложения, а не на навигации.
Достоинства
- шаблон устраняет беспорядок в UI. Жесты помогают сделать интерфейс минималистичным и сохранить пространство экрана для ценного контента;
- UI становится более естественным. Автор книг о веб-дизайне Люк Вроблевски рассказывает об исследовании, в котором 40 человек из 9 разных стран попросили создать жесты для 28 различных задач — удалить, прокрутить, масштабировать и так далее. Он обнаружил, что несмотря на разный менталитет и опыт, все жесты были похожи. Например, чтобы что-то удалить, большинство людей — независимо от национальности — пытались смахнуть объект за пределы экрана;
- жесты могут выгодно выделять продукт среди других. Tinder широко популяризировал концепцию навигации, основанной на управлении с помощью жестов. Теперь это визитная карточка продукта.
Недостатки
- навигация неочевидна. Самое главное правило UI-дизайна — очевидность. Невидимый UI может быть красив, но поскольку он неочевиден, с ним, вероятно, будет неудобно взаимодействовать;
- большинство жестов неестественны и сложны для изучения или запоминания. При разработке навигации на основе жестов следует помнить, что каждый раз, когда вы удаляете беспорядок UI, кривая обучения приложения увеличивается. Без правильных визуальных намёков и подсказок пользователи могут запутаться.
Советы
- убедитесь, что вам не нужно учить людей совершенно новому способу взаимодействия с интерфейсом. Создайте знакомый опыт. Например, если вы разрабатываете приложение для электронной почты, вы можете использовать действие «свайпнуть», потому что этот жест знаком многим пользователям;
- учите людей взаимодействовать с вашим интерфейсом. Избегайте длинных однообразных обучающих руководств. Вместо этого показывайте только информацию, относящуюся к текущей деятельности пользователя. Посмотрите, как это реализовано в приложении Pudding Monsters.
3D Touch
Это изысканный сенсорный механизм, который Apple впервые представила в iPhone 6s и 6s Plus. С помощью функции пользователи могут быстрее воспользоваться функциями приложения и увидеть его возможности.
Теперь начальный экран iOS — это больше не просто сетка приложений, потому что 3D Touch дает пользователям доступ к функциональности приложения с главного экрана — долгое нажатие на значок открывает список быстрых действий. Например, включить фронтальную камеру или перейти к контактам прямо из сообщений.
Также 3D Touch позволяет пользователям просматривать контент и выполнять связанные действия в приложении, не открывая содержимое полностью. Например, если нажать на заголовок электронного письма, то с помощью 3D Touch откроется предпросмотр содержимого.
В каких случаях использовать
С помощью 3D Touch можно сделать часто используемые функции более доступными. 3D Touch — это аналог «горячих» клавиш на обычной клавиатуре, которые помогают пользователям выполнять повторяющиеся задачи быстрее.
Например, можно перейти к функциям камеры с главного экрана — сделать селфи, записать видео или снять обычную фотографию. Однако, пользователи должны иметь возможность управлять своим приложением как с помощью 3D Touch, так и без.
Достоинства
- благодаря ускоренным действиям 3D Touch может сэкономить пользователям много времени, пропуская несколько лишних нажатий в приложении;
- упрощённый интерфейс 3D Touch обеспечивает быстрое и лёгкое взаимодействие пользователя с приложением. Это позволяет дизайнерам упростить интерфейс и расширить функциональность.
Недостаток
- пользователи должны запоминать, в каких приложениях есть 3D Touch, а в каких — нет.
Инновационные шаблоны навигации
Люди переходят на телефоны большего размера. Но чем шире дисплей, тем менее доступной становится большая часть экрана. Поэтому дизайн и навигацию необходимо адаптировать.
Несколько интересных решений можно найти в статье «Интерфейс нижней навигации». Одно из них реализовано в медицинском приложении Ada. Его интерфейс — это зеркальное отображение базового интерфейса с гамбургер-меню. Все, что обычно находится наверху, удобно находится внизу, в зоне лёгкого доступа.
Второе решение — это концепция навигации для одной руки. Метод хорош в мессенджерах, потому что пользователи, как правило, набирают сообщения с помощью одного пальца.
Задача любого UX/UI-дизайнера — сделать приложение интуитивно понятным и для новых пользователей, и для более «опытных». Чем проще будет продукт, тем выше вероятность, что они захотят воспользоваться им во второй раз.
© vc.ru
