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

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


  1. Выпадающее окно закрывается, когда листья мыши

 Вариант 1


  1. Выпадающая папка остается открытой.

 Вариант 2

79 голосов | спросил Roman Pavlyk 21 PMpFri, 21 Apr 2017 13:44:04 +030044Friday 2017, 13:44:04

13 ответов


271

Для согласованности поведение должно основываться на вызывающем действии; нажмите или наведите указатель мыши .

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

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

ответил DPS 21 PMpFri, 21 Apr 2017 14:09:20 +030009Friday 2017, 14:09:20
79

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

Добавлен (поскольку комментарии, похоже, порождают дебаты о том, что является «тривиальным»): Мое намерение состоит в том, что действие /реакция на движение мыши тривиально, если:

  1. Опущение полностью не приведет к удалению информации или ограничению возможности взаимодействия с интерфейсом, а
  2. Присутствие действия не нарушает или не мешает читать или взаимодействовать с интерфейсом.

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

ответил R.. 21 PMpFri, 21 Apr 2017 18:49:38 +030049Friday 2017, 18:49:38
41

Я честно считаю, что меню наведения - это плохие UX целиком.

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

Вот несколько моментов, которые следует учитывать:

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

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

Нажмите (или коснитесь) активированные меню, в наши дни, достаточно легко реализовать с помощью нескольких строк CSS и (не-jQuery) JavaScript.

Короткий ответ - выпадающее меню должно быть преднамеренно активировано и дезактивировано. Это не с движением мыши, а нажатием или нажатием.

ответил Manngo 22 PMpSat, 22 Apr 2017 15:10:46 +030010Saturday 2017, 15:10:46
23

Я согласен с ответом DPS, однако я бы выбрал явное поведение - нажав, чтобы открыть и щелкнуть (или нажать Esc), чтобы закрыть.

Почему бы не «нависнуть»?

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

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

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

ответил Mike 21 PMpFri, 21 Apr 2017 14:57:39 +030057Friday 2017, 14:57:39
12

... Или вы можете полностью изменить дизайн. Лично я считаю, что неплохо скрыть функциональность в трех точках.

Показать действия при наведении курсора

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

 введите описание изображения здесь>> </a> </p>

<h1> Показать действия на главном экране </h1>

<p> Если дизайн позволяет, действия всегда можно увидеть на главном экране. Если вы считаете, что значки расплывчаты, вы можете добавить всплывающую подсказку или изменить макет, чтобы показывать значки с метками. </p>

<p> <a href=  введите описание изображения здесь>> </a> </p></div>
										<div class=ответил Runnick 22 PMpSat, 22 Apr 2017 16:07:17 +030007Saturday 2017, 16:07:17

11

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

 Windows style drop down with close button.

ответил BlueMeanie 21 PMpFri, 21 Apr 2017 20:20:35 +030020Friday 2017, 20:20:35
9

Я обнаружил, что поведение довольно раздражает , особенно с вложенными меню, на YouTube на HTPC. Удаленная мышь легко выйти из трека и wham Мне нужно начать все заново. Любой, у кого меньше совершенной ловкости, найдет это раздражающим.

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

ответил JDługosz 24 AMpMon, 24 Apr 2017 02:27:41 +030027Monday 2017, 02:27:41
6

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

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

 введите описание изображения здесь>> </a> </p>

<p> Убедитесь, что он рухнет, если пользователь нажимает на другое место на странице (сюда также входят пользователи, которые пытаются щелкнуть меню действий другого изображения) </p>

<hr>
<p> Еще одна вещь, которую вы можете попробовать - это иметь общие кнопки действий и позволять пользователю выбирать изображения при длительном нажатии. Единственное, что может быть проблемой здесь, это вариант перемещения. Я не уверен, какая у вас функциональность (т. Е. Она перетаскивается, щелкает сортировку и т. Д.) </p>

<p> Вы можете плавно анимировать эти значки, когда пользователь выбирает> = 1 изображение в сетке. </p>

<p> <a href=  введите описание изображения здесь>> </a> </p></div>
										<div class=ответил Mr. Alien 22 AMpSat, 22 Apr 2017 09:01:20 +030001Saturday 2017, 09:01:20

3

Я бы сказал: нажмите на ... , чтобы открыть, щелкните в любом месте, кроме раскрывающегося меню, чтобы закрыть. Как только мы нажимаем кнопку «Открыть», мы склонны уходить и возвращаться назад, а повторное нажатие может быть утомительным. Также существует опасность нажатия первого элемента в раскрывающемся списке. Я видел, как open /close on hover выполняет так плохо, что я думаю, что это не вариант. Случается, что выпадающее меню исчезает после перехода из кнопки ... в меню.

ответил PhilipPirrip 22 PMpSat, 22 Apr 2017 12:36:30 +030036Saturday 2017, 12:36:30
3
  • Мышь, выключение мыши, чтобы открыть-закрыть раскрывающееся меню, в общем случае не хорошая идея.
  • Предпочтительно нажмите или коснитесь событий, чтобы открыть и закрыть выпадающее меню.

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

ответил Peter Darmis 24 AMpMon, 24 Apr 2017 10:41:09 +030041Monday 2017, 10:41:09
1

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

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

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

ответил rackandboneman 22 PMpSat, 22 Apr 2017 14:54:00 +030054Saturday 2017, 14:54:00
1

Мобильный или нет?

Несколько лет назад, когда единственным входом пользовалась мышь (или нажатием клавиши Alt ... никто этого не ожидал), наведение мыши было хорошим вариантом.

Но не больше.

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

Мое мнение - нажать, чтобы открыть и закрыть.

Таймер?

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

Некоторые проблемы с выводом мыши

  • Очевидная проблема с мобильным устройством.

  • Пользователь настольного компьютера может иметь проблемы, например, с дефектной мышью, которая перемещает указатель мыши как сумасшедший (иногда у меня были дешевые мыши)

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

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

ответил Rafael 22 PMpSat, 22 Apr 2017 18:42:05 +030042Saturday 2017, 18:42:05
-2

Как только мышь уходит, все уходит

Это простая логика, и работа с прототипами сразу покажет ее. Используя те же изображения caffe, мы можем сделать простую аналогию. Предположим, вы заходите в caffe1 , затем откройте меню и закажите что-нибудь. Выходите и идите в caffe2 . Где у него ... вы ожидали увидеть меню caffe1 или caffe2 ? Что вы думаете, если вы видите caffe1's вместо caffe2's ?

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

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

Конструкция материалов использует эту метафору листов материалов с размерами и глубинами (хотя, вопреки распространенному мнению, они ее не изобретали). И это действительно легко реализовать: просто начните с чистого листа бумаги. Затем добавьте элементы по мере необходимости. Используйте пост-это или вырезать из других листок бумаги. Вы создадите прототипы, где вы сможете увидеть, как каждый элемент соединяется, и, что более важно, , как они не соединяются.

Hover vs Click

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

  • Рабочий стол (адаптивный): на мыши оставить , закрыть меню.
  • Мобильный (отзывчивый): при нажатии (menu2) , закрыть меню 1

Таким образом вы сохраняете клик и избегаете открывать незаметные меню, когда вы находитесь в совершенно другом свойстве

ответил Devin 22 PMpSat, 22 Apr 2017 18:27:12 +030027Saturday 2017, 18:27: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