Probabilmente ci sei già stato prima. Come scegliamo tra mostrare una modale agli utenti e quando spostarli in una nuova pagina separata? E ha davvero importanza? In realtà è così. La decisione influenza il flusso degli utenti, il loro contesto, la loro capacità di cercare dettagli e con esso la frequenza degli errori e il completamento delle attività. Entrambe le opzioni possono essere distruttive e frustranti, nel momento sbagliato e nel posto sbagliato. Quindi sarà meglio farlo bene. Bene, vediamo come farlo. Modali, finestre di dialogo, sovrapposizioni e lightbox Anche se parliamo spesso di un singolo componente modale dell'interfaccia utente, spesso ignoriamo le sottili e complesse sfumature tra tutti i diversi tipi di modali. In effetti, non tutte le modalità sono uguali. Modali, finestre di dialogo, sovrapposizioni e lightbox: sembrano tutti simili, ma in realtà sono abbastanza diversi:
DialogUn termine generico per “conversazione” (utente ↔ sistema). OverlayUn piccolo pannello di contenuti visualizzato nella parte superiore di una pagina. ModalUser deve interagire con overlay + sfondo disabilitati. NonmodalUser deve interagire con overlay + sfondo abilitato. LightboxSfondo oscurato per focalizzare l'attenzione sul modale.
Come sottolinea Anna Kaley, la maggior parte degli overlay vengono visualizzati nel momento sbagliato, interrompono gli utenti durante attività critiche, utilizzano un linguaggio scadente e interrompono il flusso degli utenti. Sono di natura interruttiva e tipicamente con un alto livello di gravità senza che ne sia necessario un forte bisogno.
Sicuramente gli utenti devono essere rallentati e interrotti se le conseguenze della loro azione hanno un impatto elevato, ma per la maggior parte degli scenari gli scenari non modali sono molto più subdoli e rappresentano un’opzione più amichevole per portare qualcosa all’attenzione dell’utente. Se non altro, suggerisco sempre che sia un'impostazione predefinita. Modali → Per attività singole e autonome Come designer, spesso consideriamo le modali irrilevanti e fastidiose – e spesso lo sono! – eppure hanno anche il loro valore. Possono essere molto utili per avvisare gli utenti di potenziali errori o aiutarli a evitare la perdita di dati. Possono anche aiutare a eseguire azioni correlate o approfondire i dettagli senza interrompere lo stato corrente della pagina. Ma il vantaggio più grande delle modalità è che aiutano gli utenti a mantenere il contesto della schermata corrente. Non significa solo l'interfaccia utente, ma anche input modificati, posizione di scorrimento, stato delle fisarmoniche, selezione di filtri, ordinamento e così via.
A volte, gli utenti devono confermare rapidamente una selezione (ad esempio, i filtri come mostrato sopra) e quindi procedere immediatamente da lì. Il salvataggio automatico può ottenere lo stesso risultato, ovviamente, ma non è sempre necessario o desiderato. E bloccare l’interfaccia utente spesso non è una buona idea. Tuttavia, i modali non vengono utilizzati per alcuna attività. In genere, li utilizziamo per attività singole e autonome in cui gli utenti devono intervenire, completare un'attività e quindi tornare al punto in cui si trovavano. Non sorprende che funzionino bene per interazioni brevi e ad alta priorità (ad esempio avvisi, azioni distruttive, conferme rapide). Quando i modali aiutano: 🚫 I modali sono spesso dirompenti, invasivi e confusi. 🚫 Rendono difficile il confronto e il copia-incolla.✅ Tuttavia i modali consentono agli utenti di mantenere più contesti.✅ Utile per prevenire errori irreversibili e perdita di dati.✅ Utile se inviare gli utenti a una nuova pagina sarebbe dirompente. ✅ Mostra una modale solo se gli utenti apprezzeranno l'interruzione.✅ Per impostazione predefinita, preferisci finestre di dialogo non bloccanti ("non modali").✅ Consenti agli utenti di ridurre a icona, nascondere o ripristinare la finestra di dialogo in un secondo momento.✅ Utilizza una modale per rallentare gli utenti, ad esempio, verificare input complessi.✅ Dare una via d'uscita con "Chiudi", il tasto ESC o fare clic fuori dalla casella. Pagine → Per flussi di lavoro complessi in più fasi Le procedure guidate o la navigazione a schede all'interno delle modalità modali non funzionano molto bene, anche in prodotti aziendali complessi: lì i pannelli laterali o i cassetti in genere funzionano meglio. I problemi iniziano quando gli utenti devono confrontare o fare riferimento a punti dati, ma le modalità bloccano questo comportamento, quindi riaprono invece la stessa pagina in più schede.
Per flussi più complessi e processi in più fasi, le pagine autonome funzionano meglio. Le pagine funzionano meglio anche quando richiedono la piena attenzione dell’utente e il riferimento alla schermata precedente non è molto utile. E i cassetti funzionano per attività secondarie che sono troppo complesse per un semplice modale, ma non richiedono la navigazione a pagina intera. Quando evitare i modali: 🚫 Evita le modali per i messaggi di errore.🚫 Evita le modali per le notifiche delle funzionalità.🚫 Evita le modali per l'esperienza di onboarding.🚫 Evita le modali per attività complesse e lunghe in più passaggi.🚫 Evita più modali nidificate e utilizza invece Prev/Next.🚫 Evita le modali attivate automaticamente a meno che non sia assolutamente necessario. Evita entrambiPer attività ripetute In molti prodotti complessi e ricchi di compiti, gli utenti si troveranno a svolgere le stesse attività ripetutamente, ancora e ancora. Lì, sia le modalità modali che la navigazione di nuove pagine aggiungono attrito perché interrompono il flusso o costringono gli utenti a raccogliere i dati mancanti tra tutte le diverse schede o visualizzazioni. Troppo spesso, gli utenti si ritrovano con un'esperienza interrotta, piena di conferme infinite, avvisi esagerati, istruzioni dettagliate o semplicemente punti di riferimento mancanti. Come menzionato da Saulius Stebulis, in questi scenari, le sezioni espandibili o la modifica sul posto spesso funzionano meglio: mantengono l’attività ancorata alla schermata corrente. In pratica, in molti scenari, gli utenti non completano le proprie attività in modo isolato. Devono cercare dati, copiare e incollare valori, perfezionare le voci in luoghi diversi o semplicemente rivedere record simili mentre svolgono le loro attività. Le sovrapposizioni e i cassetti sono più utili per mantenere l'accesso ai dati in background durante l'attività. Di conseguenza, il contesto rimane sempre al suo posto, disponibile per riferimento o copia-incolla. Risparmia le modalità e la navigazione delle pagine per i momenti in cui l'interruzione aggiunge davvero valore, soprattutto per prevenire errori critici. Modali e pagine: un albero decisionale Qualche tempo fa, Ryan Neufeld ha messo insieme una guida molto utile per aiutare i designer a scegliere tra modali e pagine. Viene fornito con un pratico cheatsheet PNG e un modello di Google Doc con domande suddivise in 7 sezioni. È lungo, estremamente approfondito, ma molto facile da seguire:
Potrebbe sembrare scoraggiante, ma è un processo piuttosto semplice in 4 passaggi:
Contesto dello schermo. Innanzitutto controlliamo se gli utenti devono mantenere il contesto dello schermo sottostante. Complessità e durata delle attività. Le attività più semplici, mirate e che non distraggono potrebbero utilizzare una modalità modale, ma i flussi lunghi e complessi necessitano di una pagina. Riferimento alla pagina sottostante. Quindi controlliamo se gli utenti hanno spesso bisogno di fare riferimento ai dati in background o se l'attività è una semplice conferma o selezione. Scegliere l'overlay giusto. Infine, se un overlay è davvero una buona opzione, ci guida nella scelta tra modale o non modale (tendendo verso un non modale).
Concludendo Quando possibile, evitare di bloccare l'intera interfaccia utente. Avere una finestra di dialogo mobile, che copre parzialmente l'interfaccia utente, ma consente la navigazione, lo scorrimento e il copia-incolla. Oppure mostra il contenuto del modale come un cassetto laterale. Oppure usa invece una fisarmonica verticale. Oppure porta gli utenti in una pagina separata se hai bisogno di mostrare molti dettagli. Ma se vuoi aumentare l’efficienza e la velocità degli utenti, evita i modali a tutti i costi. Usali per rallentare gli utenti, concentrare la loro attenzione, per prevenire errori. Come ha notato Therese Fessenden, a nessuno piace essere interrotto, ma se devi, assicurati che ne valga assolutamente la pena. Scopri i "modelli di progettazione dell'interfaccia intelligente" Puoi trovare un'intera sezione sulle modalità e sulle alternative in Smart Interface Design Patterns, il nostro corso video di 15 ore con centinaia di esempi pratici tratti da progetti di vita reale, con una formazione UX dal vivo entro la fine dell'anno. Tutto, dai mega menu a discesa alle complesse tabelle aziendali, con 5 nuovi segmenti aggiunti ogni anno. Vai all'anteprima gratuita. Usa il codice BIRDIE per risparmiare il 15% di sconto. Scopri Smart Interface Design Patterns, il nostro corso video su design dell'interfaccia e UX.
Formazione video + UXSolo videoFormazione video + UX$ 495,00 $ 699,00
Ottieni video + formazione UX25 lezioni video (15 ore) + formazione UX dal vivo.Garanzia di rimborso di 100 giorni.Solo video$ 300,00$ 395,00
Ottieni il videocorso40 videolezioni (15h). Aggiornato ogni anno. Disponibile anche come pacchetto UX con 2 corsi video.
Risorse utili
Diversi tipi di popup, di Anna Kaley Migliori pratiche per la progettazione di modali dell'interfaccia utente, di Uxcel Usiamo troppi dannati modali: linee guida UX, di Adrian Egger Dialoghi modali e non modali, di Therese Fessenden Design moderno dell'interfaccia utente aziendale: dialoghi modali, di James Jacobs Modali nei sistemi di progettazione
