Make Burger menu Painful Again

Originaly published at t.me/poyasnizaux

Я — счастливый обладатель смартфона на Андроид. И постоянно залипаю с него в Инстаграм.

Я давно уже смирилась с бургером справа в разделе Аккаунт, под которым прячутся второстепенные функции и настройки Инстаграм.

Всем можно, а Инстаграм нельзя?

Но недавно я увидела как это работает на iOS:

Бургер-меню справа вызывает модальное окно и сердечный приступ

Что тут происходит:

Пользователь берет свой айфон > открывает раздел Профиль > обнаруживает иконку навигации Android (burger) > по ее нажатию видит окно поверх основного экрана, снизу.

• Иконка Burger (навигация по разделам в Android) находится внутри одного из разделов. При этом основная навигация приложения — внизу.
• По нажатию на Burger, появляется ещё одна навигация в модальном окне.

WHAT THE F*N HECK?

Начнем с того, что компонент от Google Material (Android) бессердечно всандален в iOS.

В стандартах iOS навигационной иконки Burger не было и сейчас нет. Навигационный элемент в iOS — Tab Bar.

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

Ладно, используют компонент навигации из Material в iOS. Все так делают, мам!

А правильно ли используют?

Посмотрим, что на тему навигации говорит сам Google Material.

По версии Google — основная навигация в системе может осуществляться посредством Navigation Drawer:

Navigation Drawer обеспечивает доступ к разделу и функциям приложения, таким как переключение аккаунта. Модальное меню всегда открывается по нажатию на навигационную иконку (1).

И небольшая ремарка:

НЕ НАДО. Не надо размещать Navigation drawer справа нигде, кроме приложений на языке, который читается справа налево.

Инстаграм:

Иконка справа 👏 Наверное, для удобства праворуких (левши, ваша остановочка).

Но почему меню Инстаграм открывается в виде модального окна внизу?

Относительно недавно Google Material обновили гайдлайны, добавив новый компонент Bottom Drawer.

Специальный модальный компонент для использования с Bottom app bar.

Bottom Drawer используется с Bottom app bar.

Ребята, помогите Даше разобраться, что такое Bottom app bar?

Не это:

Bottom Navigation

А вот это:

Bottom App bar

Идея Google, вобщем-то, очень хорошая. Устройства становятся больше и тянуться в левый верхний угол все труднее. Логично перенести “шапку” вниз, чтобы тянуться было ближе.

Bottom App Bar такой же, как Top App Bar, только снизу.

Эдакая “шапка” приложения, расположенная снизу. Навигация все также прячется под бургером, в модальном Bottom Drawer.

Bottom Drawer вызывает модальное окно

Итак, что сделал Инстаграм

1. Украл иконку основной навигации для iOS у платформы Android
2. Всандалил ее внутрь раздела
3. Расположил так, как по гайдам не рекомендуется
4. Впиндосил поведение, которое относится совсем к другому паттерну

Очевидные, на мой скромный взгляд (и потому спорные), недостатки данного решения:

1. Иконка основной навигации по разделам спрятана внутрь одного из них (раздела Профиль). Если под иконкой скрываются подразделы — почему вы используете иконку основной навигации? Используйте три точки из Google, придумайте что-то другое… Зачем использовать иконку, которая не предназначена для данного контекста?
2. Если уж берете компонент из гайдов конкурентов — почему не вчитаться в эти гайды? Возможно там не зря говорят, что иконка навигации справа — это только для “правобоких” языков? Может под этим скрывается хорошее исследование?
3. Разберитесь в логике компонента, прежде чем его использовать. Bottom Drawer нужен, чтобы вызвать скрытое под бургером меню, когда шапка перенесена вниз. В случае Инстаграм навигация все еще сделана посредством Bottom Navigation, а это другой компонент.

Learn more at t.me/poyasnizaux

Курсы со скидкой 55%. Промокод DESIGNPUB.