Usability Diplomarbeit

Für die meisten kommerziellen Webseiten gehört zur wesentlichen Zielsetzung die Kontaktaufnahme zu den Besuchern. Da dies meist durch Formulare geschieht, soll im Folgenden näher auf diese eingegangen werden. Untenstehende Abbildung zeigt die wichtigsten Elementen eines Formulars.

Abbildung 25: Die Elemente eines Formulars [AM 13]

Texteingabefelder (Nr.1 in obiger Abbildung) sind die meist verwendeten Elemente und dienen zur freien Eingabe von Daten. In HTML können dies einzeilige oder auch mehrzeilige Felder sein. Sucheingabemasken verwenden, beispielsweise in Verbindung mit einem Button, diese Art von Element. Der kritischste Faktor ist dabei die Länge des Feldes. Die Länge, die angezeigt wird, sollte immer an die ungefähre Anzahl an Zeichen angelehnt sein, die der Benutzer eingeben wird. Zu lange Felder irritieren den Benutzer, da im Feld noch freier Platz sichtbar ist. Zu kurze Felder dagegen zwingen den Besucher zu scrollen und geben somit keine klare Kontrolle was nun eingegeben worden ist. Im obigen Formular wurde bspw. das Feld Geburtsdatum der Länge angepasst.

Die Beschriftung sollte oberhalb oder links vom Eingabefeld erfolgen, ansonsten besteht die Gefahr, dass das jeweilige Feld der Beschriftung nicht zuzuordnen ist.
Das Eingabeformat eines Textfeldes stellt sich oft als Problem dar, so z.B. wenn es um eine Datumsangabe geht. In solchen Fällen bietet es sich an, dies expliziert anzugeben oder eine Vorgabe zu machen. Im obigen Formular ist dies mit Hilfe von drei kurzen Felder umgesetzt.
Die Checkbox (Nr. 3) ist ein weiteres Element und vermittelt, dass mehrere Einträge aus einer Liste möglich sind. Die Beschriftung sollte rechts liegen und positiv formuliert werden. In einem Onlineshop zum Beispiel wäre eine doppelte Verneinung wie “Nicht als Geschenk verpacken” schwieriger zu verstehen wie “Als Geschenk verpacken”.
Nr. 4 in obiger Abbildung stellt einen Radiobutton dar. Diese vermitteln, dass genau ein Eintrag aus mehreren ausgewählt werden kann. Oftmals wird dieser Button allerdings angewendet, eine Funktion auszulösen. Der Radiobutton wird angeklickt und obwohl der User normal nichts erwartet, wird bspw. eine neue Seite geöffnet.
Die Beschriftung sollte sich hier ebenfalls rechts vom Button befinden, und mehrere stets untereinander statt nebeneinander. Somit ist eine bessere Übersicht gewährleistet und es wird deutlich, dass diese eine Gruppe darstellen.
Als Alternative zu einem Radiobutton kann ein Pulldown-Menü (Nr.2) eingesetzt werden. Diese sollten ab einer Auswahlmöglichkeit von drei Elementen benutzt werden, wobei die Obergrenze aufgrund des Kurzzeitgedächtnisses eine Anzahl von sieben plus minus zwei Items beschränkt sein sollte. Für weniger als drei Elemente sollten Checkboxen benutzt werden. Solche Pulldown-Menüs sieht der Benutzer oft als Navigationselement, wobei problematisch erscheint, dass die zur Verfügung stehenden Alternativen erst bei einem Klick auf den Pfeil zum Vorschein kommen und somit kein primäres Scannen möglich ist.
Jedes Formular verlangt als klaren Abschluß einen Button (Nr.5) am unteren Ende des Formulars. Meist werden die dem User bekannten HTML-Buttons verwendet. Dies ist auch zu empfehlen, obwohl mit Hilfe CSS Farbe und Aussehen verändern werden können. Doch alles was durch Konditionierung gelernt worden ist, so z.B. das Aussehen der typischen Windows-Buttons, sollte auch benutzt werden. Deshalb wird empfohlen die herkömmlichen HTML Buttons weiterhin zu verwenden, ansonsten kann es passieren, dass der Benutzer vergeblich nach einem grauen Button sucht und den vorhandenen anders aussehenden übersieht.
Die ideale Beschriftung der Buttons ist das Ansprechen der Aktion die durch das Drücken ausgelöst wird. Ein einfaches “OK” ist bei einer Absendung einer Bestellung also zu wenig, ein aussagekräftiges “Bestellen” ist vorteilhafter. Der Besucher versteht somit den jeweiligen Vorgang besser.

Fraglich ist, ob ein Button zum löschen der Eingaben nötig ist. Oftmals ist dieser Reset-Button (beschriftet mit “Eingaben löschen”) so angebracht, dass er direkt neben dem Absendbutton liegt und somit schnell verwechselt werden kann. Diesem Problem kann durch weit auseinanderliegende Positionierung entgegengewirkt werden.
Bei kurzen Formularen kann dieser Button sicherlich weggelassen werden. Anders sieht es dagegen bei immer wiederkehrenden Aktionen aus, z.B. bei einer Telefonnummernabfrage, bei der unterschiedlichen Daten hintereinander abgefragt werden.
Nachdem das Formular ausgefüllt und abgeschickt worden ist, ist eine Validierung der eingegebenen Daten möglich. Zuvor sollten alle Eingaben nochmals zur besseren Übersicht auf einer neuen Seite dargestellt werden. Dies gilt vor allem bei Formularen, die sich über mehrere Seiten erstrecken.

Doch auch eine angeblich so leichte Überprüfung einer fünfstelligen Postleitzahl bereitet Probleme: sollte ein Österreicher das Formular benutzen, würde dies zu einer Fehlermeldung führen, da dieser sicherlich eine vierstellige Zahl eingeben würde.
Auszufüllende Mussfelder sollten mit einem roten Stern gekennzeichnet werden und äußerst vorsichtig eingesetzt werden. Die Internetbesucher überlegen mittlerweile genauer, welche persönlichen Daten sie von sich preisgeben. Deshalb sollten alle unnötigen Angaben wie z.B. Beruf oder Einkommen ganz weggelassen werden oder zumindest eine optionale Eingabe sein. Dies soll der Forderung der Aufgabenangemessenheit aus der DIN-Norm 9241 Rechnung tragen.

Eine Fehlermeldung sollte klar vom Inhalt abgesetzt werden und als solche erkennbar sein. Zudem sollten die entsprechenden Felder als Fehler markiert sein. Ansonsten fragt sich der User, was passiert ist, und ob das Formular auch abgeschickt worden ist.
Folgendes Bild zeigt einen typischen Ablauf einer Bestellung per Formular und soll einige unscheinbare Probleme demonstrieren. Bei diesem Formular sind alle Felder auszufüllende Mussfelder, was man an der Fehlermeldung rechts oben erkennt, eine Kennzeichnung im Formular selbst fehlt allerdings.

Auf den ersten Blick sieht dieses Formular sehr übersichtlich aus, was wünschenswert ist. Negativ auffallend ist die kleine weiße Schrift und die Tatsache, dass bis auf ein Feld alle gleich lang sind, was wiederum nicht zum erleichterten Überblick beiträgt. Hilfslinien oder eine andere Hintergrundfarbe könnten zudem das letzte Feld “Anzahl der Gutscheine” von den Daten des Bestellers abgrenzen.
Der Reset-Button liegt genau neben dem Abschickbutton und sollte besser mit “Eingaben löschen” betitelt sein. Fraglich ist, ob bei diesen relativ wenigen Eingaben überhaupt solch ein Button nötig ist. Nach Druck auf den Button “Beförderungsbestimmungen” öffnet sich ein Windows-Warnfenster mit den allgemeinen Beförderungsbestimmungen. Ein Link, welches ein neues Fenster öffnet, wäre besser und man könnte diesen Text ausdrucken.

Nachdem der Abschickbutton (Nr.1 in der Abbildung) gedrückt worden ist, erscheint ein Hinweisfenster mit der Auflistung aller Eingaben, welches zu einer guten Kontrolle führt. Nach einem weiteren Klick auf “OK” erscheinen nochmals die Beförderungsbestimmungen (Nr.2). Bestätigt man dieses Fenster, so öffnet sich der Hinweis, dass die Eingaben per Email und nicht sicherheitsverschlüsselt verschickt werden (Nr.3). Nach diesem Vorgang über 4 Mausklicks bleibt es dem potentiellen Kunden offen, die Bestellung abzuschicken. Optimierte Formularsysteme kommen mit höchstens zwei Klicks aus und kosten dem User somit weniger Zeit.

Abbildung 26: Verlauf einer Bestellung über ein Formular [AM 14]

Einen weiteren Vorteil von Formularen kann dieses Beispiel nicht ausnutzen. Kontaktformulare sollten auch von Benutzern abgesendet werden können, wenn diese sich nicht an ihrem eigenen PC aufhalten. Ist der potentielle Käufer an einem anderen Arbeitsplatz oder gar in einem Internetcafe, so ist es meist nicht möglich oder wäre zu zeitaufwendig, den eigenen Email-Account in einem Mailclient zu konfigurieren. Kostenlose Emailadressen wie man sie bei GMX oder Web.de einrichten kann, werden meist über das Browserinterface bedient und der Nutzer kennt selten seine Accountdaten.

Im obigen Fall merkt der Benutzer evtl. erst am Schluss, dass ein letztendliches Abschicken aufgrund fehlender konfigurierter Emailadresse nicht möglich ist. Der gesamte Vorgang wäre dann auf Grund der vielen Klicks und des Zeitaufwands nicht effektiv und effizient und würde auch den Benutzer nicht zufrieden stellen.
Nebenbei sei auf etliche Rechtschreibfehler in den Warnfenstern hingewiesen (vor allem missachtete Groß- und Kleinschreibung sowie vertauschte Buchstaben), was nicht zum Vertrauensaufbau und einer hohen Glaubwürdigkeit beiträgt.

Neben solchen Kontaktformularen sollte man dem Interessenten aber dennoch einen Link zur Emailadressen anbieten können.