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

Меню должно быть видимым

О габургер-меню было написано множество постов, и большинство отзываются о нем негативно.

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

габургер-меню

Вне поля зрения — вне памяти

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

Но кнопка гамбургер-меню менее эффективна по одной простой причине: вам нужно дополнительно кликнуть, чтобы увидеть желаемую опцию.

Пример боковой панели
Пример боковой панели

Вижу и использую

Теория взаимодействия, A/B-тесты и эволюция некоторых топовых приложений мира говорит о том, что демонстрация опций меню более видимым способом увеличивает вовлеченность и удовлетворенность пользователя.

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

Панель вкладки: Вместо скрывания опций навигации в сворачиваемую панель, вы выводите их наружу.
Панель вкладки: Вместо скрытия опций навигации в сворачиваемую панель, вы выводите их наружу.
YouTube всегда делает элементы ключевого функционала доступными в одно касание, позволяет быстро переключаться между функциями.
Редизайн Android-приложения YouTube.
Редизайн Android-приложения YouTube.
Есть также умные способы прятать панель вкладок, когда она не используется. Если экран представляет собой прокручиваемую ленту, панель вкладок можно прятать, когда пользователь скроллит ее для подгрузки нового контента, и снова показывать ее, если они пытаются промотать ленту назад.
Скрытая панель вкладок.
Скрытая панель вкладок.
И еще кое-что: многие дизайнеры ошибаются, скрывая параметры сортировки в выпадающем меню. Но это ведет к одной и той же проблеме — пользователи видят только выделенную опцию, а другие возможности сортировки скрыты.
Меньшая видимость (выпадающее меню) и большая видимость (переключатель).
Меньшая видимость (выпадающее меню) и большая видимость (переключатель). Источник: uxmovement.
Пример кнопки-переключателя для iOS:

Пример кнопки-переключателя для iOS:

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

Обозначение текущего местоположения

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

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

Иконки

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

Bloom.fm для Android
Предыдущая версия приложения Bloom. fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвета

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

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

Координируйте меню с задачами пользователя

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

Пользователи любят мобильные приложения, которые быстро решают какой-то конкретный кейс. И вы можете сократить время, которое нужно потратить пользователю, на понимание меню.

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

Делайте манипуляции простыми

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

В исследовании MIT Touch Lab было установлено, что средняя ширина указательного пальца взрослого человека составляет 1.6 — 2 см. Это равноценно 45−57 пикселям.

Средняя ширина указательного пальца в пикселях. Источник: uxmovement.
Средняя ширина указательного пальца в пикселях. Источник: uxmovement.
Ширина области касания в 45 — 57 пикселей позволяет пальцу пользователя легко выполнить свою задачу, получить четкий визуальный отклик.

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

Заключение

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

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

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

Спасибо!