I componenti aggiuntivi di Google Workspace devono essere coerenti con lo stile e il layout dell'applicazione host che estendono. Dovrebbero estendere la UI in modo naturale utilizzando controlli e comportamenti familiari. Le linee guida presentate qui descrivono i modi per gestire testo, immagini, controlli e branding al fine di promuovere 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 di impostazioni del componente aggiuntivo), assicurati che queste pagine web seguano anche queste linee guida di stile.
Testo e immagini
Questa sezione spiega come utilizzare correttamente testo e immagini nel tuo componente aggiuntivo.
Nome del componente aggiuntivo
Devi impostare il nome del componente aggiuntivo nel manifest del progetto e quando configuri il componente aggiuntivo per la pubblicazione. Il nome viene visualizzato in molti punti, ad esempio nella scheda di Google Workspace Marketplace e nei menu. Quando scegli un nome:
- Usa le lettere maiuscole.
- Evita la punteggiatura, in particolare le parentesi, a meno che non facciano parte del tuo brand.
- Mantieni breve la descrizione: è preferibile utilizzare al massimo 15 caratteri. 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 dovresti dover 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 necessiti di una spiegazione più ampia di quella che possono fornire le etichette brevi, è buona prassi creare una pagina web separata che descriva il componente aggiuntivo e creare un link a questa pagina.
Quando scrivi il testo dell'interfaccia utente:
- Usa le lettere maiuscole (soprattutto per pulsanti, etichette e azioni delle schede).
- Preferisci un testo breve e semplice, senza gergo o acronimi.
Azioni universali e della scheda
Se utilizzi azioni universali o 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 di utilizzare un testo del menu che ripeta semplicemente il nome del componente aggiuntivo.
- Inizia ogni voce di menu con un verbo d'azione, ad esempio "Esegui", "Configura" o "Crea".
- Descrivi l'attività, non il componente dell'interfaccia utente visualizzato dall'azione.
- Se l'azione avvia un flusso di lavoro e non esiste un singolo verbo che descriva la sua azione, chiamala "Inizia".
- Mantieni basso il numero di voci di menu per evitare di costringere l'utente a scorrere un elenco di grandi dimensioni. Se hai altre azioni da implementare, ti consigliamo di utilizzare più schede con azioni diverse su ciascuna.
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 le eccezioni generate dal codice. Utilizza invece le istruzioni
try...catchper intercettare le eccezioni e poi visualizza un messaggio di errore facile da usare. - Prima di pubblicare, controlla che il componente aggiuntivo non mostri informazioni di debug nell'interfaccia utente.
Contenuti Help
Ti consigliamo di progettare schede che mostrino informazioni di aiuto o spieghino all'utente il funzionamento del componente aggiuntivo. Se crei contenuti della guida per il tuo plug-in, ricordati 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 integrati 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 relative ai 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 di pulsanti devono essere limitate a tre o meno pulsanti.
DecoratedText
I widget di testo decorato ti consentono di presentare contenuti di testo con icone, pulsanti o pulsanti di attivazione/disattivazione.
- Usa la lettera maiuscola a inizio frase per i contenuti 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 il testo il più breve 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 gli utenti possono selezionare più opzioni o nessuna opzione. Utilizza i pulsanti di opzione (o un menu di selezione) quando deve essere selezionata esattamente una opzione. Utilizza i menu a discesa quando fornisci un breve elenco di alternative cercando di risparmiare spazio nell'interfaccia utente.
- Utilizza la lettera maiuscola a inizio frase per il testo assegnato a ogni opzione.
- Evita di utilizzare le modifiche di selezione per attivare azioni importanti e difficili da annullare, poiché le persone spesso commettono errori durante le selezioni. In alternativa, valuta la possibilità di aggiungere un pulsante che legga i valori di selezione correnti e attivi l'azione.
- Per i menu a discesa, ordina le opzioni in ordine alfabetico o in base a uno schema logico che tutti gli utenti possano comprendere (ad esempio, presentando i giorni della settimana in ordine, a partire da domenica o lunedì).
- Limita a un numero ragionevole il numero di opzioni in un determinato widget di input selezione. Se sono presenti troppe opzioni, gli utenti potrebbero avere difficoltà a utilizzare il widget. In questi casi, valuta la possibilità di suddividere l'opzione in categorie diverse e in più widget.
Input di testo
Gli input di testo consentono agli utenti di inserire dati di stringa.
- Non utilizzare un input di testo per chiedere all'utente di digitare una di un insieme specifico di possibili voci. Utilizza un menu a discesa.
- Utilizza suggerimenti e indicazioni 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 è costituito da più di alcune parole.
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, mantieni il testo 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 le icone dei prodotti Google, anche se sono state alterate.
- Non includere la parola "componente aggiuntivo" nel testo del branding.
- Il testo del branding non deve contenere più di qualche parola.
In Google Workspace Marketplace
Quando configuri il componente aggiuntivo per la pubblicazione, fornisci una serie di asset di testo e grafici 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.