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

Google Workspace-Add-ons sollten dem Stil und Layout der Hostanwendung entsprechen, die sie erweitern. Die Benutzeroberfläche sollte durch vertraute Steuerelemente und Verhaltensweisen natürlich erweitert werden. In den folgenden Richtlinien wird beschrieben, wie Sie Text, Bilder, Steuerelemente und Branding verwenden können, um eine hohe Nutzerfreundlichkeit zu gewährleisten.

Wenn Ihr Add-on separate Webseiten öffnet, die ein wesentlicher Bestandteil der Funktionsweise des Add-ons sind (z. B. eine Einstellungsseite für das Add-on), müssen auch diese Webseiten 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 Manifest des Projekts und beim Konfigurieren des Add-ons für die Veröffentlichung festlegen. Der Name wird an vielen Stellen angezeigt, z. B. im Google Workspace Marketplace-Eintrag und in Menüs. Beachten Sie bei der Namenswahl Folgendes:

  • Verwenden Sie Großbuchstaben am Wortanfang.
  • Vermeiden Sie Satzzeichen, insbesondere Klammern, es sei denn, sie sind Teil Ihrer Marke.
  • Die URL sollte kurz sein – maximal 15 Zeichen. Lange Namen werden im Google Workspace Marketplace-Eintrag und an anderer Stelle möglicherweise automatisch abgeschnitten.
  • Verwenden Sie in Ihrem Add-on-Namen weder die Wörter „Google“ oder „Gmail“ noch andere Google-Produktnamen.
  • Fügen Sie dem Namen des Add-ons nicht das Wort „Add-on“ hinzu.
  • Lassen Sie Versionsinformationen weg.

Schreibstil

Sie sollten nicht viel schreiben müssen. Die meisten Aktionen sollten durch Ikonografie, Layout und kurze Labels klar erkennbar sein. Wenn ein Teil Ihres Add-ons eine ausführlichere Erklärung erfordert, als kurze Labels bieten können, sollten Sie eine separate Webseite mit einer Beschreibung Ihres Add-ons erstellen und einen Link dazu hinzufügen.

Beachten Sie beim Verfassen von UI-Text Folgendes:

  • Verwenden Sie Satzzeichen (insbesondere für Schaltflächen, Labels und Kartenaktionen).
  • Verwenden Sie kurzen, einfachen Text ohne Fachjargon oder Akronyme.

Universal- und Kartenaktionen

Wenn Sie in Ihrem Add-on universelle Aktionen oder Kartenaktionen verwenden, werden diese als Menüpunkte 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. Beachten Sie bei der Auswahl des Texts Folgendes:

  • Vermeiden Sie Menütext, der einfach nur den Namen Ihres Add-ons wiederholt.
  • Beginnen Sie jeden Menüpunkt mit einem Verb 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 beginnt und es kein einzelnes Verb gibt, das ihre Funktion beschreibt, nennen Sie sie „Starten“.
  • Begrenzen Sie die Anzahl der Menüpunkte, damit Nutzer nicht durch eine lange Liste scrollen müssen. Wenn Sie weitere Aktionen implementieren möchten, können Sie mehrere Karten mit unterschiedlichen Aktionen verwenden.

Fehlermeldungen

Wenn ein Fehler auftritt, ist es wichtig, einfache Sprache zu verwenden. Erläutern Sie das Problem aus der Sicht des Nutzers und schlagen Sie vor, wie es behoben werden kann.

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

Hilfeinhalte

Sie können Karten entwerfen, auf denen Hilfeinformationen angezeigt werden oder die den Nutzern die Funktionsweise des Add-ons erklären. Wenn Sie Hilfeartikel für Ihr Add-on erstellen, beachten Sie Folgendes:

  • Geben Sie die Anleitung nach Möglichkeit in einer Aufzählungs- oder Nummerierungsliste an. Führen Sie die Nutzer durch das Endergebnis mit klaren Verweisen auf benannte UI-Elemente.
  • Erläutern Sie in Ihren Anleitungen alle Anforderungen, z. B. die Einrichtung einer Tabelle auf eine bestimmte Weise.
  • Sie können auch Links zu externen Hilfeinhalten wie unterstützenden Webseiten einfügen.

Images

Die in Ihrem Add-on verwendeten Bilder müssen entweder zu den vordefinierten Symboltypen gehören oder ein öffentlich gehostetes Bild sein, das über eine URL angegeben wird. Achten Sie bei der Verwendung gehosteter Bilder darauf, dass sie für alle Nutzer zugänglich sind, die Ihr Add-on verwenden können.

Steuerung

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

Tasten

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

  • Die meisten Schaltflächenlabels sollten mit einem Verb beginnen.
  • Schaltflächenzeilen sollten in den meisten Fällen auf drei Schaltflächen oder weniger beschränkt sein.

DecoratedText

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

  • Achten Sie auf korrekte Groß- und Kleinschreibung.
  • Der Text eines DecoratedText-Widgets wird abgeschnitten, wenn er nicht in den verfügbaren Bereich passt. Versuchen Sie daher, den Text so kurz wie möglich zu halten.

Auswahleingaben

Sie können in Ihrem Add-on verschiedene Widgets für die Auswahl verwenden: Drop-down-Menüs, Kästchen und Optionsfelder.

  • Verwenden Sie Kästchen, wenn Nutzer mehrere Optionen oder gar keine Option auswählen können. Verwenden Sie Optionsfelder (oder ein Auswahlmenü), wenn genau eine Option ausgewählt werden muss. Verwenden Sie Drop-down-Listen, wenn Sie eine kurze Liste von Alternativen zur Verfügung stellen und gleichzeitig Platz auf der Benutzeroberfläche sparen möchten.
  • Verwenden Sie für den Text, der den einzelnen Optionen zugewiesen ist, korrekte Groß- und Kleinschreibung.
  • Vermeiden Sie es, Auswahländerungen zu verwenden, um wichtige, nur schwer umkehrbare Aktionen auszulösen, 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 Reihenfolge von Sonntag oder Montag).
  • Begrenzen Sie die Anzahl der Optionen in einem bestimmten Auswahleingabe-Widget auf eine angemessene Anzahl. Wenn es zu viele Optionen gibt, fällt es Nutzern möglicherweise schwer, das Widget zu verwenden. 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 Textfelder, um Nutzer dazu zu bringen, einen bestimmten Eintrag einzugeben. Verwenden Sie stattdessen ein Drop-down-Menü.
  • Verwenden Sie Hinweise und Vorschläge, um den Nutzern zu helfen, Text im richtigen Format und mit dem richtigen Inhalt einzugeben.
  • Verwenden Sie mehrzeilige Textfelder, wenn der eingegebene Text mehr als ein paar Wörter umfasst.

Branding

In diesem Abschnitt finden Sie Richtlinien für die Nutzerfreundlichkeit, wenn Sie Ihrer Add-on-Benutzeroberfläche Branding-Elemente hinzufügen.

In Ihrem Add-on

Wenn Sie Branding in die Add-on-Benutzeroberfläche einbinden möchten, halten Sie es kurz und unauffällig. So können sich Nutzer auf die Funktionen Ihres Add-ons konzentrieren.

  • Alle Aspekte Ihres Add-ons müssen den Markenrichtlinien entsprechen.
  • Fügen Sie keine Wörter wie „Google“, „Gmail“ oder andere Google-Produktnamen hinzu.
  • Verwenden Sie keine Google-Produktsymbole, auch wenn sie verändert wurden.
  • Der Branding-Text darf das Wort „Add-on“ nicht enthalten.
  • Der Branding-Text sollte nur aus wenigen Wörtern bestehen.

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 den Eintrag im Google Workspace Marketplace zu erstellen.

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