Während Designer jubeln, dass sie dank AJAX und Flash mehr kreative Möglichkeiten bei der Interface-Gestaltung bekommen, warnt Usability-Experte Jakob Nielsen vor der leichtsinnigen Aufgabe etablierter Standards. Denn User geben Online-Anwendungen nur wenig Zeit, um die Funktionsweise des Interface zu übermitteln. Klappt das nicht, ist der Kunde verloren. Vielleicht für immer.

6. Falsche Informationen abfragen
Viel Aufmerksamkeit widmet Jakob Nielsen derzeit dem Thema Formular-Design. Das hat ganz pragmatische Hintergründe, schließlich entscheiden in aller Regel Formulare über den Erfolg oder Misserfolg einer Conversion.

Das Münchner Arthotel führt eine neue Zeitrechnung im Web ein

Der Zutritt zum System ist möglichst einfach zu halten. Email-Adresse als Benutzername und ein Passwort können genügen, um eine einfache Form der Kundenbindung zu etablieren. Bereits an dieser Stelle wünscht sich die Mehrzahl der Nutzer eine persönliche Komfortfunktion, etwa das Zwischenspeichern eines Warenkorbs. Für das Ausführen einer solchen Funktion ist die Abfrage eines Wohnorts oder Geburtsdatums nicht nur unnötig, sie indiziert praktisch den missbräuchlichen Umgang mit Daten.

Ein haarsträubendes Beispiel zeigt die Website des Hotels Marc Aurel, seines Zeichens eines der besten deutschen Tagungshotels. Dort wird für die schiere Reservierungsanfrage die Kreditkartennummer abgefragt und obendrein noch unverschlüsselt übertragen.

Das Hotel Marc Aurel verlangt die unverschlüsselte Übertragung von Kreditkartendaten zur Anfrage für eine Reservierung

Eine weitere Variante der falschen Informationsgewinnung besteht darin, die gleichen Daten mehrfach zu erheben. Eine derartige Anwendung ist schlicht schlecht programmiert.

7. Geben Sie Standardwerte vor
Ein weiteres Problem mit Formularen: Wenn Sie keine Standardwerte vorgeben, riskieren Sie, dass die Nutzer invalide Datensätze abschicken. Das gilt vor allem, wenn unterschiedliche Formen der Formatierung möglich sind, etwa bei einem Geburtsdatum.

Auch, wenn es eine Vielzahl möglicher Optionen zu wählen gibt, sind gängige Standardwerte eine wertvolle Hilfe. Sie schaffen dreierlei: Für Powernutzer beschleunigen Sie den Prozess, weil diese die entsprechend formatierten Felder einfach ignorieren können. Gelegenheitsbesuchern wird anhand des Beispiels erläutert, welche Eingabemöglichkeiten zur Verfügung stehen. Und für Einsteiger bedeuten gute Standardwerte vor allem eine kognitive Entlastung.

Um Expedia auch mal zu loben: Sie können direkt auf der Startseite eine Reiseabfrage mit den voreingestellten Standardwerten auslösen und erhalten als Ergebnis aktuelle Last-Minute-Reiseangebote.

8. User ins kalte Wasser werfen
Onlineapplikationen sind erklärungsbedürftig. Das gilt intensiver als bei normaler Software und auch mehr als bei Websites, da das Ergebnis aus der Anwendung eines Online-Tools nicht immer vorhersehbar ist. Insofern hat die Mehrzahl der Nutzer kein mentales Modell von der Funktionsweise.

Zwei Möglichkeiten bieten sich dem Entwickler. Entweder er wählt einen stringent-linearen Anwendungsprozess. Sofern nicht allzu viele Optionen verfügbar sind, ist das ein denkbar einfacher Weg. Die meisten Autobauer schlagen diesen Weg ein. Peugeot aber verwendet zur Darstellung des Prozesses Registerkarten und vermischt hier zwei Metaphern, die nicht zusammen passen. Registerkarten stehen für den Wechsel zwischen unterschiedlichen Ansichten und nicht für die Darstellung eines linearen Procederes.

Welcher User erwartet, dass auf der Website von Adobe eine reale Anwendung zur Einstellung der Sicherheitskonfiguration des Flash Players läuft?

Die zweite Möglichkeit ist die Erläuterung des Interfaces und die Darstellung eines möglichen Endergebnisses. Dafür bleibt nur sehr wenig Zeit. Am besten man nutzt eine schematische Darstellung in Form einer Liste, etwa:

• Produkt auswählen
• Motiv hochladen
• Text und Grafiken einfügen
• Lieferdaten eingeben
• Bestellen

Und dazu blenden Sie zum Beispiel ein fertig designtes T-Shirt als Muster ein.

Zwei gravierende Fehler sind zu vermeiden. Starke Einschränkungen innerhalb des Systems, die gegen ein vermutetes mentales Modell verstoßen, müssen frühzeitig kommuniziert werden. Vorzeigekandidat Spreadshirt erläutert erst nach dem Upload (und der vorherigen Herstellung) eines eigenen Motivs, dass Freisteller nicht möglich sind und es sowieso nur auf helle Textilien gedruckt werden kann. Und das, obwohl es einen intensiven Dialog beim Upload-Formular gibt.

Wer darauf wartet, dass im Zentrum des SkinDesigners etwas passieren wird, kann lange warten

Ein zweiter Fehler unterläuft dem tollen Werkzeug „SkinDesigner“, das es erlaubt, eigene, exakt passende Aufkleber zum Beispiel für einen Notebook-Rücken zu entwerfen. Nach dem Starten der Applikation kann der User ein Gerät wählen. Dann starrt ihn eine leere Vorlage an, die Malwerkzeuge zur rechten sind nicht benutzbar. Die Iconleiste im Kopf könnte die Lösung liefern, denn an dieser Stelle will ein eigenes Motiv auf den Server geladen werden. Und das wird auch erklärt. In der linken oberen Ecke. Natürlich fokussiert die Konzentration des Nutzers aber auf die Mitte in der er kreativ tätig werden soll.

9. Erzeugen Sie User-Funktionen und nicht System-Features
Leichter gesagt als getan. Im Wesentlichen geht es darum, Prozessschritte in der Anwendung so darzustellen, dass der Nutzer sie schnell versteht. Den technischen Hintergrund einer Prozedur will er vielleicht nur im Ausnahmefall erfahren.

Ein einfaches Beispiel liefern die Bilderdienste, die Digitalfotos belichten und zum Beispiel zur Fotobüchern binden. Die Auflösung der meisten Digitalkameras entspricht Bildschirm-Standard, also einem Seitenverhältnis von 4 zu 3 oder 1,33 zu 1. Ein normales Druckformat für Fotos ist 10 x 15, also 1,5 zu 1. Folglich gibt es zwei Möglichkeiten: Entweder wird das gesamte Foto belichtet, dann erscheint ein weißer Rand auf der längeren Seite, oder das Bild wird beschnitten, um das Papier randlos zu bedrucken.

Ist „Autofill“ tatsächlich der richtige Begriff für das Beschneiden oder Verkleinern digitaler Fotos?

Jeder Anbieter hat hier seine eigene Lösung und kaum eine ist wirklich intuitiv verständlich. Einer der Marktführer, Snapfish, verzichtet auf jeglichen Hinweis bei der Konvertierung des Formats. Ein anderer, photo.com, verwendet den Systembegriff „Autofill“. Zur Ehrenrettung sei allerdings gesagt, dass eine optische Vorschau das mögliche Endergebnis vermuten lässt. Ein weiterer großer Anbieter, Pixum, ermöglicht eine Auswahl „10 cm“ oder „10 cm mit Rand“. Sind das dann „11 cm“?

Gerade Dienste, die sich an die breite Öffentlichkeit richten – und dazu gehören zweifellos Fotodienstleister – sollten Funktionen so klar und einfach wie möglich beschreiben.

10. Überflüssiges weg lassen
Gerade für Online-Anwendungen gilt: weniger ist mehr. Konzentrieren Sie die Anwendung auf den Kernprozess und verstecken Sie optionale Funktionen, die eher selten benutzt werden. Zeigen Sie den Power-Nutzern, wo sie Zugang zur erweiterten Funktionalität finden. Etwa mit einer Weiche im Startdialog. Achten Sie aber darauf, Einsteigern hier nicht das Gefühl zu geben, etwas zu verpassen. Der Zugang zur Profi-Variante darf ruhig kleiner und weniger prominent sein.

Beim neuen eBay-Desktop haben die Macher genau das beherzigt. Die Kernfunktion, nämlich das Bieten auf Auktionen, ist nun aus jedem Ansichtsmodus heraus direkt möglich und die aktuelle Uhr tickt direkt daneben herunter.

Ein besonders überflüssiges Element in Onlineanwendungen ist nach Ansicht von Jakob Nielsen der Reset-Button am Fuß eines Formulars. Niemand will alle Daten neu eingeben. Entweder der Nutzer verlässt die Anwendung oder er korrigiert einzelne Angaben. Doch ein versehentlicher klick auf „Reset“ führt zwangsläufig zur Usability-Katastrophe. ™

Links zum Thema:

• Teil 1 des Artikels
• Die Nielsen Kolumne
• Leitfaden zur Shop-Usability vom BVDW (PDF)

Erstveröffentlichung 10.04.2008