Удачные альтернативы гамбургер-меню в мобильных приложениях

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

Вкладки

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

Нижняя навигация

Близкий родственник вкладок, заслуживающий на отдельную категорию. Этот паттерн адаптирован под обе платформы - iOS и Android – она почти “всегда видима” и состоит из иконок с метками. Панель навигации можно скрыть/отобразить при скролле вверх/вниз. Я бы добавил только, что хотя Google рекомендует не использовать описание для неактивных иконок в некоторых случаях, я строго рекомендую их добавлять. Не нужно превращать навигацию в “угадайку” для пользователей.

Покажите больше

Если есть больше пунктов меню, чем может вместиться на экране, вы можете добавить опцию “показать больше” (show more). Сократите список до 4 основных действий, которые вы бы хотели сразу же предоставить своим пользователям, а оставшиеся пункты разместите в модальном или поп-ап окне или даже на новой странице. У вас появляется возможность расширить набор опций и не урезать контент меню.

Прокручиваемая навигация

Как и “Show more”, это еще один подход для показа длинных списков меню. Пользователи смогут прокручивать его сверху вниз и обратно. Решение из одних иконок подойдет пользователям, хорошо знакомым с продуктом, но лучше протестировать перед коммитом.

Однорядная навигация

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

Сегментированное управление

Если есть всего парочка пунктов меню, используйте сегментированные кнопки. Все опции сразу видны, и доступ к любой осуществляется в одно касание к экрану.

Не прячьте поиск

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

Всегда стройте дизайн вокруг контента

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

• Пост @lukew о том, что Очевидное всегда выигрывает.
• Facebook, YouTube, Spotify избавились от гамбургер-меню. Вот почему.
• Проект-менеджинговая компания Redbooth перешла на нижнюю навигацию после подробнейшего исследования и использования в паре, исследования касалось времен, проведенного в приложении и активности пользователей. Почитайте детальнее об этом.

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

---

Перевод статьи Levi