Finestra di dialogo
In informatica, una finestra di dialogo è un controllo grafico (widget) che permette a computer ed utente di comunicare fra loro tramite la visualizzazione di informazioni, la richiesta di comandi o entrambe[1].
Utilizzo modifica
La dialog box è solitamente utilizzata per fornire all'utente gli strumenti per specificare come eseguire un comando, per rispondere ad una domanda o ad un "alert". Il tipo più semplice di è l'avviso, che visualizza un messaggio e richiedere un semplice riconoscimento che il messaggio è stato letto, di solito facendo clic su "OK"; in altri casi viene richiesta una decisione su un'azione da intraprendere, facendo clic su "OK "o "Annulla". Talvolta gli avvisi sono utilizzati anche per visualizzare una "disdetta", come nel caso della chiusura sia un intenzionale o non intenzionale di un'applicazione o del sistema operativo.
Inserimento dati modifica
Le finestre di dialogo sono pensate per essere finestre piccole e transitorie che non richiedono un'interazione approfondita da parte dell'utente, quindi è importante assicurarsi che l'immissione dei dati sia efficiente. È doveroso[2]:
- Fornire valori predefiniti per controlli e campi, ove possibile. È più facile per un utente verificare le informazioni che inserirle da zero.
- Impostare lo stato attivo iniziale sulla prima posizione che accetta l'input dell'utente. In questo modo l'utente può iniziare a inserire i dati immediatamente, senza dover fare clic su un elemento specifico come un campo di testo o un elenco.
- Rendere selezionabile il testo statico. Ad esempio, l'utente dovrebbe essere in grado di copiare informazioni utili, come un messaggio di errore, un numero di serie o un indirizzo IP da incollare altrove.
- Verificare la presenza di errori durante l'immissione dei dati. Invece di attendere e visualizzare un avviso quando l'utente tenta di chiudere una finestra di dialogo, verificare la presenza di errori durante l'immissione dei dati in modo che l'utente possa risolvere il problema nel contesto.
- Quando possibile, ridurre al minimo il potenziale di input non valido. Ad esempio, utilizzare i pulsanti a comparsa per fornire scelte piuttosto che chiedere all'utente di inserire dati e utilizzare selettori di data e formattatori di numeri per garantire che le date e i numeri siano inseriti correttamente.
- Utilizzare un disclosure control per fornire informazioni ulteriori. Un disclosure control nasconde informazioni o funzionalità, come le opzioni avanzate, e le rivela solo quando l'utente fa clic sul controllo.
- Considerare l'inclusione di un pulsante "Applica" che consenta all'utente di visualizzare in anteprima le modifiche prima di impegnarsi. Esso ha senso in una finestra di dialogo non modale per le modifiche che possono essere applicate, visualizzate in anteprima e annullate rapidamente. Le finestre di dialogo di salvataggio e altre finestre di dialogo che consentono agli utenti di apportare modifiche che non possono essere visualizzate facilmente in anteprima non dovrebbero includere un pulsante "Applica".
- Assicurarsi che gli elementi dell'interfaccia scalino correttamente quando una finestra di dialogo viene ridimensionata.
- Separare i pulsanti distruttivi dai pulsanti non distruttivi. I pulsanti distruttivi, come "Non salvare", dovrebbero essere abbastanza lontani da pulsanti sicuri, come Salva e Annulla.
Chiusura della finestra di dialogo modifica
- Fornire un pulsante predefinito solo quando l'azione più probabile dell'utente è innocua[2]. Gli utenti a volte premono Invio semplicemente per chiudere una finestra di dialogo, senza leggerne il contenuto, quindi è fondamentale che un pulsante predefinito avvii un'azione innocua. Quando non è presente alcun pulsante predefinito, la pressione di Invio non dovrebbe avere alcun effetto; l'utente dovrebbe fare clic esplicitamente su un pulsante per chiudere la finestra di dialogo. In alternativa, quando una finestra di dialogo può provocare un'azione distruttiva, Annulla può essere impostato come pulsante predefinito.
- Fornire un pulsante predefinito solo quando il tasto Invio non è già utilizzato dai campi di testo nella finestra di dialogo. Avere due comportamenti per una chiave crea confusione e rende l'interfaccia meno prevedibile. L'utente potrebbe premere Invio troppe volte e attivare inavvertitamente il pulsante predefinito.
- Includere un pulsante Annulla che risponda alle scorciatoie da tastiera standard per l'annullamento. Un pulsante Annulla fornisce un modo chiaro e sicuro per uscire da una finestra di dialogo e riporta il computer allo stato in cui si trovava prima della visualizzazione della finestra di dialogo. Assicurarsi che la scorciatoia da tastiera Command-period e il tasto Esc (Escape) siano mappati al pulsante Annulla.
- Assicurarsi che un pulsante Annulla annulli tutte le modifiche applicate.
- Utilizzare i pulsanti Applica, OK e Annulla. Fare clic su Applica anteprime cambia ma non chiude la finestra di dialogo. Facendo clic su OK si conferma l'intenzione di accettare eventuali modifiche e si chiude la finestra di dialogo. Facendo clic su Annulla si annullano le modifiche applicate e si chiude la finestra di dialogo.
- Assicurarsi che le azioni di dialogo avvengano rapidamente. In generale, l'utente dovrebbe vedere risultati quasi immediati dopo aver avviato un'azione da una finestra di dialogo. Per azioni che richiedono più di un paio di secondi per essere completate, visualizzare le informazioni sull'avanzamento in modo che l'utente sappia che l'azione è stata avviata, quanto tempo impiegherà e quando sarà completata.
Classificazione modifica
Le finestre di dialogo vengono distinte in modali e non modali, a seconda se l'interazione con il software viene bloccata o meno all'inizializzazione del dialogo.
Le finestre di dialogo modali (modal, in inglese) bloccano l'esecuzione del programma che potrebbe richiedere alcune informazioni aggiuntive prima di poter continuare, o può semplicemente richiedere di confermare un'azione potenzialmente dannosa. Le finestre di dialogo modali sono generalmente considerate come cattive soluzioni di progettazione in quanto tendono a produrre errori.
Le finestre di dialogo non modali (non-modal o modeless, in inglese) vengono utilizzate quando l'informazione richiesta non è essenziale per continuare, e così la finestra può essere lasciata aperta mentre si continua a lavorare altrove. In generale, una buona progettazione del software richiede finestre di questo tipo.
Le finestre di dialogo sono classificate come "modali" o "non modali", a seconda che blocchino l'interazione con il software che ha avviato la finestra di dialogo. Il tipo di finestra di dialogo visualizzata dipende dall'interazione dell'utente desiderata.
Il tipo più semplice di finestra di dialogo è l'avviso , che visualizza un messaggio e può richiedere una conferma che il messaggio è stato letto, di solito facendo clic su "OK", o una decisione se un'azione deve procedere o meno, facendo clic su "OK "o" Annulla". Gli avvisi vengono utilizzati anche per visualizzare un "avviso di terminazione", a volte che richiede la conferma della lettura dell'avviso, in caso di chiusura intenzionale o involontaria ("arresto anomalo") di un'applicazione o del sistema operativo. (Ad esempio "Gedit ha riscontrato un errore e deve essere chiuso.") Sebbene questo sia un modello di interazione frequente per le finestre di dialogo modali,esperti di usabilità in quanto inefficaci per il suo uso previsto, che è quello di proteggere dagli errori causati da azioni distruttive, e per il quale esistono alternative migliori[3][4].
Un esempio di una finestra di dialogo è la casella delle informazioni che si trova in molti programmi software, che di solito visualizza il nome del programma, il suo numero di versione e può anche includere informazioni sul copyright.
Modeless modifica
Le finestre di dialogo modali erano originariamente concepite per avvisare gli utenti di un errore o di un altro stato del sistema che richiedeva un'azione immediata da parte dell'utente. In questi casi, era essenziale che gli utenti venissero interrotti per correggere l'errore . Pertanto, posizionare la finestra di dialogo al centro dello schermo come punto focale dell'interfaccia, lo ha reso molto efficace. Il grande vantaggio di tali finestre era che attiravano l'attenzione degli utenti e consentivano loro di riconoscere il problema e correggerlo rapidamente.
Tuttavia, questo uso originale si è evoluto e successivamente le finestre di dialogo e le finestre modali vengono utilizzate in modo convincente per attirare l'attenzione dell'utente per motivi legittimi o meno legittimi[5]. Tuttavia le finestre modali presentano una serie di svantaggi:
- Richiedono un'attenzione immediata. Le finestre modali, per loro natura, sono obbligatorie e richiedono all'utente di agire immediatamente. Poiché le finestre di dialogo posizionano il sistema in una modalità diversa, gli utenti non possono continuare ciò che stanno facendo finché non riconoscono la finestra di dialogo.
- Interrompono il flusso di lavoro dell'utente. Le finestre di dialogo modali allontanano gli utenti dalle attività su cui stavano lavorando in primo luogo. Ogni interruzione si traduce in tempo e fatica persi, non solo perché gli utenti devono affrontare il dialogo, ma anche perché, una volta tornati ai loro compiti originali, le persone dovranno dedicare del tempo a recuperare il contesto.
- Inducono gli utenti a dimenticare quello che stavano facendo. Una volta che il contesto è passato a un'attività diversa, a causa del carico cognitivo aggiuntivo imposto dal dialogo modale, le persone potrebbero dimenticare alcuni dei dettagli associati all'attività originale. In tal caso, recuperare il contesto per l'attività originale potrebbe essere ancora più difficile.
- Inducono gli utenti a creare e ad affrontare un obiettivo aggiuntivo: chiudere la finestra di dialogo. Quando viene presentata la finestra di dialogo, vengono aggiunti passaggi aggiuntivi al flusso di lavoro dell'utente: leggere e comprendere la finestra di dialogo, quindi prendere una decisione su quella finestra di dialogo. È probabile che questo aumento del costo dell'interazione scoraggia gli utenti, a meno che il dialogo non sia ben giustificato e contenga effettivamente informazioni importanti.
- Bloccano il contenuto in background. Quando una finestra di dialogo viene visualizzata nella parte superiore della finestra corrente, può coprire contenuti importanti e rimuovere il contesto. Di conseguenza, potrebbe diventare più difficile rispondere alla finestra di dialogo quando la finestra di dialogo pone una domanda relativa a informazioni appena oscurate.
A causa di questi svantaggi, le finestre di dialogo modali diventano problematiche se utilizzate per attività non critiche. Per questo sono state inventate le finestre modeless.
Le finestre di dialogo non modali (modeless) vengono utilizzate quando le informazioni richieste non sono essenziali per continuare e quindi la finestra può essere lasciata aperta mentre il lavoro continua altrove. Un tipo di finestra di dialogo non modale è una barra degli strumenti separata dall'applicazione principale o che può essere scollegata dall'applicazione principale e gli elementi nella barra degli strumenti possono essere utilizzati per selezionare determinate caratteristiche o funzioni dell'applicazione.
In generale, una buona progettazione del software richiede che le finestre di dialogo siano di questo tipo, ove possibile, poiché non obbligano l'utente a una particolare modalità di funzionamento. Un esempio potrebbe essere una finestra di dialogo delle impostazioni per il documento corrente, ad esempio lo sfondo e i colori del testo. L'utente può continuare ad aggiungere testo alla finestra principale qualunque sia il colore, ma può cambiarlo in qualsiasi momento utilizzando la finestra di dialogo. Spesso la stessa funzionalità può essere realizzata dai pulsanti della barra degli strumenti nella finestra principale dell'applicazione.
System modal modifica
Le finestre system modal impediscono l'interazione con qualsiasi altra finestra sullo schermo e impediscono agli utenti di passare a un'altra applicazione o di eseguire qualsiasi altra azione finché il problema presentato nella finestra di dialogo non viene risolto[6]. Le finestre di dialogo modali di sistema erano più comunemente utilizzate in passato su sistemi single tasking in cui poteva essere eseguita una sola applicazione alla volta. Un esempio è la schermata di spegnimento di molte versioni di Windows[7].
Application modal modifica
Le finestre application modal interrompono temporaneamente il programma: l'utente non può continuare senza chiudere la finestra di dialogo; il programma potrebbe richiedere alcune informazioni aggiuntive prima di poter continuare, o potrebbe semplicemente voler confermare che l'utente desidera procedere con un'azione potenzialmente pericolosa (finestra di dialogo di conferma). I professionisti dell'usabilità generalmente considerano i dialoghi modali come cattive soluzioni di progettazione, poiché sono inclini a produrre errori di modalità.
Le azioni pericolose dovrebbero essere annullabili ove possibile; una finestra di dialogo di avviso modale che appare inaspettatamente o che viene chiusa automaticamente (perché l'utente ha sviluppato un'abitudine) non proteggerà dall'azione pericolosa.
Una finestra di dialogo modale interrompe il flusso di lavoro principale. Questo effetto è stato ricercato dallo sviluppatore perché si concentra sul completamento dell'attività in corso o rifiutato perché impedisce all'utente di passare a un'attività diversa quando necessario.
Document modal modifica
Il concetto di document modal è stato utilizzato in particolare in macOS e Opera Browser. Nel primo caso, vengono visualizzati come "fogli" allegati a una finestra principale. Queste finestre di dialogo bloccano solo quella finestra fino a quando l'utente la chiude, consentendo di continuare il lavoro in altre finestre, anche all'interno della stessa applicazione[8].
In macOS, le finestre di dialogo sembrano provenire da uno slot nella finestra principale e vengono visualizzate con un'animazione di rinforzo. Questo aiuta a far capire all'utente che la finestra di dialogo è allegata alla finestra genitore, non solo mostrata di fronte ad essa. Non è possibile eseguire alcun lavoro nel documento sottostante stesso mentre è visualizzata la finestra di dialogo, ma la finestra principale può ancora essere spostata, ridimensionata e ridotta a icona e altre finestre possono essere portate in primo piano in modo che l'utente possa lavorarci[9]:
Lo stesso tipo di finestra di dialogo può essere confrontato con le finestre di dialogo modali "standard" utilizzate in Windows e in altri sistemi operativi.
Le somiglianze includono:
- la finestra padre è bloccata quando si apre la finestra di dialogo e non è possibile continuare a lavorare con il documento sottostante in quella finestra
- nessun lavoro può essere fatto con il documento sottostante in quella finestra.
Le differenze sono:
- la finestra di dialogo può aprirsi ovunque nella finestra principale
- a seconda di dove si trova la finestra principale, la finestra di dialogo potrebbe aprirsi praticamente ovunque sullo schermo
- la finestra di dialogo può essere spostata (in quasi tutti i casi), in alcuni casi può essere ridimensionabile, ma di solito non può essere ridotta a icona e
- non sono possibili modifiche alla finestra principale (non può essere ridimensionata, spostata o ridotta a icona) mentre la finestra di dialogo è aperta.
Entrambi i meccanismi hanno dei difetti:
- La finestra di dialogo di Windows blocca la finestra principale che può nascondere altre finestre a cui l'utente potrebbe dover fare riferimento durante l'interazione con la finestra di dialogo, sebbene ciò possa essere mitigato poiché altre finestre sono disponibili tramite la barra delle applicazioni .
- La finestra di dialogo di macOS blocca la finestra principale, impedendo all'utente di farvi riferimento durante l'interazione con la finestra di dialogo. Ciò potrebbe richiedere all'utente di chiudere la finestra di dialogo per accedere alle informazioni necessarie, quindi riaprire la finestra di dialogo per continuare.
Nel web modifica
Le finestre di dialogo sono ben viste dal punto di vista usabile e accessibile per i seguenti tipi di interazioni[10]:
- Modifica di più campi o valori su una schermata
- Anteprime di video, immagini, layout
- Esecuzione di una serie di azioni principali (ad es. l'aggiunta di un commento e modifica dello stato di un ticket dell'help desk) che fa parte di una serie di azioni molto più ampia
I partecipanti non rispondono positivamente all'utilizzo di modali per[10]:
- Modifica di un singolo campo o valore. Un'alternativa migliore è la modifica in linea.
- Conferma di un'azione (ad es. "Le tue modifiche sono state salvate"). Un'alternativa migliore è la conferma in linea o la conferma nella parte superiore della pagina che utilizza un effetto di autoriparazione (scompare dopo pochi secondi).
- Notifiche di errore. Un'alternativa migliore è la notifica in linea.
- Interazioni lunghe o complesse (ad es. Processo di pagamento del carrello, una serie di schermate per un assistente di configurazione/procedura guidata). Un'alternativa migliore è una serie di schermate o l'inserimento di ogni "passaggio" in un blocco che si espande secondo necessità, quindi si comprime al termine ed espande automaticamente il passaggio pertinente successivo. Puoi trovare un esempio di questo sul nuovo modello di pagamento dell'Apple Store.
Esempio in HTML, CSS e JS modifica
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.modal {
display:
position:
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Esempio</h2>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>L'azione è andata a buon fine</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Note modifica
- ^ (EN) Dialogue box definition and meaning | Collins English Dictionary, su www.collinsdictionary.com. URL consultato il 4 marzo 2021.
- ^ a b Dialogs - Windows and Views - macOS - Human Interface Guidelines - Apple Developer, su developer.apple.com. URL consultato il 4 marzo 2021.
- ^ Jef Raskin, The Humane Interface, Addison Wesley, 2000, ISBN 0-201-37937-6.
- ^ Alan Cooper, About Face 2.0: The Essentials of Interaction Design, Wiley, 17 marzo 2003, ISBN 0-7645-2641-3.
- ^ (EN) World Leaders in Research-Based User Experience, Modal & Nonmodal Dialogs: When (& When Not) to Use Them, su Nielsen Norman Group. URL consultato il 4 marzo 2021.
- ^ Aza Raskin, A List Apart: Never Use a Warning When you Mean Undo
- ^ usability - What is a Modal Dialog Window?, su User Experience Stack Exchange. URL consultato il 4 marzo 2021.
- ^ How to Use Modality in Dialogs (The Java™ Tutorials > Creating a GUI With JFC/Swing > Using Other Swing Features), su docs.oracle.com. URL consultato il 4 marzo 2021.
- ^ User Experience: Apple Human Interface Guidelines: Types of Dialogs and When to Use Them, su mirror.informatimago.com. URL consultato il 4 marzo 2021.
- ^ a b What are the pros and cons of using modals in web interfaces?, su Quora. URL consultato il 4 marzo 2021.
Voci correlate modifica
Altri progetti modifica
Wikimedia Commons contiene immagini o altri file su Dialog box
