Есть ли имя для этого раскрывающегося анти-шаблона?
Недавно я увидел небольшую проблему с пользовательским интерфейсом в раскрывающихся списках мыши. Вот пример такого раскрывающегося списка (хотя Блумберг не единственный преступник):
https://www.bloomberg. ком /просмотр /статьи /2017-08-09 /йогурт ликвидность-и-списки
изменить : добавление отмеченного скриншота для исторических целей. Красная линия - это путь мыши пользователя. Ввод красной рамки немедленно скроет раскрывающееся меню «Мнение».
Если вы наведете «Мнение» в верхнем баре, вам будут представлены ссылки, связанные с разделом «Мнение».
Проблема. Прямой путь от позиций кнопки «Мнение» до некоторых ссылок будет проходить через раздел «Политика», мгновенно очистив варианты «Мнение». Это означает, что пользователь должен задуматься об их перемещении мыши по мере выбора ссылки.
Есть ли название для этой проблемы? Каковы наилучшие способы его решения?
edit . Вот дополнительный gif, отображающий проблему, любезно предоставленную блог Бен Каменса , который также связан с Midas ниже :
6 ответов
Одно из предложений названия для решения - эта замечательная статья направленное меню, направленное .
Это показывает, как Amazon не позволяет пользователям некорректно выбирать нежелательный элемент при зависании своего «мега-меню», без использования задержек , определяя путь к курсору.
В каждой позиции курсора вы можете изобразить треугольник между текущей позицией мыши и верхним и нижним правыми углами выпадающего меню. Если следующая позиция мыши находится внутри этого треугольника, пользователь, вероятно, перемещает свой курсор в текущее отображаемое подменю. Amazon использует это для приятного эффекта. Пока курсор остается в этом синем треугольнике, текущее подменю останется открытым.
Проблема, о которой вы говорите, иногда упоминается как « узкий коридор мыши ". Наличие узкого коридора мыши может привести к разочарованию пользователей из-за отсутствия пользовательский контроль .
Альтернативой треугольному подходу Амазонки (который первоначально был сделан Bruze Tognazzini в 1986 году с Apple ) заключается в использовании маленьких коробок для расширения коридора . Одним из преимуществ этой конкретной реализации является то, что это чистый CSS (псевдоэлементы), поэтому он удаляет зависимость от jQuery (или vanilla JS).
(Изображение из: https: //css -tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/)
Где я работаю, мы называем это «меню траншеи смертельной звезды». Я почти уверен, что мы не изобрели это имя, но я не могу найти книгу, в которой она находится.
С точки зрения программиста, я бы предложил функцию наведения на зависание (задержка реакции на окружающую среду примерно на 300 мс. Это не слишком заметно и уменьшит риск случайного закрытия /открытия меню). Хотя вы можете обнаружить, что 300 мс будут складываться в более сложные деревья меню и подменю.
Имя, которое я использую для этого шаблона, hover tunnel .
Туннели Hover уже давно признаны проблематичными: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Одна из худших вещей о меню наведения заключается в том, что они заставляют пользователей перемещать указатель мыши через туннели. Навигационные туннели - это проходы, которые пользователи должны перемещать, чтобы щелкнуть элемент. У пожилых пользователей, которые менее разбираются в технологиях, часто возникают проблемы с этим. Даже технически подкованные пользователи могут раздражать, что им приходится перемещать мышь в ограниченном пути.
Я подозреваю, что «anti-pattern» - это просто побочный эффект туннеля наведения, потому что в целом он не будет надежным способом направить пользователей на рекламу или другой контент. р>
Нет никакого имени для этого шаблона.
Простое меню наведения, меню наведения - это мусор, когда дело доходит до UX. Даже у меня, опытный пользователь Интернета, есть проблемы с навигацией через такие меню, и в 9 из 10 раз я злюсь, когда мне нужно использовать меню наведения.
Одна вещь, чтобы сделать такие меню более удобными для пользователя, например, установить небольшую задержку, когда пользователи переходят из таблицы, поэтому меню не закрывается немедленно, но имеет задержку в 1-1,5 с, поэтому пользователь имеет шанс переместить мышь назад в нормальном режиме.