risposta-alla-domanda-sullo-sviluppo-web-bd.com

Un elenco a discesa dovrebbe essere chiuso quando il mouse lascia?

Un elenco a discesa dovrebbe essere chiuso automaticamente quando lasci l'oggetto corrente e navighi verso un altro, o dovrebbe rimanere aperto fino all'apertura del prossimo elenco a discesa?


  1. Menu a discesa chiuso quando il mouse lascia

Option 1


  1. Il menu a discesa rimane aperto

Option 2

82
rpavlyk

Per coerenza, il comportamento dovrebbe essere basato sull'azione chiamante; fare clic o passare con il mouse.

Se si apre il menu a discesa al clic, consentire all'utente di attivarlo e chiuderlo o chiudere il menu a discesa precedente quando l'utente fa clic su un'altra miniatura.

Se si apre il menu a discesa al passaggio del mouse, chiuderlo al passaggio del mouse.

273
DPS

La risposta a questa domanda fa parte di una regola UX più generale: spostare il mouse (senza tenere premuto un pulsante) non viene inserito e le applicazioni non devono rispondere ad essa intraprendendo azioni non banali. Le azioni fondamentali includono cose come l'aggiunta/rimozione della sottolineatura, la modifica del colore o l'esecuzione di una piccola animazione isolata spazialmente per indicare la cliccabilità. Mostrare o nascondere informazioni/elementi dell'interfaccia utente non è banale e è davvero fastidioso per gli utenti che spostano il cursore del mouse (che potrebbe essere sovradimensionato per motivi di accessibilità!) Dalla parte superiore del testo che stanno cercando di leggere in modo da poterlo leggere.

Aggiunto (poiché i commenti sembrano generare un dibattito su ciò che è "banale"): il mio intento è che un'azione/reazione al movimento del mouse sia banale se:

  1. La sua omissione totale non rimuove le informazioni o limita la capacità di interagire con l'interfaccia e
  2. La presenza dell'azione non interrompe o interferisce con la capacità di leggere o interagire con l'interfaccia.

I menu a discesa/menu al passaggio del mouse (e anche i suggerimenti) non soddisfano entrambi i criteri se non possono essere attivati ​​anche dai clic e falliscono in entrambi i modi a meno che tu non organizzi la loro comparsa in un'area speciale in cui non nascondono altri contenuti.

Sinceramente penso che i menu al passaggio del mouse siano totalmente UX cattivi.

Sospetto che l'unica ragione per cui esistono in primo luogo è che sono più facili da implementare in puro CSS, quindi lo sviluppatore può cavarsela con qualcosa che l'utente non desidera necessariamente.

Ecco alcuni punti da considerare:

  • La maggior parte dei sistemi operativi attende un clic dell'utente prima di attivare un menu. Il menu al passaggio del mouse va contro uno schema ben definito.
  • Il sistema operativo ha menu in una parte separata della finestra, in cui è previsto il loro comportamento. I menu al passaggio del mouse fanno parte del contenuto e competono con il resto del contenuto.
  • Gli utenti usano abitualmente un mouse senza alcuna intenzione o semplicemente per seguire i loro occhi. Il menu al passaggio del mouse interrompe questo comportamento, spesso oscurando il contenuto che l'utente stava guardando.
  • I dispositivi touch, a questo punto nel tempo, non includono una vera azione al passaggio del mouse. I menu al passaggio del mouse rappresentano un comportamento diverso tra desktop e dispositivi touch. In effetti, spesso si comportano come menu di clic in questo contesto.
  • Gli utenti non vedenti non sperimenteranno affatto il menu al passaggio del mouse, che è una piccola pietà.

Mentre un'applicazione Web non è esattamente la stessa di un'applicazione desktop, ci sono convenzioni ed esperienze precedenti, nonché aspettative, da accogliere.

I menu attivati ​​da clic (o tocco) sono, al giorno d'oggi, abbastanza facili da implementare con poche righe di CSS e JavaScript (non jQuery).

La risposta breve è che un menu a discesa deve essere attivato deliberatamente e disattivato deliberatamente. Questo non avviene con lo spostamento del mouse, ma con un clic o un tocco.

42
Manngo

Sono d'accordo con la risposta di DPS, tuttavia opterei per un comportamento esplicito, quindi facendo clic per aprire e facendo clic (o premendo Esc) per chiudere.

Perché non "on-hover"?

Se l'utente apre il menu a discesa e sposta il mouse in modo più generoso (sposta il cursore per leggere tutte le opzioni) - il menu scompare aumentando il fastidio.

C'è qualcos'altro che vorrei menzionare: quando appare il menu a discesa, viene posizionato in basso a sinistra sul cursore del mouse. Secondo me dovrebbe essere posizionato in basso a destra. L'utente segue il puntatore del mouse e nella maggior parte delle culture tendiamo a elaborare le informazioni da sinistra a destra. Se l'utente si concentra sul puntatore del mouse, si aspettano che il menu appaia a destra, quindi il loro flusso di elaborazione dei dati non viene disturbato.

Tenendo presente quanto sopra: se scegli l'opzione "al passaggio del mouse", è molto semplice spostare il cursore lontano dal menu a discesa e chiuderlo.

23
Mike

... O puoi considerare di cambiare del tutto il design. Personalmente penso che non sia una buona idea nascondere la funzionalità sotto tre punti.

Mostra azioni al passaggio del mouse

Puoi rimuovere completamente il clic/passaggio del mouse mostrando le azioni direttamente al passaggio del mouse. Direi che è meglio dal momento che salvi il clic (non sto mostrando mossa/rinomina per brevità).

enter image description here

Mostra le azioni nella schermata principale

Se il design lo consente, le azioni possono sempre essere visibili nella schermata principale. Se ritieni che le icone siano vaghe, puoi aggiungere una descrizione comandi o modificare il layout per mostrare le icone con le etichette.

enter image description here

12
Runnick

Potresti considerare di aggiungere un modo in cui l'utente può chiudere il menu a discesa. In questo modo non c'è confusione su come chiuderlo e nessun fastidio di chiuderlo accidentalmente spostando il mouse fuori dall'area.

Windows style drop down with close button.

11
BlueMeanie

Mi capita di trovare quel comportamento abbastanza fastidioso, specialmente con i menu nidificati, su YouTube su un HTPC. Il mouse remoto è facile da abbandonare e wham devo ricominciare da capo. Chiunque abbia una destrezza non perfetta troverà questo fastidioso.

Si prega di non rendere il percorso preciso del puntatore una parte necessaria dell'interfaccia utente. Alcune persone hanno problemi di mobilità, alcune hanno meno di dispositivi di puntamento idea, alcune sono in un veicolo in movimento, ecc.

9
JDługosz

A parte la risposta di DPS, che parla di coerenza, ti suggerirei di selezionare clic anziché hover . Sembra che tu abbia un layout a griglia e sono sicuro che non vuoi infastidire i tuoi utenti facendo apparire il menu delle azioni quando spostano il mouse su questi elementi della griglia.

È meglio mantenerlo esplicito, solo quando l'utente tenta di fare clic sul pulsante di azione. Un'altra cosa che puoi fare qui è quella di cambiare l'icona in modo che sia chiaro che deve fare clic indietro per attivarlo, qualcosa del tipo:

enter image description here

Assicurati che dovrebbe collassare se l'utente fa clic altrove sulla pagina (questo include anche gli utenti che provano a fare clic sul menu azioni di un'altra immagine)


Un'altra cosa che puoi provare è avere pulsanti di azione comuni e consentire all'utente di selezionare le immagini con un clic lungo. L'unica cosa che potrebbe essere un problema qui è l'opzione di spostamento. Non sono sicuro di quale funzionalità hai installato lì (ovvero è trascinabile, fai clic su ordinamento e così via)

È possibile animare senza problemi queste icone quando l'utente seleziona> = 1 immagine nella griglia.

enter image description here

6
Mr. Alien

Direi: fai clic su ... per aprire, fai clic su un punto qualsiasi tranne il menu a discesa per chiudere. Una volta che clicchiamo sul pulsante Apri, tendiamo ad allontanarci e tornare indietro e premerlo di nuovo può essere estenuante. Esiste anche il pericolo di premere il primo elemento nell'elenco a discesa. Ho visto aprire/chiudere l'hover esibirsi così male che penso che non dovrebbe essere un'opzione. Quello che succede è che il menu a discesa scompare quando inizi a spostarti dal ... verso il menu.

3
PhilipPirrip
  • In genere, non è una buona idea passare il mouse sopra, lasciare gli eventi del mouse per aprire-chiudere un menu a discesa.
  • Preferibilmente, fare clic o toccare gli eventi dovrebbe aprire-chiudere un menu a discesa.

Per essere più specifici ... Nell'esempio fornito nella domanda in cui il menu a discesa si apre sopra un elemento immagine, una cosa che potresti fare è ridurre l'opacità del menu (ad es. Al 20%) se l'utente sposta il mouse verso l'esterno della casella di menu. In tal caso avrai tra le mani un menu parzialmente trasparente in modo che l'utente possa comunque visualizzare l'elemento sotto il menu.

3
Peter Darmis

Chiudere immediatamente tale elenco anche se il mouse è un pixel fuori dalla sua regione per una frazione di secondo - in particolare con i menu a discesa in cui la regione cambia a causa di sottomenu (il che significa anche che l'utente deve ripetere un'intera catena di navigazione nel peggiore dei casi) ecc. - tende ad essere molto sensibile ai movimenti del mouse spuri (aggravati se: cattive abilità del mouse, un mouse impostato per la velocità e non la precisione, un ambiente di lavoro ricco di vibrazioni, dimensioni ridotte degli elementi dell'interfaccia utente).

Lasciare che il menu aperto rimanga per sempre può finire nel confondere l'utente su come chiudere un menu che copre il contenuto o altri elementi dell'interfaccia utente.

I ritardi e alcune isteresi tra le regioni di attivazione e disattivazione seguiranno probabilmente il principio del minimo stupore al meglio ...

1
rackandboneman

Mobile o no?

Alcuni anni fa, quando l'unico input era usare il mouse (o premere il tasto Alt ... nessuno se lo aspettava davvero) un passaggio del mouse era una buona opzione.

Ma non più.

Il design minimizzato che stai utilizzando implica che il design è destinato a un dispositivo di piccole dimensioni, quindi non c'è un mouse reale.

La mia opinione è fare clic per aprire e fare clic per chiudere.

Un timer?

Ma anche tu potresti includere un timer. Se in pochi secondi non viene immesso alcun input, quel menu potrebbe comprimersi.

Alcuni problemi con il mouse fuori

  • Problema evidente con un dispositivo mobile.

  • Un utente desktop potrebbe avere problemi, ad esempio con un mouse difettoso che sposta il puntatore del mouse come un matto (a volte avevo dei mouse economici)

  • Alcuni pad per laptop possono essere difficili da usare. Un passaggio del mouse/out del mouse richiede più abilità da parte dell'utente.

  • Un ulteriore problema a proposito di un passaggio del mouse - l'approccio mouse out è che l'utente potrebbe aver bisogno di spostare il puntatore per qualche motivo, ma aveva comunque bisogno di aprire quel menu. Una cattura dello schermo? Lavorare in un'altra finestra?

1
Rafael