Controlli di divulgazione progressiva

Nota

Questa guida alla 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, prendi in considerazione 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 usare la divulgazione progressiva.

  Non corretto:

  

  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 invece di usare un controllo di divulgazione progressiva. Le informazioni aggiuntive sono avanzate se sono destinate agli utenti avanzati. È complesso se rende difficili la lettura o il layout di 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.

• Vengono visualizzate o nascoste 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 diffusione 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 della 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 comandi o barre degli strumenti contestuali quando pertinenti all'oggetto o alla 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, ma per avere tutto questo tipo di 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 il completamento dei prerequisiti. Questo approccio è ideale per le attività familiari in cui gli utenti possono eseguire con sicurezza i primi passi.

  

  In questo esempio, la pagina nome utente e password mostra inizialmente 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. È sempre possibile che gli utenti non facciano clic su elementi come Altre opzioni.
• Mancanza di stabilità. La divulgazione progressiva dovrebbe essere prevista o almeno sembrare naturale. Se i controlli vengono visualizzati e scompaiono in modo imprevisto, l'interfaccia utente risultante può risultare instabile.

Controlli di divulgazione progressiva

I controlli di divulgazione progressiva vengono in genere visualizzati senza etichette dirette che descrivono il comportamento, pertanto gli utenti devono essere in grado di eseguire le operazioni seguenti in base all'aspetto visivo del controllo da solo:

• 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 per prova ed 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:

Control	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 (utilizzando una singola freccia di espansione) o in un menu a comparsa (utilizzando una doppia freccia di espansione).	I chevrons puntano nella direzione in cui si verificherà l'azione.	Stato futuro
Frecce	Mostra opzioni: Visualizzare 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 solo controllando. 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 per l'input e la singola freccia di espansione viene attivata con la barra spaziatrice.	In questo esempio, il singolo pulsante di 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 per l'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 per l'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 i controlli espandono o comprimono 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 per l'input. Il segno più viene attivato con il tasto freccia destra e il segno meno con il tasto freccia sinistra.

I controlli più e meno vengono usati nei modi seguenti:

Utilizzo	Esempio
Alberi collapible 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 per l'input. Il triangolo compresso (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 collapible 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 ivroni, informazioni aggiuntive vengono visualizzate o nascoste sul posto. L'elemento rimane espanso fino a quando l'utente non lo comprime. A differenza dei divroni, 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 ideali per le situazioni in cui una freccia di espansione standard non comunica adeguatamente il comportamento del controllo, ad esempio quando la divulgazione è complessa o è presente più di un tipo di divulgazione.

Indicazioni

Generale

• Selezionare il modello di divulgazione progressiva in base all'utilizzo. Per una descrizione di ogni modello di utilizzo, vedere la tabella precedente.

• Non usare 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.

  Corretto:

  

  Non corretto:

  

  Nell'esempio errato viene usato un collegamento per visualizzare altre opzioni sul posto. Questo utilizzo è 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 freccia di espansione 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 evidente 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.

  Non corretto:

  

  

  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 frecce a forma triangolare per uno scopo diverso dalla divulgazione progressiva.

  Non corretto:

  

  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.

  Corretto:

  

  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 fornire.

  Non corretto:

  

  In questo esempio, un controllo di divulgazione progressiva che non si applica non è disabilitato in modo errato.

Chevrons

• Usare i singoli chevroni per mostrare o nascondere sul posto. Usare le frecce doppie per visualizzare o nascondere usando un menu a comparsa. È tuttavia consigliabile usare sempre i tasti double per i pulsanti di comando con etichette interne.

  Corretto:

  

  Non corretto:

  

  Nell'esempio errato viene usata una doppia freccia di espansione per la divulgazione progressiva sul posto.

  Corretto:

  

  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 controllo associato. Poiché le frecce sul posto vengono posizionate a destra dell'interfaccia utente associata e allineate a destra, può esserci una distanza piuttosto tra una freccia di espansione e il controllo associato.

  Corretto:

  

  In questo esempio esiste una relazione chiara tra la freccia di espansione sul posto e l'interfaccia utente associata.

  Non corretto:

  

  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 punte di freccia a forma triangolare (frecce senza steli) su sfondi neutrali.

  Corretto:

  

  Queste frecce sono chiaramente controlli di divulgazione progressiva.

  Errato (per la divulgazione progressiva):

  

  Queste frecce non sembrano controlli di divulgazione progressiva.

  Risposta errata (per Indietro, Avanti):

  

  Queste frecce sembrano controlli di divulgazione progressiva, ma non sono.

Dimensioni e spaziatura consigliate

Dimensioni consigliate e spaziatura per i controlli di divulgazione progressiva.

Etichette

• Per le frecce su un pulsante di comando con un'etichetta esterna:
  • Assegnare una chiave di accesso univoca. Per le linee guida, vedere 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.
    • Altri/meno dettagli. Usare solo per informazioni.
    • Nome dell'oggetto> più/meno<. Usare 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. Usare per altri tipi di oggetto, ad esempio cartelle.
• Per i chevrons 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 in base all'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 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 clic su... per espandere o comprimere.

• Quando possibile, formattare l'etichetta usando il testo in 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 Di ricerca .
• (Per più/meno) Per visualizzare l'immagine, fare clic su Immagini.