Styleguide für die Benutzeroberfläche von Google Workspace-Add-ons

Google Workspace-Add-ons sollten mit den Stil und Layout der Hostanwendung erweitern können. Erweitern der Benutzeroberfläche vertraute Steuerelemente und Verhaltensweisen nutzen. Die vorgestellten Richtlinien wie mit Text, Bildern, Steuerelementen und Branding umgegangen wird, User Experience zu schaffen.

Wenn Ihr Add-on separate Webseiten öffnet, die ein wesentlicher Bestandteil des wie etwa eine Einstellungsseite für das Add-on, stellen Sie sicher, dass diese Webseiten auch diesen Stilrichtlinien entsprechen.

Text und Bilder

In diesem Abschnitt erfahren Sie, wie Sie Text und Bilder in Ihrem Add-on richtig verwenden.

Name des Add-ons

Sie müssen den Namen des Add-ons im zugehörigen Projekt festlegen Manifest und wann du Add-on für die Veröffentlichung konfigurieren. Der Name wird an vielen Stellen verwendet, z. B. im Google Workspace Marketplace und in Menüs verwenden können. Beachten Sie bei der Auswahl eines Namens Folgendes:

  • Verwenden Sie die übliche Groß-/Kleinschreibung.
  • Vermeiden Sie Satzzeichen und insbesondere Klammern, sofern sie nicht Teil Ihrer Marke sind.
  • Fassen Sie sich kurz – maximal 15 Zeichen. Lange Namen können automatisch im Google Workspace Marketplace-Eintrag und an anderen Stellen abgeschnitten.
  • Verwenden Sie weder die Begriffe „Google“, „Gmail“ noch die Namen anderer Google-Produkte. in Ihrem Add-on-Namen.
  • Lassen Sie das Wort „Add-on“ weg. in Ihrem Add-on-Namen.
  • Lassen Sie Versionsinformationen weg.

Schreibstil

Sie sollten nicht viel schreiben müssen. Die meisten Maßnahmen sollten durch Symbole, Layout und kurze Labels. Wenn ein Teil des Add-ons ausführlicher erklärt, als es kurze Labels bieten können, eine separate Webseite erstellen, auf der Ihr Add-on beschrieben und verlinkt wird.

Beim Schreiben von UI-Text:

  • Achten Sie auf die korrekte Groß- und Kleinschreibung (insbesondere bei Schaltflächen, Beschriftungen und Kartenaktionen).
  • Bevorzugen Sie kurzen, einfachen Text ohne Fachjargon oder Akronyme.

Universelle und kartenbasierte Aktionen

Bei Verwendung universeller Aktionen oder Kartenaktionen in Ihrem Add-ons werden sie als Menüpunkte in den Karten angezeigt. die Sie definieren. Sie können den Text auswählen, der in diesen Menüs für diese Aktionen. Beachten Sie bei der Auswahl des zu verwendenden Textes Folgendes:

  • Vermeiden Sie Menütext, in dem einfach der Name des Add-ons wiederholt wird.
  • Beginnen Sie jeden Menüpunkt mit einem Aktionswort wie „Ausführen“, „Konfigurieren“ oder „Erstellen“.
  • Beschreiben Sie die Aufgabe, nicht die UI-Komponente, die die Aktion anzeigt.
  • Wenn Ihre Aktion einen Workflow einleitet und es kein einziges Verb gibt, das was sie bewirkt, nennen Sie sie „Start“.
  • Begrenzen Sie die Anzahl der Menüoptionen, um den Nutzer nicht zum Scrollen zu zwingen durch eine umfangreiche Liste. Wenn Sie weitere Maßnahmen implementieren müssen, verwenden Sie Karten mit jeweils unterschiedlichen Aktionen.

Fehlermeldungen

Wenn etwas schiefgeht, ist es wichtig, sich mit einer einfachen Sprache zurechtzufinden. Erläutern Sie die aus Sicht der Nutzenden und schlagen eine Lösung vor.

  • Der Nutzer kann keine Ausnahmen sehen, die von Ihrem Code ausgelöst werden. Stattdessen Verwenden Sie try...catch-Anweisungen, um Ausnahmen abzufangen, und geben Sie dann Folgendes an: eine benutzerfreundliche Fehlermeldung.
  • Prüfen Sie vor der Veröffentlichung, ob vom Add-on Informationen zur Fehlerbehebung angezeigt werden auf der Benutzeroberfläche.

Hilfeinhalte

Sie können Karten entwerfen, die Hilfeinformationen enthalten oder die wie das Add-on funktioniert. Wenn Sie Hilfeinhalte für Ihr -Add-on, denken Sie an Folgendes:

  • Die Anweisungen sollten nach Möglichkeit als Aufzählungszeichen oder nummerierte Listen angezeigt werden. Walk-Nutzer bis zum Endergebnis mit klaren Verweisen auf benannte UI-Elemente.
  • Achten Sie darauf, dass in Ihrer Anleitung alle Anforderungen wie die Einrichtung auf bestimmte Weise in einer Tabellenkalkulation arbeiten.
  • Du kannst auch Links zu externen Hilfeinhalten wie hilfreichen Webseiten einfügen.

Bilder

Die in Ihrem Add-on verwendeten Bilder sind eines der integrierte Symboltypen oder einem öffentlich gehosteten Bild, das durch eine URL angegeben wird. Wenn Sie gehostete Bilder verwenden, Achten Sie darauf, dass sie für alle Nutzer Ihres Add-ons zugänglich sind.

Steuerung

Dieser Abschnitt enthält Richtlinien zur Nutzererfahrung für interaktiven Widgets.

Tasten

Verwenden Sie Schaltflächen, um die Hauptaktionen Ihrer Benutzeroberfläche zu steuern, anderen Widgets.

  • Die meisten Beschriftungen von Textschaltflächen sollten mit einem Verb beginnen.
  • Schaltflächenzeilen sollten in den meisten Fällen auf drei oder weniger Schaltflächen begrenzt sein.

DecoratedText

Dekorierte Text-Widgets können Sie Textinhalte mit Symbolen, Schaltflächen oder Schaltern präsentieren.

  • Verwenden Sie für den Text die korrekte Groß- und Kleinschreibung.
  • Der Text eines dekorierten Text-Widgets wird abgeschnitten, wenn er nicht in das verfügbar ist. Achten Sie deshalb immer darauf, kurz wie möglich.

Auswahleingaben

Sie können eine Vielzahl von Widgets zur Auswahleingabe in Ihrem Add-on: Dropdown-Auswahlfelder, Kontrollkästchen und Optionsfelder.

  • Verwenden Sie Kästchen, wenn Nutzer mehrere Optionen oder keine Option auswählen können. Verwenden Sie Optionsfelder (oder ein Auswahlmenü), wenn genau eine Option ausgewählt werden muss. Verwenden Sie Dropdown-Listen, wenn Sie eine kurze Liste mit Alternativen zur Verfügung stellen, während Sie versuchen, um Platz auf der Benutzeroberfläche zu sparen.
  • Verwenden Sie für den Text, der der jeweiligen Option zugewiesen ist, die im Deutschen übliche Groß- und Kleinschreibung.
  • Vermeiden Sie es, Änderungen an der Auswahl zu verwenden, um wichtige, schwer umkehrbare Aktionen auszulösen. weil Menschen bei der Auswahl oft Fehler machen. Überlegen Sie sich stattdessen, Hinzufügen einer Schaltfläche, die die aktuellen Auswahlwerte liest und dann die Aktion ausführen.
  • Drop-down-Menüs alphabetisch oder nach einem logischen Schema sortieren die alle Nutzer verstehen (z. B. die Wochentage in der richtigen Reihenfolge, also ab Sonntag oder Montag).
  • Anzahl der Optionen in einer bestimmten Auswahl beschränken auf einen angemessenen Wert. Wenn es zu viele Optionen gibt, können Nutzende die Nutzung des Widgets erschwert. In diesen Fällen sollten Sie die Option in verschiedene Kategorien und mehrere Widgets unterteilen.

Texteingaben

Texteingaben bieten Nutzern die Möglichkeit, Stringdaten einzugeben.

  • Verwenden Sie keine Texteingabe, damit Nutzer mögliche Einträge. Verwenden Sie stattdessen eine Drop-down-Auswahl.
  • Verwenden Sie Hinweise und Vorschläge, damit Nutzende Text mit der richtigen Format und Inhalt.
  • Mehrzeilige Texteingaben verwenden, wenn der einzugebende Text mehr als ein paar Zeilen umfasst Wörter.

Branding

Dieser Abschnitt enthält Richtlinien für die Nutzererfahrung zum Hinzufügen von Markenelementen. auf die Add-on-Oberfläche.

Im Add-on

Wenn Sie die Benutzeroberfläche Ihres Add-ons mit Branding versehen möchten, halten Sie sie kurz und leicht. So können sich Nutzer besser auf die Add-on-Funktionalität konzentrieren.

  • Alle Aspekte des Add-ons müssen den Branding-Richtlinien.
  • Geben Sie weder „Google“ noch „Gmail“ oder die Namen anderer Google-Produkte an.
  • Verwenden Sie keine Google-Produktsymbole, auch wenn diese verändert wurden.
  • Lassen Sie das Wort „Add-on“ weg. in deinem Markentext.
  • Der Markentext sollte nur ein paar Wörter umfassen.

Im Google Workspace Marketplace

Wenn Sie Ihr Add-on für die Veröffentlichung konfigurieren, stellen Sie eine Reihe von Grafik- und Text-Assets bereit, um Google Workspace Marketplace-Eintrag.

Alle Aspekte deines Store-Eintrags und diese Assets müssen den Branding-Richtlinien.