UI-Styleguide für Editor-Add-ons

Editor-Add-ons Erstellen von Benutzeroberflächen (Menüs, Seitenleisten und Dialogfelder) mithilfe der HTML-Dienst. Da die Schnittstellen werden in HTML und CSS entwickelt und sind hochgradig anpassbar. Wenn Sie jedoch Add-on-Oberfläche entwickeln, sollten Sie sie so gestalten, dass sie Nutzererfahrung.

Die besten Add-ons erweitern den Editor mithilfe vertrauter Steuerelemente und Verhaltensweisen. Gehen Sie beim Erstellen eines neuen Add-ons so vor:

Text

Name des Add-ons

Sie müssen den Namen des Add-ons beim Veröffentlichen festlegen. . Der Name kommt an vielen Stellen vor, z. B. im Add-on-Store und in Menüs.

  • Verwenden Sie die übliche Groß-/Kleinschreibung.
  • Vermeiden Sie Satzzeichen und insbesondere Klammern, sofern sie nicht Teil Ihrer Marke sind.
  • Fassen Sie sich kurz – maximal 30 Zeichen. Lange Namen können automatisch abgeschnitten.
  • Geben Sie nicht den Namen des Google-Produkts an, für das das Add-on bestimmt ist, und verwenden Sie nicht den Wort Google).
  • Lassen Sie Versionsinformationen weg.
  • Achten Sie darauf, dass der veröffentlichte Name des Add-ons mit dem Dateinamen des Skriptprojekts erstellen. Der Projektname wird im Dialogfeld für die Autorisierung angezeigt.
Nicht erlaubt Dos
Ungültige Add-on-Namen Gute Add-on-Namen

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:

  • Verwenden Sie die korrekte Groß- und Kleinschreibung (insbesondere bei Schaltflächen, Beschriftungen und Menüpunkten).
  • Bevorzugen Sie kurzen, einfachen Text ohne Fachjargon oder Akronyme.
Nicht erlaubt Dos

Tipp nach der Installation

Der Tipp nach der Installation wird angezeigt, wird in der Hilfe angezeigt. Ein paar Sätze sollen den Nutzern den Einstieg erleichtern.

  • Beginnen Sie mit einem Aktionswort.
  • Beschreiben Sie den ersten Schritt bei der Verwendung des Add-ons.
  • Wenn Sie eine Hauptbenutzeroberfläche haben, z. B. eine Seitenleiste, erklären Sie, wie Sie diese öffnen.
  • Werben Sie hier nicht für Ihr Add-on – es ist bereits installiert.
Nicht erlaubt Dos
Schlechter Tipp nach der Installation Guter Tipp nach der Installation

Im Gegensatz zu normalen Apps Script-Projekten werden Add-ons nicht im Script-Editor angezeigt oder Skriptmanager; können Add-on-Skripts nicht direkt ausgeführt werden. Stattdessen werden alle wird das Add-on im Add-on-Menü platziert. Über das Menü (und eventuell ein Dialogfeld oder eine Seitenleiste) lassen sich wie Nutzende mit dem Add-on interagieren.

  • Das Menü spielt eine wichtige Rolle bei der Steuerung Ihres Add-ons durch die Nutzenden. Struktur und Formulierung sorgfältig.
  • Vermeiden Sie Menüpunkte, in denen einfach der Name des Add-ons wiederholt wird. Beginnen Sie stattdessen mit einer Aktionswort.
  • Wenn mit Ihrem Hauptmenü ein Workflow beginnt und es kein einziges Verb gibt, seine Funktion beschreibt, nennen Sie es „Start“. Dieses Muster wird im Kurzanleitung zum Docs-Add-on
  • Wenn Ihr Menü nicht mehr als sechs Elemente enthält, sollten Sie keine Untermenüs verwenden. Sie können aufwendig und schwer auszuwählen.
  • Beschreiben Sie die Aufgabe, nicht die UI-Komponente, die der Menüpunkt anzeigt.
Nicht erlaubt Dos
Ungültige Labels für Artikel auf der Speisekarte Gute Labels für Gerichte auf der Speisekarte

Fehlermeldungen

Wenn etwas schiefgeht, ist es wichtig, sich mit einer einfachen Sprache zurechtzufinden. Erläutern Sie die aus Sicht der Nutzenden und schlagen Sie vor, wie sie behoben werden können.

  • Der Nutzer kann keine Ausnahmen sehen, die von Ihrem Code ausgelöst werden. Verwenden Sie stattdessen try...catch um Ausnahmen abzufangen, und zeigt dann eine benutzerfreundliche Fehlermeldung mit Inline-Text im Klasse error aus dem Add-on-CSS Paket oder eine Benachrichtigung.
  • Achten Sie vor der Veröffentlichung darauf, dass Ihr Add-on keine Informationen zur Fehlerbehebung protokolliert JavaScript-Konsole nutzen Stackdriver Logging .
Nicht erlaubt Dos
Ungültige Fehlermeldung Gute Fehlermeldung

Hilfeinhalte

Das Menü jedes Add-ons enthält ein automatisches Hilfedialogfeld. Wenn Sie eine Hilfe-URL angeben wenn Sie veröffentlichen, wird der Abschnitt „Weitere Informationen“ um auf diese Seite zu verlinken. Es sei denn, Ihre ist selbsterklärend. Bitte geben Sie eine Seite an, auf der die Verwendung des Add-ons erklärt wird.

  • 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.
  • Sie können auch über Ihre Hauptbenutzeroberfläche auf Ihre Hilfeinhalte verlinken. Wenn durch Ihr Add-on ein neues Dokument erstellt wird, können Sie die Anweisungen auch in den Textkörper des Dokuments.

Benutzerdefinierte Benutzeroberflächen

Einige einfache Editor-Add-ons lassen sich vollständig über das Menü steuern, die meisten eine Seitenleiste oder ein Dialogfeld mit benutzerdefinierten Inhalte.

  • Seitenleisten eignen sich am besten für persistente Tools, die häufig verwendet werden wiederholt, während sie sich auf den Inhalt ihres Dokuments oder ihrer Tabelle beziehen.
  • Dialogfelder eignen sich am besten für zweckgebundene Tools, Einstellungsseiten und wichtige Nachrichten.

UI-Text

Gehen Sie in jedem Dialogfeld oder jeder Seitenleiste davon aus, dass Nutzer nur den Titel und die Schaltflächenbeschriftungen lesen. Können sie trotzdem herausfinden, was Ihre Benutzeroberfläche ist, und eine gute Wahl treffen?

  • Verwenden Sie Titel und Schaltflächenbeschriftungen, die für sich stehen.
  • Vermeiden Sie lange Blöcke mit beschreibendem Text.

Dialogfelder

Dialoge eignen sich hervorragend für Tools, die Nutzende erst einmal verwenden und dann weitermachen. Wenn zum Beispiel können Sie Grafik einfügen, Sie können ein Dialogfeld mit Auswahlmöglichkeiten für was eingefügt werden soll, und schließen Sie dann das Dialogfeld, wenn Sie die Grafik einfügen. Dialogfelder sind auch nützlich, um die Einstellungen Ihres Add-ons anzuzeigen oder eine wichtige Nachricht.

  • Öffnen Sie kein Dialogfeld (auch nicht Warnmeldung oder Aufforderung) aus einem anderen Dialogfeld werden nacheinander angezeigt.
  • Verwenden Sie für den Dialogtitel ein Wort oder einen kurzen Satz, der mit dem höchsten wichtiges Wort.
  • Schaltflächenbeschriftungen sollten sich auf den Titel des Dialogfelds beziehen.
  • Ich bevorzuge zwei Schaltflächen, in der Regel eine primäre Aktion und „Abbrechen“. Für Sonderfälle die eine dritte Schaltfläche erfordern, ist die untere rechte Ecke.
  • Platzieren Sie die Schaltflächen in der linken unteren Ecke des Dialogfelds. Die blaue Hauptschaltfläche sollten sich links befinden und die grauen, sekundären Schaltflächen rechts.
Nicht erlaubt Dos
Ungültiger Dialogtitel Guter Dialogtitel

Über Seitenleisten können Nutzer auf ihre Dokumente, Tabellen, Präsentationen oder Formen, während Sie Entscheidungen treffen. Außerdem können Nutzer das Add-on wiederholt verwenden. Beim Öffnen einer neuen Seitenleiste wird die vorherige Seitenleiste automatisch geschlossen. Sie eignen sich am besten für temporäre Modi, die der Nutzer nach dem Beenden beendet.

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

Steuerung

Tolle Add-on-Benutzeroberflächen lassen ihre Steuerung etwas Raum. Angemessene Margen und Padding kann viel bewirken, während dichte Steuerelemente überwältigend erscheinen können. Wenn in ein Layout vom Redakteur selbst zu übernehmen. Prüfen Sie beispielsweise in Google Docs, wie z. B. Datei > Seiteneinrichtung, wenn Sie eine eigene erstellen.

Die Dokumentation für das CSS-Paket für Add-ons finden Sie Beispiel-Markup für jeden der folgenden Steuerelementtypen.

Tasten

Verwenden Sie Schaltflächen anstelle einer einfachen Benutzeroberfläche, um die Hauptaktionen Ihrer Benutzeroberfläche zu steuern. Links oder anderen Elementen.

  • Vermeiden Sie es, mehr als eine blaue, rote oder grüne Schaltfläche auf einmal anzuzeigen. Grau können wiederholt erscheinen.
  • Die meisten Schaltflächenbeschriftungen sollten die korrekte Groß- und Kleinschreibung verwenden und mit einem Verb beginnen. Rot sollten in der Regel in Großbuchstaben geschrieben sein.
Nicht erlaubt Dos

Kästchen und Optionsfelder

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

  • Kästchen nicht ändern um Optionsfelder nachzuahmen.
  • Mache nicht sofort etwas, wenn sie geprüft wurden. Menschen machen Fehler. Warten bis die Nutzenden ihre Auswahl bestätigen.

Menüs auswählen

Eine Auswahl ist eine gute Möglichkeit, eine kurze Liste mit Alternativen anzubieten.

  • Sortieren Sie die Optionen alphabetisch oder nach einem logischen Schema, das alle Benutzer erkennen können. zu verstehen (z. B. Wochentage, ab Sonntag).
  • Sollte die Liste zu lang werden, sollten Sie eventuell ein anderes Steuerelement verwenden. Beispiel: können Sie eine scrollbare Liste anzeigen, um dem Menü mehr Platz zu geben einfacher zu navigieren.

Textbereiche

Wenn die Teilnehmer mehr als ein paar Wörter eingeben müssen, verwenden Sie einen Textbereich.

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

Textfelder

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

  • Die Breite eines Textfeldes sollte einen Eindruck davon vermitteln, was die Nutzer eingeben sollen.
  • Vermeiden Sie die Verwendung von Platzhaltertexten als Beschriftung, da diese im Fokus verschwinden. Platzhaltertexte sind nützlich, um Beispiele oder zusätzliche Details anzugeben.
  • Platzieren Sie Beschriftungen darüber, aber Sie können auch kurze Textfelder nebeneinander platzieren.

Branding

Im Add-on

Wenn du Branding verwenden möchtest, fasse es kurz und leicht. Das hilft, konzentrieren sich die Nutzer auf Ihre Benutzeroberfläche und sorgen dafür, dass sich Ihr Add-on wie ein Teil des Editors anfühlt.

  • Alle Aspekte des Add-ons müssen den Branding-Richtlinien.
  • Verwenden Sie weder das Wort „Google“ noch Google-Produktsymbole.
  • Text sollte nicht mehr als ein paar Wörter umfassen und in der Klasse gray aus dem Add-on-CSS Paket.
  • Grafiken sollten einen weißen Hintergrund haben und nicht mehr als 200 × 60 Pixel groß sein.
  • Bei Dialogfeldern sollte sich das Branding in der unteren rechten Ecke befinden.
  • Bei Seitenleisten kann das Branding oben oder unten platziert werden.

Im Geschäft

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

Bedienungshilfen

Das Add-on sollte allen Nutzern gefallen, unabhängig davon, ob sie die Farben sehen oder einen Screenreader verwenden. Barrierefreiheit ist ein die in diesem Styleguide nicht vollständig behandelt werden können. Eine hilfreiche Ressource ist Google Barrierefreiheit im Internet. Aber hier finden Sie einige Tipps für den Einstieg:

  • Prüfen Sie, ob Sie mit der Tastatur zu allen UI-Steuerelementen navigieren können. Hinzufügen tabindex=0 zu benutzerdefinierten Steuerelementen (z. B. von <div>), damit Nutzer Folgendes tun können: zu wechseln. Überlegen Sie, ob auch andere Tasten unterstützt werden sollten, z. B. Pfeile finden Sie eine Liste.
  • Einige Nutzer verwenden möglicherweise einen Screenreader mit Ihrem Add-on. Daher sollten Bilder haben: alt-Attribut und benutzerdefinierte Steuerelemente ARIA-Attribute zur Beschreibung ihrer Verwendung.
  • Verlassen Sie sich nicht nur auf Farbe, um einen Zustand zu vermitteln. Verwende auch Symbole und Text.

Wenn Sie Standard-Web-Steuerelemente verwenden, wie die weiter oben in diesem Leitfaden beschriebenen, einfacher zugänglich zu machen.