Styleguide Application Design

Einleitung

Dieser Styleguide dient als Leitfaden für die Gestaltung von intuitiven und einheitlichen Intrexx-Applikationen, zur Unterstützung während der Entwicklung von neuen Applikationen und der Optimierung von vorhandenen Applikationen. Ziel ist es, einen hohen Wiedererkennungswert, ein einheitliches Design und einen hohen Grad an Usability zu garantieren.

• Einheitliches, über alle Portale und Applikationen bestehendes Look & Feel

• Benutzerfreundliche Gestaltung der Applikationen

• Schnelle und intuitive Bedienung durch eine verbesserte Übersicht und Navigation

Eine Beispiel-Applikation können sie hier herunterladen und wie gewohnt importieren.

Gestaltungsgrundlagen

Voraussetzung für eine intuitive Gestaltung ist das Definieren der Bedürfnisse und der Nutzungsanforderungen der Endanwender. Benutzerfreundlichkeit und die daraus resultierende Akzeptanz werden nur erreicht, wenn Applikationen mit den Anforderungen und den Erwartungen der Endanwender übereinstimmen und dadurch eine Erleichterung der Arbeitsabläufe erzielt wird.

Allgemeine Grundsätze der Gestaltung

Bei der Konzeption einer Applikation sollten die Grundsätze der Dialoggestaltung (EN ISO 9241 Teil 11) beachtet werden.

• Aufgabenangemessenheit

  Geeignete Funktionalität, Minimierung unnötiger Interaktionen

• Selbstbeschreibungsfähigkeit

  Verständlichkeit durch Hilfen und Rückmeldungen

• Lernförderlichkeit

  Anleitung des Benutzers, Ziel: leichte Erlernbarkeit

• Steuerbarkeit

  Steuerung des Dialogs durch den Benutzer

• Erwartungskonformität

  Konsistenz, Anpassung an vorhersehbare Benutzerbelange sowie allgemein anerkannte Konventionen

• Individualisierbarkeit

  Anpassbarkeit an Bedürfnisse und Kenntnisse des Benutzers

• Fehlertoleranz

  
  

  System reagiert tolerant auf Fehler oder ermöglicht eine leichte Fehlerkorrektur durch den Benutzer

Informationsdarstellung / Seitengestaltung

Folgende Kriterien an die Informationsgestaltung sind zu berücksichtigen:

• Klarheit

  Der Informationsgehalt wird schnell und korrekt vermittelt

• Unterscheidbarkeit

  Die angezeigten Informationen können gut unterschieden werden, wie z.B. Pflicht und Kann-Felder

• Kürze

  Es werden nur so viele Informationen angezeigt, wie zur Aufgabenerfüllung nötig sind, z.B. keine unnötigen Wortverlängerungen bei Feldbezeichnungen

• Konsistenz

  Gleichartige Daten werden durchgängig gleich dargestellt

• Entdeckbarkeit / Auffindbarkeit

  Die Aufmerksamkeit des Benutzers wird auf relevante Bereiche gelenkt

• Lesbarkeit

  Informationen sind leicht lesbar, z.B. durch ausreichende Schriftgröße und gut lesbare Schriftart

• Verständlichkeit

  Informationen sind leicht verständlich, unmissverständlich, erinnerbar, z.B. gut merkbare Icons

Struktur der Applikation

Beim Entwickeln von Applikationen sollte man sich nicht nur auf das rein optische Ergebnis konzentrieren. Im Gesamten sollte darauf geachtet werden, dass die drei für ein gutes Ergebnis notwendigen Säulen Inhalt, Design und Struktur strikt voneinander getrennt bleiben und auf alle drei Punkte in gleichem Maße Wert gelegt wird. Im Hinblick auf die Struktur sollte darauf geachtet werden, dass eine Einheitlichkeit sowie eine Konsistenz innerhalb der Applikationen erreicht wird.

Die Abbildung oben zeigt die Struktur einer korrekt aufgebauten Intrexx-Applikation. Ausgangspunkt dieser Applikationsstruktur ist die Übersichtsseite (A1). Von hier aus stehen dem Nutzer verschiedene Interaktionsmöglichkeiten zur Verfügung, um eine schnelle Aufgabenerledigung durchzuführen. Diese werden im Folgenden bezeichnet als

• Buttons

  Schaltflächen mit dem Schaltflächentyp "Schaltfläche", die als beschrifteter Button dargestellt werden, für die Erfassung neuer Daten

• Text-Links

  Schaltflächen mit dem Schaltflächentyp "Text", die als Text-Link dargestellt werden, für die Weiterleitung auf Detailseiten

• Stift-Icons

  Schaltflächen mit dem Schaltflächentyp "Bild",

  für die ein Stift-Icon als Bild verwendet wird, für die Bearbeitung gespeicherter Daten

Mit Klick auf die Schaltfläche "Daten erfassen" (A1) öffnet sich ein Eingabeformular (E1 / E1.2) mittig als Tooltip. In diesem werden leere Eingabefelder angezeigt. Bei einer hohen Datenmenge kann eine Eingabeseite auch im Hauptfenster geöffnet werden.

Mit Klick auf das Stift-Icon "Daten bearbeiten" (A1) wird ebenfalls das Eingabeformular (E1) angezeigt, jedoch in befülltem Zustand.

Es handelt sich somit um dieselben Formulare für Erfassen und Bearbeiten, was in der Entwicklungsphase Zeit bei der Erstellung erspart. Im Gebrauch kann sich ein Nutzer durch den konsistenten Aufbau und dem einheitlichen Erscheinungsbild schneller zurechtfinden und die Usability wird somit erhöht.

Ausgehend von der Übersichtsseite (A1) ist eine Detailansichtsseite (A2) über den angebotenen Text-Link "Daten ansehen" zu erreichen. Die Detailseite (A2) kann hier wieder, je nach Bedarf, die Möglichkeiten Daten zu erfassen, zu bearbeiten oder zu lesen beinhalten.

Auf der Detailansichtsseite (A2) werden dem Nutzer bereits erstellte Informationen angezeigt. Diese Daten können hier auch wieder bei Bedarf geändert werden. Ist dies der Fall, kann über die Schaltfläche "Bearbeiten" das gleiche Eingabeformular (E1) in befülltem Zustand angezeigt werden, das auf der Ansichtsseite (A1) über das Stift-Icon erreicht wurde.

Für alle weiteren Unterseiten ist die gleiche Struktur und Vorgehensweise wie zuvor beschrieben zu beachten.

Aufbau eines Applikationsmenüs

Das Applikationsmenü untergliedert die wichtigsten Seiten einer Applikation und bietet durch eine direkte Verlinkung der einzelnen Menüpunkte auf die jeweiligen Seiten für den Benutzer einen schnellen Zugriff. Ein ausgewählter und aktiver Menüpunkt sollte sich optisch von den anderen Menüpunkten abheben. Dies könnte sowohl durch eine deutliche farbliche Abgrenzung (bei a:hover und a:active) erreicht werden, als auch durch einen zusätzlichen Markierungsbalken unterhalb des aktuell ausgewählten Menüpunktes.

Ein Applikationsmenü sollte oberhalb des Inhaltsbereiches linksbündig angeordnet werden und nicht mehr als 7 +/- 2 Menüpunkte enthalten, um die Übersichtlichkeit zu wahren.

Applikationsmenüs sollten einer logischen und vor allem konsistenten Reihenfolge entsprechen.

Das Ordnungsprinzip, z.B. nach der Häufigkeit der Nutzung kann sehr hilfreich sein, damit Nutzer auf jene Informationen als erstes Zugriff haben, die sie mit hoher Wahrscheinlichkeit benötigen.

In unserem Beispiel sind unter dem Menüpunkt "Projekte" nur diejenigen Inhalte hinterlegt, die für den Nutzer auf jeden Fall relevant sind und so mit sehr hoher Wahrscheinlichkeit zugegriffen werden muss. Der Menüpunkt "Alle Projekte" enthält alle angelegten Projekte. Dieser Menüpunkt wurde hier als zweitwichtigstes angesehen und steht somit an zweiter Stelle. Die Menüpunkte "Verwaltung" und "Suche" stehen an letzter Stelle, da auf diese weniger häufig zugegriffen werden.

Beinhalten mehrere Applikationen eines Portals die gleichen Menüpunkte, sollten diese alle einer einheitlichen Reihenfolge entsprechen, wie hier z.B. der Menüpunkt "Suchen", der immer als letzter Menüpunkt angeordnet wird. Durch den ähnlichen Aufbau können sich Nutzer so auch applikationsübergreifend schnell zurechtfinden.

Übersichtsseite

Möglicher Aufbau einer Übersichtsseite (A1)

Für eine Applikationsseite bestehen unterschiedliche Informationsbedürfnisse und Informationsmengen. Somit kann der Aufbau aufgrund inhaltlicher Kriterien variieren.

Jede Applikationsseite sollte einen Seitentitel (Überschrift, Text_h2, eindeutige und klare Bezeichnung) beinhalten, der idealerweise mit dem ausgewählten Menüpunkt der Applikation übereinstimmt. Der erste Buchstabe des Seitentitels sollte zudem mit dem Applikationsmenü am linken Rand bündig sein.

Der Inhaltsbereich erstreckt sich über die gesamte Breite, wenn kein Filter- oder Navigationsbereich benötigt wird.

Soll zusätzlich eine Filter-/Navigationsmöglichkeit angeboten werden, sollte diese links vom Inhaltsbereich positioniert werden. Einzelne Filtermöglichkeiten werden untereinander vertikal angeordnet, um dem Inhaltsbereich genügend Platz zu geben. Auch ist darauf zu achten, dass der Inhaltsbereich vom Filter-/Navigationsbereich klar abgetrennt ist (min. 5px).

Mögliche Gestaltung einer Übersichtsseite

Applikationsseite mit freigestalteter Tabelle (A1)

Eine Darstellung des Inhaltes als frei gestaltete Tabelle bietet sich dann an, wenn Daten optisch ansprechend dargestellt werden sollen. Ein Hintergrundbild macht Lust auf den Inhalt und verstärkt so den "Joy of Use".

Können Tabellen in Kategorien unterteilt werden (hier zweispaltig), sollte zwischen den Tabellen ein Abstand (min. 5px) bestehen, um eine visuelle Trennung zu erreichen. Zusätzlich sollte jede Tabellen-Gruppe einen passenden übergeordneten Tabellentitel (Text_h3) erhalten hier zum Beispiel "Öffentliche Projekte" und "Meine Projekte", der linksbündig oberhalb der Tabelle angeordnet werden sollte und alle zugeordneten Tabelleninhalte unter dieser Überschrift vereint.

• Daten ansehen

  Jedes Tabellenelement (Bild-Kachel) sollte einen Titel (Text-Link) besitzen, der auf die dazugehörige Detailseite verlinkt.

• Daten bearbeiten

  Zusätzlich sollten die Daten auch bearbeitet werden können, was über das angebotene Stift-Icon erreicht werden kann (Icons bei geringen Platzverhältnissen, sonst Buttons verwenden).

• Daten erfassen

  Möchte ein Nutzer neue Daten erfassen, kann über den Button "Projekt erfassen" rechts oberhalb der Ansichtstabellen eine entsprechende Eingabeseite geöffnet werden.

Applikationsseite mit Ansichtstabelle

Wird auf einen Filter/Navigationsbereich verzichtet, erstreckt sich der Inhaltsbereich einer Applikationsseite über den gesamten Applikationsbereich. Jede Tabelle sollte einen eindeutigen Tabellentitel enthalten, der linksbündig oberhalb der Tabelle angeordnet wird.

Können Tabellen in unterschiedliche Kategorien eingeteilt werden, so sollte jede Tabellengruppe einen äußeren umschließenden Container enthalten. Zwischen den Tabellengruppen sollte ein Abstand von 15px bestehen. Besteht die Möglichkeit in einer Tabelle neue Daten zu erfassen, sollte eine entsprechende Schaltfläche rechtsbündig oberhalb der Tabelle angeordnet werden.

Eine Darstellung der Applikationsseite mit Filter-/Navigationsbereich könnte wie folgt aussehen:

Dabei sollte jede Tabellenspalte eine passende Überschrift haben und wenn möglich aus einem treffenden Wort bestehen. Spalten sollten generell immer gemäß ihrer Priorität angeordnet werden (die wichtigsten zuerst, von links nach rechts).

Tabellen ermöglichen einen schnellen Überblick über große Datenmengen. Das Ziel bei der Tabellengestaltung ist daher, dem Benutzer einen optimalen Zugriff auf die gewünschten Informationen zu liefern.

Zur Ansicht oder Bearbeitung eines Datensatzes können nachfolgende Alternativen verwendet werden. Welche Variante verwendet wird, hängt in der Regel vom Kontext innerhalb der Applikation ab. Auch die Wahl des Sprungziels (Ansichtsseite oder Eingabeseite) ist vom Kontext abhängig und muss im Einzelfall entschieden werden.

Datensatz ansehen (Ansichtsformular A1)

Liegt der primäre Fokus einer Tabelle auf der Ansicht der Daten, sollte die Verlinkung der Bezeichnung der ersten Spalte auf eine Ansichtsseite führen (der Button wird somit überflüssig). Das Öffnen einer Ansichtsseite aus einer Tabelle heraus macht jedoch nur dann Sinn, wenn zusätzliche Daten auf der Ansichtsseite angezeigt werden, die in der Ansichtstabelle nicht abgebildet wurden.

Datensatz ansehen (Embedded Tooltip A2)

Optional besteht auch die Möglichkeit Datensätze einer Ansichtstabelle als Embedded-Tooltip anzeigen zu lassen.

Dies hat den Vorteil, dass ein Nutzer eine Applikationsseite nicht verlassen muss und die Daten bequem innerhalb einer Tabelle oder eines Containers angesehen werden können. Die geöffneten Daten sollten hier etwas eingerückt angeordnet werden. Die Seite sollte zusätzlich eine Schließen-Funktion beinhalten.

Datensatz bearbeiten

Liegt die primäre Funktion einer Ansichtstabelle auf der Bearbeitung der Daten, sollte eine Verlinkung der Bezeichnung der ersten Spalte der Tabelle zu einer Eingabeseite in ausgefülltem Zustand führen. Der Bearbeiten-Stift am Ende einer Zeile kann somit weggelassen werden.

Datensatz ansehen und bearbeiten, strikte Trennung

Liegt der primäre Fokus einer Ansichtstabelle auf der Ansicht der Daten, sollte die Bezeichnung der ersten Spalte (meist der Titel) auf die dazugehörige Ansichtsseite verlinken. Zusätzlich wird am Ende jeder Zeile ein Bearbeiten-Stift angeboten, der auf die dazugehörige Eingabeseite leitet.

Durch die Distanz zwischen den Aktionen "Ansehen" und "Bearbeiten" innerhalb einer Zeile soll ein "Falsch-Klicken" vermieden werden.

Zusammenfassung der Übersichtsseite (A1)

Möglicher Aufbau

• Seitentitel (Größe h2), bündig mit Applikationsmenü links

• Inhaltsbereich geht über die gesamte breite, wenn kein Filter-/Navigationsbereich benötigt wird

• Filter-/Navigationsmöglichkeit links neben Inhaltsbereich anordnen.

• Einzelne Filtermöglichkeiten werden untereinander vertikal angeordnet

• Abtrennung des Filter-/Navigationsbereichs vom Inhaltsbereich (min. 5px)

Applikationsseite mit freigestalteter Tabelle

• Visuelle Trennung von Kategorien durch Abstand (min. 5px)

• Jede Tabellengruppe enthält einen Tabellentitel wie z.B. "Öffentliche Projekte" (Text_h3), linksbündig ausgerichtet

• Daten ansehen

  über Titel (Text-Link), Verlinkung auf Detailseite

• Daten bearbeiten

  über Stift-Icon (Icon bei geringen Platzverhältnissen, ansonsten Button)

• Daten erfassen

  über den Button "Projekt erfassen", angeordnet oberhalb des Inhaltsbereiches, Verlinkung auf Eingabeseite

Applikationsseite mit Ansichtstabelle

• Inhalt geht über die Gesamte breite, falls keine Filter-/Navigationsbereich vorgesehen ist

• Jede Tabelle sollte einen eindeutigen Tabellentitel enthalten, linksbündig oberhalb der Tabelle angeordnet

• Jede Tabellengruppe umschließt einen Container. Zwischen Tabellengruppen sollte ein Abstand (15px) bestehen

• Neue Tabellendaten erfassen über rechtsbündig oberhalb der Tabelle angeordneten Schaltfläche

• Spaltenreihenfolge gemäß ihrer Priorität, Spaltenbenennung kurz und aussagekräftig

• Daten ansehen (Ansichtsformular A1)

  Primärer Fokus der Tabelle auf Ansicht der Daten, Bezeichnung der ersten Spalte verlinken (Ansichtsseite wird geöffnet), nur dann verlinken, wenn zusätzliche Daten angezeigt werden

• Daten ansehen (Embedded Tooltip A2)

  Daten sollten eingerückt angeordnet werden und eine Schließen-Funktion beinhalten

• Datensatz bearbeiten

  Primärer Fokus der Tabelle auf Bearbeitung der Daten, Bezeichnung der ersten Spalte verlinken, Eingabeseite wird geöffnet, Bearbeiten-Stift am Ende der Zeile sollte weggelassen werden

• Datensatz ansehen und bearbeiten, strikte Trennung

  Primärer Fokus der Tabelle auf Ansicht der Daten, Bezeichnung der ersten Spalte (meist Titel) auf Ansichtsseite verlinken, Bearbeiten-Stift am Ende jeder Zeile anbieten, Eingabeseite wird geöffnet

Detailseite

Möglicher Aufbau einer Detailseite (A2)

Eine Detailseite lässt sich je nach Bedarf in zwei Bereiche untergliedern. In einen oberen Inhaltsbereich für allgemeine Informationen und einen unteren Detailbereich, der zusätzliche Informationen bereitstellt. Eine Detailseite sollte aufgrund der meist erhöhten Datenmenge nicht als Tooltip angezeigt werden, sondern sich im Hauptfenster öffnen.

Mögliche Gestaltung einer Detailseite (A2, Allgemeine Informationen)

Allgemeine Informationen, wie hier z.B. die wichtigsten Daten eines Projektes, sollten auf einer Detailseite als Hauptinformation angezeigt werden, damit Nutzer sich schnell einen Überblick verschaffen können. Um optisch eine ansprechendere Darstellungsweise zu erreichen, könnte der Bereich für die allgemeinen Informationen je nach Bedarf zweispaltig dargestellt werden. Ein Bereich könnte z.B. ein Video oder Bilder anzeigen und daneben die wichtigsten allgemeinen Informationen. Dabei sollten die allgemeinen Informationen der gleichen Anordnung entsprechen, wie sie zuvor erfasst wurden. Zusätzlich sollte die Möglichkeit gegeben werden, diese Daten zu bearbeiten. Eine entsprechende Textschaltfläche wird hierzu unterhalb der Daten positioniert (Bearbeiten). Oberhalb deshalb nicht, da dieser Platz für den Button "Daten erfassen" reserviert ist, falls erforderlich. Ein Bearbeiten-Icon sollte hier ebenfalls nicht verwendet werden, da dieses bei der Vielzahl an Daten übersehen werden könnte.

Der Detailbereich, der unterhalb der allgemeinen Informationen erscheinen könnte, enthält zusätzliche Informationen. Diese Informationen können als Embedded-Tooltip direkt auf der Detailseite geöffnet werden. Die Inhalte können so leicht unter einem Tab-Menü vereint und angesprungen werden. Mit Embedded-Tooltips werden auch hier überlange Seiten und somit ein Scrollen verhindert.

Die Reihenfolge des Tab-Menüs sollte nach der Wichtigkeit gruppiert und angeordnet werden. Das am Häufigsten verwendete steht links. Wie alle Navigationselemente, steht auch das Tab-Menü an erster Stelle des Detailbereiches und wird linksbündig ausgerichtet.

Der Seitentitel (Text_h2) des Detailbereichs ergibt sich aus dem aktuell ausgewählten Tab-Menü. Die Bezeichnung des Registers und dem darunter linksbündig angeordneten Seitentitel sollten übereinstimmen.

Die Detailinformationen erstrecken sich über die gesamte Breite falls keine Filter-/Navigationsmöglichkeit angeboten werden soll. Wird zusätzlich eine Filter-/Navigationsmöglichkeit angeboten, sollte diese links von den Detailinformationen positioniert werden. Dabei ist darauf zu achten, dass die Detailinformationen vom Filter/Navigationsbereich klar abgetrennt sind.

Zusammenfassung der Detailseite (A2)

Möglicher Aufbau

• Zwei Bereiche

• Oberer Bereich: Allgemeine Informationen

• Unterer Detailbereich: Zusätzliche Informationen

• Detailseite im Hauptfenster anzeigen

Mögliche Gestaltung der Detailseite

• Allgemeine Informationen

  • Je nach Bedarf zweispaltige Aufteilung, links Bilder oder Videos, rechts die wichtigsten allgemeinen Informationen

  • Gleiche Darstellung der Informationen wie zuvor erfasst

  • Daten bearbeiten über den Button unterhalb der allgemeinen Informationen

• Detailbereich

  • Zusätzliche Informationen als Embedded-Tooltip öffnen

  • Inhalte unter Tab-Menü vereinen

  • Tab-Menü steht an erster Stelle des Detailbereiches, linksbündig

  • Seitentitel (Größe h2) entspricht dem ausgewählten Tab-Menüpunkt

  • Detailinformationen über die gesamte Breite, falls keine Filter-/Navigationsmöglichkeit vorhanden ist

  • Filter-/Navigationsbereich wird ansonsten links neben dem Inhaltsbereich positioniert

  • Filter und Inhaltsbereich klar voneinander abtrennen (5px)

Seitengestaltung der Eingabe-/ und Ansichtsseiten

Eingabeseiten

Eingabeseiten im Tooltip öffnen

Diese Eingabeseite (E2) wird mit angezeigtem Seitentitel (Text_h2) mittig als Tooltip im Layout geöffnet. Optional kann eine Eingabeseite auch modal geöffnet werden. Ein Schließen-Symbol wird rechts oben angezeigt. Auf einer Eingabeseite sollten, wenn möglich, nicht mehr als sieben Eingabefelder platziert werden. Wie immer ist aber auch hier der Kontext zu beachten, in dem die entsprechende Seite eingesetzt wird. Auch die Zielgruppe ist hier zu berücksichtigen. Ein Eingabeformular sollte in der Regel ausreichen, um alle erforderlichen Daten zu erfassen. Um die Navigation innerhalb eines Formulars mit der Tab-Taste zu unterstützen, ist eine logische Anordnung der Eingabefelder erforderlich.

Eingabeseite als mehrseitiger Assistent (E1 – E2)

Anstatt zu versuchen, eine Vielzahl von Eingabeelementen in einem überlangen Formular unterzubringen, empfiehlt sich der Aufbau eines mehrseitigen Assistenten, der mit die Schaltfläche "Weiter" bedient werden kann (E1, E1.2). Jede Eingabeseite (E1 und E1.2) wird mit angezeigtem Seitentitel (Text_h2) mittig als Tooltip im Layout geöffnet. Ein Schließen-Symbol wird rechts oben angezeigt.

Assistenten sollten immer dann eingesetzt werden, wenn der Inhalt der einzelnen Eingabeseiten auch eine sinnvolle Aufteilung (Gruppierung) zulässt.

Wie immer ist hier aber auch der Kontext zu beachten, in dem die entsprechende Seite eingesetzt wird. So ist es auch möglich, mehr als sieben Elemente in einem Formular zu platzieren, ohne dass es überladen wirkt.

Bei mehrseitigen Formularseiten empfiehlt es sich, dem Nutzer eine Auskunft über den Fortschritt innerhalb des mehrteiligen Prozesses zu geben, so dass dieser genau weiß, wo er sich befindet und wie viele Schritte noch folgen (Schritt 3 von 5; 50% geschafft). Durch eine sinnvolle Unterteilung in mehrere Schritte, bleibt das Formular auch im sichtbaren Bereich. Hierdurch kann die Usability deutlich erhöht werden.

Eingabeseiten im Hauptfenster öffnen

Als dritte Möglichkeit können Eingabeseiten auch im Hauptfenster geöffnet werden. Dies könnte dann der Fall sein, wenn eine Vielzahl an Eingabefelder in einem Tooltip zu viel Platz einnehmen würden.

Ansichtsseiten

Ansichtsseiten sollten dem gleichen logischen Aufbau entsprechen wie deren dazugehörige Eingabeseite. Die gleiche oder ähnliche Anordnung der Elemente einer Ein- oder Ansichtsseite hilft den Nutzern sich leichter und schneller in einem Formular zurechtzufinden, unabhängig davon, ob Daten eingegeben, bearbeitet oder gelesen werden. Außerdem sollte eine hierarchische und übersichtliche Strukturierung der Elemente beachtet werden.

Zusammenfassung der Seitengestaltung

Eingabeseite im Tooltip öffnen (E2)

• Tooltip mittig im Layout öffnen

• Seitentitel (Größe h2) linksbündig anzeigen

• Schließen-Symbol rechts oben anzeigen

• Auf einer Eingabeseite, wenn möglich nicht mehr als sieben Eingabefelder platzieren

Eingabeseite als mehrseitigen Assistenten (E1-E2)

• Tooltip mittig im Layout öffnen

• Seitentitel (Größe h2) linksbündig anzeigen

• Schließen-Symbol rechts oben anzeigen

• Fortschritt anzeigen (z.B. Schritt 3 von 5)

• Mit den Schaltflächen "Weiter" und "Zurück" durch Eingabeseiten navigieren

Eingabeseite im Hauptfenster öffnen

• Wenn eine Vielzahl von Eingabefeldern in einem Tooltip zu viel Platz einnehmen würden

Ansichtsseiten

• Sollten den gleichen logischen Aufbau wie deren dazugehörige Eingabeseite haben

• Hierarchische und übersichtliche Strukturierung der Elemente beachten

Formulargestaltung

Formulare bestehen aus:

• Formularelementen (Eingabefelder)

• Labels (Bezeichnungen der Eingabefelder)

• Kontrollelementen (Schaltflächen)

Formulare sollten für eine gute Bedienbarkeit ergonomisch gestaltet werden. Wichtige Designkriterien sind die Minimierung der vertikalen Linien, sowie die Gruppierung von zusammengehörigen Eingabeelementen. Außerdem sollte ein Formular so wenig Design-Elemente wie möglich beinhalten, um die Benutzer optimal in ihrer Arbeit zu unterstützen. Eingabefelder sollten einer logischen Reihenfolge entsprechen, um die Navigation durch die Tab-Taste zu unterstützen. Alles was einen Benutzer beim Ausfüllen nicht unterstützt, lenkt ihn ab und sollte deshalb entfernt werden.

Minimierung der vertikalen Linien

In Formularen sollte die Anzahl der vertikalen Linien so gering wie möglich gehalten werden, um das Auge nicht zu überfordern und Ruhe in das Formular zu bringen.

Falsch

Die Abbildung oben zeigt ein schlecht gestaltetes Formular, das durch die hohe Anzahl von vertikalen Linien sehr chaotisch wirkt.

Richtig

Dieses Eingabeformular enthält die gleichen Eingabefelder, wirkt jedoch durch die Minimierung der vertikalen Linien viel ruhiger und übersichtlicher.

Platzierung der Beschriftung (Labels)

Innerhalb einer Applikation sollten Bezeichnungen durchgehend einheitlich positioniert werden, um den Lesefluss nicht unnötig zu unterbrechen.

Bezeichnungen sollten immer mit einem Großbuchstaben beginnen und aussagekräftig sein (Sprache des Unternehmens sprechen, keine ganzen Sätze). Zusätzlich sollten die Bezeichnungen nicht mit einem Doppelpunkt abgeschlossen werden.

Die Position des Labels wirkt sich auf die Benutzbarkeit des Formulars aus, wobei auch hier wieder nur Empfehlungen ausgesprochen werden können.

Labels über den Eingabefeldern

Labels sollten linksbündig und oberhalb der Eingabefelder angebracht sein. Dies erleichtert die Lesbarkeit und verdeutlicht den Zusammenhang zwischen den Feldbezeichnungen und den Eingabefeldern. Durch eine vertikale Anordnung der Elemente wird ein natürlicher Lesefluss von oben nach unten bzw. von links nach rechts unterstützt. Auch können hier Labels unterschiedlich lang sein, ohne ein unruhiges Bild zu erzeugen.

Pflichtfelder

Generell sollten Pflichtfelder in einem Formular auf den ersten Blick für den Nutzer klar erkennbar sein. Hierzu wird eine farbliche Hinterlegung von Pflichtfeldern empfohlen. Die farbliche Hinterlegung führt dabei zu weniger versehentlich nicht ausgefüllten Pflichtfeldern, einer schnelleren Bearbeitungszeit und höherer Nutzerzufriedenheit. Um eine verbesserte Sichtbarkeit von Pflichtfeldern zu erreichen, könnte z.B. auch ein Sternchen hinter einem Label platziert werden.

Gruppierung von Elementen

Die Unterteilung eines Formulars in sinnvolle Gruppierungen hilft Nutzern, sich schneller im Formular zurechtzufinden. Umfangreichere Eingabeformulare können so zu logischen Einheiten zusammengefasst werden. So werden Blöcke von Eingabefeldern, Auswahlfeldern oder Listen gebildet und optisch durch einen Abstand (10px) zwischen den Gruppierungen kenntlich gemacht. Wir empfehlen einen Abstand von 5px zwischen den vertikal angeordneten Eingabefeldern. Gruppen sollten zudem mit einer Überschrift (h3) versehen werden, so dass deren Zusammengehörigkeit auf einen Blick zu erkennen ist. Sind in einem Formular jedoch nur wenige Felder enthalten (7+/- 2), macht eine Gruppierung der Felder weniger Sinn.

Auswahlliste

Auswahllisten auf Eingabeseiten sollten, sofern sinnvoll, mit einer Schaltfläche (Plus-Icon) zum Hinzufügen eines neuen Eintrags ausgestattet sein. Sinnvoll wäre dies, wenn eine Ergänzung der Liste durch den Nutzer erwünscht ist. Alternativ kann auch ein Button "Hinzufügen" verwendet werden.

Kontrollkästchen (Checkbox)

Kontrollkästchen werden zur Auswahl von sich nicht ausschließenden Alternativen verwendet. Dabei ist die Bezeichnung immer rechts vom Kontrollkästchen zu positionieren.

Bei vertikaler Anordnung sind Kontrollkästchen und Bezeichnungen linksbündig untereinander auszurichten.

Bei horizontaler Anordnung sind Kontrollkästchen und Bezeichnungen auf gleicher Höhe auszurichten.

Formularnavigation

Text-Links

Die Inhalte einer Applikation werden durch Text-Links miteinander verknüpft. Text-Links dienen zur Navigation innerhalb einer Applikation und sollten deshalb deutlich gekennzeichnet werden. Einem Nutzer soll ohne überlegen zu müssen klar sein, was anklickbar ist und was nicht. Daher sollten Text-Links entweder unterstrichen werden oder farblich gekennzeichnet sein. Wir empfehlen eine Farbe zu wählen, die dem Design der Applikation oder des Portals entspricht und dadurch das Gesamtbild stimmiger erscheinen lässt. Text-Links müssen sich klar vom Textkörper abheben. Bei "hover" wird empfohlen den Text-Link in einer anderen Farbe (hier z.b. dunkelgrün) einzufärben, damit der Nutzer ein visuelles Feedback erhält.

Schaltflächen (Buttons)

Buttons werden als Funktionselemente eingesetzt. Die Bestätigung einer Schaltfläche löst immer eine unmittelbare Aktion aus, z.B. das Speichern eines Formulars. Schaltflächen sollten nicht verwendet werden, um zu anderen Seiten zu navigieren. Text-Links sind für diesen Zweck besser geeignet. Ausnahme: Für die Navigation in einem Assistenten können die Schaltflächen "Zurück" und "Weiter" verwendet werden. Die Anordnung der Schaltflächen sieht in diesem Fall so aus:

Bei Schaltflächen wird zwischen primären und sekundären Schaltflächen unterschieden. Die primäre Schaltfläche wird für die Hauptaktion (z.B. Speichern) verwendet und sollte sich visuell von den sekundären Schaltflächen (z.B. Abbrechen und Löschen) abheben.

Schaltfläche "Daten erfassen"

Die Schaltfläche "Daten erfassen" sollte oberhalb des Inhaltsbereiches angeordnet sein. Liegt eine Gruppierung des Inhaltsbereiches vor, sollte die Schaltfläche "Daten erfassen" ebenfalls oben rechts oberhalb der Gruppierung angeboten werden. Durch eine farbliche Hervorhebung der Schaltfläche ist sichergestellt, dass die Aktion nicht übersehen werden kann.

Schaltflächen innerhalb eines Formulars

Eingabeseiten beinhalten in der Regel genau zwei Schaltflächen: "Speichern" und "Abbrechen".

Bearbeiten-Seiten beinhalten drei Schaltflächen: "Speichern", "Abbrechen" und "Löschen". Die Schaltflächen "Speichern" und "Abbrechen" sollten immer rechts unten am Ende des Formulars bereitstehen. Dabei unterstützt die Anordnung "Speichern-Abbrechen" das natürliche Leseverhalten des Nutzers von links nach rechts.

Die Schaltfläche "Löschen", die die Bearbeiten-Seite zusätzlich anbietet, sollte immer ganz links am Ende des Formulars positioniert werden. Durch die räumliche Trennung der kritischen Schaltfläche "Löschen" von der Hauptschaltfläche ("Speichern") soll ein versehentliches Löschen der Eingaben verhindert werden. Zusätzlich wird die primäre Schaltfläche farblich gekennzeichnet.

Weitere Informationen

Applikationen erstellen und bearbeiten
Applikationselemente
Praxisbeispiele Responsives Design