it-swarm-eu.dev

C'è un nome per questo anti-pattern a discesa?

Di recente ho riscontrato un piccolo problema con l'interfaccia utente nei menu a discesa al passaggio del mouse. Ecco un esempio di tale menu a discesa (anche se Bloomberg non è l'unico autore del reato):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

modifica : aggiunta di screenshot contrassegnati per scopi storici. La linea rossa è il percorso del mouse dell'utente. L'inserimento della casella rossa nasconderà immediatamente il menu a discesa Opinione.

Bloomberg View - Menu issue

Se passi con il mouse su "Opinione" nella barra in alto, ti verranno presentati i link relativi alla sezione Opinione.

Il problema: un percorso in linea retta da posizioni all'interno del pulsante Opinione ad alcuni dei collegamenti attraverserà la sezione "Politica", cancellando immediatamente le opzioni Opinione. Ciò significa che l'utente deve riflettere attentamente sul proprio percorso del mouse mentre seleziona il collegamento.

C'è un nome per questo problema? Quali sono i modi migliori per risolverlo?

modifica : ecco un'ulteriore gif che mostra il problema, per gentile concessione di blog di Ben Kamens , che è anche collegato da Midas in basso :

Gif demonstrating menu issue

244
N. Quest

Un suggerimento per un nome per una soluzione è da questo fantastico articolo è il puntamento del menu direzionale .

Mostra come Amazon impedisce agli utenti di selezionare in modo errato un elemento indesiderato mentre passa il loro "mega-menu", senza usare i ritardi, attraverso il rilevamento del percorso del cursore.

In ogni posizione del cursore è possibile immaginare un triangolo tra la posizione corrente del mouse e gli angoli superiore e inferiore destro del menu a discesa. Se la posizione successiva del mouse si trova all'interno di quel triangolo, probabilmente l'utente sta spostando il cursore nel sottomenu attualmente visualizzato. Amazon lo usa per un effetto piacevole. Finché il cursore si trova all'interno di quel triangolo blu, il sottomenu corrente rimarrà aperto.

Amazon Hover Menu direction

289
Midas

Il problema di cui stai parlando viene talvolta definito " corridoio del mouse stretto ". Avere un corridoio del mouse stretto può comportare che gli utenti si sentano frustrati dalla mancanza di controllo utente .

Un'alternativa all'approccio triangolare di Amazon (che è stato originariamente fatto da Bruze Tognazzini nel 1986 con Apple) è usare piccole scatole per estendere il corridoio . Un vantaggio di questa particolare implementazione è che è puro CSS (pseudo-elementi), quindi rimuove dipendenza da jQuery (o Vanilla JS).

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Immagine da: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )

96
Jonathan

Dove lavoro, lo chiamiamo "menu della trincea della stella della morte". Sono abbastanza sicuro che non abbiamo inventato quel nome, ma non riesco a trovare il libro da cui proviene.

36
Matthew

Dal punto di vista del programmatore, suggerirei una funzione di intento al passaggio del mouse (ritardando la reazione ambientale di circa 300 ms. Ciò non è troppo visibile e ridurrebbe il rischio di chiusura/apertura accidentale dei menu). Anche se potresti scoprire che i 300ms si sommerebbero in alberi di menu e sottomenu più complessi.

9
Snsa90

Il nome che uso per questo modello è hover tunnel .

I tunnel hover sono stati a lungo riconosciuti come problematici: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Una delle cose peggiori dei menu al passaggio del mouse è che costringono gli utenti a spostare il mouse attraverso i tunnel al passaggio del mouse. I tunnel hover sono passaggi attraverso i quali gli utenti devono spostare il mouse per fare clic su un elemento. Gli utenti più anziani che sono meno esperti di tecnologia avranno spesso difficoltà a farlo. Anche gli utenti esperti di tecnologia possono trovare fastidioso dover spostare il mouse in un percorso limitato.

Sospetto che l'anti-pattern sia solo un effetto collaterale del collasso del tunnel al passaggio del mouse perché, nel complesso, non sarebbe un modo affidabile per indirizzare gli utenti ad annunci o altri contenuti.

4
Michael Heraghty

No, non esiste un nome per questo modello.

È solo un menu al passaggio del mouse, i menu al passaggio del mouse sono spazzatura quando si tratta di UX. Anche io, un utente esperto di Internet ha problemi a navigare attraverso questi menu e in 9 su 10 volte mi arrabbio quando devo usare un menu al passaggio del mouse.

Una cosa per rendere tali menu un po 'più user friendly è ad esempio impostare un piccolo ritardo quando gli utenti navigano fuori dal tavolo in modo che il menu non si chiuda immediatamente ma abbia un ritardo di 1-1,5 secondi in modo che l'utente abbia la possibilità di spostarsi il mouse torna mentre è nel suo flusso normale.

1
Pectoralis Major