it-swarm-eu.dev

Quando dovresti usare una finestra di dialogo modale?

Sembra esserci un uso crescente delle finestre di dialogo modali sul Web, ma quando dovresti usarle? Perché dovresti scegliere di usarli anziché i controlli incorporati o un'altra pagina e quando dovresti evitarli completamente?

50
Philip Morton

Uso una combinazione di editing in linea, modali soft, modali completi e finestre mobili.

  1. Modifica in linea. Se possibile, prova sempre a usarlo. Richiede la minima quantità di cambio di contesto. È veloce.
  2. Soft modals. Esempio: menu Start di Windows. Sono controlli avanzati e possono avere moduli, ma generano un singolo menu e possono essere ignorati facendo clic ovunque. Questi sono buoni da usare dai menu.
  3. Full Modals. Questi mascherano l'intero schermo e consentono SOLO l'interazione con il modale. Li uso quando desidero focalizzare l'utente su un compito e non continuare senza compilare il modulo.
  4. Floating Windows. Questi sono buoni per i messaggi di stato. Fluttuano sull'interfaccia utente ma possono essere spostati e ridotti al minimo. Usali per cose che devono persistere mentre viaggi nell'applicazione.

Spero che questo sia utile.

30
Glen Lipka

Le regole più generali che potrei pensare sarebbero:

  • Le finestre di dialogo modali possono avere senso quando ti aiutano a mantenere il flusso (cioè non devi lasciare la pagina in cui ti trovi).

  • Non utilizzare finestre di dialogo modali per elementi che dovrebbero essere collegabili o ricercabili (poiché l'URL non cambia, non può essere collegato esternamente e include i motori di ricerca).

Modifica: dai anche un'occhiata a Facebook, con alcune eccezioni penso che lo gestiscano abbastanza bene.

8
Phil

Ho scoperto che i modali sono i migliori da usare quando si tenta di isolare un'azione da parte dell'utente. Usando un modale catturi l'attenzione dell'utente e questo ti consente di rimuovere le distrazioni secondarie, come navigazione, collegamenti di utilità, immagini o altri componenti che potrebbero distrarre da ciò che desideri che l'utente veda o sperimenti.

Per quanto riguarda quando NON usare un modale dovrai solo usare il tuo miglior giudizio su quello. Non penso che tu possa applicare regole severe a qualcosa del genere.

6
Jeremy D Johnson

La mia regola pratica sarebbe quella di utilizzare una finestra modale quando c'è un vicolo cieco per la funzionalità. Ad esempio, quando aggiorni le informazioni del profilo, imposta un account ecc.

5

Alcune persone distinguono tra finestre di dialogo e finestre di avviso (una finestra di avviso in genere ha solo uno o due pulsanti e nessun altro input, mentre una finestra di dialogo ha campi di input di qualche tipo). E c'è una scuola di pensiero che dice che non dovresti mai usare caselle di avviso modali (Vedi " Le caselle di avviso dovrebbero essere evitate a tutti i costi? ".)

Inserire un modulo in una finestra di dialogo modale può essere più reattivo che inserirlo in una pagina separata, poiché il codice della finestra di dialogo può essere contenuto interamente nella pagina precedente, senza traffico di rete. Tuttavia, ho visto molti utenti confusi dalle finestre di dialogo modali. Ti consigliamo di testare con gli utenti finali. Ovviamente. :)

3
Bennett McElwee

Le finestre di dialogo modali dovrebbero essere utilizzate solo quando l'utente è tenuto a fare una scelta o deve sapere qualcosa di specifico prima di continuare. Avvertimenti su come qualcosa che stanno scegliendo di fare può potenzialmente causare problemi (come eliminare qualcosa in modo permanente) e cose del genere.

Anche il login per accedere a una sezione protetta del sito (o per pubblicare un commento su una pagina) va bene, purché lo si faccia correttamente.

1
Charles Boyung

L'ho pubblicato su un'altra domanda, ma lo includerò anche qui:

Sto lavorando all'implementazione di una pagina Web che deve sentirsi come un'app Web flessibile. Esistono più moduli che l'utente può compilare.

Per i miei scopi e utenti, ecco alcuni ipotesi (concordati da parti interessate e PMI, ma possono essere annullati nei test degli utenti):

  1. Gli utenti che arrivano a questa app Web sanno cosa vogliono fare . Stanno arrivando per completare un compito specifico noto in anticipo. Questo è lo scopo di questa pagina. Gli utenti non vengono qui per guardarsi intorno.
  2. Poiché sanno cosa stanno facendo, conoscono le informazioni richieste per compilare i moduli necessari.

Ho suggerito l'uso di moduli lightboxed. Normalmente sono contrario all'utilizzo delle finestre modali, ma sono anche MOLTO contrario a inviare l'utente a nuove pagine ogni volta che tentano un semplice aggiornamento o aggiunta. E non penso che le fisarmoniche siano la soluzione corretta qui (anche se potrebbero essere un'opzione alternativa).

Nel nostro contesto, i moduli lightbox vengono visualizzati solo su richiesta dell'utente. Consentono fuga/chiusura rapida e facile. Concentrano l'utente sull'azione che hanno appena richiesto in modo che non ci siano sorprese per il cambiamento nella pagina. Gli utenti non li rimuovono dalla pagina/app in cui stanno lavorando.

Una delle forme ha tre (3) passaggi discreti. Quindi stiamo usando una procedura guidata nella lightbox con il monitoraggio dei progressi. Questo è stato in realtà un punto di sfida significativo con una sola persona nel nostro gruppo, che (giustamente) è decisamente contraria alle modali multi-pannello. Di solito sono d'accordo per intero.

In questo caso, una procedura guidata è un modello accettato per questo tipo di interazione. Gli utenti sanno cosa stanno cercando di fare e i passaggi necessari per farlo. La lightbox focalizza l'utente sull'azione richiesta senza uscire dalla pagina di panoramica (che fornisce informazioni sulle selezioni e sugli input dell'azione precedente), ma consente una chiusura rapida.

Anche se concordo sul fatto che modali/overlay/lightbox/etc dovrebbero essere usati con parsimonia, non sono per natura cattivi o cattivi UX. Le versioni richieste dall'utente per un'attività mirata sono un caso d'uso valido e in molte situazioni possono essere superiori alle alternative se implementate con cura.

1
Jeff