При наведении выпадающее меню: Как сделать всплывающее меню при наведении

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

На следующем примере страницы, которая распространяется Superfish и показана здесь созданный Silk на Kindle Fire HDX, раскрывающиеся меню открываются по нажатию.

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

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

Дополнительные сведения о раскрывающихся меню и сенсорных экранах см. в следующих ресурсах.

Дополнительные ресурсы

• Сенсорный и мышь: снова вместе в первый раз

• Сеть разработчиков Mozilla: наведите курсор на

Javascript отключен или недоступен в вашем браузере.

Чтобы использовать документацию Amazon Web Services, должен быть включен Javascript. Инструкции см. на страницах справки вашего браузера.

Условные обозначения документов

Обнаружение агента пользователя Silk

Устранение неполадок

Предоставление задержки наведения в 300–500 мс для всплывающих меню на основе наведения (60% этого не делают) – Статьи – Baymard Institute

• Раскрывающиеся меню на основе наведения отлично подходят для отображения категорий и подкатегорий сайта
• Но 60% сайтов плохо их реализуют
• В результате некоторые пользователи не захотят взаимодействовать с основной навигацией при поиске товаров

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

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

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

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

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

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

В этой статье мы поделимся своими выводами из результатов нашего исследования Premium о раскрывающихся списках при наведении:

• Как «мерцающие» или «ненадежные» раскрывающиеся меню вызывают у пользователей серьезные проблемы с навигацией
• Почему внедрение задержки при наведении может решить проблему для большинства сайтов

«Меня это очень раздражает. Я бы, наверное, сейчас просто ушел с сайта. Просто потому, что… когда я поднимаюсь туда, [выпадающее меню] сразу же всплывает. И я думаю, что должна быть небольшая задержка, чтобы что-то всплыло. Если я просто пройдусь по нему, оно сразу же всплывет… так что, вероятно, это будет главным, что удержит меня от покупки чего-либо здесь». «Мерцание» меню на британском сайте Appliances Online заставило этого участника тестирования подумать о том, чтобы покинуть сайт. Он решил изменить свой поисковый запрос, но меню появлялись каждый раз, когда он перемещал курсор к строке поиска.

«Если навести сюда, то все это [выпадающее меню] открывается, и его сложно снова снять. Это минус». Этому участнику теста было трудно разобраться с большим выпадающим меню в H&M, которое срабатывало сразу после наведения на него курсора.

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

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

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

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

Действительно, во время тестирования многие участники останавливались, сталкиваясь с такими «хлипкими» раскрывающихся меню — их внимание было отвлечено от поиска продукта к проблеме UX, вызванной раскрывающимся меню.

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

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

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

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

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

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

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

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

Задержка при наведении в 300–500 мс устраняет наибольшую проблему «мерцания»

Задержка при наведении на Macy’s означает, что курсор может проходить над главным меню навигации без непреднамеренного срабатывания раскрывающегося списка. Это означает, что, например, пользователи могут корректировать условия поиска, перемещая курсор по главному навигационному меню, не отвлекаясь.

Когда пользователи программы «Скрепки» перемещают курсор по диагонали вниз по главному навигационному меню для выбора подкатегории «Канцелярские товары» , всплывающие меню для других основных категорий, таких как «Бумага» и «Компьютеры и аксессуары», не появляются. Это значительно упрощает пользователям выбор подкатегорий, не отвлекая внимание на появление нежелательных меню.

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

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

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

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

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

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

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

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

Обеспечьте пользователям более стабильную навигацию

В компании John Lewis отсутствие задержки при наведении означает, что можно легко случайно вызвать нежелательные категории, что приведет к разочарованию при навигации.

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