"Яндекс Деньги" планируют использовать криптовалюту Bitcoin
Previous
выбрать за меня
Twitter добавил функционал загрузки видеороликов на десктопную версию
Next
мега меню, веб-дизайн, интерфейс, UX
Юзабилити

Мега-меню и скрытая навигация: как делать правильно?

Автор: Денис Давыдов12.10.2015

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

мега меню, веб-дизайн, интерфейс, UX

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

Плюсы скрытых меню очевидны, а как обстоят дела с минусами? Минусы скрытой навигации – это, в первую очередь, трудности в обеспечении ее корректной работы.



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

мега меню, веб-дизайн, интерфейс, UX

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

Движение курсора и нюансы его интерпретации

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

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

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



Учитывая эти проблемы, мы должны пытаться найти баланс и минимизировать любые случайности при общении пользователя с интерфейсом.

Для начала, давайте рассмотрим сигналы, которые мы получаем от пользователя. В данном случае мы не имеем дело с кликами и можем интерпретировать лишь местоположение курсора и время его «зависания».

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

Настраиваем фидбек

Появление меню

мега меню, веб-дизайн, интерфейс, UX

Эффект затемнения экрана на Amazon при наведении курсора на активный элемент со скрытым контентом.

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



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

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

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

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

мега меню, веб-дизайн, интерфейс, UX

Интерактивная анимация в каталоге herschelsupply.com

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

Закрытие мега-меню

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

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

Одна из самых раздражающих проблем, которые связаны с таким внезапным закрытием – это исчезновение меню в тот момент, когда курсор движется к какому-либо активному пункту, покидая при этом область главной кнопки. Если в таком случае меню закрывается, и пользователь попросту не успевает дотянуться до интересующей его категории, то это свидетельствует об очень низких показателях UX.

Как быть со временем?

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

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

Непосредственное появление скрытого контента должно происходить не позже, чем через 0,5 секуды, в то время как промежуток 0,1-0,5 может (и даже должен) быть заполнен анимацией.

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.