UI-Styleguide für Google Workspace-Add-ons

Google Workspace-Add-ons sollten mit dem Stil und Layout der Host anwendung übereinstimmen, die sie erweitern. Sie sollten die Benutzeroberfläche auf natürliche Weise erweitern, indem sie vertraute Steuerelemente und Verhaltensweisen verwenden. Die hier aufgeführten Richtlinien beschreiben Möglichkeiten, mit Text, Bildern, Steuerelementen und Branding umzugehen, um eine hohe Nutzerfreundlichkeit zu fördern.

Wenn Ihr Add-on separate Webseiten öffnet, die ein integraler Bestandteil des Betriebs des Add-ons sind (z. B. eine Einstellungsseite für das Add-on), müssen diese Webseiten ebenfalls diesen Stilrichtlinien entsprechen.

Text und Bilder

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

Add-on-Name

Sie müssen den Namen Ihres Add-ons im Manifest des Projekts festlegen und bei der Konfiguration des Add-ons für die Veröffentlichung. Der Name wird an vielen Stellen angezeigt, z. B. im Google Workspace Marketplace Eintrag und in Menüs. Bei der Auswahl eines Namens:

  • Verwenden Sie die korrekte Groß- und Kleinschreibung.
  • Vermeiden Sie Satzzeichen, insbesondere Klammern, es sei denn, sie sind Teil Ihrer Marke.
  • Halten Sie den Namen kurz – 15 Zeichen oder weniger sind am besten. Lange Namen werden im Google Workspace Marketplace-Eintrag und an anderen Stellen möglicherweise automatisch abgeschnitten.
  • Verwenden Sie im Namen Ihres Add-ons nicht die Wörter „Google“, „Gmail“ oder andere Google-Produktnamen.
  • Verwenden Sie im Namen Ihres Add-ons nicht das Wort „Add-on“.
  • Lassen Sie Versionsinformationen weg.

Schreibstil

Sie sollten nicht viel schreiben müssen. Die meisten Aktionen sollten durch Symbole, Layout und kurze Labels deutlich gemacht werden. Wenn Sie feststellen, dass ein Teil Ihres Add-ons eine ausführlichere Erklärung erfordert, als kurze Labels bieten können, ist es empfehlenswert, eine separate Webseite zu erstellen, auf der Ihr Add-on beschrieben wird, und darauf zu verlinken.

Beim Schreiben von UI-Text:

  • Verwenden Sie die korrekte Groß- und Kleinschreibung (insbesondere für Schaltflächen, Labels und Kartenaktionen).
  • Verwenden Sie kurze, klare Texte ohne Fachbegriffe oder Akronyme.

Universelle und Kartenaktionen

Wenn Sie universelle Aktionen oder Kartenaktionen in Ihrem Add-on verwenden, werden sie als Menüelemente in den von Ihnen definierten Karten angezeigt. Sie können den Text auswählen, der in diesen Menüs für diese Aktionen verwendet wird. Bei der Auswahl des zu verwendenden Texts:

  • Vermeiden Sie Menütext, der den Namen Ihres Add-ons wiederholt.
  • Beginnen Sie jedes Menüelement mit einem Aktionswort wie „Ausführen“, „Konfigurieren“ oder „Erstellen“.
  • Beschreiben Sie die Aufgabe, nicht die UI-Komponente, die durch die Aktion angezeigt wird.
  • Wenn Ihre Aktion einen Workflow startet und es kein einzelnes Verb gibt, das die Funktion beschreibt, nennen Sie sie „Starten“.
  • Halten Sie die Anzahl der Menüelemente gering, damit der Nutzer nicht durch eine lange Liste scrollen muss. Wenn Sie weitere Aktionen implementieren möchten, können Sie mehrere Karten mit unterschiedlichen Aktionen auf jeder Karte verwenden.

Fehlermeldungen

Wenn etwas schiefgeht, ist es wichtig, eine einfache Sprache zu verwenden. Erklären Sie das Problem aus der Sicht des Nutzers und schlagen Sie vor, wie es behoben werden kann.

  • Der Nutzer sollte keine Ausnahmen sehen, die von Ihrem Code ausgelöst werden. Verwenden Sie stattdessen try...catch-Anweisungen, um Ausnahmen abzufangen, und zeigen Sie dann eine nutzerfreundliche Fehlermeldung an.
  • Prüfen Sie vor der Veröffentlichung, ob Ihr Add-on keine Debug-Informationen auf der Benutzeroberfläche anzeigt.

Hilfeinhalte

Möglicherweise möchten oder müssen Sie Karten entwerfen, auf denen Hilfeinformationen angezeigt werden oder die Funktionsweise des Add-ons für den Nutzer erklärt wird. Wenn Sie Hilfeinhalte für Ihr Add-on erstellen, beachten Sie Folgendes:

  • Zeigen Sie Anleitungen nach Möglichkeit in einer Aufzählungsliste oder nummerierten Liste an. Führen Sie Nutzer bis zum Endergebnis und verweisen Sie dabei deutlich auf benannte UI-Elemente.
  • Achten Sie darauf, dass in der Anleitung alle Anforderungen klar erklärt werden, z. B. wie eine Tabelle eingerichtet werden muss.
  • Sie können auf externe Hilfeinhalte wie unterstützende Webseiten verlinken.

Bilder

Bei Bildern, die in Ihrem Add-on verwendet werden, handelt es sich entweder um einen der integrierten Symboltypen oder um ein öffentlich gehostetes Bild, das durch eine URL angegeben wird. Wenn Sie gehostete Bilder verwenden, müssen sie für alle Nutzer Ihres Add-ons zugänglich sein.

Steuerelemente

In diesem Abschnitt finden Sie Richtlinien zur Nutzerfreundlichkeit für interaktive Widgets.

Schaltflächen

Verwenden Sie Schaltflächen, um die Hauptaktionen der Benutzeroberfläche zu steuern, nicht andere Widgets.

  • Die meisten Labels für Textschaltflächen sollten mit einem Verb beginnen.
  • Schaltflächenreihen sollten in den meisten Fällen auf drei oder weniger Schaltflächen beschränkt sein.

DecoratedText

DecoratedText-Widgets ermöglichen es Ihnen, Textinhalte mit Symbolen, Schaltflächen oder Schaltern zu präsentieren.

  • Verwenden Sie die korrekte Groß- und Kleinschreibung für den Textinhalt.
  • Der Text eines DecoratedText-Widgets wird abgeschnitten, wenn er nicht in den verfügbaren Platz passt. Versuchen Sie daher immer, den Textinhalt so kurz wie möglich zu halten.

Auswahleingaben

Sie können in Ihrem Add-on verschiedene Widgets für Auswahleingaben verwenden: Drop-down-Auswahlfelder, Kä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 Drop-down-Menüs, wenn Sie eine kurze Liste mit Alternativen anbieten und gleichzeitig Platz auf der Benutzeroberfläche sparen möchten.
  • Verwenden Sie die korrekte Groß- und Kleinschreibung für den Text, der jeder Option zugewiesen ist.
  • Vermeiden Sie es, durch Änderungen der Auswahl größere Aktionen auszulösen, die nicht rückgängig gemacht werden können, da Nutzer bei der Auswahl häufig Fehler machen. Fügen Sie stattdessen eine Schaltfläche hinzu, die die aktuellen Auswahlwerte liest und dann die Aktion auslöst.
  • Sortieren Sie die Optionen in Drop-down-Menüs alphabetisch oder nach einem logischen Schema, das alle Nutzer verstehen können (z. B. die Wochentage in der richtigen Reihenfolge, beginnend mit Sonntag oder Montag).
  • Beschränken Sie die Anzahl der Optionen in einem bestimmten Widget für Auswahleingaben auf eine angemessene Anzahl. Wenn es zu viele Optionen gibt, kann es für Nutzer schwierig sein, das Widget zu verwenden. In solchen Fällen können Sie die Optionen in verschiedene Kategorien und mehrere Widgets aufteilen.

Texteingaben

Texteingaben bieten Nutzern die Möglichkeit, Stringdaten einzugeben.

  • Verwenden Sie keine Texteingabe, um den Nutzer zu zwingen, einen Eintrag aus einer bestimmten Menge möglicher Einträge einzugeben. Verwenden Sie stattdessen eine Drop-down-Auswahl.
  • Verwenden Sie Hinweise und Vorschläge, um dem Nutzer zu helfen, Text im richtigen Format und mit dem richtigen Inhalt einzugeben.
  • Verwenden Sie mehrzeilige Texteingaben, wenn der einzugebende Text mehr als ein paar Wörter umfasst.

Branding

In diesem Abschnitt finden Sie Richtlinien zur Nutzerfreundlichkeit für das Hinzufügen von Branding-Elementen zur Benutzeroberfläche Ihres Add-ons.

In Ihrem Add-on

Wenn Sie Branding in die Benutzeroberfläche Ihres Add-ons einfügen möchten, halten Sie es kurz und dezent. So können sich Nutzer auf die Funktionen Ihres Add-ons konzentrieren.

  • Alle Aspekte Ihres Add-ons müssen den Branding-Richtlinien entsprechen.
  • Verwenden Sie nicht die Wörter „Google“, „Gmail“ oder andere Google-Produktnamen.
  • Verwenden Sie keine Google-Produktsymbole, auch wenn sie geändert wurden.
  • Verwenden Sie im Branding-Text nicht das Wort „Add-on“.
  • Branding-Text sollte nicht länger als ein paar Wörter sein.

Im Google Workspace Marketplace

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

Alle Aspekte Ihres Store-Eintrags und dieser Assets müssen den Branding Richtlinien entsprechen.