Condividi tramite


Barre degli strumenti di Windows 7

Annotazioni

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 .

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 rispetto alle barre dei menu perché sono dirette (sempre visualizzate invece di essere 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 finestra della tavolozza. Per altre informazioni sulle varietà di barre degli strumenti, vedere Modelli di utilizzo in questo articolo.

Annotazioni

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

Si tratta dell'interfaccia utente corretta?

Per decidere, considerare 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'atmosfera diretta e immediata. In caso contrario, le barre dei menu sono più adatte per i comandi che richiedono input aggiuntivi.
  • 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 da icone anziché da 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 addestrare gli utenti solo a 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 stampa 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 dello 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 il proprio spazio in modo efficiente. Al contrario, i comandi della barra dei menu sono in genere nascosti dalla visualizzazione e la loro 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 etichetta di invio/ricezione

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

  • Ovvio. Le barre degli strumenti ben progettate necessitano di icone che sono principalmente autoesplicative perché gli utenti non riescono a trovare in modo efficiente i comandi solo usando le descrizioni comando. Tuttavia, le barre degli strumenti funzionano ancora 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 le posizioni dei comandi della barra dei menu usate di frequente, ma si basano sulle etichette dei comandi per effettuare selezioni.

    schermata della finestra di dialogo opzioni dello strumento di ritaglio

    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 infine 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 una sola cosa...

Assicurarsi che le barre degli strumenti siano progettate principalmente per l'efficienza. Concentrarsi sulle barre degli strumenti sui comandi usati di frequente, immediati, diretti e rapidamente riconoscibili.

Nascondere le barre dei menu

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

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 sull'offerta di comandi tramite la barra degli strumenti e nascondendo la barra dei menu per impostazione predefinita. Tali programmi includono Windows Explorer, Windows Internet Explorer, Windows Media Player e Windows Photo Gallery.

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, che richiede 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 di divisione stampa standard.

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

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

  • Immediatezza. Per risparmiare spazio ed evitare confusione, i comandi usati meno frequentemente 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 nascosta o rimossa. Inoltre, poiché 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 durante le 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 per funzionare senza una barra dei menu comporta spesso alcuni compromessi. Ma per l'efficienza, non compromettere troppo. Se nascondendo la barra dei menu si ottiene una barra degli strumenti inefficiente, non nascondere la barra dei menu.

Accessibilità tramite tastiera

Dalla tastiera, l'accesso alle barre degli strumenti è molto diverso dall'accesso alle barre dei menu. Le barre dei menu ricevono lo stato attivo quando gli utenti premeno ALT e perdono lo stato attivo per l'input con il tasto ESC. Una volta che una barra dei menu ha lo stato attivo per l'input, viene spostata indipendentemente dal resto della finestra, gestendo tutti i tasti di direzione, Home, Fine e TAB. Al contrario, le barre degli strumenti ricevono lo stato attivo quando gli utenti premeno tabulazione attraverso l'intero contenuto della finestra. Poiché le barre degli strumenti sono ultime nell'ordine di tabulazioni, potrebbero richiedere un certo sforzo significativo per l'attivazione in una pagina occupata (a meno che gli utenti non sappiano usare MAIUSC+TAB per spostarsi indietro).

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

Per motivi di accessibilità, preferire quindi mantenere 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:

Uso Esempio
Barre degli strumenti principali
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 programmi semplici.
screenshot della barra degli strumenti di Esplora risorse
Barra degli strumenti primaria da Esplora risorse.
Barre degli strumenti supplementari
una barra degli strumenti progettata per funzionare con una barra dei menu.
le barre degli strumenti supplementari possono concentrarsi sull'efficienza senza compromettere.
screenshot 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 in pulsanti di menu e pulsanti di divisione, con solo alcuni comandi diretti, se presenti.
screenshot della barra dei menu con icone e comandi
Menu della barra degli strumenti in Raccolta foto di Windows.
Barre degli strumenti personalizzabili
una barra degli strumenti che può essere personalizzata dagli utenti.
le barre degli strumenti personalizzabili consentono agli utenti di aggiungere o rimuovere barre degli strumenti, modificarne le dimensioni e la posizione e persino modificare il contenuto.
screenshot di una barra degli strumenti con decine di icone
Una barra degli strumenti personalizzabile da Microsoft Visual Studio.
Finestre tavolozza
una finestra di dialogo senza modalità che presenta una matrice di comandi.
le finestre della tavolozza sono barre degli strumenti non ancorate.
screenshot di una finestra di dialogo colori
screenshot di una finestra di dialogo tipi di carattere
Finestre tavolozza da Windows Paint.

Le barre degli strumenti hanno questi stili:

Style Esempio
Icone senza etichetta
una o più righe di piccoli pulsanti icona senza etichetta.
utilizzare 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.
screenshot della barra degli strumenti con icone piccole e senza etichetta
Barra degli strumenti delle icone senza etichetta da WordPad.
Icone non etichettate di grandi dimensioni
una singola riga di grandi pulsanti icona senza etichetta.
utilizzare questo stile per semplici utilità che hanno icone facilmente riconoscibili e sono in genere eseguite in piccole finestre.
screenshot della barra degli strumenti con icone grandi e senza etichetta
screenshot della barra degli strumenti con icone grandi
Barre degli strumenti delle icone non etichettate di grandi dimensioni da Windows Live Messenger e dallo strumento di ritaglio di Windows.
Icone etichettate
una singola riga di piccole icone etichettate.
usare questo stile se sono presenti pochi comandi o il programma non viene usato di frequente. questo stile ha sempre una singola riga.
screenshot 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 non è necessaria una barra degli strumenti completa.
utilizzare 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.
screenshot 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 utilizzata per risparmiare spazio quando non è necessaria una barra degli strumenti completa.
utilizzare questo stile per utilità semplici con pulsanti di spostamento o una casella di ricerca per eliminare il peso non necessario nella parte superiore della finestra.
screenshot di una barra degli strumenti parziale di grandi dimensioni
Una grande barra degli strumenti parziale di Windows Defender.

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

Uso Esempio
Pulsanti icona comando
facendo clic su un pulsante di comando viene avviata un'azione immediata.
screenshot di una barra degli strumenti con etichette icone
Esempi di pulsanti di comando icona di Windows Fax e Analisi.
Pulsanti icona modalità
facendo clic su un pulsante in modalità viene attivata la modalità selezionata.
screenshot di una barra degli strumenti verticale
Esempi di pulsanti di modalità di Windows Paint.
Pulsanti icona proprietà
Lo stato di un pulsante di proprietà riflette lo stato degli oggetti attualmente selezionati, se presenti. facendo clic sul pulsante viene applicata la modifica agli oggetti selezionati.
screenshot delle icone di formattazione e del testo selezionato
Esempi di pulsanti di proprietà di Microsoft Word.
Pulsanti icona etichettati
un pulsante di comando o un pulsante di proprietà con etichetta 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 autoesplicativo. vengono usati anche nelle barre degli strumenti con 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.
Barra degli strumenti con i pulsanti usati più di frequente etichettati.
pulsanti 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, in particolare quando uno dei comandi viene usato nella maggior parte dei casi.
screenshot del pulsante split print
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.
screenshot dei comandi del pulsante di stampa divisa
pulsante di divisione 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 per la maggior parte del tempo, quindi gli utenti normalmente 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 secchio che versa la vernice
In questo esempio l'etichetta viene modificata nell'ultimo comando.
Elenchi a discesa
un 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 dei tipi 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.

Istruzioni

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 di stile della barra degli strumenti precedente. 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 frequentemente.
    • 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 frequentemente.
    • 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 frequentemente.

  • 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 può sovraccaricare gli utenti e occupare troppo spazio dall'area di lavoro del programma.

    risposta errata:

    screenshot 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 è stabile e più facile da trovare.

  • Disabilitare i singoli pulsanti della barra degli strumenti se si fa clic su di essi genera direttamente un errore. In questo modo è necessario mantenere un'atmosfera diretta.

  • Per il modello di 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 i 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 di 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 da riflettere lo stato corrente.

    screenshot dell'icona del secchio 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 i menu di scelta rapida.
      • Comandi standard e noti, ad esempio 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 specificare 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 etichettata. Diretto, ma occupa più spazio.
    • Pulsante Dividi. Diretto per il comando più comune, ma gestisce le varianti dei comandi.
    • Pulsante menu. Indiretto, ma presenta molti comandi.
  • Preferisce 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 Stampa... .
    • Per le barre degli strumenti supplementari, utilizzare le versioni immediate nella 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 con etichetta

    migliore:

    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.

    risposta errata:

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

    In questo esempio Print è direttamente sulla barra degli strumenti, quindi non è necessario che sia 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. Nel complesso, i comandi devono avere un flusso logico per renderli facili da trovare, pur avendo i comandi usati più frequentemente vengono visualizzati per primi. In questo modo è più efficiente, soprattutto se è presente un overflow.

  • Usare i divisori di gruppo solo se i comandi tra i gruppi sono ad accoppiamento 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.

    screenshot della barra degli strumenti con icone ben organizzate

    Esempi di barre degli strumenti raggruppate da Windows Mail.

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

    accettabile:

    screenshot dei pulsanti di stampa ed eliminazione adiacenti

    migliore:

    screenshot dei pulsanti di stampa ed eliminazione separati

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

  • Usare la freccia di espansione dell'overflow per indicare che non tutti i comandi possono essere visualizzati. Usare tuttavia l'overflow solo se non è disponibile spazio sufficiente per visualizzare tutti i comandi.

    risposta errata:

    screenshot della barra preferiti e dei comandi nascosti

    La freccia di espansione dell'overflow indica che non vengono visualizzati tutti i comandi, ma più di essi potrebbero essere con un layout migliore.

  • Assicurarsi che i comandi usati più di frequente siano direttamente accessibili dalla barra degli strumenti , ovvero non in overflow, in dimensioni di finestra di piccole dimensioni. Se necessario, riordinare i comandi, spostare i comandi usati meno frequentemente in pulsanti di menu o pulsanti di divisione o persino 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 bene insieme alle barre dei menu, perché avere entrambi consente 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 la barra dei menu.
  • Nascondere la barra dei menu invece di rimuoverla completamente, perché le barre dei menu sono più accessibili per gli utenti della tastiera.
  • Per ripristinare la barra dei menu, specificare un'opzione di 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 preme il tasto ALT e impostare lo stato attivo sull'input sulla prima categoria di menu.

Interazione

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

    screenshot di una descrizione infotip che descrive un pulsante

    Questo esempio mostra i vari stati di visualizzazione.

  • A sinistra fare clic su:

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

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

      screenshot 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. Durante l'interazione, aggiornare lo stato del controllo e applicare la modifica agli oggetti selezionati. Se non è selezionata alcuna opzione, non eseguire alcuna operazione.

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

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

      screenshot della descrizione informazioni che mostra le funzioni del pulsante

      In questo esempio, facendo doppio clic sul comando Copia formato viene attivata una modalità in cui tutti i clic successivi applicano il formato. Gli utenti possono lasciare la modalità facendo clic con il pulsante sinistro del mouse.

  • 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. Visualizza il menu facendo clic con il pulsante destro del mouse verso il basso, non con il mouse verso l'alto.
    • Per altre barre degli strumenti, non eseguire alcuna operazione.

Icone

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

    screenshot dell'elenco a discesa dimensioni carattere

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

    Eccezione: Le barre degli strumenti di 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 si 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.

  • Scegli disegni icona che comunicano chiaramente il loro scopo, soprattutto per i comandi usati più di frequente. Le barre degli strumenti ben progettate necessitano di icone autoesplicative perché gli utenti non riescono a trovare in modo efficiente i comandi usando le descrizioni comando. Tuttavia, le barre degli strumenti funzionano comunque bene se le icone per alcuni comandi usati meno frequentemente non sono autoesplicative.

  • Scegliere icone riconoscibili e distinguibili, soprattutto per i comandi usati più di frequente. Assicurarsi che le icone abbiano forme e colori distintivi. In questo modo gli utenti possono trovare 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 le icone 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 pertinenti quando possibile. A differenza delle barre dei menu, i comandi della barra degli strumenti non accettano i tasti di scelta.

Barre degli strumenti principali

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

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

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

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

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

Zoom
Zoom inCtrl++
Zoom indietroCtrl+-

Dimensioni del testo(l'impostazione selezionata ha un punto elenco)

Massimo
Maggiore
Intermedio
Più piccolo
Minimo

Schermo interoF11
RefreshF5

Strumenti (pulsante di menu) ...

Opzioni Help(split button, use the Help icon) <program name> helpF1

Informazioni <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 separatori e ordine, tasti di scelta rapida e puntini di sospensione. Si noti che il comando per visualizzare e nascondere la barra dei menu si trova 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 barre dei menu e barre degli strumenti, usare i nomi delle categorie di menu standard in caso contrario non sarebbe fuorviante.

risposta errata:

screenshot delle stesse opzioni per comandi diversi

In questo esempio, la barra degli strumenti deve usare Modifica anziché Organizza 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 sullo schermo. Posizionare 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 fa clic con il pulsante destro del mouse sulla barra del titolo.

    screenshot 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 ridimensionabili le finestre della tavolozza. Indicare che la finestra è ridimensionabile, usando i puntatori di ridimensionamento quando si supera la cornice della finestra.

  • Quando viene riprodotta 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. Valutare anche la possibilità di rendere persistenti questi attributi tra 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 senza etichetta 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 dipendere dagli utenti che personalizzano la loro via di uscita da una configurazione iniziale non valida. Si supponga che la maggior parte degli utenti non personalizzi le barre degli strumenti.

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

    • Elenco di caselle 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 le barre degli strumenti visualizzate e i comandi su ogni barra degli strumenti.

    screenshot della finestra di dialogo e delle opzioni di personalizzazione

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

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

  • Offrire la possibilità di personalizzare le barre degli strumenti usando il trascinamento della selezione 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 visualizzarne il contenuto con una freccia di espansione overflow.
    • Se supportato, scollegare 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 che possa essere applicata. Posizionare i puntini di sospensione alla fine della descrizione comando e dell'etichetta, se presente.

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ò essere applicato immediatamente, non è tuttavia necessario alcun puntino di sospensione. Pertanto, ad esempio, le impostazioni di condivisione non hanno puntini di sospensione anche se sono necessarie informazioni aggiuntive, perché il comando non può avere effetto immediato.

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

Il comando Impostazioni di condivisione non ha puntini di sospensione perché non può essere applicato immediatamente.

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

Annotazioni

Per i menu visualizzati da una barra degli strumenti, applicare le linee guida per i puntini di sospensione del menu.

screenshot delle barre degli strumenti con informazioni sulla spaziatura

Dimensioni e spaziatura consigliate per le barre degli strumenti standard.

Etichette

Generale

  • Usare la maiuscola in stile frase.
    • Eccezione: Per le applicazioni legacy, è possibile usare la maiuscola in stile titolo, se necessario, per evitare di combinare stili di maiuscole e minuscole.

Pulsanti icona senza etichetta

  • Usare una descrizione comando per etichettare il 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 pulsante icona.

Pulsanti icona etichettati

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

  • Posizionare l'etichetta a destra dell'icona.

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

    screenshot del pulsante con etichetta con descrizione

    Esempio di descrizione infotip pulsante icona etichettata.

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

    schermata della barra degli strumenti con le opzioni relative ai 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 di elenco

    In questo esempio viene usato un prompt per l'etichetta dell'elenco a discesa.

  • Preferisce i nomi dei pulsanti di menu basati su verbo. 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 abbastanza prevedibili in modo che gli utenti non siano sorpresi da ciò che trovano nel menu.
  • Anche se non è necessario, fornire descrizioni delle informazioni se sono utili.
  • Usare nomi di voci di menu che iniziano con un verbo, un sostantivo o una frase sostantiva.
  • Preferisce i nomi dei menu basati su verbo. Tuttavia, omettere il verbo se è Create, Show, View o Manage. Ad esempio, i comandi seguenti non usano verbi:
    • Chi siamo
    • 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, altrimenti 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 agli obiettivi utente e alle attività, non alla 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 esse in base al nome, seguito dalla barra degli strumenti della parola. 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.
  • La barra degli strumenti è 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 della descrizione comando. Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere puntini di sospensione.
  • Fare riferimento ai pulsanti di 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 cascata, a discesa, a discesa o a comparsa per descrivere i pulsanti di menu, tranne nella documentazione di programmazione.
  • Fare riferimento a elementi non disponibili come non disponibili, non come disattivati, disabilitati o disattivati. 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 Mostra e quindi fare clic su Commenti.