Quante volte vi è successo di navigare una pagina e venire bombardati di modali e pop up di iscrizione a newsletter, Cookie & Privacy Policy, live chat, promozioni, tentativi di vendita e simili?
Alcuni siti, probabilmente gestiti da Satana in persona, sono una vera e propria mitraglia di modali e pop up.
Quando mi ci ritrovo, l’iter è sempre lo stesso: chiudo il primo, mi spazientisco al secondo, abbandono il sito al terzo.
Questi elementi sono un po’ un’arma a doppio taglio e devono essere maneggiati con cautela.
Possono essere utili se progettati con cognizione di cause e buon senso, o risultare in un vero disastro nel momento in cui se ne abusa.
Entrambi, a modo loro, rappresentano una distrazione e un’interruzione che possono rendere fastidiosa e poco fluida l’esperienza utente.
Come sappiamo bene, per battere il nemico bisogna però conoscerlo.
Prima di tutto, cerchiamo di capire le differenze tra modali e pop up.
Pop up modali (o semplicemente, modali): le finestre di dialogo si aprono in sovrapposizione alla pagina che si desidera navigare, impedendo all’utente di interagire con essa.
Per poter accedere alla pagina basterà chiudere la modale.
Pop up non modale: (o semplicemente, pop up): come le modali, si aprono in sovrapposizione alla pagine, ma non rappresentano un ostacolo all’interazione.
Senza obbligatoriamente chiudere il pop up, l’utente può consultare e cliccare ciò che desidera sulla pagina.
Come anticipavo, questi elementi non devono diventare motivo di disturbo per l’esperienza ma guidare l’utente.
Gli utenti di oggi sono sopraffatti da un trionfo di siti farciti di finestre di dialogo, con contenuti spesso nemmeno coerenti.
Ma quindi, quando è accettabile utilizzarli?
In generale con parsimonia, quando c’è un’emergenza, quando è presente una richiesta di autorizzazione o quando sono necessarie ulteriori informazioni per completare un task.
Ecco alcune tipologie di modali e pop up:
- Avviso (alert): compare in caso di informazioni, dettagli o azioni urgenti;
- Semplice: visualizza un elenco di elementi che richiedono attenzione per procedere al passaggio successivo;
- Conferma: mostra alcune scelte che l’utente deve selezionare per completare un’azione.
Anatomia di base
Per poter creare modali veramente efficaci, è importante fare attenzione che siano presenti determinati elementi:
- contenitore: detto alla brutta, il background della finestra. Aiuta a creare un’area di focus;
- titolo: il titolo deve comunicare scopo della finestra in maniera chiara e concisa;
- sottotitolo: in supporto al titolo, spiega cosa succede quando l’utente entra in azione;
- pulsanti: pulsanti di testo affiancati o impilati, generalmente sono 2 (pulsante di conferma al primo posto, di uscita dopo);
- chiusura: una “via di fuga” che può essere rappresentata dalla X, dal clic all’esterno o da un pulsante “Chiudi”.
Galateo per modali e pop up
- Non interrompere task importanti o complicati;
- non mostrare più modali e pop up allo stesso tempo o uno dopo l’altro;
- non mostrare modali ancora prima che l’utente abbia avuto la possibilità di visionare la pagina;
- non chiedere di lasciare un indirizzo mail prima ancora che l’utente abbia navigato la pagina;
- non chiedere di attivare notifiche senza dare spiegazioni sul loro funzionamento;
- non inserire indicazioni troppo lunghe e vaghe o pulsanti con label poco chiare. Il copy è importante;
- lasciare una via di fuga all’utente che sia immediata ed agevole;
- creare focus sulla modale, magari oscurando leggermente con un overlay o una sfocatura la pagina sotto;
- rendere appetibile ed accattivante la finestra, inserendo icone o illustrazioni coerenti.
Qual è il vostro rapporto con modali e pop up?
Ne abusate o come me preferite centellinarle?
