I componenti aggiuntivi di Google Workspace devono essere coerenti con lo stile e il layout dell'applicazione host che estendono. Devono estendere l'interfaccia utente in modo naturale utilizzando controlli e comportamenti familiari. Le linee guida presentate qui descrivono i modi per 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 testo e immagini nel componente aggiuntivo.
Nome del componente aggiuntivo
Devi impostare il nome del componente aggiuntivo nel relativo manifest del progetto e quando lo configuri 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 la lettera maiuscola a inizio frase.
- Evita la punteggiatura, in particolare le parentesi, a meno che non faccia parte del tuo brand.
- Mantienilo breve: l'ideale è che non superi i 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.
- Non includere informazioni sulla versione.
Stile di scrittura
Non dovresti aver bisogno di scrivere molto. La maggior parte delle azioni dovrebbe essere chiara tramite l'iconografia, il layout e le etichette brevi. Se ritieni che una parte del componente aggiuntivo richieda una spiegazione più approfondita rispetto a quella fornita dalle etichette brevi, ti consigliamo di creare una pagina web separata che descriva il componente aggiuntivo e di collegarla.
Quando scrivi il testo dell'interfaccia utente:
- Usa la lettera maiuscola a inizio frase (soprattutto per pulsanti, etichette e azioni della scheda).
- Preferisci un testo breve e chiaro senza gergo o acronimi.
Azioni universali e della scheda
Se utilizzi azioni universali o azioni della scheda nel 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 il testo del menu che ripete 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 dell'interfaccia utente visualizzato dall'azione.
- Se l'azione avvia un flusso di lavoro e non esiste un singolo verbo che ne descriva la funzione, chiamala "Avvia".
- Mantieni un numero ridotto di voci di menu per evitare di costringere l'utente a scorrere un lungo elenco. 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 descrittivo. - Prima di pubblicare, verifica che il componente aggiuntivo non visualizzi informazioni di debug nell'interfaccia utente.
Contenuti Help
Potresti voler o dover progettare schede che mostrino informazioni di assistenza o spieghino il funzionamento del componente aggiuntivo all'utente. Se crei contenuti di assistenza per il 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.
- Puoi includere link a contenuti di assistenza esterni, ad esempio pagine web di supporto.
Google 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 componente aggiuntivo.
Controlli
Questa sezione fornisce linee guida per l'esperienza utente per i interattivi widget.
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 contenuto nello spazio disponibile. Per questo motivo, cerca sempre di mantenere il contenuto di testo il più breve possibile.
Input di selezione
Puoi utilizzare una varietà di widget di input di selezione nel 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 un'opzione. Utilizza i menu a discesa quando fornisci un breve elenco di alternative cercando di risparmiare spazio nell'interfaccia utente.
- Usa 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, perché gli utenti 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 alfabeticamente o in base a uno schema logico comprensibile per tutti gli utenti (ad esempio, presenta 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 di selezione. Se le opzioni sono troppe, gli utenti potrebbero avere difficoltà a utilizzare il widget. In questi casi, valuta la possibilità di suddividere l'opzione in categorie diverse e più widget.
Input di testo
Gli input di testo forniscono agli utenti un punto in cui inserire dati stringa.
- Non utilizzare un input di testo per chiedere all'utente di digitare una delle voci possibili di un insieme specifico. Utilizza invece una selezione a discesa.
- Utilizza suggerimenti e suggerimenti per aiutare l'utente a inserire il testo con il formato e il contenuto 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 sulle funzionalità del componente aggiuntivo.
- Tutti gli aspetti del componente aggiuntivo devono rispettare le linee guida per il branding.
- Non includere le parole "Google", "Gmail" o altri nomi di prodotti Google.
- Non includere le icone dei prodotti Google, anche se sono state modificate.
- Non includere la parola "componente aggiuntivo" nel testo del branding.
- Il testo del branding non deve superare 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.