Controlli di divulgazione progressiva
Nota
Questa guida di progettazione è stata creata per Windows 7 e non è stata aggiornata per le versioni più recenti di Windows. Gran parte delle linee guida si applica ancora in linea di principio, ma la presentazione e gli esempi non riflettono le linee guida di progettazione correnti.
Con un controllo di divulgazione progressiva, gli utenti possono visualizzare o nascondere informazioni aggiuntive, inclusi dati, opzioni o comandi. La divulgazione progressiva promuove la semplicità concentrandosi sull'essenziale, ma rivelando dettagli aggiuntivi in base alle esigenze.
Esempi di controlli di divulgazione progressiva.
Nota
Le linee guida relative a layout, menu e barre degli strumenti sono presentate in articoli separati.
È il controllo giusto?
Per decidere, considerare queste domande:
Gli utenti devono visualizzare le informazioni in alcuni scenari, ma non in tutti gli scenari, o in alcuni casi, ma non in tutto il tempo? In tal caso, la visualizzazione delle informazioni tramite la divulgazione progressiva semplifica l'esperienza di base, ma consente agli utenti di accedere facilmente alle informazioni.
In questo esempio, l'app Sicurezza di Windows visualizza sempre lo stato di sicurezza importante, ma usa la divulgazione progressiva per visualizzare i dettagli su richiesta.
Se le informazioni vengono visualizzate per impostazione predefinita, è probabile che gli utenti scelgano di nasconderlo? Esistono scenari in cui gli utenti avranno bisogno di più spazio? Gli utenti sono sufficientemente motivati a personalizzare l'interfaccia utente? In caso contrario, visualizzare le informazioni senza utilizzare la divulgazione progressiva.
Risposta errata:
In questo esempio gli utenti non saranno motivati a nascondere le informazioni.
Le informazioni aggiuntive sono avanzate, sostanziali, complesse o correlate a una sottoattività indipendente? In tal caso, è consigliabile visualizzare le informazioni in una finestra separata usando pulsanti di comando o collegamenti anziché usare un controllo di divulgazione progressiva. Altre informazioni sono avanzate se sono destinate agli utenti avanzati. È complesso se rende difficile leggere o distribuire altre informazioni.
In questo esempio, le informazioni sul nome e sull'editore del software sono significative principalmente per gli utenti avanzati, quindi vengono usati collegamenti a finestre separate.
Le informazioni aggiuntive sono una frase o un frammento di frase che descrive cosa fa un elemento o come può essere usato? In tal caso, è consigliabile usare una descrizione comando o una descrizione informazioni.
Le informazioni aggiuntive sono correlate all'attività corrente, ma indipendentemente dalle informazioni attualmente visualizzate? In tal caso, prendere in considerazione l'uso delle schede. Tuttavia, gli elenchi comprimibili sono spesso preferibili alle schede perché sono più flessibili e scalabili.
Mostra o nasconde le informazioni aggiuntive essenzialmente un filtro dati? In tal caso, è consigliabile usare un elenco a discesa o caselle di controllo per applicare il filtro all'intero elenco.
Concetti relativi alla progettazione
Gli obiettivi della divulgazione progressiva sono:
- Semplificare un'interfaccia utente concentrandosi sull'essenziale, ma rivelando dettagli aggiuntivi in base alle esigenze.
- Semplificare l'aspetto di un'interfaccia utente riducendo la percezione di confusione.
Entrambi gli obiettivi possono essere raggiunti usando controlli di divulgazione progressiva, in cui gli utenti possono fare clic per visualizzare altri dettagli. Tuttavia, è possibile raggiungere il secondo obiettivo di semplificare l'aspetto senza usare controlli espliciti di divulgazione progressiva tramite:
Visualizzazione dei dettagli contestuali solo nel contesto. Ad esempio, è possibile visualizzare automaticamente i comandi contestuali o le barre degli strumenti quando sono rilevanti per l'oggetto o la modalità selezionata.
Riduzione del peso degli inviti per l'interfaccia utente secondaria. Gli inviti sono proprietà visive che suggeriscono come vengono usati gli oggetti. La tendenza consiste nell'avere un'interfaccia utente con cui gli utenti possono interagire sul posto, ma per avere tutta tale interfaccia utente disegnata per urlare "fai clic su di me!" porta a un eccessivo disordine visivo. Per l'interfaccia utente secondaria, è spesso preferibile usare inviti sottili e dare gli effetti completi sul mouse.
In questo esempio il campo Rating è interattivo, ma non viene visualizzato fino al passaggio del mouse.
Visualizzazione dei passaggi di completamento solo dopo aver completato i prerequisiti. Questo approccio è meglio usato con attività familiari in cui gli utenti possono eseguire in modo sicuro i primi passi.
In questo esempio, la pagina nome utente e password inizialmente mostra solo le caselle nome utente e password facoltativa. Le caselle di conferma e suggerimento vengono visualizzate dopo che l'utente immette una password.
Anche se la divulgazione progressiva è un ottimo modo per semplificare le interfacce utente, presenta questi rischi:
- Mancanza di individuabilità. Gli utenti possono presupporre che, se non riescono a vedere qualcosa, non esiste. Gli utenti potrebbero non passare il puntatore del mouse o fare clic se non vedono cosa stanno cercando. C'è sempre una possibilità che gli utenti potrebbero non fare clic su elementi come Altre opzioni.
- Mancanza di stabilità. La divulgazione progressiva dovrebbe essere prevista o almeno sentirsi naturale. Se i controlli appaiono e scompaiono in modo imprevisto, l'interfaccia utente risultante può sembrare instabile.
Controlli di divulgazione progressiva
I controlli di divulgazione progressiva vengono in genere visualizzati senza etichette dirette che ne descrivono il comportamento, pertanto gli utenti devono poter eseguire le operazioni seguenti in base all'aspetto visivo del controllo:
- Riconoscere che il controllo fornisce la divulgazione progressiva.
- Determinare se lo stato corrente è espanso o compresso.
- Determinare se sono necessarie informazioni, opzioni o comandi aggiuntivi per eseguire l'attività.
- Determinare come ripristinare lo stato originale, se necessario.
Anche se gli utenti possono determinare i valori precedenti in base alla versione di valutazione e all'errore, è consigliabile provare a rendere tale sperimentazione non necessaria.
I controlli di divulgazione progressiva hanno un invito abbastanza debole, il che significa che le loro proprietà visive suggeriscono come vengono usate, anche se debolemente. La tabella seguente confronta l'aspetto dei controlli comuni di divulgazione progressiva:
| Controllo | Scopo | Aspetto | Glifo indica |
|---|---|---|---|
Chevrons |
Mostra tutto: mostra o nasconde gli elementi rimanenti in contenuto completamente o parzialmente nascosto. Gli elementi vengono visualizzati sul posto (usando una singola freccia di espansione) o in un menu a comparsa (usando una doppia freccia di espansione). |
Ivrons puntano nella direzione in cui si verificherà l'azione. |
Stato futuro |
Frecce |
Mostra opzioni: mostra un menu di comando a comparsa. |
Le frecce puntano nella direzione in cui si verificherà l'azione. |
Stato futuro |
Controlli più e meno |
Espandere i contenitori: espandere o comprimere il contenuto del contenitore quando si passa attraverso una gerarchia. |
I simboli più e meno non puntano, ma l'azione si verifica sempre a destra. |
Stato futuro |
Triangoli rotanti |
Mostra dettagli: mostra o nasconde informazioni aggiuntive per un singolo elemento. Vengono usati anche per espandere i contenitori. |
I triangoli rotanti assomigliano in qualche modo alle leve rotanti, quindi puntano nella direzione in cui si è verificata l'azione. |
Stato attuale |
Se fai solo una cosa...
Gli utenti devono essere in grado di stimare correttamente il comportamento di un controllo di divulgazione progressiva tramite ispezione. A tale scopo, selezionare i modelli di utilizzo appropriati e applicarne l'aspetto, la posizione e il comportamento in modo coerente.
Modelli di utilizzo
I controlli di divulgazione progressiva hanno diversi modelli di utilizzo. Alcuni di essi sono incorporati in controlli comuni.
Chevrons
I chevrons mostrano o nascondono gli elementi rimanenti in contenuto completamente o parzialmente nascosto. In genere gli elementi vengono visualizzati sul posto, ma possono anche essere visualizzati in un menu a comparsa. Quando è attivo, l'elemento rimane espanso fino a quando l'utente non lo comprime.
I chevrons vengono usati nei modi seguenti:
| Utilizzo | Esempio |
|---|---|
| Interfaccia utente sul posto l'oggetto associato riceve lo stato attivo di input e la singola freccia di espansione viene attivata con la barra spaziatrice. |
 In questi esempi, i singoli chevroni sul posto vengono posizionati a destra del controllo associato. |
| Pulsanti di comando con etichette esterne il pulsante di comando riceve lo stato attivo di input e la singola freccia di espansione viene attivata con la barra spaziatrice. |
 In questo esempio, il singolo pulsante freccia di espansione viene etichettato e posizionato a sinistra dell'etichetta. Con questo modello, il pulsante sarebbe difficile da comprendere senza l'etichetta. |
| Pulsanti di comando con etichette interne il pulsante di comando riceve lo stato attivo dell'input e viene attivato con la barra spaziatrice. |
 In questi esempi, i pulsanti di comando regolari hanno la doppia freccia di espansione posizionata per suggerire il loro significato. |
Frecce
Le frecce mostrano un menu di comando a comparsa. L'elemento rimane espanso fino a quando l'utente non effettua una selezione o fa clic in qualsiasi punto.
Se il pulsante freccia è un controllo indipendente, riceve lo stato attivo di input e viene attivato con la barra spaziatrice. Se il pulsante freccia ha un controllo padre, l'elemento padre riceve lo stato attivo di input e la freccia viene attivata con alt+freccia giù e alt+freccia su, come con il controllo elenco a discesa.
Le frecce vengono usate nei modi seguenti:
| Utilizzo | Esempio |
|---|---|
| Pulsanti separati la freccia si trova in un controllo pulsante separato. |
 In questi esempi, i pulsanti freccia separati posizionati a destra indicano un menu di comando. |
| Pulsanti di comando la freccia fa parte di un pulsante di comando. |
 In questi esempi, i pulsanti di menu e i pulsanti di divisione hanno le frecce posizionate a destra del testo. |
Controlli più e meno
Più e meno controlli espandono o comprimeno per visualizzare il contenuto del contenitore sul posto durante lo spostamento in una gerarchia. L'elemento rimane espanso fino a quando l'utente non lo comprime. Anche se questi sembrano pulsanti, il loro comportamento è sul posto.
L'oggetto associato riceve lo stato attivo dell'input. Il segno più viene attivato con il tasto freccia destra e il segno meno con il tasto freccia sinistra.
I controlli plus e minus vengono usati nei modi seguenti:
| Utilizzo | Esempio |
|---|---|
| Alberi collapsible una gerarchia a più livelli per visualizzare il contenuto del contenitore. |
 In questo esempio i controlli più e meno vengono posizionati a sinistra del contenitore associato. |
| Elenchi compressi una gerarchia a due livelli per visualizzare il contenuto del contenitore. |
 In questo esempio, i controlli più e meno vengono posizionati a sinistra dell'intestazione dell'elenco associato. |
Triangoli rotanti
I triangoli rotanti mostrano o nascondono informazioni aggiuntive sul posto per un singolo elemento. Vengono usati anche per espandere i contenitori. L'elemento rimane espanso fino a quando l'utente non lo comprime.
L'oggetto associato riceve lo stato attivo dell'input. Il triangolo compresso (puntante a destra) viene attivato con il tasto freccia destra e il triangolo espanso (verso il basso) con il tasto freccia sinistra.
I triangoli rotanti vengono usati nei modi seguenti:
| Utilizzo | Esempio |
|---|---|
| Alberi collapsible una gerarchia a più livelli per visualizzare il contenuto del contenitore. |
 In questo esempio i triangoli rotanti vengono posizionati a sinistra del contenitore associato. |
| Elenchi compressi una gerarchia a due livelli per visualizzare informazioni aggiuntive sul posto. |
 In questo esempio, i triangoli rotanti vengono posizionati a sinistra delle voci di elenco associate. |
Frecce di anteprima
Come i trucchi, le informazioni aggiuntive vengono visualizzate o nascoste sul posto. L'elemento rimane espanso fino a quando l'utente non lo comprime. A differenza dei trucchi, i glifi hanno una rappresentazione grafica dell'azione, in genere con una freccia che indica cosa accadrà.
In questi esempi di Microsoft Lettore multimediale Windows, i glifi hanno frecce che suggeriscono l'azione che si verificherà.
Le frecce di anteprima sono meglio riservate per situazioni in cui una freccia di espansione standard non comunica adeguatamente il comportamento del controllo, ad esempio quando la divulgazione è complessa o esiste più di un tipo di divulgazione.
Linee guida
Generali
Selezionare il modello di divulgazione progressiva in base all'utilizzo. Per una descrizione di ogni modello di utilizzo, vedere la tabella precedente.
Non usare i collegamenti per i controlli di divulgazione progressiva. Usare solo i controlli di divulgazione progressiva presentati nella sezione Modelli di utilizzo. Tuttavia, usare i collegamenti per passare agli argomenti della Guida.
Risposta corretta:
Risposta errata:
Nell'esempio errato viene usato un collegamento per visualizzare più opzioni sul posto. Questo utilizzo sarebbe corretto se il collegamento è stato spostato in un'altra pagina o in un'altra finestra di dialogo o se è stato visualizzato un argomento della Guida.
Interazione
Per le frecce e i chevrons che non sono etichettati direttamente, usare le descrizioni comando per descrivere le operazioni eseguite.
In questo esempio, la descrizione comando indica l'effetto di un controllo chevron senza etichetta.
Se un utente espande o comprime un elemento, rendere persistente lo stato in modo che venga applicato alla successiva visualizzazione della finestra, a meno che gli utenti non preferiscano iniziare nello stato predefinito. Rendere persistente lo stato per ogni singolo utente.
Assicurarsi che tutto il contenuto espanso possa essere compresso e viceversa e che l'operazione inversa sia ovvia. In questo modo si incoraggia l'esplorazione e si riduce la frustrazione. Il modo migliore per rendere ovvia l'operazione inversa è mantenere il controllo nella stessa posizione fissa. Se è necessario spostare il controllo, mantenerlo nella stessa posizione relativa all'interno di un'area visivamente distinta.
Risposta errata:
In questo esempio, facendo clic sul pulsante Sostituisci con la freccia di espansione viene visualizzata la casella di testo Sostituisci con . Al termine, l'espansore Sostituisci diventa il comando Sostituisci, quindi non è possibile ripristinare lo stato originale.
Usare solo le chiavi di accesso appropriate per il modello di divulgazione progressiva, come indicato nella sezione Modelli di utilizzo. Non usare Invio per attivare la divulgazione progressiva.
Presentazione
Non usare punte di freccia a forma triangolare per uno scopo diverso dalla divulgazione progressiva.
Risposta errata:
Anche se questo esempio non è un modello di divulgazione progressiva, l'uso di una freccia qui suggerisce che i comandi verranno visualizzati in una finestra popup.
Risposta corretta:
In questo esempio viene usato correttamente un punto elenco.
Rimuovere (non disabilitare) controlli di divulgazione progressiva che non si applicano nel contesto corrente. I controlli di divulgazione progressiva devono sempre mantenere la loro promessa, quindi rimuoverli quando non ci sono altre informazioni da dare.
Risposta errata:
In questo esempio, un controllo di divulgazione progressiva che non si applica non è disabilitato in modo errato.
Chevrons
Usare i singoli chevrons per mostrare o nascondere sul posto. Usare i double chevrons per visualizzare o nascondere usando un menu a comparsa. È consigliabile usare sempre i tasti di spostamento doppi per i pulsanti di comando con etichette interne, tuttavia.
Risposta corretta:
Risposta errata:
Nell'esempio errato viene usata una doppia freccia di espansione per la divulgazione progressiva sul posto.
Risposta corretta:
In questo esempio viene usata una doppia freccia di espansione per la divulgazione progressiva sul posto perché si tratta di un pulsante di comando con un'etichetta interna.
Fornire una relazione visiva tra la freccia di espansione e il relativo controllo associato. Poiché le frecce sul posto vengono posizionate a destra dell'interfaccia utente associata e allineate a destra, può esserci una certa distanza tra una freccia di espansione e il relativo controllo associato.
Risposta corretta:
In questo esempio esiste una relazione chiara tra la freccia di espansione sul posto e l'interfaccia utente associata.
Risposta errata:
In questo esempio non esiste una chiara relazione visiva tra la freccia di espansione sul posto e l'interfaccia utente associata, quindi sembra essere mobile nello spazio.
Frecce
Non usare grafica freccia che potrebbe essere confusa con Indietro, Avanti, Vai o Riproduci. Usa semplici frecce a forma triangolare (frecce senza steli) su sfondi neutri.
Risposta corretta:
Queste frecce sono chiaramente controlli di divulgazione progressiva.
Errato (per la divulgazione progressiva):
Queste frecce non sono simili a controlli di divulgazione progressiva.
Risposta errata (per Indietro, Avanti):
Queste frecce sembrano controlli di divulgazione progressiva, ma non lo sono.
Dimensioni e spaziatura consigliate
Dimensioni consigliate e spaziatura per i controlli di divulgazione progressiva.
Etichette
- Per i trucchi su un pulsante di comando con un'etichetta esterna:
- Assegnare una chiave di accesso univoca. Per linee guida, vedi Tastiera.
- Usare la maiuscola in stile frase.
- Scrivere l'etichetta come frase e non usare punteggiatura finale.
- Scrivere l'etichetta in modo che descriva l'effetto di fare clic sul pulsante e modificare l'etichetta quando lo stato cambia.
- Se l'area visualizza sempre alcune opzioni, comandi o dettagli, usare le coppie di etichette seguenti:
- Opzioni più/meno. Usare per le opzioni o una combinazione di opzioni, comandi e dettagli.
- Comandi più/meno. Usare solo per i comandi.
- Più/meno dettagli. Usare solo per informazioni.
- Nome dell'oggetto> più/meno<. Utilizzare per altri tipi di oggetto, ad esempio cartelle.
- In caso contrario:
- Mostra/Nascondi opzioni. Usare per le opzioni o una combinazione di opzioni, comandi e dettagli.
- Mostra/Nascondi comandi. Usare solo per i comandi.
- Mostra/Nascondi dettagli. Usare solo per informazioni.
- Mostra/Nascondi <il nome> dell'oggetto. Utilizzare per altri tipi di oggetto, ad esempio cartelle.
- Per i trucchi su un pulsante di comando con un'etichetta interna, seguire le linee guida del pulsante di comando standard.
Documentazione
Quando si fa riferimento a controlli di divulgazione progressiva:
Se il controllo ha un'etichetta fissa, fare riferimento al controllo solo tramite l'etichetta; non provare a descrivere il controllo. Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere il carattere di sottolineatura della chiave di accesso.
Se il controllo non ha un'etichetta o non è fisso, fare riferimento al controllo in base al tipo: freccia, freccia, triangolo o pulsante più/meno. Se necessario, descrivere anche la posizione del controllo. Se il controllo viene visualizzato in modo dinamico, ad esempio il controllo spazio pagina, avviare il riferimento descrivendo come visualizzare il controllo.
Esempio: per visualizzare i file all'interno di una cartella, spostare il puntatore all'inizio del nome della cartella e quindi fare clic sul triangolo accanto alla cartella.
Non fare riferimento al controllo come pulsante, a meno che non si contrasti con altri controlli di divulgazione progressiva che non sono pulsanti.
Per descrivere l'interazione dell'utente, usare clic. Se necessario per maggiore chiarezza, usare click... per espandere o comprimere.
Quando possibile, formattare l'etichetta usando il testo grassetto. In caso contrario, inserire l'etichetta tra virgolette solo se necessario per evitare confusione.
Esempi:
- (Per una freccia di espansione) Per determinare le dimensioni del file, fare clic su Dettagli.
- (Per una freccia) Per visualizzare tutte le opzioni, fare clic sulla freccia accanto alla casella Cerca .
- (Per più/meno) Per visualizzare l'immagine, fare clic su Immagini.