I componenti aggiuntivi di Google Workspace devono essere coerenti con lo stile e il layout dell' applicazione host che estendono. Dovrebbero estendere l'interfaccia utente in modo naturale utilizzando controlli e comportamenti familiari. Le linee guida presentate qui descrivono i modi di gestire testo, immagini, controlli e branding che promuovono un'esperienza utente di alta qualità.
Se il componente aggiuntivo apre pagine web separate che sono parte integrante del suo funzionamento (ad esempio una pagina delle impostazioni), assicurati che anche queste pagine web rispettino queste linee guida di stile.
Testo e immagini
Questa sezione spiega come utilizzare correttamente testo e immagini nel componente aggiuntivo.
Nome del componente aggiuntivo
Devi impostare il nome del componente aggiuntivo nel relativo progetto manifest e quando configuri il componente aggiuntivo per la pubblicazione. Il nome viene visualizzato in molti punti, ad esempio nella scheda del Google Workspace Marketplace e nei menu. Quando scegli un nome:
- Usa la maiuscola iniziale.
- Evita la punteggiatura, in particolare le parentesi, a meno che non faccia parte del tuo brand.
- Mantienilo breve: 15 caratteri o meno è l'ideale. I nomi lunghi potrebbero essere troncati automaticamente nella scheda di Google Workspace Marketplace e altrove.
- Non includere le parole "Google", "Gmail" o altri nomi di prodotti Google nel nome del componente aggiuntivo.
- Non includere la parola "componente aggiuntivo" nel nome del componente aggiuntivo.
- Ometti le informazioni sulla versione.
Stile di scrittura
Non dovrai scrivere molto. La maggior parte delle azioni deve essere resa chiara tramite iconografia, layout ed etichette brevi. Se ritieni che una parte del tuo componente aggiuntivo richieda una spiegazione più dettagliata di quanto possano fornire le etichette brevi, è consigliabile creare una pagina web separata che descriva il componente aggiuntivo e creare un link a questa pagina.
Quando scrivi il testo dell'interfaccia utente:
- Utilizza il maiuscolo e minuscolo (soprattutto per pulsanti, etichette e azioni delle schede).
- Preferisci un testo breve e semplice, senza gergo o acronimi.
Azioni universali e delle schede
Se utilizzi le azioni universali o le azioni delle schede nel tuo componente aggiuntivo, queste vengono visualizzate come voci di menu nelle schede che definisci. Puoi scegliere il testo utilizzato in questi menu per queste azioni. Quando scegli il testo da utilizzare:
- Evita un testo del menu che ripeta semplicemente il nome del componente aggiuntivo.
- Inizia ogni voce di menu con una parola che indica un'azione, ad esempio "Esegui", "Configura" o "Crea".
- Descrivi l'attività, non il componente UI visualizzato dall'azione.
- Se l'azione avvia un flusso di lavoro e non esiste un singolo verbo che descriva la sua funzione, chiamala "Avvia".
- Mantieni il numero di voci di menu ridotto per evitare di costringere l'utente a scorrere un elenco di grandi dimensioni. Se hai altre azioni da implementare, valuta la possibilità di utilizzare più schede con azioni diverse su ciascuna.
Messaggi di errore
Quando si verifica un problema, è importante utilizzare un linguaggio semplice. Spiega il problema dal punto di vista dell'utente e suggerisci come risolverlo.
- Non consentire all'utente di visualizzare le eccezioni generate dal codice. Utilizza invece le istruzioni
try...catchper intercettare le eccezioni, quindi visualizza un messaggio di errore intuitivo. - Prima di pubblicare, verifica che il componente aggiuntivo non mostri informazioni di debug nell'interfaccia utente.
Contenuti Help
Potresti progettare schede che mostrino informazioni di assistenza o spieghino il funzionamento del componente aggiuntivo all'utente. Se crei contenuti della Guida per il tuo componente aggiuntivo, ricorda di:
- Se possibile, mostra le istruzioni in un elenco puntato o numerato. Guida gli utenti fino al risultato finale, con riferimenti chiari agli elementi dell'interfaccia utente denominati.
- Assicurati che le istruzioni spieghino chiaramente eventuali requisiti, ad esempio la configurazione di un foglio di lavoro in un determinato modo.
- Non esitare a inserire link a contenuti di assistenza esterni, ad esempio pagine web di supporto.
Immagini
Le immagini utilizzate nel componente aggiuntivo sono uno dei tipi di icone integrate o un'immagine ospitata pubblicamente specificata da un URL. Quando utilizzi immagini ospitate, assicurati che siano accessibili a tutti coloro che potrebbero utilizzare il tuo componente aggiuntivo.
Controlli
Questa sezione fornisce linee guida per l'esperienza utente per i widget interattivi.
Pulsanti
Utilizza i pulsanti per controllare le azioni principali dell'interfaccia utente anziché altri widget.
- La maggior parte delle etichette dei pulsanti di testo deve iniziare con un verbo.
- Nella maggior parte dei casi, le righe dei pulsanti devono essere limitate a tre o meno pulsanti.
DecoratedText
I widget DecoratedText consentono di presentare contenuti di testo con icone, pulsanti o interruttori.
- Usa la lettera maiuscola a inizio frase per il contenuto di testo.
- Il testo di un widget DecoratedText viene troncato se non può essere inserito nello spazio disponibile. Per questo motivo, cerca sempre di mantenere i contenuti di testo il più brevi possibile.
Input di selezione
Puoi utilizzare una serie di widget di input di selezione nel tuo componente aggiuntivo: caselle di selezione a discesa, caselle di controllo e pulsanti di opzione.
- Utilizza le caselle di controllo quando le persone possono selezionare più opzioni o nessuna opzione. Utilizza i pulsanti di opzione (o un menu di selezione) quando deve essere selezionata esattamente un'opzione. Utilizza i menu a discesa quando fornisci un breve elenco di alternative per risparmiare spazio nell'interfaccia utente.
- Utilizza la lettera maiuscola a inizio frase per il testo assegnato a ogni opzione.
- Evita di utilizzare le modifiche alla selezione per attivare azioni importanti e difficili da annullare, perché le persone spesso commettono errori quando effettuano selezioni. In alternativa, valuta la possibilità di aggiungere un pulsante che legge i valori della selezione corrente e poi attiva l'azione.
- Per i menu a discesa, ordina le opzioni in ordine alfabetico o secondo uno schema logico che tutti gli utenti possano comprendere (ad esempio, presenta i giorni della settimana in ordine, a partire da domenica o lunedì).
- Limita il numero di opzioni in un determinato widget di input di selezione a un numero ragionevole. Se ci sono troppe opzioni, gli utenti potrebbero trovare difficile utilizzare il widget. In questi casi, valuta la possibilità di suddividere l'opzione in diverse categorie e più widget.
Input di testo
I campi di testo consentono agli utenti di inserire dati stringa.
- Non utilizzare un input di testo per fare in modo che l'utente digiti una delle voci di un insieme specifico di possibili voci. Utilizza invece una selezione dal menu a discesa.
- Utilizza suggerimenti e suggerimenti per aiutare l'utente a inserire il testo con il formato e i contenuti corretti.
- Utilizza input di testo multilinea se il testo da inserire è composto da più di qualche parola.
Branding
Questa sezione fornisce linee guida per l'esperienza utente per l'aggiunta di elementi di branding all'interfaccia del componente aggiuntivo.
Nel componente aggiuntivo
Se vuoi includere il branding nell'interfaccia utente del componente aggiuntivo, mantienilo breve e leggero. In questo modo, gli utenti possono concentrarsi sulla funzionalità del tuo componente aggiuntivo.
- Tutti gli aspetti del tuo componente aggiuntivo devono rispettare le linee guida per il branding.
- Non includere la parola "Google", "Gmail" o altri nomi di prodotti Google.
- Non includere icone di prodotti Google, anche se modificate.
- Non includere la parola "componente aggiuntivo" nel testo del branding.
- Il testo del brand non deve contenere più di qualche parola.
In Google Workspace Marketplace
Quando configuri il componente aggiuntivo per la pubblicazione, fornisci una serie di asset grafici e di testo per creare la scheda di Google Workspace Marketplace.
Tutti gli aspetti della scheda dello Store e di questi asset devono rispettare le linee guida per il branding.