UI-Styleguide für Editor-Add-ons

Mit Editor-Add-ons können Sie Benutzeroberflächen (Menüs, Seitenleisten und Dialogfelder) mit dem HTML-Dienst von Apps Script erstellen. Da die Oberflächen in HTML und CSS entwickelt werden, sind sie in hohem Maße anpassbar. Beim Erstellen der Add-on-Benutzeroberfläche sollten Sie jedoch darauf achten, dass sie nutzerfreundlich ist.

Die besten Add-ons ergänzen jeden Editor auf natürliche Weise, indem sie vertraute Steuerelemente und Funktionen verwenden. Beim Erstellen eines neuen Add-ons gilt Folgendes:

  • Verwenden Sie das CSS-Add-on-Paket auf den Seiten Ihres HTML-Dienstes.
  • Wenn Sie sich beim Design nicht sicher sind, suchen Sie im Editor nach einem ähnlichen Dialogfeld oder einer ähnlichen Seitenleiste und passen Sie es an oder sehen Sie sich eine Schnellstartanleitung für Add-ons an.
  • Folgen Sie dieser Stilrichtlinie, um für eine nahtlose Nutzung zu sorgen.

Text

Name des Add-ons

Sie müssen den Namen des Add-ons festlegen, wenn Sie es veröffentlichen. Der Name wird an vielen Stellen angezeigt, z. B. im Add-on-Shop und in Menüs.

  • 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 30 Zeichen. Lange Namen werden möglicherweise automatisch abgeschnitten.
  • Geben Sie nicht den Namen des Google-Produkts an, für das das Add-on gedacht ist, und verwenden Sie auch nicht das Wort „Google“.
  • Lassen Sie Versionsinformationen weg.
  • Der veröffentlichte Name des Add-ons muss mit dem Dateinamen des Scriptprojekts übereinstimmen. Der Projektname wird im Autorisierungsdialogfeld angezeigt.
Nicht empfohlen Dos
Ungültige Add-on-Namen Gute Add-on-Namen

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 Menüpunkte).
  • Verwenden Sie kurzen, einfachen Text ohne Fachjargon oder Akronyme.
Nicht empfohlen Dos

Tipp nach der Installation

Der Tipp nach der Installation wird direkt nach der Installation Ihres Add-ons angezeigt und ist auch in der Hilfe zu sehen. Sie haben ein paar Sätze, die den Nutzern den Einstieg erleichtern sollen.

  • Beginnen Sie mit einem Verb.
  • Beschreiben Sie den ersten Schritt zur Verwendung Ihres Add-ons.
  • Wenn Sie eine Haupt-UI haben, z. B. eine Seitenleiste, erklären Sie, wie diese geöffnet wird.
  • Mach hier keine Werbung für dein Add-on, da es bereits installiert ist.
Nicht empfohlen Dos
Ungültiger Tipp nach der Installation Guter Tipp nach der Installation

Im Gegensatz zu regulären Apps Script-Projekten werden Add-ons nicht im Script-Editor oder Script-Manager angezeigt. Nutzer können Add-on-Scripts nicht direkt ausführen. Stattdessen erhält jedes Add-on einen Platz im Add-on-Menü. Über das Menü (und gegebenenfalls ein Dialogfeld oder eine Seitenleiste) können Nutzer mit dem Add-on interagieren.

  • Das Menü ist ein wichtiger Bestandteil der Nutzersteuerung Ihres Add-ons. Planen Sie daher Struktur und Wortwahl sorgfältig.
  • Vermeiden Sie Menüpunkte, die einfach nur den Namen Ihres Add-ons wiederholen. Beginnen Sie stattdessen mit einem Verb.
  • Wenn Ihr Hauptmenüpunkt einen Workflow beginnt und es kein einzelnes Verb gibt, das seine Funktion beschreibt, nennen Sie ihn „Starten“. Dieses Muster wird in der Kurzanleitung für Docs-Add-ons verwendet.
  • Verwenden Sie keine Untermenüs, es sei denn, Ihr Menü enthält mehr als sechs Elemente. Sie können heikel sein und schwer auszuwählen.
  • Beschreiben Sie die Aufgabe, nicht die UI-Komponente, die der Menüpunkt anzeigt.
Nicht empfohlen Dos
Falsche Labels für Menüpunkte Gute Label für Menüpunkte

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 zeigen Sie dann eine nutzerfreundliche Fehlermeldung mit Inline-Text im Stil der Klasse error aus dem CSS-Add-on-Paket oder ein Warndialogfeld an.
  • Prüfen Sie vor der Veröffentlichung, ob Ihr Add-on keine Debug-Informationen in der JavaScript-Konsole protokolliert. Verwenden Sie stattdessen Stackdriver Logging.
Nicht empfohlen Dos
Fehlerhafte Fehlermeldung Gute Fehlermeldung

Hilfeinhalte

Das Menü jedes Add-ons enthält einen automatischen Hilfedialog. Wenn Sie beim Veröffentlichen eine Hilfe-URL angeben, wird über die Schaltfläche „Weitere Informationen“ auf diese Seite verwiesen. Sofern Ihr Add-on nicht selbsterklärend ist, stellen Sie bitte eine Seite bereit, auf der die Verwendung erläutert wird.

  • 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 von der Hauptoberfläche aus auf Ihre Hilfeinhalte verlinken. Wenn Ihr Add-on ein neues Dokument erstellt, können Sie auch eine Anleitung im Textkörper des Dokuments anzeigen.

Benutzerdefinierte Benutzeroberflächen

Einige einfache Editor-Add-ons können vollständig über das Menü gesteuert werden. Die meisten öffnen jedoch eine Seitenleiste oder ein Dialogfeld mit benutzerdefinierten Inhalten.

  • Seitenleisten eignen sich am besten für Tools, die Nutzer wahrscheinlich wiederholt verwenden, während sie sich auf den Inhalt ihres Dokuments oder ihrer Tabelle beziehen.
  • Dialogfelder eignen sich am besten für einmalige Tools, Einstellungsseiten und wichtige Nachrichten.

UI-Text

Gehen Sie davon aus, dass Nutzer in Dialogfeldern oder Seitenleisten nur den Titel und die Schaltflächenlabels lesen. Können sie trotzdem herausfinden, was Ihre Benutzeroberfläche kann, und eine gute Entscheidung treffen?

  • Verwenden Sie einen Titel und Schaltflächenlabels, die für sich stehen.
  • Vermeiden Sie lange Textblöcke.

Dialogfelder

Dialoge eignen sich hervorragend für Tools, die Nutzer einmal verwenden und dann wieder schließen. Wenn Nutzer mit Ihrem Add-on beispielsweise eine Grafik einfügen können, können Sie ein Dialogfeld mit Auswahlmöglichkeiten anzeigen und das Dialogfeld dann schließen, wenn die Grafik eingefügt wurde. Dialogfelder eignen sich auch gut, um die Einstellungen Ihres Add-ons anzuzeigen oder eine wichtige Nachricht zu senden.

  • Öffnen Sie kein Dialogfeld (einschließlich Benachrichtigungen oder Prompts) über ein anderes Dialogfeld. Zeigen Sie immer nur ein Dialogfeld gleichzeitig an.
  • Verwenden Sie für den Dialogtitel ein Wort oder eine kurze Wortgruppe, beginnend mit dem wichtigsten Wort.
  • Schaltflächenlabels sollten sich auf den Dialogtitel beziehen.
  • Verwenden Sie vorzugsweise zwei Schaltflächen, in der Regel eine primäre Aktion und „Abbrechen“. Für Sonderfälle, in denen eine dritte Schaltfläche erforderlich ist, platzieren Sie diese unten rechts.
  • Platzieren Sie die Schaltflächen links unten im Dialogfeld. Die blaue primäre Taste sollte links und die grauen sekundären Tasten rechts sein.
Nicht empfohlen Dos
Falscher Dialogtitel Guter Dialogtitel

Über Seitenleisten können Nutzer bei der Auswahl von Optionen auf ihr Dokument, ihre Tabelle, ihre Präsentation oder ihr Formular zurückgreifen. Außerdem können Nutzer Ihr Add-on so mehrmals verwenden. Wenn eine neue Seitenleiste geöffnet wird, wird die vorherige Seitenleiste automatisch geschlossen. Sie eignen sich am besten für temporäre Modi, die der Nutzer beendet, wenn er fertig ist.

  • Nutzer haben möglicherweise andere Add-ons mit eigenen Seitenleisten. Wenn zwei Add-ons gleichzeitig versuchen, Seitenleisten zu öffnen, wird nur eine angezeigt.
  • Beim ersten Öffnen eines Dokuments wird keine Seitenleiste oder kein Dialogfeld angezeigt.
  • Nur Add-ons, die in AuthMode.FULL ausgeführt werden, können Seitenleisten oder Dialogfelder öffnen. Sie können eine Seitenleiste über einen Menüpunkt öffnen, da der Nutzer dann aufgefordert wird, eine vollständige Autorisierung zu erteilen.

Steuerung

Bei gelungenen Add-on-UIs haben die Steuerelemente genügend Platz. Angemessene Ränder und Abstände tragen viel dazu bei, dass die Steuerelemente gut lesbar sind. Zu viele Steuerelemente können überfordern. Im Zweifelsfall können Sie ein Layout aus dem Editor selbst verwenden. Sehen Sie sich beispielsweise vorhandene Dialogfelder in Google Docs an, z. B. Datei > Seiteneinrichtung, wenn Sie eigene erstellen.

Die Dokumentation für das CSS-Add-on-Paket enthält Beispiel-Markup für jeden der folgenden Steuerelementtypen.

Tasten

Verwenden Sie Schaltflächen, um die wichtigsten Aktionen der Benutzeroberfläche zu steuern, anstatt einfache Links oder andere Elemente.

  • Zeigen Sie nicht mehr als eine blaue, rote oder grüne Schaltfläche gleichzeitig an. Graue Schaltflächen werden möglicherweise wiederholt angezeigt.
  • Die meisten Schaltflächenlabels sollten in Großbuchstaben geschrieben sein und mit einem Verb beginnen. Rote Schaltflächen, die in der Regel für Aktionen zum Erstellen verwendet werden, sollten in Großbuchstaben geschrieben sein.
Nicht empfohlen Dos

Kästchen und Optionsfelder

Verwenden Sie Kästchen, wenn Nutzer mehrere Optionen oder gar keine Option auswählen können. Verwenden Sie Einblendoptionen (oder ein Auswahlmenü), wenn genau eine Option ausgewählt werden muss.

  • Ändern Sie das Verhalten von Kästchen nicht, um Optionsfelder nachzuahmen.
  • Tun Sie nichts, wenn die Kästchen angeklickt sind. Menschen machen Fehler. Warten Sie, bis die Nutzer auf eine Schaltfläche klicken, um ihre Auswahl zu bestätigen.

Menüs auswählen

Auswahllisten sind eine gute Möglichkeit, eine kurze Liste von Alternativen anzubieten.

  • Sortieren Sie die Optionen alphabetisch oder nach einem logischen Schema, das alle Nutzer verstehen können (z. B. Wochentage, beginnend mit Sonntag).
  • Wenn die Liste zu lang wird, sollten Sie ein anderes Steuerelement verwenden. Sie können beispielsweise eine scrollbare Liste anzeigen, um dem Menü mehr Platz zu geben und die Navigation zu erleichtern.

Textbereiche

Wenn Nutzer mehr als ein paar Wörter eingeben müssen, verwenden Sie ein Textfeld.

  • Textfelder sollten mindestens zwei Zeilen hoch sein, damit sie leichter zu verwenden sind und nicht wie Textfelder aussehen.
  • Platzieren Sie die Labels oben.

Textfelder

Verwenden Sie Textfelder, wenn Nutzer nur ein oder zwei Wörter eingeben müssen.

  • Die Breite eines Textfelds sollte andeuten, was Nutzer darin eingeben sollen.
  • Verwenden Sie keinen Platzhaltertext als Label, da er beim Fokus verschwindet. Platzhaltertext eignet sich gut, um Beispiele oder zusätzliche Details anzugeben.
  • Platzieren Sie die Labels oben, Sie können kurze Textfelder aber auch nebeneinander anordnen.

Branding

In Ihrem Add-on

Wenn Sie Branding verwenden möchten, halten Sie es kurz und unauffällig. So können sich Nutzer besser auf die Benutzeroberfläche konzentrieren und Ihr Add-on wirkt wie ein Teil des Editors.

  • Alle Aspekte Ihres Add-ons müssen den Markenrichtlinien entsprechen.
  • Verwenden Sie weder das Wort „Google“ noch Google-Produktsymbole.
  • Der Text sollte nur aus wenigen Wörtern bestehen und mit der Klasse gray aus dem CSS-Add-on-Paket formatiert sein.
  • Grafiken sollten einen weißen Hintergrund haben und dürfen maximal 200 × 60 Pixel groß sein.
  • Bei Dialogen sollte das Branding rechts unten platziert sein.
  • Bei Seitenleisten kann das Branding oben oder unten platziert werden.

Im Geschäft

Zum Veröffentlichen eines Editor-Add-ons benötigen Sie mehrere Bild-Assets. Diese Assets werden verwendet, um den Store-Eintrag des Add-ons zu erstellen.

Bedienungshilfen

Ihr Add-on sollte für alle Nutzer geeignet sein, unabhängig davon, ob sie Farben anders wahrnehmen, einen Screenreader verwenden oder andere Anforderungen haben. Barrierefreiheit ist ein breites Thema, das in diesem Stilhandbuch nicht vollständig behandelt werden kann. Eine hilfreiche Ressource ist die Website „Barrierefreiheit im Internet“ von Google. Hier sind einige Tipps für den Einstieg:

  • Achten Sie darauf, dass Sie alle Steuerelemente der Benutzeroberfläche mit der Tastatur aufrufen können. Fügen Sie benutzerdefinierten Steuerelementen (z. B. solchen, die mit <div> erstellt wurden) den Tabulatorschlüssel tabindex=0 hinzu, damit Nutzer darauf wechseln können. Überlegen Sie, ob auch andere Tasten unterstützt werden sollten, z. B. Pfeiltasten für eine Liste.
  • Einige Nutzer verwenden möglicherweise einen Screenreader mit Ihrem Add-on. Bilder sollten daher ein alt-Attribut und benutzerdefinierte Steuerelemente ARIA-Attribute haben, um ihre Verwendung zu beschreiben.
  • Verwenden Sie nicht nur Farbe, um den Status zu kommunizieren. Verwenden Sie auch Symbole und Text.

Wenn Sie standardmäßige Websteuerelemente wie die oben in diesem Leitfaden beschriebenen verwenden, ist es einfacher, Ihr Add-on barrierefrei zu gestalten.