Questa pagina è stata tradotta dall'API Cloud Translation.

Guida di stile di interfaccia utente per i componenti aggiuntivi di Editor

I componenti aggiuntivi dell'Editor creano interfacce utente (menu, barre laterali e finestre di dialogo) utilizzando il servizio HTML di Apps Script. Poiché le interfacce sono sviluppate in HTML e CSS, sono altamente personalizzabili. Tuttavia, quando crei l'interfaccia del componente aggiuntivo, devi progettarla in modo da offrire un'esperienza utente ottimale.

I componenti aggiuntivi migliori estendono ogni editor in modo naturale utilizzando controlli e comportamenti familiari. Quando crei un nuovo componente aggiuntivo:

Utilizza il pacchetto CSS dei componenti aggiuntivi nelle tue pagine di servizio HTML.
In caso di dubbi sul design, trova una finestra di dialogo o una barra laterale simili nell'editor e associala oppure consulta una guida rapida per i componenti aggiuntivi.
Segui questa guida di stile per creare un'esperienza ottimale.

Testo

Nome del componente aggiuntivo

Devi impostare il nome del componente aggiuntivo quando lo pubblichi. Il nome viene visualizzato in molti punti, ad esempio nel negozio dei componenti aggiuntivi e all'interno dei menu.

Utilizza le iniziali maiuscole.
Evita la punteggiatura, in particolare le parentesi, a meno che non facciano parte del tuo brand.
Punta sulla brevità: è preferibile un massimo di 30 caratteri. I nomi lunghi potrebbero essere troncati automaticamente.
Non includere il nome del prodotto Google a cui è destinato il componente aggiuntivo (o non utilizzare la parola Google).
Non inserire le informazioni sulla versione.
Assicurati che il nome pubblicato del componente aggiuntivo corrisponda al nome file del progetto di script. Il nome del progetto viene visualizzato nella finestra di dialogo dell'autorizzazione.

Cosa non fare	Cosa fare

Stile di scrittura

Non devi scrivere molto. La maggior parte delle azioni dovrebbe essere chiara tramite icone, layout ed etichette brevi. Se noti che una parte del componente aggiuntivo richiede una spiegazione più dettagliata rispetto alle etichette brevi, ti consigliamo di creare una pagina web separata che descriva il componente aggiuntivo e di creare un link a quest'ultimo.

Durante la scrittura del testo dell'interfaccia utente:

Usa la maiuscola iniziale (soprattutto per pulsanti, etichette ed elementi di menu).
Prediligi testi brevi e semplici senza espressioni gergali o acronimi.

Cosa non fare	Cosa fare

Suggerimento post-installazione

Il suggerimento per il post-installazione appare subito dopo che qualcuno installa il componente aggiuntivo e viene visualizzato anche nella Guida. Hai a disposizione un paio di frasi per aiutare gli utenti a iniziare rapidamente.

Inizia con una parola che dia un messaggio all'azione.
Descrivi il primo passaggio per utilizzare il componente aggiuntivo.
Se hai un'interfaccia utente principale, ad esempio una barra laterale, spiega come aprirla.
Non promuovere il tuo componente aggiuntivo qui perché è già installato.

Cosa non fare	Cosa fare

Voci di menu

A differenza dei normali progetti Apps Script, i componenti aggiuntivi non vengono visualizzati nell'editor di script o nel gestore di script e gli utenti non possono eseguire direttamente script dei componenti aggiuntivi. Ogni componente aggiuntivo è inserito nel menu. Il menu (ed eventualmente una finestra di dialogo o una barra laterale) consente agli utenti di interagire con il componente aggiuntivo.

Il menu è una parte fondamentale del modo in cui gli utenti controllano il componente aggiuntivo, per cui progettane la struttura e il testo con attenzione.
Evita le voci di menu che ripetono semplicemente il nome del componente aggiuntivo. Inizia invece con una parola di azione.
Se la voce del menu principale inizia un flusso di lavoro e non esiste un singolo verbo che ne descriva la funzione, chiamala "Inizio". Questo pattern è utilizzato nella guida rapida sui componenti aggiuntivi di Documenti.
A meno che il tuo menu non contenga più di sei voci, cerca di non utilizzare sottomenu. Possono essere complicati e difficili da selezionare.
Descrivi l'attività, non il componente dell'interfaccia utente visualizzato nella voce di menu.

Cosa non fare	Cosa fare

Messaggi di errore.

Quando si verifica un problema, è importante usare un linguaggio semplice. Spiega il problema dal punto di vista dell'utente e suggerisci come risolverlo.

Non consentire all'utente di vedere eventuali eccezioni generate dal codice. Utilizza invece le istruzioni try...catch per intercettare le eccezioni, quindi visualizza un messaggio di errore breve dall'utente con testo incorporato e stilizzato nella classe error dal pacchetto CSS dei componenti aggiuntivi o da una finestra di dialogo di avviso.
Prima della pubblicazione, verifica che il componente aggiuntivo non registri le informazioni di debug nella console JavaScript; utilizza invece Stackdriver Logging.

Cosa non fare	Cosa fare

Contenuti Help

Il menu di ogni componente aggiuntivo include una finestra di dialogo Guida automatica. Se fornisci un URL di assistenza quando pubblichi, il pulsante "Scopri di più" rimanda a quella pagina. A meno che il componente aggiuntivo non sia chiaro, fornisci una pagina che spieghi come utilizzarlo.

Se possibile, mostra le istruzioni sotto forma di elenco puntato o numerato. Indica agli utenti il risultato finale, con riferimenti chiari a elementi dell'interfaccia utente denominati.
Assicurati che le istruzioni spieghino chiaramente eventuali requisiti, ad esempio impostando un foglio di lavoro in un determinato modo.
Non esitare a inserire anche i link ai contenuti Help dall'interfaccia utente principale. Se il componente aggiuntivo crea un nuovo documento, puoi visualizzare le istruzioni anche nel corpo del documento.

Interfacce utente personalizzate

Alcuni componenti aggiuntivi dell'editor semplici possono essere controllati completamente dal relativo menu, ma la maggior parte mostra una barra laterale o una finestra di dialogo con contenuti personalizzati.

Le barre laterali sono ideali per gli strumenti permanenti che le persone probabilmente utilizzeranno più volte facendo riferimento ai contenuti del loro documento o foglio di lavoro.
Le finestre di dialogo sono ideali per strumenti monouso, pagine di impostazioni e messaggi importanti.

Testo UI

In qualsiasi finestra di dialogo o barra laterale, supponiamo che le persone leggano solo le etichette del titolo e del pulsante. Riusciranno comunque a capire qual è la funzione della tua interfaccia e a fare una buona scelta?

Usa etichette di titolo e pulsante indipendenti.
Evita lunghi blocchi di testo descrittivo.

Finestre di dialogo

Le finestre di dialogo sono perfette per gli strumenti che le persone usano una sola volta e poi vanno avanti. Ad esempio, se il componente aggiuntivo consente agli utenti di inserire un'immagine, potresti visualizzare una finestra di dialogo con le opzioni da inserire, quindi chiudere la finestra di dialogo quando viene inserita l'immagine. Le finestre di dialogo sono utili anche per visualizzare le impostazioni del componente aggiuntivo o per comunicare un messaggio importante.

Non aprire una finestra di dialogo (inclusi un avviso o un prompt) di un'altra finestra di dialogo, ma visualizzane solo uno alla volta.
Per il titolo della finestra di dialogo, utilizza una parola o una frase breve, all'inizio della parola più importante.
Le etichette dei pulsanti devono essere correlate al titolo della finestra di dialogo.
Sono preferibili due pulsanti, di solito l'azione principale e "Annulla". Per casi speciali che richiedono un terzo pulsante, considera l'angolo in basso a destra.
Posiziona i pulsanti nell'angolo in basso a sinistra della finestra di dialogo. Il pulsante principale di colore blu dovrebbe essere a sinistra e tutti i pulsanti secondari grigi a destra.

Cosa non fare	Cosa fare

Barre laterali

Le barre laterali consentono agli utenti di fare riferimento al proprio documento, foglio di lavoro, presentazione o modulo mentre fanno scelte. Inoltre, consentono agli utenti di utilizzare il componente aggiuntivo più volte. Ogni volta che viene aperta una nuova barra laterale, quella precedente si chiude automaticamente. Sono ideali per le modalità temporanee che l'utente esce al termine dell'operazione.

Gli utenti potrebbero avere altri componenti aggiuntivi con barre laterali proprie. Se due componenti aggiuntivi tentano di aprire contemporaneamente le barre laterali, ne viene visualizzato solo uno.
Non visualizzare una barra laterale o una finestra di dialogo alla prima apertura di un documento.
Solo i componenti aggiuntivi utilizzati in AuthMode.FULL possono aprire le barre laterali o le finestre di dialogo. Puoi utilizzare una voce di menu per aprire una barra laterale, in quanto richiede all'utente di fornire l'autorizzazione completa.

Controlli

Le interfacce utente di alta qualità dei componenti aggiuntivi lasciano un bel respiro ai controlli. Margini e spaziatura interna adeguati sono molto utili, mentre controlli ad alta densità può sembrare eccessivo. In caso di dubbi, prendi in prestito un layout dall'editor stesso. Ad esempio, quando crei le finestre di dialogo esistenti, come File > Impostazione pagina, puoi esaminare le finestre di dialogo esistenti.

La documentazione relativa al pacchetto CSS dei componenti aggiuntivi fornisce markup di esempio per ciascuno dei tipi di controlli riportati di seguito.

Pulsanti

Utilizza i pulsanti per controllare le azioni principali dell'interfaccia utente anziché link normali o altri elementi.

Evita di visualizzare più di un pulsante blu, rosso o verde alla volta. I pulsanti grigi potrebbero apparire ripetutamente.
La maggior parte delle etichette dei pulsanti deve avere una maiuscola a inizio frase e iniziare con un verbo. I pulsanti rossi, di solito per le azioni di creazione, devono utilizzare solo lettere maiuscole.

Cosa non fare	Cosa fare

Caselle di controllo e pulsanti di opzione

Utilizza le caselle di controllo quando gli utenti possono selezionare più opzioni o nessuna opzione. Utilizza i pulsanti di opzione (o un menu di selezione) quando è necessario selezionare esattamente un'opzione.

Non modificare il comportamento delle caselle di controllo per simulare i pulsanti di opzione.
Non fare nulla immediatamente dopo il controllo. Le persone commettono errori. Attendi che gli utenti facciano clic su un pulsante per confermare le loro scelte.

Seleziona menu

I contenuti selezionati sono un ottimo modo per offrire un breve elenco di alternative.

Ordina le opzioni in ordine alfabetico o secondo uno schema logico che tutti gli utenti possono comprendere (ad esempio, giorni della settimana, a partire da domenica).
Se l'elenco si allunga troppo, valuta la possibilità di utilizzare un altro controllo. Ad esempio, potresti visualizzare un elenco scorrevole per lasciare più spazio al menu e semplificare la navigazione.

Aree di testo

Se è necessario digitare più di poche parole, utilizza un'area di testo.

Crea aree di testo alte almeno due righe in modo che siano più facili da utilizzare e non abbiano l'aspetto di campi di testo.
Posiziona le etichette sopra.

Campi di testo

Utilizza i campi di testo se le persone devono digitare solo una o due parole.

La larghezza di un campo di testo dovrebbe suggerire il testo che ti aspetti venga digitato.
Evita di utilizzare il testo segnaposto come etichetta, perché scompare dallo stato attivo. Il testo segnaposto è utile per fornire esempi o ulteriori dettagli.
Posiziona le etichette sopra, ma sentiti libero di disporre brevi campi di testo affiancati.

Branding

Nel componente aggiuntivo

Se vuoi includere elementi di branding, fai in modo che siano brevi e leggeri. In questo modo, gli utenti possono concentrarsi sulla tua UI e fanno sentire il componente aggiuntivo parte dell'editor.

Tutti gli aspetti del componente aggiuntivo devono rispettare le linee guida per il branding.
Non includere la parola "Google" e non utilizzare le icone dei prodotti Google.
Il testo non deve contenere più di poche parole e deve avere uno stile nella classe gray del pacchetto CSS dei componenti aggiuntivi.
La grafica deve essere su uno sfondo bianco e non più di 200 px × 60 px.
Per le finestre di dialogo, il branding deve essere nell'angolo in basso a destra.
Per le barre laterali, il branding può essere posizionato in alto o in basso.

In negozio

Per pubblicare un componente aggiuntivo dell'editor, sono necessari una serie di asset immagine. Queste risorse vengono utilizzate per creare la scheda dello Store dei componenti aggiuntivi.

Tutti gli aspetti della tua scheda dello Store devono rispettare le linee guida per il branding.
Per ulteriori dettagli sulle immagini da fornire, consulta le linee guida per le immagini.

Accessibilità

Il tuo componente aggiuntivo deve essere apprezzato da tutti, a prescindere dal fatto che i colori siano diversi, che utilizzino uno screen reader o che abbiano altre esigenze. L'accessibilità è un argomento ampio che non può essere trattato in modo esaustivo in questa guida di stile. Una risorsa utile è il sito Accessibilità di Google. Tuttavia, ecco alcuni suggerimenti per iniziare:

Assicurati di poter accedere a tutti i controlli UI con la tastiera. Aggiungi tabindex=0 ai controlli personalizzati (come quelli creati con <div>) in modo che gli utenti possano consultarli con il tasto Tab. Valuta se devono essere supportate anche altre chiavi, ad esempio le frecce per un elenco.
Alcune persone potrebbero utilizzare uno screen reader con il componente aggiuntivo. Di conseguenza, le immagini dovrebbero avere un attributo alt e i controlli personalizzati dovrebbero avere attributi ARIA per descriverne l'utilizzo.
Non affidarti esclusivamente al colore per comunicare lo stato. Utilizza anche icone e testo.

Se utilizzi controlli web standard, come quelli descritti in precedenza in questa guida, rendere il tuo componente aggiuntivo accessibile è più semplice.