Восемь навигационных меню в мобильных приложениях

Лаборатория Friendly Design делится переводом статьи на Medium.

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

Граммотно спроектированное меню не только создаёт визуально красивый интерфейс продукта, но и как правило улучшает юзабилити.

Повысить качество содержания продукта, структуры и иерархии функций

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

Выделить основные функции

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

Упростить пользовательский опыт

Продуманная навигация и последовательный путь к задаче позволяют пользователям быстро достичь своих целей и сформировать позитивный пользовательский опыт. Сокращение пути переходов пользователя имеет прямое влияние на его удовлетворение, что в свою очередь повлияет на повышение конверсии. Таким образом, высокая эффективность навигации должна направлять пользователей просто и непосредственно к функциям приложения.

Tabber-классическое меню навигации

Tabber — это навигационное управление, которое может быть автоматически сгенерировано в IOS и быстро имплементировано. Таким образом, этот вид классической нижней навигационной панели был предпочтен многими дизайнерами приложений. Этот дизайн соответствует одноручным привычкам пользователей мобильных телефонов, которые помогли большинству приложений на рынке удержать пользователей.

Преимущества: четкое понимание текущего местоположения и того, что примерно располагается в каждой из вкладок

Недостатки: если слишком много функциональных входов, модель кажется громоздкой.

Меню навигации из прямоугольной сетки

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

Преимущества: этот вид навигации прост и четкая навигация может помочь повысить эффективность.

Недостатки: нужно обратить внимание на цветовые схемы. Дизайн, который перенасыщен, как правило заставляет пользователя чувствовать визуальную усталость.

Бургер-меню

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

Преимущества: это экономит пространство для отображения страницы и позволяет пользователям сосредоточиться на текущей странице с хорошей масштабируемостью.

Недостатки: если требуется часто переходить по разделам, то это может оказаться неудобным способом.

Навигация по рулю

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

Преимущества: руль может выделить большее количество важных кнопок, которые необходимы для регулярного использования.

Недостатки: те же, что и в бургер-навигации.

Классический дизайн меню навигации

Google Material Design использует «плавающую кнопку действия» для навигации. Которая дифференцируется через значок, плавающий над интерфейсом и имеет соответствующие динамические эффекты.

Например, данную модель навигации использует Evernote. Пользователь просто нажимает на плавующую кнопку в нижнем правом углу экрана и может быстро записать новую идею.

Tumblr оснащен яркими значками и соответствующими подписями. При прокрутке вниз, чтобы просмотреть содержимое, эти значки, естественно, исчезнут.

Конструкция Messenger строго следует за навигацией по разделам, некоторые метки закреплены сверху, а некоторые четко показывают основные функции внизу. Значки ясны и легки для понимания.

Все больше дизайнеров осознают важность навигационных меню на мобильных устройствах для улучшения пользовательского опыта. В Android мы увидели итерацию навигации из бургера в отдельную панель вкладок. В iOS все больше приложений используют нижнюю навигацию. В погоне за лучшим пользовательским опытом и красочным интерфейсом, дизайнеры постоянно исследуют новые направления и пути оптимизации для навигации в приложении, что приводит к созданию новых типов.

#дизайн