Condividi tramite


Barre degli strumenti di Windows 7

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.

Le barre degli strumenti sono un modo per raggruppare i comandi per un accesso efficiente.

screenshot di due barre degli strumenti con elementi etichettati

Alcune barre degli strumenti tipiche.

Utilizzare barre degli strumenti oltre a o al posto delle barre dei menu. Le barre degli strumenti possono essere più efficienti delle barre dei menu perché sono dirette (visualizzate sempre anziché visualizzate con il clic del mouse), immediate (anziché richiedere input aggiuntivo) e contengono i comandi usati più di frequente (anziché un elenco completo). A differenza delle barre dei menu, le barre degli strumenti non devono essere complete o autoesplicative solo rapide, convenienti ed efficienti.

Alcune barre degli strumenti sono personalizzabili, consentendo agli utenti di aggiungere o rimuovere barre degli strumenti, modificarne le dimensioni e la posizione e persino modificare il contenuto. Alcuni tipi di barre degli strumenti possono essere scollegati, con conseguente visualizzazione di una finestra della tavolozza. Per altre informazioni sulle varietà di barre degli strumenti, vedere Modelli di utilizzo in questo articolo.

Nota

Le linee guida relative a menu, pulsanti di comando e icone sono presentate in articoli separati.

Si tratta dell'interfaccia utente corretta?

Per decidere, prendi in considerazione queste domande:

  • La finestra è una finestra primaria? Le barre degli strumenti funzionano bene per le finestre primarie, ma in genere sono travolgenti per le finestre secondarie. Per le finestre secondarie, usare i pulsanti di comando, i pulsanti di menu e i collegamenti .
  • Esistono un numero ridotto di comandi usati di frequente? Le barre degli strumenti non possono gestire tutti i comandi delle barre dei menu, quindi funzionano al meglio per accedere in modo efficiente a un numero ridotto di comandi usati di frequente.
  • La maggior parte dei comandi è immediata? Ovvero, sono principalmente comandi che non richiedono input aggiuntivo? Per essere efficienti, le barre degli strumenti devono avere un senso diretto e immediato. In caso contrario, le barre dei menu sono più adatte per i comandi che richiedono un input aggiuntivo.
  • La maggior parte dei comandi può essere presentata direttamente? Ovvero, gli utenti interagiscono con loro usando un solo clic? Anche se alcuni comandi possono essere presentati usando pulsanti di menu, la presentazione della maggior parte dei comandi in questo modo compromette l'efficienza della barra degli strumenti, rendendo una barra dei menu una scelta migliore.
  • I comandi sono ben rappresentati dalle icone? I pulsanti della barra degli strumenti sono in genere rappresentati dalle icone anziché dalle etichette di testo (anche se alcuni pulsanti della barra degli strumenti usano entrambi), mentre i comandi di menu sono rappresentati dal testo. Se le icone dei comandi non sono di alta qualità e non sono autoesplicative, una barra dei menu può essere una scelta migliore.

Se il programma dispone di una barra degli strumenti senza una barra dei menu e la maggior parte dei comandi è accessibile indirettamente tramite pulsanti di menu e pulsanti di divisione, questa barra degli strumenti è essenzialmente una barra dei menu. Applicare invece il modello dei menu della barra degli strumenti nelle linee guida Menu.

Concetti relativi alla progettazione

Una buona barra dei menu è un catalogo completo di tutti i comandi di primo livello disponibili, mentre una buona barra degli strumenti offre accesso rapido e pratico ai comandi usati di frequente. Una barra degli strumenti non tenta di formare gli utenti solo per renderli produttivi. Quando gli utenti imparano ad accedere a un comando su una barra degli strumenti, raramente continuano ad accedere al comando dalla barra dei menu. Per questi motivi, la barra dei menu di un programma e la relativa barra degli strumenti non devono corrispondere direttamente.

Barre degli strumenti e barre dei menu

Tradizionalmente, le barre degli strumenti sono diverse dalle barre dei menu nei modi seguenti:

  • Frequenza. Le barre degli strumenti presentano solo i comandi usati più di frequente, mentre le barre dei menu catalogano tutti i comandi di primo livello disponibili all'interno di un programma.

  • Immediatezza. Facendo clic su un comando della barra degli strumenti viene applicato immediatamente, mentre un comando di menu potrebbe richiedere input aggiuntivo. Ad esempio, un comando Stampa in una barra dei menu visualizza innanzitutto la finestra di dialogo Stampa, mentre un pulsante Stampa barra degli strumenti stampa stampa immediatamente una singola copia di un documento nella stampante predefinita.

    screenshot del pulsante della stampante della barra degli strumenti selezionato

    In questo esempio, facendo clic sul pulsante Stampa barra degli strumenti viene immediatamente stampata una singola copia di un documento nella stampante predefinita.

  • Immediatezza. I comandi della barra degli strumenti vengono richiamati con un solo clic, mentre i comandi della barra dei menu richiedono lo spostamento nel menu.

  • Numero e densità. Lo spazio sullo schermo richiesto da una barra degli strumenti è proporzionale al numero di comandi e tale spazio viene sempre usato, anche se i comandi non sono. Di conseguenza, le barre degli strumenti devono usare in modo efficiente lo spazio. Al contrario, i comandi della barra dei menu sono in genere nascosti dalla visualizzazione e la relativa struttura gerarchica consente un numero qualsiasi di comandi.

  • Dimensioni e presentazione. Per comprimere molti comandi in uno spazio ridotto, le barre degli strumenti usano in genere comandi basati su icone (con etichette basate su descrizioni comando), mentre le barre dei menu usano comandi basati su testo (con icone facoltative). Anche se i pulsanti della barra degli strumenti possono avere etichette di testo standard, questi usano molto più spazio.

    screenshot della barra degli strumenti con l'etichetta di invio/ricezione

    I pulsanti della barra degli strumenti etichettati accettano almeno tre volte lo spazio di quelli senza etichetta.

  • Autoesplicativo. Le barre degli strumenti ben progettate necessitano di icone che sono per lo più autoesplicative perché gli utenti non riescono a trovare i comandi in modo efficiente solo usando le descrizioni comando. Tuttavia, le barre degli strumenti continuano a funzionare bene se alcuni comandi usati meno frequentemente non sono autoesplicativi.

    screenshot della barra degli strumenti con icone familiari

    In questo esempio, le icone usate più di frequente sono autoesplicative.

  • Riconoscibile e distinguibile. Per i comandi usati di frequente, gli utenti memorizzano attributi del pulsante della barra degli strumenti, ad esempio posizione, forma e colore. Con barre degli strumenti ben progettate, gli utenti possono trovare rapidamente i comandi anche se non ricordano il simbolo esatto dell'icona. Al contrario, gli utenti ricordano i percorsi dei comandi della barra dei menu usati di frequente, ma si basano sulle etichette dei comandi per effettuare selezioni.

    screenshot della finestra di dialogo opzioni dello strumento di cattura

    Per i comandi della barra degli strumenti, la posizione distintiva, la forma e il colore consentono di rendere riconoscibili e distinguibili le icone.

    schermata della barra dei menu con il comando file selezionato

    Per i comandi della barra dei menu, gli utenti dipendono in definitiva dalle etichette.

Efficienza

Date le loro caratteristiche, le barre degli strumenti devono essere progettate principalmente per l'efficienza. Una barra degli strumenti inefficiente non ha senso.

Se fai solo una cosa...

Assicurarsi che le barre degli strumenti siano progettate principalmente per l'efficienza. Focus toolbars on commands that are frequently used, immediate, direct, and rapidamente riconoscibile.

Nascondere le barre dei menu

In genere, le barre degli strumenti funzionano bene insieme alle barre dei menu: le barre degli strumenti offrono efficienza e barre dei menu buone offrono completezza. Avere sia barre dei menu che barre degli strumenti consente a ognuno di concentrarsi sui suoi punti di forza senza compromessi.

Sorprendentemente, questo modello si suddivide con programmi semplici. Per i programmi con solo pochi comandi, avere sia una barra dei menu che una barra degli strumenti non ha senso perché la barra dei menu finisce per essere una versione ridondante e inefficiente della barra degli strumenti.

Per eliminare questa ridondanza, molti semplici programmi in Windows Vista si concentrano esclusivamente sulla fornitura di comandi tramite la barra degli strumenti e nascondendo la barra dei menu per impostazione predefinita. Tali programmi includono Windows Explorer, Windows Internet Explorer, Lettore multimediale Windows e Raccolta foto di Windows.

Questo non è un piccolo cambiamento. La rimozione della barra dei menu modifica fondamentalmente la natura delle barre degli strumenti perché tali barre degli strumenti devono essere complete e modificate nei modi seguenti:

  • Frequenza. La rimozione della barra dei menu significa che tutti i comandi non disponibili direttamente da una finestra o dai relativi menu di scelta rapida devono essere accessibili dalla barra degli strumenti, indipendentemente dalla frequenza di utilizzo.

  • Immediatezza. La rimozione della barra dei menu rende la barra degli strumenti l'unico punto di accesso visibile per i comandi, richiedendo che la barra degli strumenti disponga delle versioni completamente funzionali. Ad esempio, se non è presente alcuna barra dei menu, un comando Stampa su una barra degli strumenti deve visualizzare la finestra di dialogo Stampa anziché stampare immediatamente. Anche se l'uso di un pulsante di divisione è un compromesso eccellente in questo caso. Vedi Menu Standard e pulsanti di divisione per il pulsante standard Stampa divisa.

    screenshot delle opzioni della barra degli strumenti e del comando di stampa

    In questo esempio il pulsante della barra degli strumenti Stampa in Raccolta foto di Windows include un comando Stampa che visualizza la finestra di dialogo Stampa.

  • Immediatezza. Per risparmiare spazio ed evitare confusione, i comandi usati meno di frequente possono essere spostati nei pulsanti di menu, rendendoli meno diretti.

Le barre degli strumenti utilizzate per integrare una barra dei menu sono progettate in modo diverso rispetto alle barre degli strumenti progettate per l'uso con una barra dei menu rimossa o nascosta. E perché non è possibile presupporre che gli utenti visualizzeranno una barra dei menu nascosta per eseguire un singolo comando, nascondere una barra dei menu deve essere considerata come rimuoverla completamente quando si prende decisioni di progettazione. Se si nasconde la barra dei menu per impostazione predefinita, non si presuppone che gli utenti pensino di visualizzare la barra dei menu per trovare un comando o anche capire come visualizzarlo.

La progettazione di una barra degli strumenti da usare senza una barra dei menu comporta spesso alcuni compromessi. Ma per l'efficienza, non compromettere troppo. Se nascondendo la barra dei menu viene visualizzata una barra degli strumenti inefficiente, non nascondere la barra dei menu!

Accessibilità tramite tastiera

Dalla tastiera, l'accesso alle barre degli strumenti è piuttosto diverso dall'accesso alle barre dei menu. Le barre dei menu ricevono lo stato attivo quando gli utenti premeno il tasto ALT e perdono lo stato attivo dell'input con il tasto Esc. Una volta che una barra dei menu ha lo stato attivo di input, viene spostata in modo indipendente dal resto della finestra, gestendo tutti i tasti freccia, Home, End e Tabulazione. Al contrario, le barre degli strumenti ricevono lo stato attivo di input quando gli utenti premeno il tasto Tab attraverso l'intero contenuto della finestra. Poiché le barre degli strumenti sono ultime nell'ordine di tabulazioni, potrebbero richiedere un notevole sforzo per attivare in una pagina occupato (a meno che gli utenti non sappiano usare Maiusc+Tab per spostarsi indietro).

L'accessibilità presenta un dilemma qui: mentre gli strumenti sono più facili per gli utenti del mouse, sono meno accessibili per gli utenti della tastiera. Questo non è un problema se esiste sia una barra dei menu che una barra degli strumenti, ma è se la barra dei menu viene rimossa o nascosta.

Per motivi di accessibilità, quindi, preferisce conservare la barra dei menu anziché rimuoverla completamente a favore di una barra degli strumenti. Se è necessario scegliere tra la rimozione della barra dei menu e semplicemente nasconderla, preferisce nasconderla.

Modelli di utilizzo

Le barre degli strumenti hanno diversi modelli di utilizzo:

Utilizzo Esempio
Barre degli strumenti primari
una barra degli strumenti progettata per funzionare senza una barra dei menu, nascosta o rimossa.
le barre degli strumenti primari devono bilanciare la necessità di efficienza con completezza, quindi funzionano meglio per i programmi semplici.
schermata della barra degli strumenti di Esplora finestre
Barra degli strumenti primaria da Esplora risorse.
Barre degli strumenti supplementari
una barra degli strumenti progettata per l'uso con una barra dei menu.
le barre degli strumenti supplementari possono concentrarsi sull'efficienza senza compromettere.
schermata di una barra dei menu su una barra degli strumenti
Barra degli strumenti supplementare di Windows Movie Maker.
Menu della barra degli strumenti
una barra dei menu implementata come barra degli strumenti.
i menu della barra degli strumenti sono costituiti principalmente da comandi nei pulsanti di menu e nei pulsanti di divisione, con solo alcuni comandi diretti, se presenti.
schermata della barra dei menu con icone e comandi
Menu della barra degli strumenti in Raccolta foto di Windows.
Barre degli strumenti personalizzabili
barra degli strumenti che può essere personalizzata dagli utenti.
le barre degli strumenti personalizzabili consentono agli utenti di aggiungere o rimuovere barre degli strumenti, modificare le dimensioni e la posizione e anche modificare il contenuto.
schermata di una barra degli strumenti con decine di icone
Barra degli strumenti personalizzabile da Microsoft Visual Studio.
Finestre tavolozza
finestra di dialogo in modalitàless che presenta una matrice di comandi.
le finestre della tavolozza sono barre degli strumenti non filtrate.
schermata di una finestra di dialogo colori
schermata di una finestra di dialogo tipi di carattere
Finestre tavolozza da Windows Paint.

Le barre degli strumenti hanno questi stili:

Stile Esempio
Icone senza etichetta
una o più righe di pulsanti icona non etichettati di piccole dimensioni.
usare questo stile se sono presenti troppi pulsanti per etichettare o il programma viene usato di frequente. con questo stile, i programmi con funzionalità complesse possono avere più righe e quindi questo è l'unico stile che deve essere personalizzabile. con questo stile, alcuni pulsanti di comando possono essere etichettati se vengono usati di frequente.
schermata della barra degli strumenti con icone piccole e non etichettate
Barra degli strumenti delle icone non etichettate da WordPad.
Icone non etichettate di grandi dimensioni
una singola riga di pulsanti icona non etichettati di grandi dimensioni.
usare questo stile per le utilità semplici che hanno icone facilmente riconoscibili e in genere vengono eseguite in piccole finestre.
schermata della barra degli strumenti con icone grandi e non etichettate
schermata della barra degli strumenti con icone di grandi dimensioni
Barre degli strumenti delle icone non etichettate di grandi dimensioni da Windows Live Messenger e lo strumento di snipping di Windows.
Icone etichettate
una singola riga di icone etichettate di piccole dimensioni.
usare questo stile se sono presenti pochi comandi o il programma non viene usato di frequente. questo stile ha sempre una singola riga.
schermata della barra degli strumenti con icone etichettate
Barra degli strumenti delle icone etichettata da Esplora risorse.
Barre degli strumenti parziali
una riga parziale di icone di piccole dimensioni usata per risparmiare spazio quando una barra degli strumenti completa non è necessaria.
usare questo stile per le finestre con pulsanti di spostamento, una casella di ricerca o schede per eliminare il peso non necessario nella parte superiore della finestra.
schermata della barra dei menu, della barra degli strumenti e dei preferiti
Le barre degli strumenti parziali possono essere combinate con pulsanti di spostamento, una casella di ricerca o schede.
Barre degli strumenti parziali di grandi dimensioni
una riga parziale di icone di grandi dimensioni usata per risparmiare spazio quando una barra degli strumenti completa non è necessaria.
usare questo stile per le utilità semplici con pulsanti di spostamento o una casella di ricerca per eliminare il peso non necessario nella parte superiore della finestra.
schermata di una barra degli strumenti parziale di grandi dimensioni
Barra degli strumenti parziale di grandi dimensioni da Windows Defender.

Infine, i controlli della barra degli strumenti hanno diversi modelli di utilizzo:

Utilizzo Esempio
Pulsanti icona comando
facendo clic su un pulsante di comando viene avviata un'azione immediata.
schermata di una barra degli strumenti con etichette
Esempi di pulsanti di comando icona da Fax e Analisi di Windows.
Pulsanti icona modalità
facendo clic su un pulsante modalità entra nella modalità selezionata.
schermata di una barra degli strumenti verticale
Esempi di pulsanti in modalità da Windows Paint.
Pulsanti dell'icona delle proprietà
Lo stato di un pulsante della proprietà riflette lo stato degli oggetti attualmente selezionati, se presente. facendo clic sul pulsante si applica la modifica agli oggetti selezionati.
schermata delle icone di formattazione e testo selezionato
Esempi di pulsanti di proprietà da Microsoft Word.
Pulsanti delle icone con etichette
un pulsante di comando o un pulsante di proprietà etichettato con un'icona e un'etichetta di testo.
questi pulsanti vengono usati per i pulsanti della barra degli strumenti usati di frequente, la cui icona non è sufficientemente esplicativa. vengono usati anche nelle barre degli strumenti che hanno così pochi pulsanti che ogni pulsante può avere un'etichetta di testo.
Screenshot che mostra la barra degli strumenti con icone etichettate per i pulsanti usati più di frequente.
Una barra degli strumenti con i pulsanti usati più frequentemente etichettati.
Pulsanti di menu
un pulsante di comando usato per presentare un piccolo set di comandi correlati.
un singolo triangolo verso il basso indica che facendo clic sul pulsante viene visualizzato un menu.
screenshot della barra degli strumenti e dell'elenco dei comandi a discesa
Pulsante di menu con un piccolo set di comandi correlati.
Pulsanti di divisione
un pulsante di comando usato per consolidare le varianti di un comando, soprattutto quando uno dei comandi viene usato nella maggior parte dei casi.
screenshot del pulsante di divisione della stampa
pulsante di divisione nello stato normale.
come un pulsante di menu, un singolo triangolo verso il basso indica che facendo clic sulla parte più a destra del pulsante viene visualizzato un menu.
schermata dei comandi del pulsante di stampa divisa
pulsante di suddivisione a discesa.
in questo esempio viene usato un pulsante di divisione per consolidare tutti i comandi correlati alla stampa. Il comando di stampa immediata viene usato nella maggior parte dei casi, quindi gli utenti in genere non devono visualizzare gli altri comandi.
a differenza di un pulsante di menu, facendo clic sulla parte sinistra del pulsante viene eseguita direttamente l'azione sull'etichetta. i pulsanti di divisione sono efficaci nelle situazioni in cui è probabile che il comando successivo sia uguale all'ultimo comando. in questo caso, l'etichetta viene modificata nell'ultimo comando, come con una selezione colori:
screenshot dell'icona del bucket che versa la vernice
In questo esempio, l'etichetta viene modificata nell'ultimo comando.
Elenchi a discesa
elenco a discesa (modificabile o di sola lettura) utilizzato per visualizzare o modificare una proprietà.
screenshot dell'elenco a discesa dei tipi di carattere
In questo esempio, gli elenchi a discesa vengono usati per visualizzare e impostare gli attributi del tipo di carattere.
Un elenco a discesa in una barra degli strumenti riflette lo stato dell'oggetto attualmente selezionato, se presente. La modifica dell'elenco modifica lo stato dell'oggetto selezionato.

Indicazioni

Presentazione

  • Scegliere uno stile della barra degli strumenti appropriato in base al numero di comandi e al relativo utilizzo. Per indicazioni su come scegliere, vedere la tabella precedente dello stile della barra degli strumenti. Evitare di usare una configurazione della barra degli strumenti che richiede troppo spazio dall'area di lavoro del programma.

  • Posizionare le barre degli strumenti appena sopra l'area del contenuto, sotto la barra dei menu e la barra degli indirizzi, se presente.

  • Se lo spazio è premium, risparmiare spazio:

    • Omettendo le etichette di icone note e comandi usati meno di frequente.
    • Utilizzando solo una barra degli strumenti parziale anziché l'intera larghezza della finestra.
    • Consolidamento dei comandi correlati con un pulsante di menu o un pulsante di divisione.
    • Uso di una freccia di espansione di overflow per visualizzare i comandi usati meno di frequente.
    • Visualizzazione dei comandi solo quando si applicano al contesto corrente.

    screenshot delle icone comuni della barra degli strumenti non etichettate

    La barra degli strumenti di Windows Internet Explorer consente di risparmiare spazio omettendo etichette di icone note, utilizzando una barra degli strumenti parziale e utilizzando una freccia di espansione di overflow per i comandi usati meno di frequente.

  • Per il modello di barra degli strumenti delle icone senza etichetta, usare una configurazione predefinita senza più di due righe di barre degli strumenti. Se potrebbero essere utili più di due righe, rendere personalizzabili le barre degli strumenti. A partire da più di due righe è possibile sovraccaricare gli utenti e occupare troppo spazio dall'area di lavoro del programma.

    Non corretto:

    schermata della barra dei menu e tre righe di barre degli strumenti

    Una configurazione predefinita con più di due righe di barre degli strumenti comporta un numero eccessivo di elementi visivi.

  • Disabilitare i singoli pulsanti della barra degli strumenti che non si applicano al contesto corrente, anziché rimuoverli. In questo modo, il contenuto della barra degli strumenti risulta stabile e più facile da trovare.

  • Se si fa clic su di essi, disabilitare i singoli pulsanti della barra degli strumenti generano direttamente un errore. In questo modo è necessario mantenere un senso diretto.

  • Per il motivo della barra degli strumenti delle icone senza etichetta, rimuovere intere barre degli strumenti se non si applicano al contesto corrente. Visualizzali solo nelle modalità applicabili.

    screenshot della barra degli strumenti di debug

    In questo esempio, la barra degli strumenti Debug viene visualizzata solo quando viene eseguito il programma.

  • Visualizza pulsanti della barra degli strumenti allineati a sinistra. L'icona Della Guida, se presente, è allineata a destra.

    screenshot della barra degli strumenti, icona della Guida allineata a destra

    Tutti i pulsanti della barra degli strumenti sono allineati a sinistra, ad eccezione della Guida.

    Eccezione: Le barre degli strumenti in stile Windows 7 allineano a sinistra comandi specifici del programma, ma allineano a destra i comandi standard, noti come Opzioni, Visualizza e Guida.

  • Non modificare le etichette dei pulsanti della barra degli strumenti in modo dinamico. In questo modo si crea confusione e imprevisto. Tuttavia, è possibile modificare l'icona in modo che rifletta lo stato corrente.

    screenshot dell'icona del bucket che versa la vernice

    In questo esempio l'icona viene modificata per indicare il comando predefinito.

Controlli e comandi

  • Preferisce i comandi usati più di frequente.

    • Per le barre degli strumenti primari, fornire comandi completi. Le barre degli strumenti principali non devono essere così complete come le barre dei menu, ma devono fornire tutti i comandi che non sono facilmente individuabili altrove. Le barre degli strumenti principali non devono avere comandi per:
      • Comandi direttamente nell'interfaccia utente stessa.
      • I comandi sono in genere accessibili tramite menu di scelta rapida.
      • Comandi standard noti come Taglia, Copia e Incolla.
    • Per le barre degli strumenti supplementari, specificare i comandi usati più di frequente. I comandi della barra dei menu sono un superset dei comandi della barra degli strumenti, quindi non è necessario fornire tutto. Concentrarsi sull'accesso rapido e pratico ai comandi e ignorare il resto.
  • Preferisce i controlli diretti. Usare i pulsanti della barra degli strumenti nell'ordine di preferenza seguente:

    • Pulsante Icona. Diretto e occupa spazio minimo.
    • Pulsante icona con etichetta. Diretto, ma richiede più spazio.
    • Pulsante di divisione. Diretto per il comando più comune, ma gestisce le varianti dei comandi.
    • Pulsante menu. Indiretto, ma presenta molti comandi.
  • Preferisce i comandi immediati. Per i comandi che possono essere immediati o avere un input aggiuntivo per la flessibilità:

    • Per le barre degli strumenti primari, usare le versioni flessibili dei comandi, ad esempio Print....
    • Per le barre degli strumenti supplementari, utilizzare le versioni immediate della barra degli strumenti (ad esempio Stampa) e usare versioni flessibili nella barra dei menu (ad esempio Stampa...).
  • Specificare le etichette per i comandi usati di frequente, soprattutto se le icone non sono icone note.

    Accettabile:

    screenshot della barra degli strumenti senza icone etichettate

    Meglio:

    screenshot della barra degli strumenti con alcune icone etichettate

    La barra degli strumenti Fax e Analisi di Windows include alcuni comandi, quindi le etichette di versione migliori sono quelle più importanti.

  • Non inserire i comandi nei menu della barra degli strumenti che si trovano direttamente sulla barra degli strumenti.

    Non corretto:

    schermata del comando di stampa sulla barra degli strumenti e sul menu

    In questo esempio Stampa è direttamente sulla barra degli strumenti, quindi non deve essere presente nel menu.

Organizzazione e ordine

  • Organizzare i comandi all'interno di una barra degli strumenti in gruppi correlati.

  • Posizionare prima i gruppi usati più di frequente. All'interno di un gruppo, inserire i comandi nell'ordine logico. In generale, i comandi devono avere un flusso logico per renderli facili da trovare, pur avendo prima i comandi usati più frequentemente. In questo modo è più efficiente, soprattutto se c'è overflow.

  • Usare i divisori di gruppo solo se i comandi in tutti i gruppi sono associati in modo debole. In questo modo, i raggruppamenti sono evidenti e i comandi sono più facili da trovare.

    Screenshot che mostra una barra degli strumenti con icone ben organizzate usando i divisori di gruppo.

    schermata della barra degli strumenti con icone ben organizzate

    Esempi di barre degli strumenti raggruppate da Windows Mail.

  • Evitare di inserire comandi distruttivi accanto ai comandi usati di frequente. Usare l'ordine o il raggruppamento per ottenere la separazione. Si consideri anche di non inserire comandi distruttivi nella barra degli strumenti, ma solo nella barra dei menu o nei menu di scelta rapida.

    Accettabile:

    schermata dei pulsanti di stampa e eliminazione adiacenti

    Meglio:

    schermata dei pulsanti di stampa e eliminazione separati

    Nell'esempio migliore, il comando Delete è fisicamente separato da Stampa.

  • Usare il chevron overflow per indicare che non tutti i comandi possono essere visualizzati. Tuttavia, usare overflow solo se non è disponibile spazio sufficiente per visualizzare tutti i comandi.

    Non corretto:

    schermata della barra preferiti e comandi nascosti

    Il chevron overflow indica che non tutti i comandi vengono visualizzati, ma più di essi potrebbero essere con un layout migliore.

  • Assicurarsi che i comandi usati più frequentemente siano accessibili direttamente dalla barra degli strumenti (ovvero non in overflow) in dimensioni di finestre di piccole dimensioni. Se necessario, riordinare i comandi, spostare comandi meno frequentemente usati per i pulsanti di menu o suddividerli o anche rimuoverli completamente dalla barra degli strumenti. Se questo rimane un problema, riconsiderare la scelta dello stile della barra degli strumenti.

Nascondere le barre dei menu

In genere, le barre degli strumenti funzionano molto bene con le barre dei menu perché entrambi consentono a ognuno di concentrarsi sui loro punti di forza senza compromessi.

  • Nascondere la barra dei menu per impostazione predefinita se la progettazione della barra degli strumenti rende ridondante una barra dei menu.
  • Nascondere la barra dei menu anziché rimuoverla completamente, perché le barre dei menu sono più accessibili per gli utenti della tastiera.
  • Per ripristinare la barra dei menu, specificare un'opzione segno di spunta barra dei menu nella categoria di menu Visualizza (per le barre degli strumenti primari) o Strumenti (per le barre degli strumenti secondarie). Per altre informazioni, vedere Menu standard e pulsanti di divisione.
  • Visualizzare la barra dei menu quando gli utenti premeno alt e impostano lo stato attivo di input sulla prima categoria di menu.

Interazione

  • Al passaggio del mouse, visualizzare l'offerta del pulsante per indicare che l'icona è selezionabile. Dopo il timeout della descrizione comando, visualizzare la descrizione comando o la descrizione comando.

    schermata di una descrizione della descrizione di un pulsante

    In questo esempio vengono visualizzati i vari stati di visualizzazione.

  • A sinistra fare clic con un solo clic:

    • Per i pulsanti di comando, interagire con il controllo come normale.

    • Per i pulsanti in modalità, visualizzare il controllo per riflettere la modalità attualmente selezionata. Se la modalità influisce sul comportamento dell'interazione del mouse, modificare anche il puntatore.

      schermata del puntatore a forma di bucket di vernice

      In questo esempio il puntatore viene modificato per visualizzare la modalità di interazione del mouse.

    • Per i pulsanti delle proprietà e gli elenchi a discesa, visualizzare il controllo per riflettere lo stato degli oggetti attualmente selezionati, se presenti. In caso di interazione, aggiornare lo stato del controllo e applicare la modifica agli oggetti selezionati. Se non viene selezionato nulla, non fare nulla.

  • A sinistra fare doppio clic, eseguire la stessa azione di un clic a sinistra.

    • Eccezione: In rari casi, un comando della barra degli strumenti può essere usato in modo più efficiente. In questi casi, usare doppio clic per attivare la modalità.

      schermata della descrizione info che mostra le funzioni del pulsante

      In questo esempio fare doppio clic sul comando Format painter in una modalità in cui tutti i clic successivi applicano il formato. Gli utenti possono lasciare la modalità facendo clic a sinistra.

  • Fare clic con il pulsante destro del mouse:

    • Per le barre degli strumenti personalizzabili, visualizzare il menu di scelta rapida per personalizzare la barra degli strumenti. Visualizzare il menu con il pulsante destro del mouse sul basso, non su.
    • Per altre barre degli strumenti, non fare nulla.

Icone

  • Specificare le icone per tutti i controlli della barra degli strumenti, ad eccezione degli elenchi a discesa.

    schermata dell'elenco a discesa delle dimensioni del carattere

    Gli elenchi a discesa non richiedono icone, ma tutti gli altri controlli della barra degli strumenti fanno.

    Eccezione: Le barre degli strumenti in stile Windows 7 usano icone solo per i comandi le cui icone sono ben note; altrimenti usano etichette di testo senza icone. In questo modo migliora la chiarezza delle etichette, ma richiede più spazio.

  • Assicurarsi che le icone della barra degli strumenti siano chiaramente visibili sul colore di sfondo della barra degli strumenti. Valutare sempre le icone della barra degli strumenti nel contesto e in modalità a contrasto elevato.

  • Scegliere i disegni dell'icona che comunicano chiaramente lo scopo, soprattutto per i comandi usati più di frequente. Le barre degli strumenti ben progettate richiedono icone che sono auto-esplicative perché gli utenti non riescono a trovare in modo efficiente i comandi usando le descrizioni comandi. Tuttavia, le barre degli strumenti funzionano ancora bene se le icone per alcuni comandi usati meno frequentemente non sono auto-esplicative.

  • Scegliere icone riconoscibili e distinguebili, soprattutto per i comandi usati più di frequente. Assicurarsi che le icone abbiano forme e colori distintivi. In questo modo, gli utenti trovano rapidamente i comandi anche se non ricordano il simbolo dell'icona.

  • Assicurarsi che le icone della barra degli strumenti siano conformi alle linee guida per l'icona di stile Aero.

Per altre informazioni ed esempi, vedere Icone.

Menu standard e pulsanti di divisione

Se si usano pulsanti di menu e pulsanti di divisione in una barra degli strumenti, provare a usare le strutture di menu standard seguenti e i relativi comandi ogni volta che possibile. A differenza delle barre dei menu, i comandi della barra degli strumenti non accettano chiavi di accesso.

Barre degli strumenti primari

Questi comandi esegue il mirroring dei comandi trovati nelle barre dei menu standard, quindi devono essere usati solo per le barre degli strumenti primarie. Questo elenco mostra le etichette dei pulsanti (e il tipo) con i relativi ordine e separatori, tasti di scelta rapida e puntini di sospensione. Si noti che il comando per visualizzare e nascondere la barra dei menu è nel menu Visualizza.

File NewCtrl+N
Aperto... CTRL+O
Chiudi
<separator>
SaveCtrl+S
Salva con nome...
<separator>
Invia a
<separator>
Stampare... CTRL+P
Anteprima stampa
Impostazioni di pagina
<separator>
ExitAlt+F4(collegamento in genere non specificato)

Modifica(pulsante del menu) UndoCtrl+Z
RedoCtrl+Y
<separator>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separator>
Selezionare allCtrl+A
<separator>
DeleteDel(collegamento in genere non specificato)
Rinomina...
<separator>
Trovare... CTRL+F
Trovare nextF3(comando in genere non specificato)
Sostituire... CTRL+H
Vai a... CTRL+G

Stampa(pulsante di divisione) Stampare... CTRL+P
Anteprima stampa
Impostazioni di pagina

Visualizza(pulsante menu) Barra dei menu(controllare se visibile)
Riquadro dettagli(controllare se visibile)
Riquadro di anteprima(controllare se visibile)
Barra di stato(controllare se visibile)

Zoom
Zoom inCtrl++
Zoom outCtrl+-

Dimensioni del testo(impostazione selezionata ha punto elenco)

Maggiori
Maggiore
Medio
Piccoli
Piccolo

Schermo interoF11
RefreshF5

Strumenti(pulsante di menu) ...

Opzioni Help(split button, usare l'icona della Guida) <program name> helpF1

Informazioni su <program name>

Barre degli strumenti supplementari

Questi comandi integrano le barre dei menu standard. Questo elenco mostra le etichette dei pulsanti (e il tipo) con i relativi ordine e separatori, tasti di scelta rapida e puntini di sospensione. Si noti che il comando per visualizzare e nascondere la barra dei menu è nel menu Strumenti.

I nomi delle categorie della barra degli strumenti supplementari differiscono dai nomi delle categorie di menu standard perché devono essere più inclusi. Ad esempio, la categoria Organizza viene usata invece di Modifica perché contiene comandi che non sono correlati alla modifica. Per mantenere la coerenza tra le barre dei menu e le barre degli strumenti, usare i nomi delle categorie di menu standard se ciò non sarebbe fuorviante.

Non corretto:

schermata delle stesse opzioni per comandi diversi

In questo esempio, la barra degli strumenti deve usare Modifica anziché Organizzare per coerenza perché include i comandi di menu Modifica standard.

Finestre tavolozza

  • Le finestre della tavolozza usano barre del titolo più brevi per ridurre al minimo lo spazio dello schermo. Inserire un pulsante Chiudi sulla barra del titolo.

  • Impostare il testo della barra del titolo sul comando che visualizza la finestra della tavolozza.

  • Usare la maiuscola in stile frase senza terminare la punteggiatura.

  • Specificare un menu di scelta rapida per i comandi di gestione delle finestre. Visualizza questo menu di scelta rapida quando gli utenti fai clic con il pulsante destro del mouse sulla barra del titolo.

    schermata della casella degli strumenti con menu di scelta rapida

    In questo esempio gli utenti possono fare clic con il pulsante destro del mouse sulla barra del titolo per visualizzare il menu di scelta rapida.

  • Quando possibile e utile, rendere le finestre tavolozza ridimensionabili. Indicare che la finestra è ridimensionabile, usando puntatori di ridimensionamento quando si supera la cornice della finestra.

  • Quando viene ricreata una finestra della tavolozza, visualizzarla usando lo stesso stato dell'ultimo accesso. Quando si chiude, salvare le dimensioni e la posizione della finestra. Durante la riproduzione, ripristinare le dimensioni e la posizione della finestra salvate. Prendere inoltre in considerazione la possibilità di rendere persistenti questi attributi in tutte le istanze del programma in base all'utente.

Personalizzazione

  • Specificare la personalizzazione per le barre degli strumenti costituite da due o più righe. Solo lo stile delle icone non etichettate richiede la personalizzazione. Le barre degli strumenti semplici con pochi comandi non richiedono la personalizzazione.

  • Fornire una configurazione predefinita valida. Gli utenti non devono personalizzare le barre degli strumenti per scenari comuni. Non dipende dagli utenti che personalizzano il loro modo di uscire da una configurazione iniziale non valida. Si supponga che la maggior parte degli utenti non personalizza le barre degli strumenti.

  • Specificare un menu di scelta rapida con i comandi seguenti:

    • Elenco casella di controllo per visualizzare le barre degli strumenti disponibili
    • Barre degli strumenti di blocco/sblocco
    • Personalizza...
  • Bloccare le barre degli strumenti personalizzabili per impostazione predefinita, per evitare modifiche accidentali.

  • Per il comando Personalizza, visualizzare una finestra di dialogo opzioni che consente di scegliere quali barre degli strumenti vengono visualizzate e i comandi in ogni barra degli strumenti.

    schermata di personalizzazione della finestra di dialogo e delle opzioni

    In questo esempio Visual Studio fornisce una finestra di dialogo opzioni per personalizzare le barre degli strumenti.

  • Specificare un comando Reimposta per tornare alla configurazione originale della barra degli strumenti nella finestra di dialogo Personalizza opzioni.

  • Fornire la possibilità di personalizzare le barre degli strumenti usando il trascinamento e l'eliminazione nei modi seguenti:

    • Impostare l'ordine e le posizioni della barra degli strumenti.
    • Impostare le lunghezze della barra degli strumenti, visualizzando tutte le barre degli strumenti troppo piccole per visualizzare il contenuto con un overflow chevron.
    • Se supportato, deselezionare le barre degli strumenti per diventare finestre tavolozza e viceversa.

    Quando viene visualizzata la finestra di dialogo Personalizza opzioni:

    • Impostare il contenuto della barra degli strumenti.
    • Impostare l'ordine del contenuto della barra degli strumenti.

    In questo modo gli utenti possono apportare modifiche in modo più diretto ed efficiente.

  • Salvare tutte le personalizzazioni della barra degli strumenti in base all'utente.

Uso dei puntini di sospensione

Mentre i comandi della barra degli strumenti vengono usati per azioni immediate, a volte sono necessarie altre informazioni per eseguire l'azione. Usare i puntini di sospensione per indicare che un comando richiede altre informazioni prima di poter essere effettive. Inserire i puntini di sospensione alla fine della descrizione comando e dell'etichetta, se ne esiste uno.

screenshot del testo della descrizione comando di stampa con puntini di sospensione

In questo esempio, stampa... il comando visualizza una finestra di dialogo Stampa per raccogliere altre informazioni.

Se un comando non può avere effetto immediatamente, tuttavia, non è necessario alcun puntino di sospensione. Quindi, ad esempio, le impostazioni di condivisione non hanno un puntino di sospensione anche se necessita di informazioni aggiuntive, perché il comando non può eventualmente avere effetto immediato.

schermata della barra degli strumenti, del comando e della descrizione comando

Il comando Impostazioni di condivisione non ha un puntino di sospensione perché non può avere effetto immediatamente.

Poiché le barre degli strumenti vengono visualizzate costantemente e lo spazio è premium, i puntini di sospensione devono essere usati raramente.

Nota

Per i menu visualizzati da una barra degli strumenti, applicare i puntini di sospensione dei menu.

schermata delle barre degli strumenti con informazioni sulla spaziatura

Dimensioni consigliate e spaziatura per le barre degli strumenti standard.

Etichette

Generale

  • Usare le maiuscole/minuscole come nelle frasi comuni.
    • Eccezione: Per le applicazioni legacy, è possibile usare maiuscole in stile titolo, se necessario per evitare di combinare stili di maiuscola.

Pulsanti icona senza etichetta

  • Usare una descrizione comando per assegnare un'etichetta al comando. Per il testo della descrizione comando, usare l'etichetta se il pulsante fosse etichettato, ma includere il tasto di scelta rapida, se presente.

    screenshot della barra degli strumenti, dell'icona della stampante e della descrizione comando

    Esempio di descrizione comando del pulsante icona.

Pulsanti delle icone con etichette

  • Usare un'etichetta concisa. Se possibile, usare una singola parola, quattro parole al massimo.

  • Posizionare l'etichetta a destra dell'icona.

  • Usare una descrizione infotip per descrivere il comando. Poiché i pulsanti sono etichettati, l'uso di una descrizione comando anziché di una descrizione informazioni sarebbe ridondante.

    schermata del pulsante con etichetta con descrizione

    Esempio di descrizione info di un pulsante con etichetta icona.

  • Se l'elenco ha sempre un valore, usare il valore corrente come etichetta.

    screenshot della barra degli strumenti con opzioni per i tipi di carattere

    In questo esempio il nome del tipo di carattere attualmente selezionato funge da etichetta.

  • Se un elenco a discesa modificabile non ha un valore, usare un prompt.

    screenshot delle rubriche di ricerca delle etichette dell'elenco

    In questo esempio viene usata una richiesta per l'etichetta dell'elenco a discesa.

  • Indica la preferenza per i nomi dei pulsanti di menu basati su verbi. Tuttavia, omettere il verbo se è Create, Show, View o Manage. Ad esempio, i pulsanti di menu Strumenti e Pagina non hanno verbi.
  • Usa una singola parola specifica che descrive in modo chiaro e accurato il contenuto del menu. Anche se i nomi non devono essere così generali che descrivono tutto nel menu, dovrebbero essere sufficientemente prevedibili in modo che gli utenti non siano sorpresi da ciò che trovano nel menu.
  • Anche se non è necessario, fornire descrizioni delle descrizioni delle informazioni, se utili.
  • Usare i nomi delle voci di menu che iniziano con un verbo, un sostantivo o una frase sostantivale.
  • Indica la preferenza per i nomi di menu basati su verbo. Tuttavia, omettere il verbo se è Create, Show, View o Manage. Ad esempio, i comandi seguenti non usano verbi:
    • Informazioni
    • Avanzato
    • Schermo intero
    • Nuovo
    • Opzioni
    • Proprietà
  • Usare verbi specifici. Evitare verbi generici e inutili, ad esempio Modifica e Gestione.
  • Usare sostantivi singolari per i comandi che si applicano a un singolo oggetto; in caso contrario, usare sostantivi plurali.
  • Per le coppie di comandi complementari, scegliere nomi chiaramente complementari. Esempi: Add, Remove; Mostra, Nascondi; Inserisci, Elimina.
  • Scegliere i nomi delle voci di menu in base a obiettivi utente e attività, non sulla tecnologia.
  • Usare i nomi delle voci di menu seguenti per lo scopo indicato:
    • Opzioni: Per visualizzare le opzioni del programma.
    • Personalizza: Per visualizzare le opzioni del programma specifiche relative alla configurazione meccanica dell'interfaccia utente.
    • Personalizzare: Per visualizzare un riepilogo delle impostazioni di personalizzazione di uso comune.
    • Preferenze: Non usare. Usare invece Opzioni.
    • Proprietà: Per visualizzare la finestra delle proprietà di un oggetto.
    • Impostazioni: Non usare come etichetta di menu. Usare invece Opzioni.
  • Le voci di menu che visualizzano sottomenu non hanno mai i puntini di sospensione sull'etichetta. La freccia del sottomenu indica che è necessaria un'altra selezione.

Documentazione

Quando si fa riferimento alle barre degli strumenti:

  • Se è presente una sola barra degli strumenti, fare riferimento a essa come barra degli strumenti.
  • Se sono presenti più barre degli strumenti, fare riferimento a tali barre degli strumenti in base al nome, seguito dalla barra degli strumenti delle parole. Fare riferimento alla barra degli strumenti principale attivata per impostazione predefinita e contiene pulsanti per le attività di base, ad esempio l'apertura e la stampa di un file, come barra degli strumenti standard.
  • Toolbar è una singola parola non capitalizzata. Al contrario, la barra dei menu è due parole.
  • Fare riferimento ai pulsanti della barra degli strumenti in base alle etichette delle descrizioni comando. Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere puntini di sospensione.
  • Fare riferimento ai pulsanti del menu della barra degli strumenti in base alle etichette e al menu delle parole. Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola.
  • Fare riferimento ai controlli della barra degli strumenti in genere come pulsanti della barra degli strumenti.
  • Per descrivere l'interazione dell'utente, usare clic per i pulsanti della barra degli strumenti e gli elenchi a discesa di sola lettura e immettere per gli elenchi a discesa modificabili. Non usare scegliere, selezionare o selezionare.
  • Non usare i pulsanti di menu a catena, a discesa, a discesa o a comparsa per descrivere i pulsanti di menu, ad eccezione della documentazione di programmazione.
  • Fare riferimento a elementi non disponibili come non disponibili, non in grigio, disabilitato o disattivato. Usare disabilitato nella documentazione di programmazione.
  • Quando possibile, formattare le etichette usando il testo in grassetto. In caso contrario, inserire le etichette tra virgolette solo se necessario per evitare confusione.

Esempi:

  • Nel menu Pagina sulla barra degli strumenti fare clic su Invia pagina tramite posta elettronica.
  • Nella casella Tipi di carattere sulla barra degli strumenti immettere "Segoe UI".
  • Sulla barra degli strumenti Formattazione scegliere Mostrae quindi fare clic su Commenti.