Существует старая поговорка, что хороший дизайн должен быть долговечным. Дитер Рамс указывает, что творения дизайнеров не должны быть модными. Таким образом, продукт никогда не устареет. Несколько лет назад в мобильных приложениях была большая шумиха вокруг бокового меню. Теперь, похоже, что нижняя навигация стала новым трендом. Должны ли мы использовать этот шаблон во всех типах приложений? Или, может быть, это очередная временная мода?
Принципы нижней навигации
Прежде чем мы перейдем к небольшой критике, давайте объясним, каковы характеристики нижней навигации.
Материальный дизайн
Панель нижней навигации является одним из новейших шаблонов в Visual Framework от Google. Она позволяет исследовать отображаемые элементы верхнего уровня всего одним нажатием. Руководство по материальному дизайну рекомендует отображать от 3 до 5 элементов. Если приложение имеет только 2 основных пункта назначения, оно должно использовать шаблон материального дизайна “Tab”. Этот значок отображается в верхней части экрана (внутри или под панелью приложений). Высота нижней навигационной панели – 56dp. Она должна гарантировать подходящую зону касания. Размер иконки si 24dp, текст подписи имеет 14sp (выбранный элемент) и 12 sp (неактивные элементы). Выбранная вкладка должна окрашивать активную иконку основным цветом приложения. Остальные иконки должны иметь один и тот же цвет. Google рекомендует, что это должно привести к пунктам назначения, для которых требуется прямой доступ из любого места приложения. Более того, разрешено отображать только иконки (без текстовых подписей) в панели нижней навигации. Шаблон также может быть скрыт, когда список или сетка прокручиваются вниз и отображаются после прокрутки вверх. На Android нижняя навигация не реагирует на нажатие кнопки “Назад”. Он разработан таким образом, поскольку использует решение управления параллельными окнами. Этот шаблон пользовательского интерфейса специально предназначен для использования на мобильных устройствах. Google рекомендует избегать его в десктопных приложениях (там дизайнеры должны использовать боковые панели).
iOS
Элемент пользовательского интерфейса нижней навигации в iOS хорошо известен как панель вкладок. Он реализован в мобильной операционной системе Apple с самого начала. Этот шаблон навигации прошел несколько незначительных визуальных изменений, но его принципы остаются прежними. Панель вкладок расположена в нижней части экрана. Это дает возможность быстро переключаться между основными окнами приложения. Выбранная вкладка имеет отличный от других вкладок цвет. Таким образом, она получает информативную функцию. Apple рекомендует использовать шаблон нижней навигации для организации информации на верхнем уровне навигации приложения. Панель вкладок должна использоваться только для навигации. Не выполняйте там никаких действий для содержимого окна. Human Interface Guidelines указывает, что приложение не должно скрывать или отключать вкладку, когда ее функция недоступна. Вкладки должны иметь одинаковый контент для всего решения. Только тогда ваш продукт будет ощущаться стабильным и заслуживающим доверия в глазах ваших пользователей. Рекомендуемый размер иконки должен составлять около 25pt. Текстовые подписи имеют около 10pt. Общая высота панели вкладок составляет 49pt. Используйте в нижней навигации от 3 до 5 вкладок. Менее 3-х элементов будут казаться неестественными, более 5 будет трудно нажимать. Если есть больше разделов вашего решения, последняя из 5 вкладок должна быть опцией “Больше”, которая вызовет меню с оставшимися позициями.
Общие проблемы нижней навигации
После знакомства с базовыми принципами нижней навигации вы можете заметить, что это действительно простой и легкий в использовании шаблон. Но у него есть и некоторые недостатки.
Сложная структура навигации
Хотя рекомендация включать только 3 или 5 элементов верхнего уровня навигации в этом шаблоне пользовательского интерфейса очень рациональна. Лично я не понимаю, почему она должна отображаться во всем приложении. Пространство на мобильных устройствах по-прежнему ценно, и более глубокие уровни навигации не нуждаются в нижней панели. Навигация приложения будет намного более понятной, когда панель будет отображаться только в пунктах назначения, которые представлены во вкладках. Параллельная навигация не должна смешиваться с иерархической. Таким образом, пользователь сможет быстрее строить ментальную модель приложения. 
Панель занимает слишком много драгоценного места на экране смартфона
И Google, и Apple рекомендуют отображать панель нижней навигации на всех экранах. Панель вкладок на iOS занимает около 50pt, в материальном дизайне 56dp. Это все еще заметный элемент пользовательского интерфейса, который занимает довольно большое количество драгоценного пространства. Я считаю, что мы сможем успешно смешивать некоторые правила iOS и материального дизайна. Как я уже упоминал, мы должны отображать нижнюю панель только тогда, когда это окна, которые включены во вкладки. Остальные экраны этого не требуют.
Слишком маленький текст
Текстовые подписи, представленные всего 12sp для многих людей, могут быть трудными для чтения. Более того, рекомендации iOS по панели вкладок с их лишь 10pt для текста еще хуже. Для новых пользователей, изучающих приложение, иконки может оказаться недостаточно, чтобы угадать, какой пункт назначения запускается после нажатия на конкретный элемент. Мелкий, трудночитаемый текст не должен использоваться для основного элемента приложения. Каждый шаблон навигации должен быть разработан так, чтобы все пользователи могли его легко использовать. Недавно я написал несколько полезных советов о том, как сделать приложения более доступными для всех. Если вы хотите узнать больше об этих принципах, прочитайте эту статью – Дизайн не отстойных приложений. Доступность на мобильных устройствах.
Мало текста
В то время как руководство iOS по панели вкладок рекомендует отображать текст ниже иконки, принципы материального дизайна позволяют отображать только символы для элемента, который не выбран. Это решение может снизить вовлеченность пользователя, потому что каждый должен угадать, что скрывается за иконкой. Не каждая иконка имеет понятное значение для пользователей. Некоторым из них не хватит мужества или мотивации, чтобы узнать, что скрывается за символом.
Случайные касания (особенно на Android)
Я помню серию статей, описывающих шаблон вкладок, представленный в стиле пользовательского интерфейса Holo. Многие из них утверждали, что приложения Android никогда не должны реализовывать вкладки в нижней части экрана, потому что элементы могут быть случайно нажаты, когда пользователь хочет нажать одну из 3 системных кнопок. Непонятно почему Google решил нарушить свои первоначальные рекомендации. Я не раз видел, как люди нажимали неправильную кнопку, потому что она была близка к нижней навигации…
Панель вкладок легко перепутать с панелью инструментов iOS.
На iOS ситуация лучше, но она не идеальна. Панель вкладок часто путают с панелью инструментов, потому что эти два элемента пользовательского интерфейса визуально похожи. Однако функция этой панели инструментов очень отличается. Она была создана для представления иконок, которые выполняют действия, относящиеся к содержимому экрана. Панель вкладок была создана для использования в качестве навигационного элемента.
Когда не использовать нижнюю навигацию
Не используйте вслепую этот шаблон пользовательского интерфейса в каждом проекте, который вы разрабатываете. Бывают случаи, когда панель нижней навигации избыточна. Если ваше приложение имеет одну основную функцию, не используйте нижнюю навигацию. Когда ваши пользователи должны тратить более 90% своего времени в приложении в одном окне, вы никогда не должны использовать этот шаблон. Наиболее очевидными примерами этого типа приложений являются почтовые ящики и чаты. Вы также должны избегать использования панели нижней навигации для проектов, которые не предназначены для мобильных устройств. Нижние вкладки на более широких экранах выглядят странно и занимают много места без каких-либо дополнительных преимуществ.
Что использовать вместо нижней навигации
Если вы уже обнаружили, что вашему приложению не нужен упоминаемый элемент пользовательского интерфейса, то какой другой шаблон навигации использовать вместо него?
Вкладки (Android)
Если ваше решение имеет только две основные функции или более 5, но менее 7 (нижняя навигация должна иметь от 3 до 5 элементов) – используйте шаблон вкладок, известный из материального дизайна. Вкладки также облегчают поиск приложения. Переключение между представлениями в простой форме. Вкладки представлены рядом с панелью приложений, поэтому все навигационные элементы находятся поблизости. Более того, их можно прокрутить. В то время как нижняя навигация не позволяет использовать этот тип взаимодействия, руководство по вкладкам рекомендуют этот режим в некоторых ситуациях. Кроме того, вкладки могут отображаться на мобильных устройствах, планшетах и настольных компьютерах. Если вы хотите поддерживать большую визуальную согласованность с вашим omni-канальным сервисом, этот элемент пользовательского интерфейса может быть рациональным выбором.
Сегментированные элементы управления (iOS)
Используйте их, если контент вашего решения должен быть организован по-другому, и это основная функция вашего решения. Сегментированные элементы управления – это представление, набор из, по меньшей мере, двух сегментов. Отдельный сегмент может содержать текст или изображения. Все элементы всегда равной ширины. Сегментированные элементы управления обычно используются для отображения разных представлений. Они могут использоваться для переключения между категориями продуктов (Бесплатное, Лидер продаж, Промо) или для организации контента вашего музыкального приложения (Плейлист, Библиотека).
Боковое меню
В блоге есть много сообщений с критическим мнением относительно этого шаблона пользовательского интерфейса. Но, всегда ли плохо использовать боковые меню? Что делать, если ваше решение имеет только одну основную функцию? Если вы хотите скрыть дополнительную и ненужную сложность решения. Просто скройте в боковом меню функции, которые редко используются. Хорошим примером эффективной реализации бокового меню является мобильное приложение Slack. Вы проводите большую часть времени в разговоре, поэтому нет необходимости размещать ненужную навигационную панель внизу экрана. Тем не менее, есть еще функции, которые должны быть легко доступны, когда они понадобятся. Не бойтесь боковых меню, просто используйте их с умом.
Полезные методы улучшения поведения нижней навигации
Теперь, когда вы знакомы с некоторыми недостатками нижней навигации и ее альтернативами. Давайте рассмотрим, как немного улучшить ее поведение, чтобы она стала более удобной для пользователя.
Скрыть при прокрутке
Одним из основных недостатков панели нижней навигации является ее постоянное присутствие на экране. Однако есть способ ее улучшить. Как я упоминал ранее, у материального дизайна есть соблазнительный совет на этот случай. Некоторые приложения начинают скрывать панель, когда пользователь прокручивает список вниз. Благодаря этому пользователь получает больше места, чтобы потреблять контент, который он только что начал просматривать. Более того, он не отвлекается на визуальный элемент в нижней части представления. Как сделать панель нижней навигации, видимой снова? Пользователь должен немного прокрутить список, и все снова появится. Очень элегантная и предусмотрительная стратегия.
Прогрессивная иконка с исчезающей текстовой подписью (прим. – т.н. прогрессивное упрощение)
Первые разы навигация по приложению может быть немного утомительной и медленной, потому что пользователь знакомится с программой. Но он запоминает продукт. Так почему бы не использовать память и знания пользователей? Давайте представим следующую ситуацию: Вы часто используете приложение с нижней панелью. Его панель нижней навигации содержит подробную иконку и текстовую подпись. Через несколько недель вы помните, где находится желаемый вид или действие. Вы начинаете использовать продукт автоматически. Затем, через месяц, вы рекомендуете своему другу установить приложение. Когда он запускает главный экран и сравнивает его с вашим. Есть сюрприз! У вашего приложения чистые минималистичные иконки без текстовых меток. У второго есть более подробные значки с четко отображаемым описанием. Вы не заметили разницу раньше. Что случилось? 
Панель нижней навигации настолько плоха?
Уинстон Черчилль сказал: “Демократия – худшая форма правления, за исключением всех остальных”. Аналогичная ситуация с панелью нижней навигации. Эстетика не выделяется. Панель берет драгоценное место на экране, а символы с крошечным текстом могут быть не совсем читаемыми. Но это полезный и понятный компонент пользовательского интерфейса. Он решает многие проблемы и привлекает пользователей несравненно лучше, чем боковое меню. Дизайнеры должны все еще использовать нижнюю навигацию в качестве основного шаблона пользовательского интерфейса для навигации между основными экранами. Однако, важно помнить о недостатках этого компонента пользовательского интерфейса.
Подводя итог
Вы никогда не должны слепо следовать трендам в UX дизайне. Некоторые из них останутся и станут стандартами, некоторые будут забыты через несколько месяцев. Используйте нижнюю навигацию с умом. Это может быть мощный инструмент привлечения пользователей в ваше приложение. Но важно знать его пределы и устранить некоторые недостатки.
Если вы похожи на меня, и вы постоянно ищете уникальные идеи в UX и UI дизайне, я рад сообщить, что есть сообщество, посвященное блогу UX Misfit. Если вы хотите читать и делиться вдохновляющим материалом с такими людьми, как вы – пожалуйста, присоединяйтесь к сообществу UX Misfits в Facebook.
Мне действительно любопытно, узнать ваши впечатления от шаблона панели нижней навигации. Согласны ли вы с упомянутыми наблюдениями? Пожалуйста, дайте мне знать в комментариях. Спасибо! Похожие статьи:
- Нижняя навигация в дизайне мобильных приложений
- Мобильный UX-дизайн: нижняя навигация
- Удачные альтернативы гамбургер-меню в мобильных приложениях
- Альтернатива гамбургер-меню
- Идеальное меню для мобильных приложений
Перевод статьи uxmisfit
Найновіші коментарі (0)