Guida di stile dell'interfaccia utente per i componenti aggiuntivi di Google Workspace

I componenti aggiuntivi di Google Workspace devono essere coerenti con lo stile e il layout dell'applicazione host che estendono. Dovrebbe estendere l'interfaccia utente in modo naturale utilizzando controlli e comportamenti familiari. Le linee guida presentate qui descrivono le modalità 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 delle operazioni del componente aggiuntivo (ad esempio, una pagina di impostazioni per il componente aggiuntivo), assicurati che anche queste pagine web seguano 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 manifest di progetto e quando configuri il componente aggiuntivo per la pubblicazione. Il nome compare in molte posizioni, ad esempio nella scheda di Google Workspace Marketplace e all'interno dei menu. Quando scegli un nome:

  • Utilizza le iniziali maiuscole.
  • Evita la punteggiatura, in particolare le parentesi, a meno che non facciano parte del tuo brand.
  • Scrivi un testo breve: la scelta ideale è di 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 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 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 e azioni delle schede).
  • Prediligi testi brevi e semplici senza espressioni gergali o acronimi.

Azioni universali e delle schede

Se utilizzi le azioni universali o le azioni delle schede nel componente aggiuntivo, vengono visualizzate come voci di menu nelle schede che definisci. Puoi scegliere il testo da utilizzare in questi menu per queste azioni. Quando scegli il testo da utilizzare:

  • Evita testi del menu che ripetano semplicemente il nome del componente aggiuntivo.
  • Avvia ogni elemento del menu con una parola di azione come "Esegui", "Configura" o "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 singolo verbo che ne descriva la funzione, chiamala "Inizio".
  • Riduci 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, valuta l'utilizzo di 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 eventuali eccezioni generate dal codice. Utilizza invece le istruzioni try...catch per intercettare le eccezioni e mostra un messaggio di errore facile da usare.
  • Prima della pubblicazione, 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 che spieghino all'utente il funzionamento del componente aggiuntivo. Se realizzi contenuti di assistenza per il componente aggiuntivo, ricordati di:

  • 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 un 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 possono utilizzare il componente aggiuntivo.

Controlli

Questa sezione fornisce linee guida sull'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 dovrebbe iniziare con un verbo.
  • Nella maggior parte dei casi, le righe dei pulsanti devono essere limitate a tre o meno pulsanti.

Testo decorato

I widget DecoratedText ti consentono di presentare contenuti testuali con icone, pulsanti o sensori.

  • Utilizza la maiuscola per i contenuti del testo.
  • Il testo di un widget decoratoText viene troncato se non riesce a rientrare nello spazio disponibile. Per questo motivo, cerca sempre di mantenere il più breve possibile i contenuti testuali.

Input di selezione

Nel componente aggiuntivo puoi utilizzare una serie di widget di input per la selezione: 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 mentre cerchi di risparmiare spazio nell'interfaccia utente.
  • Utilizza la maiuscola a inizio frase per il testo assegnato a ogni opzione.
  • Evita di utilizzare modifiche di selezione per attivare azioni importanti e difficili da annullare, perché spesso le persone commettono errori durante le selezioni. Puoi invece aggiungere un pulsante che legga i valori della selezione corrente 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 in ordine i giorni della settimana, a partire da domenica o lunedì.
  • Limita a un numero ragionevole il numero di opzioni in un determinato widget di input di selezione. Se ci sono troppe opzioni, gli utenti potrebbero avere difficoltà a usare il widget. In questi casi, valuta la possibilità di suddividere l'opzione in diverse categorie e in più widget.

Input di testo

Gli input di testo consentono agli utenti di inserire i dati delle stringhe.

  • Non utilizzare un input di testo per rendere il tipo di utente una di un insieme specifico di possibili voci. Utilizza una selezione a discesa.
  • Utilizza consigli e suggerimenti per aiutare l'utente a inserire testo con il formato e i contenuti corretti.
  • Utilizza input di testo su più righe se il testo da inserire contiene più di poche parole.

Branding

Questa sezione fornisce linee guida per l'esperienza utente relative all'aggiunta di elementi distintivi del brand all'interfaccia del componente aggiuntivo.

Nel componente aggiuntivo

Se vuoi includere il branding nell'interfaccia utente del componente aggiuntivo, scegli un linguaggio breve e leggero. Ciò consente agli utenti di concentrarsi sulla 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 vengono modificate.
  • Non includere la parola "componente aggiuntivo" nel testo del branding.
  • Il testo del branding non deve 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 la scheda di Google Workspace Marketplace.

Tutti gli aspetti della tua scheda dello Store e questi asset devono rispettare le linee guida per il branding.