SideBarMenu

Überblick Visual Style Guide

Buttons

Stud.IP verwendet klar erkennbare Buttons zum Bestätigen und Abschließend von Aktionen sowie gelegentlich zur Initiierung von Hauptaktionen im System. Haupteinsatzzweck von Buttons ist das Abschließen von Aktionen, insbesondere am Ende/Fuß eines Dialoges oder beim Löschen von Objekten. Als Faustformel, wann ein ein Button und wann ein Icon verwendet werden kann gilt:

  • Initiierung: In der Rel werden die meisten Aktionen in Stud.IP durch Icons (teilweise mit daneben gesetztem Text) initiiert. Typische Beispiele sind die Sidebar, Icons in Tabellenköpfen oder -Zeilen und sämtliche Icons in der Hauptnavigation. Dies ist einerseits durch Größeneinschränkungen begründet (Icons benötigen signifikant weniger Platz) oder das Vorhandensein einer Vielzahl an Aktionen (drei oder mehr Icons neben oder gar untereinander sind für die Usabilty besser darstellbar, als die gleiche Anzahl an Buttons). Es gibt jedoch auch Kontexte, in den Buttons zur Initiierung verwendet werden können. Dies ist insbesondere dann sinnvoll, wenn die Umgebung der Seite ausreichend Platz bietet und keine Standardelemente (Tabellen oder Content-Boxen nutzen in der Regel ausschließlich Icons) verwendet werden. Gleichzeit können Buttons verwendet werden, wenn eine Aktion besonderes Gewicht bekommt (zB. das Löschen eines Objektes).
  • Bestätigung und Abschließen: Ein guter Einsatzzweck eines Buttons ist Stets das Bestätigen und Abschließen einer Aktion, etwa am Ende eines Dialoges nach dem Eingeben einer Vielzahl von Daten. Auch das Löschen, am Ende eines Dialoges oder eines Formular sowie das Abbrechen von Dialogen sind typische Einsatzzwecke eines Buttons.

Zu Beachten ist, dass ein Button stets eine Aktion als ausgeschriebenes Wort, jedoch in der Regel ohne Icon zeigt. Icons hingegen sind oft lediglich in ihrer grafischen Form zu sehen, werden jedoch häufiger (Sidebar, Aktionsmenu) auch mit Text ergänzt. Dennoch ist ein Button stets dass "gewichtigere" Interaktionselement, da er größer ist, einen Hover-Effekt bietet und auch (im Verhältnis zu Icons) durch seien große Fläche leichter zu bedienen ist. Das gilt insbesondere für Touch-Geräte.

Beschriftung und Labelling

Buttons werden in der Regel mit der Aktion des Namens als Substantive beschriftet (das "Abschließen", das "Abbrechen" und das "Speichern"). Substantiv-Verb-Konstruktionen sind zu vermeiden ("Speichern" wäre dem Button "Datei speichern" vorzuziehen). Ganze Sätze ("Diese Datei speichern.") sind nicht zulässig. Ideal ist also ein Button, der lediglich ein Wort enthält. Dabei soll die Beschriftung die Funktion des Buttons möglichst klar beschreiben. Es soll erkennbar sein, was passieren wird, wenn man den auf den Button drückt. Bei der Wortwahl sind jedoch spezifische substantivierte Verben zu verwenden. "OK" ist kein guter Button, da nicht klar erkennbar ist, was passiert. "Speichern" hingegen beschreibt einen Button korrekt. Im Standarddesign wird die Beschriftung automatisch zentriert ausgegeben.

Erscheinungsbild

Buttons erscheinen in Stud.IP als weiße Buttons mit starken, dunkelblauen Rand. Buttons werden als knickbares Objekt grundsätzlich Blau eingefärbt. Rote oder Grüne bzw. anders gefärbte Buttons sind nicht erlaubt. Eine gefährliche Aktion (zB. "Löschen") muss einerseits durch geeignete Platzierung des Buttons und durch weitere Absicherungen (Warndialog) geschützt werden, nicht jedoch durch Warnfarben des Buttons. In eine Fällen sind noch Icons in Buttons zu sehen (Haken, X oder ähnliches). Diese Ergänzung eines Buttons durch Icons ist nicht mehr zulässig.

Platzierung und Ausrichtung der Buttons

Buttons dürfen nicht im Textfluss platziert werden und müssen immer freistehendend platziert werden. Idealerweise gibt es keine weiteren Objekte links und rechts eines oder mehrerer Buttons im gestaltbaren Bereich (zB. Dialog, Tabellenzeile, Content-Box). In Formularen sind Buttons linksbündig zu setzen, in Dialogen mittig. Allerdings gibt es Ausnahmen, wenn die Funktion des Buttons eines bestimmte Position impliziert. So sollten "Zurück" und "Weiter"-Buttons innerhalb eines Dialoges entsprechend linksbündig und rechtsbündig gesetzt werden.

Reihenfolge mehrerer Buttons nebeneinander:

Für Buttons soll eine bestimmte Reihenfolge eingehalten werden:

  • 1. Positiver, bestätigender Button ("Speichern", "Übernehmen", "Ja")
  • 2. Negativer Button ("Nein")
  • 3. Harmloser/abbrechender Button, der den Zustand nicht verändert ("Abbrechen", "Schließen")

Verhalten

Stud.IP kennt neben aktiven Buttons auch inaktive Buttons. Diese sind ausgegraut und können nicht geklickt werden, weisen aber darauf hin, dass unter anderen Umständen dieser Button klickbar wäre (hier kann ein Info-"i"-Icon mit Tooltip daneben erklären, warum der Button nicht klickbar ist). Sollte ein Default-Button definiert sein, der bei Tastendruck (zB. Enter) aktiviert wird, muss dies stets ein harmloser Button ("Nein", "Abbrechen" oder "Schließen") sein. Für den Fall, dass bereits Daten in einem zugehörigen Formular erfasst wurden, gibt es (zumindest in Dialogen) eine Eigenschaft, die das Schließen des Dialoges nach Eingabe ohne eine weitere Bestätigung verhindert. Generell ist darauf zu achten, dass eine Default-Option keinen Datenverlust nach sich ziehen kann.


Allgemein
Nutze Bestätigungs-Buttons nach den folgenden Design-Patterns:

PatternCommit buttons
Frage-Dialog (mit Buttons)Eine der folgenden spezifischen Bezeichnergruppen: Ja/Nein, Ja/Nein/Abbrechen, [Do it]/Abbrechen, [Do it]/[Don't do it], [Do it]/[Don't do it]/Abbrechen
Auswahl-DialogeModaler Dialog: OK/Abbrechen oder (Do it)/Abbrechen
Nicht-modaler Dialog: Schließen-Button in der Dialogbox und der title bar

Letzte Änderung am 23.06.2017 15:50 Uhr von ckater.