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

Google Workspace-Add-ons sollten mit dem Stil und dem Layout der Hostanwendung übereinstimmen, die sie erweitern. Sie sollten die Benutzeroberfläche natürlich mithilfe vertrauter Steuerelemente und Verhaltensweisen erweitern. In den hier aufgeführten Richtlinien werden Möglichkeiten für den Umgang mit Text, Bildern, Steuerelementen und Branding beschrieben, die eine hochwertige Nutzererfahrung fördern.

Wenn durch Ihr Add-on separate Webseiten geöffnet werden, die wesentlicher Bestandteil des Add-ons sind (z. B. eine Einstellungsseite für das Add-on), müssen 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.

Add-on-Name

Sie müssen den Namen des Add-ons im zugehörigen Manifest des Projekts und bei der Konfiguration des Add-ons für die Veröffentlichung festlegen. Der Name erscheint an vielen Stellen, z. B. im Eintrag Google Workspace Marketplace und in Menüs. Beachten Sie bei der Wahl des Namens Folgendes:

  • Achten Sie auf die korrekte Groß- und Kleinschreibung.
  • Vermeiden Sie Satzzeichen, insbesondere Klammern, sofern sie nicht zu Ihrem Unternehmen gehören.
  • Fasse dich kurz – am besten 15 Zeichen oder weniger. Lange Namen werden im Google Workspace Marketplace-Eintrag und an anderen Stellen automatisch abgeschnitten.
  • Der Add-on-Name darf nicht die Wörter „Google“, „Gmail“ oder andere Google-Produktnamen enthalten.
  • Verwenden Sie nicht das Wort „Add-on“ im Namen des Add-ons.
  • Lassen Sie die Versionsinformationen weg.

Schreibstil

Sie müssen nicht viel schreiben. Die meisten Aktionen sollten durch Symbole, Layouts und kurze Beschriftungen verdeutlicht werden. Wenn Sie feststellen, dass ein Teil Ihres Add-ons ausführlicher erklärt werden muss, als es mit kurzen Labels möglich ist, empfiehlt es sich, eine separate Webseite zu erstellen, die das Add-on beschreibt, und einen Link zu ihm zu erstellen.

Beim Schreiben von UI-Text:

  • Verwenden Sie die im Deutschen übliche Groß- und Kleinschreibung (insbesondere bei Schaltflächen, Labels und Kartenaktionen).
  • Ich bevorzuge einen kurzen, einfachen Text ohne Fachjargon oder Akronyme.

Universelle und Kartenaktionen

Wenn Sie in Ihrem Add-on universelle Aktionen oder Kartenaktionen verwenden, werden sie als Menüelemente in den Karten angezeigt, die Sie definieren. Sie können den Text auswählen, der in diesen Menüs für diese Aktionen verwendet wird. Beachten Sie bei der Auswahl des zu verwendenden Textes Folgendes:

  • Vermeiden Sie Menütext, in dem lediglich der Name Ihres Add-ons wiederholt wird.
  • Beginnen Sie jedes Menüelement mit einem Aktionswort wie „Ausführen“, „Konfigurieren“ oder „Erstellen“.
  • Beschreiben Sie die Aufgabe, nicht die UI-Komponente, die von der Aktion angezeigt wird.
  • Wenn durch Ihre Aktion ein Workflow gestartet wird und es kein einzelnes Verb gibt, das die Funktion beschreibt, nennen Sie sie „Start“.
  • Begrenzen Sie die Anzahl der Menüelemente, damit der Nutzer nicht durch eine große Liste scrollen muss. Wenn Sie weitere Aktionen implementieren möchten, sollten Sie mehrere Karten mit jeweils unterschiedlichen Aktionen verwenden.

Fehlermeldungen

Wenn etwas schiefgeht, ist es wichtig, einfache Formulierungen zu verwenden. Erklären Sie das Problem aus Sicht der Nutzenden 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 zeigen Sie dann eine nutzerfreundliche Fehlermeldung an.
  • Achten Sie vor der Veröffentlichung darauf, dass das Add-on keine Debug-Informationen in der UI anzeigt.

Hilfeinhalte

Sie können Karten entwerfen, auf denen Hilfeinformationen angezeigt oder die Verwendung des Add-ons dem Nutzer erklärt wird. Wenn Sie Hilfeinhalte für Ihr Add-on erstellen, denken Sie an Folgendes:

  • Zeigen Sie die Anleitung nach Möglichkeit als Aufzählung oder nummerierte Liste. Gehen Sie die Nutzer bis zum Endergebnis mit eindeutigen Verweisen auf benannte UI-Elemente vor.
  • Achten Sie darauf, dass in Ihrer Anleitung alle Anforderungen, z. B. das Einrichten einer Tabelle, klar erläutert werden.
  • Sie können gerne externe Hilfeinhalte wie unterstützende Webseiten verlinken.

Bilder

Die in Ihrem Add-on verwendeten Bilder sind entweder eines der integrierten Symboltypen oder ein öffentlich gehostetes Bild, das über eine URL angegeben wird. Achten Sie bei der Verwendung gehosteter Images darauf, dass jeder, der Ihr Add-on verwenden kann, darauf zugreifen kann.

Steuerung

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

Schaltflächen

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

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

Verzierter Text

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

  • Verwenden Sie für den Textinhalt die im Deutschen übliche Groß- und Kleinschreibung.
  • Der Text eines dekoriertenText-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.

Eingabefelder für Auswahl

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

  • Verwenden Sie Kontrollkästchen, wenn Nutzer mehrere oder gar keine Optionen 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 von Alternativen bereitstellen und versuchen, Platz in der UI zu sparen.
  • Verwenden Sie für den Text, der jeder Option zugewiesen ist, die im Deutschen übliche Groß- und Kleinschreibung.
  • Vermeiden Sie es, Auswahländerungen zu verwenden, um größere Aktionen auszulösen, die sich nur schwer rückgängig machen lassen, da Menschen bei der Auswahl oft Fehler machen. Fügen Sie stattdessen eine Schaltfläche hinzu, die die aktuellen Auswahlwerte liest und dann die Aktion auslöst.
  • Sortieren Sie bei Drop-down-Menüs die Optionen alphabetisch oder nach einem logischen Schema, das alle Nutzer verstehen können (z. B. die Wochentage in der richtigen Reihenfolge anzeigen, beginnend mit Sonntag oder Montag).
  • Beschränken Sie die Anzahl der Optionen in einem bestimmten Auswahleingabe-Widget auf eine angemessene Anzahl. Wenn es zu viele Optionen gibt, kann das die Nutzung des Widgets erschweren. 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 der Nutzer einen bestimmten Satz möglicher Einträge eingeben kann. Verwenden Sie stattdessen eine Drop-down-Auswahl.
  • Verwenden Sie Hinweise und Vorschläge, um dem Nutzer zu helfen, Text mit dem richtigen Format und Inhalt einzugeben.
  • Verwenden Sie mehrzeilige Texteingaben, wenn der eingegebene Text aus mehr als wenigen Wörtern besteht.

Branding

In diesem Abschnitt finden Sie Richtlinien zur Nutzererfahrung beim Hinzufügen von Markenelementen zu Ihrer Add-on-Oberfläche.

Im Add-on

Wenn Sie Branding in Ihrer Add-on-Benutzeroberfläche verwenden möchten, halten Sie sich kurz und bündig. So können sich Nutzer auf Ihre Add-on-Funktionen konzentrieren.

  • Alle Aspekte Ihres Add-ons müssen den Branding-Richtlinien entsprechen.
  • Verwenden Sie weder „Google“ noch „Gmail“ oder Namen anderer Google-Produkte.
  • Verwenden Sie keine Google-Produktsymbole, auch wenn sie geändert wurden.
  • Der Markentext sollte nicht das Wort „Add-on“ enthalten.
  • Der Markentext 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 Grafik- und Text-Assets für den Google Workspace Marketplace-Eintrag bereit.

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