Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Best Practices Interaktionselemente - Teil 1

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Best Practices Interaktionselemente - Teil 1

Dieser zweiteilige Artikel von Stefan Nitzsche soll darüber Aufschluss geben, was Interaktionselemente sind, welche es gibt, was man mit Ihnen anstellen kann und was besser nicht. Im ersten Teil findest du 13 allgemeine Regeln zur Verwendung von Interaktionselementen.

Als Interaktionselemente bezeichnet man alle Elemente, die dem Benutzer ermöglichen, mit einer Webseite zu interagieren. Dazu gehören sämtliche Formularelemente, wie beispielsweise Texteingabefelder, Radiobuttons oder Checkboxen, Selectboxen, aber auch Dialoge wie Fehlermeldungen, Bestätigungen oder metaphorisch auf „echte“ Anwendungen Bezug nehmende Elemente wie Schiebe- oder Drehregler. Die Querverweise, die das Web erst zum Web machen, die Hyperlinks, gehören ebenso dazu wie eine aus Links bestehende Navigation.

Interaktionselemente des Browsers

Eine Webseite wird oft (fälschlicherweise) als eigenständige, autarke Oberfläche verstanden. Deren Designer sehen den Browser nicht selten bloß als unerwünschten, grafischen Rahmen, obwohl er eine Fülle von Interaktionselementen bietet, die sich auf die dargestellte Seite beziehen. Drucken, Vor/Zurück, das Setzen von Lesezeichen, Vergrößern und Verkleinern sind nur einige dieser Funktionen. Um den Benutzer nicht zu verwirren, wenig robuste technische Lösungen zu vermeiden und die Webseite zu entlasten, sollte man es vermeiden, bereits vorhandene Funktionen wie die oben genannten in der Webseite zu wiederholen, ohne dem Benutzer dabei einen wirklichen Mehrwert zu bieten:

Regel 1: Redundanz durch Doppelung der durch den Browser bereitgestellten Funktionen in der Webseite vermeiden!

Evolution des Web

Konzeptionelle Unterschiede in der Verwendung von Interaktionselementen fallen besonders auf, seitdem das Web 2.0 Gestalter von Dokumenten zu Gestaltern von Anwendungen gemacht hat. Während man bei der Gestaltung von Formularen in der Dokument-Metapher von einer Linearität ausgeht, einer Vorgehensweise in mehreren Schritten, arbeitet man bei der Gestaltung von Formularen in der Anwendungsmetapher häufig mit der direkten Beeinflussung/Manipulierung von Inhalt oder zumindest mit der direkten Validierung von Eingaben. Das ergibt natürlich im Kontext der Seite eine viel komplexere Interaktion, als bei Linearität – dem ist Rechnung zu tragen.

Regel 2: Bei der Gestaltung von Interaktionen den Grad der Komplexität des Produkts bedenken!

Status

Seit vielen Jahren geistert die 3-Klick-Regel durch die Köpfe von Laien, Konzeptern und Designern. Sie besagt, dass man den Benutzer verliert, falls er nicht innerhalb von drei Klicks sein Ziel erreicht. Mittlerweile weiß man aber, dass es wichtiger ist, dem Benutzer jederzeit zu zeigen, wo innerhalb der Architektur er sich befindet. Soviel zu vernetzten Dokumenten – bei Anwendungen kommt noch ein wichtiger Faktor hinzu: der Status. Die Grundlage des Web wie wir es kennen, das HTTP-Protokoll, ist ein zustandsloses Protokoll, dessen Zustandslosigkeit durch die Kombination mehrerer Technologien (Ajax) simuliert aufgebrochen wird. Das Kriterium des Systemzustands stammt aus der Software-Ergonomie, die sehr viel näher an der Anwendungs-Metapher liegt, als die Kriterien der klassischen Web Usability. Bedenkt man dieses Kriterium bei der Gestaltung der Oberfläche, so muss man dem Benutzer zu jeder Zeit klar zeigen, in welchem Zustand sich gerade das System befindet, dass er bedient. Das schließt natürlich wertvolle Fehlermeldungen ein, die an der Stelle angezeigt werden, an der ein Fehler geschehen ist – und die Möglichkeit, diesen Fehler leicht zu korrigieren.

Regel 3: Der Status des Systems muss zu jeder Zeit klar ersichtlich sein!

Verwirrung der Benutzer

Interaktionselemente müssen aussehen wie Interaktionselemente. Verwendet man als Gestalter beispielsweise Formularelemente, so ist man oft versucht, Checkboxen, Radiobuttons oder Texteingabefelder der Seitenanmutung anzupassen. Dies ist ein häufig begangener Fehler – hier kann nur Empfehlung sein, bereits erlernte Interaktionselemente zu nutzen. Apple formulierte eine ähnliche Richtlinie in seinen „Human Interface Guidelines“ so: „Users will learn your application faster if the interface looks and behaves like applications they’re already familiar with.“, auch Jakob Nielsen hat dazu etwas gesagt: „Users have several thousand times more experience with standard GUI controls than with any individual new design.“.

Regel 4: Die Bedienung durch Reduktion des kognitiven Aufwands erleichtern!

Schnittstelle zwischen Mensch und Maschine

Die Schnittstelle, über die man mit der Oberfläche interagiert, bestimmt zu einem großen Teil die Gestaltung. Konzipiert man Webseiten, so kann man höchstens mutmaßen, über welche Schnittstellen die Benutzer mit der Webseite interagieren – über die drei häufigsten sollte man allerdings nachdenken: Maus, Tastatur und Touch Screen. Das bringt, neben der Anforderung, durch die Tastatur bedienbare Webseiten zu produzieren, die Anforderung mit sich, die Dimensionen der Interaktionselemente der Schnittstelle Touch Screen anzupassen – gerade weil in naher Zukunft die Anzahl der verwendeten Geräte mit Touch Screen noch deutlich zunehmen wird.

Regel 5: Jede mögliche und wahrscheinliche Form von Schnittstelle in die Planung einbeziehen!

Reihenfolge

Die Reihenfolge von Interaktionselementen darf niemals von der technischen Umsetzung beeinflusst sein. Geschmackssache ist sie allerdings auch nicht, eher eine Gratwanderung zwischen Anforderungen, Informationsaufbau und Bedeutung der einzelnen Interaktionselemente. In vielen Fällen ist es sinnvoll, die gelernten Reihenfolgen einzuhalten, beispielsweise bei persönlichen Daten. Nimmt man beispielsweise die Anordnung von OK- bzw. Abbrechen-Schaltflächen in Desktop-Software, so machen es Microsoft und Apple völlig entgegengesetzt. In Microsoft Windows steht die OK-Schaltfläche stets vor der Abbrechen-Schaltfläche, bei Apples Mac OS X steht die OK-Schaltfläche grundsätzlich nach der Abbrechen-Schaltfläche. Und für beide Anordnungen gibt es gute Gründe.

Regel 6: Die Reihenfolge von Interaktionselementen will gut bedacht werden und sollte sich nie der technischen Umsetzung unterwerfen!

Nutzlose Interaktionselemente

Nutzlose Interaktionselemente und Elemente, die aussehen, wie Interaktionselemente, aber keine sind, haben nichts auf einer Webseite zu suchen. Gerade bei Formularen ist diese Regel unheimlich wichtig, denn Untersuchungen haben ergeben, dass schon mit der Reduktion um wenige Abfragen eine deutlich höhere Anzahl an vollständig ausgefüllten Formularen abgesendet wurde.

Regel 6: Nutzlose Interaktionselemente sowie Dinge, die aussehen wie Interaktionselemente, aber keine sind, müssen vermieden werden!

Konsistenz

Die Verwendung und die Verortung der verwendeten Interaktionselemente muss konsistent sein. Erwartet der Benutzer für eine bestimmte Funktion ein bereits vorher dafür verwendetes Interaktionselement, so sollte man kein anderes verwenden. Ebenso sollte man den Ort eines einmal eingesetzten Interaktionselement nicht ständig verändern, um so den Lernaufwand niedrig zu halten.

Regel 7: Konsistente Art und Ort eines Interaktionselements sind extrem wichtig!

Graceful Degradation

Nutzt man Interaktionselemente, die nur in bestimmten Systemen verwendbar sind, sperrt man Benutzer anderer Systeme aus. Um dies zu vermeiden, muss man die Funktionalität erhalten, ohne systemspezifische Interaktionselemente zu verwenden. Es gibt wenig schlimmeres als ein nicht funktionierendes Interface, dessen Benutzer nicht weiß, warum es nicht funktioniert.

Regel 8: Graceful Degradation stellt die Verwendbarkeit in ungeeigneten oder älteren Systemen sicher!

Löschen und Abbrechen

Viele Formulare machen Gebrauch von Reset- oder Abbrechen-Schaltflächen, die beide keinen anderen Zweck erfüllen, als den der Zurück-Schaltfläche des Browsers. Studien belegen, dass derartige Schaltflächen nur zu einem Versehen führen: man löscht den Inhalt des mühsam ausgefüllten Formulars, wenn man es abschicken will. Nur weil das Markup diese Schaltflächen als Standardfälle vorsieht, muss man sie nicht verwenden.

Regel 9: Die Verwendung von Reset- oder Abbrechen-Schaltflächen ist nur äußerst selten sinnvoll!

Vorbelegung

Standardwerte oder Vorbelegung von Interaktionselementen, besonders bei Formularen, ist beliebt, aber nicht immer sinnvoll. Es wirkt unverschämt, dem Benutzer zu unterstellen, er würde gern einen Newsletter bekommen oder die AGB akzeptieren – letzteres macht die dem Benutzer abgenommene Entscheidung sogar unwirksam. In jedem einzelnen Fall, sollte man sich eine Vorbelegung mit einem bestimmten Wert genau überlegen.

Regel 10: Vorbelegung von Interaktionselementen ist mit Vorsicht zu genießen und sollte von Fall zu Fall entschieden werden!

Gruppierung

Um die Zusammengehörigkeit von Interaktionselementen zu unterstreichen, ist es sinnvoll, sie visuell zusammenzufassen. Dazu können Rahmen, ein Bereich mit einer bestimmten Hintergrundfarbe oder ein Oberbegriff dienen.

Regel 11: Durch Gruppierung von Elementen lassen sich Zusammenhänge herstellen!

Beschriftung

Die Beschriftung von Interaktionselementen muss, wenn sie erforderlich ist, sprechend sein. Unklarheiten durch Formulierung oder Wahl der Begriffe müssen vermieden werden, auch muss die Beschriftung einen deutlichen Bezug zum beschriebenen Interaktionselement haben. Beschriftungen von Interaktionselementen, gerade bei Auswahl von mehreren Möglichkeiten, sollten außerdem immer positiv gewählt werden. „Ich möchte den Newsletter erhalten!“ wird eher verstanden, als „Ich möchte den Newsletter nicht erhalten!“. Man sollte es auch mit der Länger der Beschriftungen nicht übertreiben – Kürze und Prägnanz helfen dem Benutzer.

Regel 12: Sprechende und positive Beschriftungen erleichtern das Verständnis, Nähe zum beschriebenen Interaktionselement stellt einen Bezug her!

Reaktionszeit

Alle Interaktionselemente müssen schnell reagieren. Es gibt nur wenig Dinge, die den Benutzer schneller verjagen, als ein langsames Interface. Studien belegen, dass jede Reaktionszeit unter 0,1 Sekunde dem Benutzer das Gefühl gibt, sofort zu reagieren. Alles bis zu einer Sekunde nimmt der Benutzer als Verzögerung wahr, hält ihn aber nicht von dem ab, was er tut. Ab einem Limit von zehn Sekunden verliert der Benutzer jedoch den Fokus und tut andere Dinge, um die Zeit zu überbrücken, oder beendet die Interaktion komplett.

Regel 13: Die Reaktionsgeschwindigkeit während der Interaktion muss ständig beobachtet und bei Bedarf optimiert werden!

Kommentare

cortex
am 18.12.2008 - 10:10

exzellenter artikel... vielen dank dafür.

cx

Permanenter Link

alexander farkas
am 18.12.2008 - 10:39

Hi Stefan,
cooler Artikel. schön gemacht :-)

Permanenter Link

A.C.
am 18.12.2008 - 14:37

Kann mich meinen Vorrednern nur anschließen - sehr schöner Artiekl, den ich wohl in Zukunft in der Zwischenablage für unsere Programmierer parat halte ;)

Permanenter Link

Sam Figueroa
am 31.12.2008 - 15:28

Super Beitrag. Lässt sich sehr gut lesen und enthällt gute Informationen. Den ein oder anderen Tipp werde ich mal bei Argumentationen im Berufsleben einsetzen.

Permanenter Link

Die Kommentare sind geschlossen.