Каким должно быть идеальное меню в мобильном приложении

Веб и интерфейсы

Каким способом ищут нужный контент пользователи на сайте либо в приложении? Конечно же через меню. Без этого важного элемента не обойдется ни один ресурс, но вот одно меню другому рознь. То и дело пользователи, используя их, сталкиваются с проблемами. Некоторые не могут разобраться в многочисленных пунктах, другие жалуются на сложное управление, а кому-то вообще трудно найти, где же находится искомое.

Каким должно быть идеальное меню в мобильном приложении_13

Отсюда и первое правило идеального меню — его должно быть видно.

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

Каким должно быть идеальное меню в мобильном приложении_1

Каким должно быть идеальное меню в мобильном приложении_2

Однако здесь появляется проблема с гамбургер-меню, ведь для доступа к нужной опции нужен дополнительный клик. Между тем, согласно многочисленным исследованиям, пользователь более удовлетворен, когда видит опции меню. Именно поэтому есть большое количество приложений, которые вместо гамбургер-меню отдают предпочтение тем, которые «держат» опции навигации видимыми. Здесь стоит обратиться к примеру видеохостинга YouTube, где возможно быстрое переключение между функциями — все основные опции доступны в одно касание.

Каким должно быть идеальное меню в мобильном приложении_3Каким должно быть идеальное меню в мобильном приложении_4

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

Каким должно быть идеальное меню в мобильном приложении_5

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

Каким должно быть идеальное меню в мобильном приложении_6

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

Каким должно быть идеальное меню в мобильном приложении_7

Второе правило идеального меню — позволить пользователю увидеть его текущее местоположение.

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

Каким должно быть идеальное меню в мобильном приложении_8

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

Каким должно быть идеальное меню в мобильном приложении_9

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

Каким должно быть идеальное меню в мобильном приложении_11

Третье правило идеального меню — оно должно быть понятно пользователю.

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

Каким должно быть идеальное меню в мобильном приложении_10

Итак, делаем вывод — хорошее меню это меню, где все элементы легко сканируются и понятны пользователю.

Четвертое правило идеального меню — упрощайте манипуляции

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

Следует взять на заметку исследование MIT Touch Lab, результаты которого определили средний показатель ширины указательного пальца взрослого человека. Он равен 1,6-2 см или в пикселях — 45-57. Таким образом, следует стремиться к тому, чтобы ширина области касания соответствовала ширине пальца. Тогда и визуальный отклик будет четким.

Каким должно быть идеальное меню в мобильном приложении_12

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

В качестве заключения

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

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