Le finestre modali e le loro alternative sul web

Nota: Se siete interessati all’elenco delle alternative possibili sul web alle finestre modali, potete saltare direttamente alla fine.

Nel campo del design di interfacce si chiamano finestre modali le finestre “figlie” generate da una finestra genitore e che impediscono l’utilizzo della finestra che le ha generate. Quando compare una finestra modale, l’utente è obbligato a interagire con questa finestra prima di tornare a poter usare quella che l’ha generata. In genere, si tratta di finestre generate da un’applicazione principale e che servono a diversi scopi:

  1. Deviare l’attenzione dell’utente su una porzione di informazione rappresentata nella finestra modale
  2. Bloccare il flusso principale di azione finché l’utente non inserisce alcuni dati o non preme alcuni bottoni
  3. Presentare un insieme di funzionalità azionabili (ad esempio una finestra di opzioni o di preferenze) che abbiano effetto sulla finestra genitore o sull’applicazione più generale. O offrendo per esempio la possibilità di editare un contenuto selezionato dalla finestra genitore, senza abbandonarla.
  4. Informare dell’irreversibilità di un’operazione. Ad esempio, chiedendo all’utente se è sicuro di voler continuare.
  5. Presentare messaggi di altro tipo all’utente

Non tutte le finestre aperte dalle applicazioni principali sono modali: lo sono solo quelle che impediscono l’uso delle applicazioni che le hanno generate.

Le finestre modali sono molto criticate dagli esperti di usabilità perché disturbano l’utente senza ottenere sempre quello per cui sono progettate.

In particolare, usare una finestra modale per lo scopo 4, non garantisce che la persona sappia cosa vuole fare o che capisca il messaggio. Se sbaglia bottone e l’azione è irreversibile, l’utente ne risulterà ingiustificatamente danneggiato.

Questo ha portato diversi autori, fra cui Jef Raskin, a proporre l’abolizione di finestre modali che servono a segnalare azioni irreversibili, perché troppo a rischio di errore ed intrusive, e di preferire la possibilità di proporre agli utenti un undo (cioè la possibilità di annullare l’ultima azione), se si accorgono che le conseguenze dell’azione non erano quelle desiderate (si veda l’articolo del figlio di Jef, Aza Raskin, su alistapart a tale proposito).

Alertbox e box di dialogo

Un caso particolare di finestra modale è l’alertbox, una finestra che compare proponendo semplicemente un messaggio senza alcuna possibilità di scelta per l’utente, come quello qui rappresentato:

Un esempio di alertbox, una messaggio modale che non prevede alterative per l’utente.

Questa finestra è del tutto inutile (tecnicamente ha efficienza zero) perché l’utente non ha altra scelta che premere il tasto ok, non potendo intervenire sull’operazione (in questo specifico esempio può anche chiudere la finestra con il tasto in alto a destra, ma l’effetto è identico, non c‘è reale alternativa fra i due metodi). Se il messaggio è davvero necessario è preferibile fornirlo in maniera da non richiedere interazione, e magari proporre un undo (si veda più avanti la discussione sulle finestre transitorie).

Spesso gli alertbox vengono usati per segnalare in diretta alcuni errori nella compilazione dei form (e rientrano dunque nel caso n.5 di quelli visti sopra). Questo sistema è sconsigliato per l’invasività rispetto al flusso dell’azione. Inoltre, se un alertbox del genere compare troppo spesso, l’utente si può abituare a dare un ok in automatico, premendo ok anche nel caso compaia una finestra modale di altro tipo che preveda una scelta differente, e portando così ad errori dovuti ad un automatismo.

Specificità delle finestre modali

Le finestre modali possono essere specifiche della finestra (o della scheda di una finestra, con i browser recenti), dell’applicazione, o del sistema operativo. Nel primo caso impediscono l’interazione con la finestra che le ha generate, ma non con altre finestre della stessa applicazione. Nel secondo caso impediscono l’interazione con tutte le finestre di quell’applicazione, ma consentono di lavorare con altre finestre di altre applicazioni. Nel terzo caso impediscono di lavorare con qualunque altra applicazione finché non si risponde alla finestra modale.

Con l’avvento del web si sono diffuse delle varianti che potremmo considerare “finestre modali specifiche del contenuto di una pagina web”. Ne parliamo nel paragrafo il web e lightbox.

Finestre modeless e popup

Spesso le finestre modali vengono confuse con i popoup. Nel web le finestre dei browser sono finestre figlie che vengono generate tramite javascript, ma non tutte sono modali. Alcune semplicemente possono essere ignorate, perdere il focus o essere minimizzate.

Finestre che si aprono ma che non impediscono l’azione con la finestra principale (come alcuni pop-up) sono dette finestre non modali, o modeless. Le modeless windows sono state introdotte per prime da Internet Explorer 5.

Le modeless windows possono essere usate come alternativa alle finestre modali in alcune situazioni e sono di solito ad esse preferibili. Tuttavia non è una buona idea aprire finestre, anche non modali, se non è strettamente necessario. Cioè se i benefici non superano i costi. Bisogna in tal caso valutare eventuali alternative (si veda alla fine di questo articolo per una rapida rassegna dei metodi alternativi).

Finestre transitorie

In tempi recenti si sono diffuse delle alternative alle finestre modali chiamate finestre transitorie (inizialmente in sistemi operativi diversi da Windows, che fa grande uso di finestre modali). Le finestre transitorie sono di solito semitrasparenti, rimangono in cima alle altre finestre e non disabilitano le azioni sulla finestra principale. Possono essere spostate, scomparire automaticamente dopo alcuni secondi, dopo una qualche azione dell’utente oppure essere chiuse manualmente.

Un esempio del genere di messaggi che informano l’utente ma che non richiedono necessariamente una sua interazione sono i messaggi di “download completato”, di connessione con una rete, di file audio in esecuzione.

Fornire questi messaggi (che non richiedono scelte all’utente) attraverso finestre modali è improprio. In effetti negli anni recenti tutti questi messaggi vengono forniti da applicazioni e sistemi operativi attraverso sistemi non modali (come i fumetti sulla taskbar in Windows). Un’ulteriore evoluzione sono le finestre transitorie, appunto. In Mac OsX si possono scaricare e installare utilities di notifica transitorie come growl, poi reso disponibile anche per Windows.

Come detto, questi sistemi di notifica trasparenti sono stati ideati da Jef Raskin. Il figlio Aza ne porta avanti la diffusione sviluppando alcune applicazioni, come gli Humanized message, qui descritti (è possibile vederli in azione nella sua applicazione web musicale songza). I messaggi di tipo Humanized servono a notifiche importanti per l’utente, ma che non richiedono interazione: permangono sullo schermo finché l’utente non compie una qualsiasi azione e a quel punto si dissolvono. Per evitare che un’azione accidentale faccia scomparire il messaggio, o comunque che questo sparisca prima che si abbia la possibilità di leggerlo, viene previsto un sistema di archiviazione (un log dei messaggi), per recuperarli se necessario.

In tutti i casi queste soluzioni non sono invasive perché non impediscono l’uso della finestra principale.

Il drawer in Mac OsX

Spesso le finestre modali vengono usate per aprire preferenze o editare parte di un contenuto senza abbandonare la pagina di origine. Queste finestre però non devono essere necessariamente modali. Mac OsX ha proposto il cassetto (drawer) come alternativa ad alcuni tipi di finestre di preferenze (che pure vengono mantenute, non modali, nel sistema operativo). L’applicazione apre una specie di cassetto su un lato dove si trovanno le opzioni da modificare, senza influenzare la finestra principale. Questo è possibile solo con finestre non massimizzate. Ma si può pensare che equivalente a questo oggetto di interfaccia sia l’apertura della palette dei bookmark nel browser, che riduce la finestra principale e ricava uno spazio nel suo contenuto per presentare le nuove opzioni.

Le palette non sono finestre

Non si confondano le finestre modali con le palette, aperte da una barra di menu o da altre palette. Esse non hanno lo status di finestra principale, non si sostituiscono alla finestra che le ha generate, sono piccole e focalizzate, e interagiscono in tempo reale con la finestra (proprio come una barra dei menu).

Hanno in comune con le finestre non modali il rischio di proliferazione: troppe palette o troppe finestre modeless (o popup) tutte insieme o addirittura successive possono creare grande confusione all’utente e rendono difficile capire la gerarchia delle finestre. E’ dunque sconsigliato aprire più finestre allo stesso tempo. Per le palette una soluzione alternativa è stata quella di raggrupparle in maniera ordinata anziché farle fluttuare sullo schermo, come nelle recenti applicazioni di Microsoft Office o Adobe.

Sul web si è sviluppata un’alternativa ai casi 1-2-3 chiamata lightbox (ma esiste un’innumerevole serie di sistemi simili). Invece di aprire le nuove informazioni o le funzionalità in una nuova finestra (modale o meno), esse vengono aperte in un un layer creato in javascript che si sovrappone al contenuto della finestra (ma non alla finestra stessa) e che impedisce l’interazione solo con il contenuto di quella finestra. Rispetto alle finestre modali – e anche ai popup – questa soluzione è preferibile perché consente all’utente di lavorare comunque con la finestra principale e di passare ad altre schede, se aperte.

E’ utile quando non si voglia abbandonare la finestra principale (perché potrebbe diventare troppo complicato ritornarci, per esempio). Non a caso ha particolare fortuna per le gallerie di immagini. Le gallerie sono spesso una parentesi nell’esperienza di navigazione, terminata la quale si vuole normalmente tornare all’indice o alla pagina che le ha generate. Se però ogni immagine di una galleria rimane su una propria pagina, ci si allontana progressivamente dall’indice, e per tornare indietro il back del browser non basta più, o va premuto troppe volte. La soluzione modale (interna al contenuto della finestra e non dell’applicazione) è in questo caso più elegante e più efficiente. Inoltre rispetto alle finestre modali vere e proprie la soluzione di tipo lightbox è più facilmente annullabile anche senza interagire con la finestra. Basta cliccare fuori dai confini del nuovo riquadro e si riprende il controllo del contenuto. Questo fa della soluzione lightbox un’alternativa preferibile alle finestre modali, anche se il suo utilizzo va verificato caso per caso.

Perché sono nate le finestre modali

Le finestre modali vengono spesso amate dai programmatori perché ritengono che così sia possibile guidare meglio gli utenti. Questo è vero fino ad un certo punto, perché gli errori sono sempre possibili. E lo svantaggio è che queste soluzioni hanno il difetto di irritare gli utenti, che non si aspettano una finestra modale ad ogni azione, perdendo così il controllo dell’interfaccia. Tanto più se, come in molte applicazioni di vecchia generazione, le finestre aperte in successione sono più d’una. Meglio progettare le applicazioni senza necessità di finestre modali, scegliendo per ciascun caso l’alternativa migliore (vedi tabella sotto). Preferire in ogni caso, se non fosse possibile farne a meno, modalità limitate al contenuto o almeno all’applicazione (mai al sistema operativo). E si tenga presente che far aprire troppe finestre testimonia più un’interfaccia mal progettata, che obbliga l’utente a decine di parentesi, piuttosto che un flusso d’azione logico.

D’altra parte ci sono situazioni (soprattutto a livello di sistema operativo) dove un evento ha l’assoluta necessità di predere il sopravvento su qualunque altro evento. In questi casi l’uso di finestre modali è inevitabile.

Cosa fare al posto delle finestre modali

ScopoSoluzione alternativa per pagine web
Deviare l’attenzione dell’utente su una porzione di informazione rappresentata nella finestra modale Usare un messaggio visivo (riquadro, freccia, boxino) a comparsa nel contenuto (usando div nascosti), contestualmente a dove l’informazione è necessaria
Bloccare il flusso principale di azione finché l’utente non inserisce alcuni dati o non preme alcuni bottoni (password, conferme) Impedire semplicemente di proseguire nell’azione, presentando un messaggio d’errore esplicativo contestuale, colorato ed evidente come nel caso precedente; accertarsi di mantenere i dati fin lì forniti dall’utente.
Presentare un insieme di funzionalità azionabili (ad esempio una finestra di opzioni di preferenze) che abbiano effetto sulla finestra genitore o sull’applicazione più generale. Offrendo per esempio la possibilità di modificare un contenuto selezionato dalla finestra genitore, senza abbandonarla Usare un layer a comparsa; valutare la possibilità di far andare in un’altra pagina se la procedura è semplice.
Preferire una soluzione tipo lightbox. Non moltiplicare queste finestre oltre un livello.
Informare dell’irreversibilità di un’operazione. Ad esempio, chiedendo all’utente se è sicuro di voler continuare. Evitare operazioni irreversibili. Minimizzare la dimensione e la rilevanza di bottoni dagli effetti distruttivi. Fornire undo e chiari messaggi su quello che si sta per fare e che si è fatto.
Per presentare messaggi all’utente Usare messaggi contestuali in pagine successive a quelle dell’azione. Valutare l’uso di messaggi transitori.