I Componenti aggiuntivi di Google Workspace devono essere coerenti con lo stile e il layout applicazione host si estendono. Dovrebbe estendere l'UI in modo naturale usando controlli e comportamenti familiari. Le linee guida presentate descrivono i metodi di gestione di 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 operativa (ad esempio, una pagina di impostazioni per il componente aggiuntivo), verifica che le pagine web segui queste linee guida di stile.
Testo e immagini
Questa sezione spiega come utilizzare correttamente testo e immagini nel componente aggiuntivo.
Nome componente aggiuntivo
Devi impostare il nome del componente aggiuntivo nel relativo progetto manifest e quando configurare il componente aggiuntivo per la pubblicazione. Il nome compare in molti posti, ad esempio in Google Workspace Marketplace elenco e all'interno dei menu. Quando scegli un nome:
- Usa le iniziali maiuscole.
- Evita la punteggiatura, in particolare le parentesi, a meno che non facciano parte del tuo brand.
- Deve essere breve: il numero massimo di caratteri è 15. I nomi lunghi possono essere troncati automaticamente nell'elenco di Google Workspace Marketplace e altrove.
- Non includere le parole "Google", "Gmail" o i nomi di altri prodotti Google nel nome del componente aggiuntivo.
- Non includere la parola "componente aggiuntivo". nel nome del componente aggiuntivo.
- Non inserire le informazioni sulla versione.
Stile di scrittura
Non dovrebbe essere necessario scrivere molto. La maggior parte delle azioni dovrebbe essere chiarita iconografia, layout ed etichette brevi. Se trovi una parte del componente aggiuntivo una spiegazione più esaustiva di quella fornita dalle etichette brevi, è la creare una pagina web separata con la descrizione del componente aggiuntivo e un link al componente aggiuntivo.
Durante la scrittura del testo dell'interfaccia utente:
- Usa la maiuscola a inizio frase (soprattutto per pulsanti, etichette e azioni nelle schede).
- Preferisco un testo breve e semplice senza gergo o acronimi.
Azioni universali e delle schede
Se utilizzi le azioni universali o azioni delle schede nelle tue vengono visualizzati come voci di menu nelle schede. che definisci. Puoi scegliere il testo da utilizzare in questi menu per queste opzioni azioni. Quando scegli il testo da utilizzare:
- Evita di usare testo del menu che ripete semplicemente il nome del componente aggiuntivo.
- Inizia ogni voce di menu con una parola, ad esempio "Esegui", "Configura" "Crea".
- Descrivi l'attività, non il componente dell'interfaccia utente che mostra l'azione.
- Se l'azione avvia un flusso di lavoro e non esiste un solo verbo che descriva quello che fa, chiamalo "Start".
- Mantieni ridotto il numero di voci di menu per evitare di obbligare l'utente a scorrere in un lungo elenco. Se hai altre azioni da implementare, valuta la possibilità di utilizzare su più schede con azioni diverse.
Messaggi di errore
Quando si verifica un problema, è importante utilizzare un linguaggio semplice. Spiega la problema dal punto di vista dell'utente e suggerisci come risolverlo.
- Non consentire all'utente di vedere eventuali eccezioni generate dal codice. Invece,
utilizza le istruzioni
try...catchper intercettare le eccezioni, quindi visualizza un messaggio di errore facile da usare. - Prima di pubblicarlo, verifica che il componente aggiuntivo non mostri informazioni di debug nell'interfaccia utente.
Contenuti Help
Potresti voler progettare schede che mostrino informazioni di assistenza o spieghino il funzionamento del componente aggiuntivo all'utente. Se crei contenuti utili per i tuoi il componente aggiuntivo, ricordati di:
- Se possibile, mostra le istruzioni sotto forma di elenco puntato o numerato. Utenti con camminata fino al risultato finale, con chiari riferimenti agli elementi UI denominati.
- Assicurati che le istruzioni spieghino chiaramente eventuali requisiti, ad esempio la configurazione un foglio di lavoro in un certo modo.
- Puoi inserire link a contenuti di supporto esterni, come le pagine web di supporto.
Immagini
Le immagini utilizzate nel componente aggiuntivo fanno parte tipi di icone integrate oppure un'immagine ospitata pubblicamente specificata da un URL. Quando utilizzi immagini ospitate, assicurati che siano accessibili a tutti gli utenti che possono utilizzare il tuo componente aggiuntivo.
Controlli
Questa sezione fornisce linee guida sull'esperienza utente per 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 un massimo di tre pulsanti.
DecoratedText
Widget DecoratedText ti consentono di presentare contenuti testuali con icone, pulsanti o sensori.
- Usa la maiuscola a inizio frase per i contenuti testuali.
- Il testo di un widget DecorText è troncato se non può essere inserito nel di spazio disponibile. Per questo motivo, cerca sempre di mantenere i contenuti testuali il più possibile.
Input di selezione
Puoi utilizzare vari 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 le persone possono selezionare più opzioni o nessuna opzione. Utilizza i pulsanti di opzione (o un menu di selezione) quando è necessario selezionare una sola opzione. Usa i menu a discesa quando fornisci un breve elenco di alternative mentre cerchi di risparmiare spazio nella UI.
- Usa la maiuscola a inizio frase per il testo assegnato a ciascuna opzione.
- Evita di utilizzare le modifiche alla selezione per attivare azioni importanti e difficili da annullare. perché spesso le persone commettono errori quando effettuano una selezione. Considera invece aggiungendo un pulsante che legga i valori della selezione corrente e che 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 il numero di opzioni in un determinato input di selezione widget a un numero ragionevole. Se sono disponibili troppe opzioni, gli utenti potrebbero trovare difficile usare il widget. In questi casi, valuta la possibilità di infrangere l'opzione in diverse categorie e widget.
Input di testo
Gli input di testo consentono agli utenti di inserire dati di stringa.
- Non utilizzare un input di testo per inserire l'utente come uno di un insieme specifico di le voci più possibili. Utilizza invece un menu a discesa.
- Utilizza suggerimenti per aiutare l'utente a inserire il testo corretto formato e contenuti.
- Utilizza input di testo su più righe se il testo da inserire è superiore parole.
Branding
Questa sezione fornisce linee guida relative all'esperienza utente per l'aggiunta di elementi distintivi del brand all'interfaccia del componente aggiuntivo.
Nel tuo componente aggiuntivo
Se vuoi includere il branding nell'interfaccia utente del componente aggiuntivo, usa un testo 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 la parola "Google", "Gmail" o i nomi di altri prodotti Google.
- Non includere le icone dei prodotti Google, anche se sono state alterate.
- Non includere la parola "componente aggiuntivo". nel testo del brand.
- Il testo per il branding non dovrebbe contenere più di poche parole.
In Google Workspace Marketplace
Quando configuri il componente aggiuntivo per la pubblicazione, fornisci una serie di risorse grafiche e di testo per creare Scheda di Google Workspace Marketplace.
Tutti gli aspetti della scheda dello Store e queste risorse devono rispettare le linee guida per il branding.