Есть ли имя для этого раскрывающегося анти-шаблона?

Недавно я увидел небольшую проблему с пользовательским интерфейсом в раскрывающихся списках мыши. Вот пример такого раскрывающегося списка (хотя Блумберг не единственный преступник):

https://www.bloomberg. ком /просмотр /статьи /2017-08-09 /йогурт ликвидность-и-списки

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

 Просмотр Bloomberg - Проблема с меню

Если вы наведете «Мнение» в верхнем баре, вам будут представлены ссылки, связанные с разделом «Мнение».

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

Есть ли название для этой проблемы? Каковы наилучшие способы его решения?

edit . Вот дополнительный gif, отображающий проблему, любезно предоставленную блог Бен Каменса , который также связан с Midas ниже :

 Gif, демонстрирующий проблему меню

237 голосов | спросил N. Quest 14 PM00000040000001131 2017, 16:13:11

6 ответов


282

Одно из предложений названия для решения - эта замечательная статья направленное меню, направленное .

Это показывает, как Amazon не позволяет пользователям некорректно выбирать нежелательный элемент при зависании своего «мега-меню», без использования задержек , определяя путь к курсору.

  

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

 Направление меню Amazon Hover

ответил Midas 14 PM00000040000004931 2017, 16:26:49
93

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

Альтернативой треугольному подходу Амазонки (который первоначально был сделан Bruze Tognazzini в 1986 году с Apple ) заключается в использовании маленьких коробок для расширения коридора . Одним из преимуществ этой конкретной реализации является то, что это чистый CSS (псевдоэлементы), поэтому он удаляет зависимость от jQuery (или vanilla JS).

 Изображение из: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Изображение из: https: //css -tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/)

ответил Jonathan 14 PM00000060000002531 2017, 18:19:25
35

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

ответил Matthew 16 PM000000110000002531 2017, 23:42:25
9

С точки зрения программиста, я бы предложил функцию наведения на зависание (задержка реакции на окружающую среду примерно на 300 мс. Это не слишком заметно и уменьшит риск случайного закрытия /открытия меню). Хотя вы можете обнаружить, что 300 мс будут складываться в более сложные деревья меню и подменю.

ответил Snsa90 15 PM00000060000005731 2017, 18:59:57
3

Имя, которое я использую для этого шаблона, hover tunnel .

Туннели Hover уже давно признаны проблематичными: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

  

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

Я подозреваю, что «anti-pattern» - это просто побочный эффект туннеля наведения, потому что в целом он не будет надежным способом направить пользователей на рекламу или другой контент. р>

ответил Michael Heraghty 24 MaramSat, 24 Mar 2018 10:50:00 +03002018-03-24T10:50:00+03:0010 2018, 10:50:00
1

Нет никакого имени для этого шаблона.

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

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

ответил Pectoralis Major 14 PM00000040000001231 2017, 16:21:12

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132