Neues in der Kategorie Usability-Sünden

Wieder mal ein Beispiel für mangelhafte Nutzerführung in Formularen. Was ist hier alles falsch?

• Die Fehlermeldung hat die gleiche Textauszeichnung wie eine Überschrift.
• Es fehlt ein Hinweis auf das Feld, in dem eine falsche Eingabe getätigt wurde (die Zahl 3 davor hat jedenfalls für den Nutzer überhaupt keinen hilfreichen Charakter).
• Es gibt über die Fehlermeldung hinaus keine Hilfe, wo der Fehler zu suchen ist (kein Formularfeld ist markiert).
• Der Text der Fehlermeldung ist nicht ausreichend (in Korrelation mit den anderen Punkten - wenn man weiß, welches Feld gemeint ist, erschließt sich das Problem leichter).

Was war nun tatsächlich der Fehler? Natürlich der Punkt zwischen den Ziffern im Feld "Miete/Kaufpreis - bis...". Logisch, oder? :)

In den letzten Tagen ging es hoch her im Netz: die Leipziger Verkehrsbetriebe (LVB) hatten ihre frisch relaunchte Webseite präsentiert. Darüber wurde viel geschrieben und wenig gelobt, unter anderem in diesem sehr guten Artikel des Journalisten Daniel Große oder hier im Designtagebuch. Die Oberfläche ist aber auch wirklich mit bestem Willen nicht anders als - Verzeihung - hässlich zu nennen:



Sie wirkt kein Stück zeitgemäß. Die große Frage ist, wie und mit welchen Nutzern wurde diese Webseite getestet - denn getestet wurde sie laut einer Pressemeldung angeblich. Der Kontrast der weißen Schrift auf grau gestricheltem Grund ist schlecht, die vielen Versalien sind ein No-Go im Bereich Lesbarkeit, besonders die linke Reiternavigation ist sehr schlecht zu lesen. Gehörten Senioren zur Testgruppe?

Man navigiert über gruselige, viel zu detailreiche Icons. Hier wäre interessant zu sehen, wie die Fahrscheinautomaten der LVB aussehen. Denn da liegt eine große Stolperfalle im Design (und damit auch in der Gebrauchstauglichkeit): entsprechen diese Icons nicht solchen, die die Nutzer bereits kennen, müssen sie sich umstellen. Denn die Icons sind auch nicht in irgendeiner Form standardisiert, d.h. sie sehen auch nicht bereits bekannten Symbolen ähnlich wie zum Beispiel dem hier :

Insbesondere die Icons für "Haltestelle" und "Verbindung" rechts oben sind zu nah beieinander platziert und sich zu ähnlich. Natürlich hilft die Schrift, die Symbole dann zu unterscheiden, aber da beim Mouse over die Bildunterschriften für ALLE die Symbole in dieser oberen Ecke an der GLEICHEN Stelle erscheinen... nun ja.

Schlimm auch das an den unteren Rand geklebte und festgepinnte gelbe... Ding, das beim Scrollen stehenbleibt. Wie Daniel Große schon schrieb, fordert es zu Blicksprüngen heraus, weil es die Aufmerksamkeit anzieht. Das macht die gesamte Seite unruhig. Dazu trägt aber auch die eigenartige Verwendung von Farben bei. In Formularen sind manche Bereiche, wie z.B. das Suchfeld, orange hinterlegt. Diese Farbe signalisiert am linken Karteireiterrand auch, dass hier etwas ausgeklappt werden kann (etwas, auf das ein ungeübter Nutzer aber wahrscheinlich NIE kommen wird, da es sich nur um ein oranges Rechteck ohne jeden Text oder Hinweis handelt). Wie beim Suchfeld suggeriert die orange Farbe also eine Aktivität, die der Nutzer hier starten kann (die Suche starten, bestimmte Bereiche anzeigen lassen). Gleichzeitig sind aktive Bereiche aber auch orange markiert, sowohl in Unternavigationen bei Menüs wie auch in den Icons der rechten oberen Leiste sowie bei Icons, die auf manchen Unterseiten vorkommen. Die Haupticons, die auf der Startseite einmal prominent platziert sind und sich auf den Unterseiten links oben befinden, sind im aktiven Zustand jedoch NICHT orange hinterlegt - sondern in unterschiedlichen Blautönen, in gelb und grün...

Insgesamt also ein riesiges, wirres Durcheinander ohne jede Konsistenz. Obwohl offensichtlich viel Arbeit investiert wurde, ist das Gestaltungskonzept nicht stringent. Und die merkwürdigen Figuren im Tickets und Tarife-Bereich sind wirklich einfach nur... schrecklich. Um nochmal auf Daniel Grosse zurückzukommen, der hat das nämlich sehr sehr nett beschrieben:

"Studenten sind offenbar fülliger als Azubis, Erwachsene haben einen Bierbauch, Autofahrer sind unförmig und Senioren sind augenscheinlich Exhibitionisten, die ihren Mantel lüften."

Ganz ehrlich, wer MACHT sowas? Nimmt kostenlose Grafiken, die man im Netz runterladen kann, und benutzt die sinn- und haltlos für ein solches Unternehmen...



Und so könnte man stundenlang weitermachen: warum gibt es zwei verschiedene Icons für Informationen, von denen eines "Nachrichten" heißt, und was unterscheidet oder verbindet eigentlich die zwei Haupticon-Leisten? Wieso ist diese Seite so wenig erwartungskonform gestaltet, dass ich - mit 15 Jahren Netzerfahrung - wie blöd danach suche, wie man verdammt noch mal zurück zur Startseite kommt? Wieso kleben einige Teile dieses "Designs" so aneinander, während andere viel zu viel Luft haben? Wieso gibts beim Browsen mit Safari unter dem Punkt "Hilfe" einfach mal GAR nichts?



Besonders fassunglos ließ mich der Kommentar des Marketing-Leiters der LVB zurück, der auf die zahlreichen technischen Probleme mit der Fahrplanauskunft antwortete:

„Diese Fehler gab es auch schon vorher, sie hängen nicht mit der neuen Internetseite zusammen."

Wollen wir alle mal einen Moment innehalten und darüber nachdenken, was der Zweck der Webseite eines Verkehrsunternehmens sein sollte. Welche Nutzungsszenarien könnte es hierfür geben? Ach so - darüber HAT niemand nachgedacht? Sieht so aus. Im wahrsten Sinne des Wortes.        

Sanetta ist offenbar eine deutsche Firma mit Sitz in Deutschland. Vielleicht sind sie auch international tätig, das weiß ich nicht; ich weiß nur, dass es für die Usability nicht günstig ist, solch einen Mischmasch zu benutzen...

"Sanetta since 1957". Na ja, damals hätte man das noch "seit 1957" genannt, aber bitte. Das es bei den Klamottenherstellern heute kaum noch Jungs und Mädels, dafür Boys und Girls gibt (und hier sogar Kids Girls/Boys), damit kann man ja auch noch leben. Es ist ja nicht so, als ob wir uns der englischen Sprache verschließen würden. Aber schauen wir genauer auf die Navigation: "Altersgruppen", "Produktinformationen", aber: "Specials" und "Products". "Oberbekleidung", aber "Underwear". Muss das wirklich sein? Konsistenz ist ein Hauptthema in der Usability. Und: sprich die Sprache deiner Nutzer.

Was will mir mein Fotodrucker sagen?

Nachtrag vom 1.7.:
Nicht zu fassen, heute konnte er es! Meldung: "Flaschenboden zuerst". Ja warum nicht immer so?
-----------------------------------------------------------------------------------------------------------------------------

... und dann?

Ab in den Leergut-Automaten damit, wenn's eine Pfandflasche ist. Von diesen Automaten gibt es diverse Varianten - mal muss man Türen auf- und zuziehen, mal muss man die Flaschen in das gähnende Loch des Automaten legen. Nur nicht werfen, das mögen sie nicht.

Ein Automat der letzten Sorte, also einer mit einem runden Eingabefach für das Leergut, ist mein besonderer Freund. Ich kenne zwei davon, in zwei unabhängigen Supermarktketten in zwei Stuttgarter Stadtteilen. Beide haben eins gemeinsam: sie funktionieren zu geschätzten 80 Prozent im ersten Versuch nicht. Das heißt, von zehn Versuchen werden zwei Flaschen auf Anhieb angenommen. Das habe ich natürlich nicht empirisch getestet, aber so ist meine - und nicht nur meine - Beobachtung bei diesem speziellen Automatentyp.

Heute habe ich in einem REWE-Markt eingekauft, der ebenfalls einen dieser Automaten besitzt. An diesem steht leider nicht dran, wie man die Flaschen einlegen soll - also mit dem Hals oder dem Boden zuerst. Ich hatte zwei Sorten Leergut dabei: Milchflaschen und Joghurtgläser.

Versuch 1: eine Milchflasche. Meldung des Automaten: "Behälter nicht leer".
Ungläubig schaue ich die Flasche an. Die ist natürlich leer. Aber ich bin ja gewohnt, dass die Automaten nie sofort funktionieren. Ich versuche es nochmal, gleiche Meldung - okay, dann die nächste Flasche.

Versuch 2: die zweite Milchflasche. Meldung des Automaten: "Behälter nicht leer".
Ich bin etwas irritiert und lege die Milchflaschen beiseite.

Versuch 3: ein Joghurtglas. Meldung des Automaten, während er fleißig rotiert und blinkt in seinem Eingabefach: "Barcode kann nicht gelesen werden."
Auch das irritiert mich irgendwie, weil ich mir nicht vorstellen kann, wozu der Automat einen Barcode bei meinem Glas lesen möchte. Jedenfalls habe ich auch schon Gläser und Flaschen entsorgen können, die gar keine Etiketten mehr hatten. (Und ich hab ja nicht unrecht...)

Versuch 4: das nächste Joghurtglas. Meldung des Automaten: "Markt akzeptiert Marke nicht". Jetzt werde ich langsam ungeduldig. Hallo, es handelt sich um Leergut. Ja, es ist ein Joghurtglas aus dem Bioladen, aber die Gläser sind alle gleich groß und der Automat soll ja nicht die Marke scannen, sondern feststellen, dass es eine Glasform ist, die in diesem Markt sehr wohl geführt wird.

Versuch 5: ich probiere alle Behältnisse ein zweites und drittes Mal aus, mit allen bereits bekannten Fehlermeldungen im Wechsel.

Versuch 6: ich lege die Milchflaschen anders herum hinein. Was passiert? Sie werden angenommen. Auch die Joghurtgläser.

Was war also tatsächlich los? Ich hatte lediglich jedes Stück Leergut falsch herum eingelegt - es gab ja keine Anleitung am Automaten. Schwerwiegender im Sinne der Usability allerdings: die Fehlermeldungen des Automaten wiesen mich nicht auf diese Möglichkeit hin. Im Gegenteil, sie waren alle unnötig irritierend.

Eine doppelte Absicherung dieser vermutlich häufigen Fehlerquelle würde dazu führen, dass der Fehler viel seltener auftritt. Dazu müsste erstens eine Anleitung am Automaten angebracht werden (eine schlichte Zeichnung, die anzeigt, welcher Teil der Flasche nach vorne gehört würde genügen). Und zweitens sollte der Automate beim falschen Einlegen die Meldung bringen, dass man das Leergut umdrehen muss. In Abwandlung wäre eine solche Meldung sogar dann nützlich, falls es technisch nicht möglich sein sollte, dass der Automat die Richtung erkennt.

Ist doch eigentlich ganz einfach, oder? Und spart die Staus am Leergutautomaten... :)

Ein Shop, dem hübsche Bilder auf der Startseite wichtiger sind als die eigenen Produkte? Sieht man auch nicht jeden Tag...



Die ziemlich alternative Navigation in der Mitte der Seite (die übrigens später bei der Kategorieansicht nach oben rutscht, wodurch man dann auch etwas mehr von den Klamotten sieht) hat auch noch eine Subnavigation:



Quetschen und Stopfen, das hatten wir doch schon mal? Passt aber zu Online-Shops genauso wenig. Und besonders lästig ist mal dieses... Ding am rechten Seitenrand. Hier hat man die üblichen "Service"-Links, also Warenkorb, anmelden etc. Und man kann, klickt man auf den Mexx-Schriftzug, zur Startseite zurückkehren. Lieber Himmel! Da wollten wir aber mal alles anders machen als die anderen, was? Blöd nur, dass dieser Kasten immer ein Kleidungsstück verdeckt...


Gruselig. Wirklich gruselig.   Zu dem schaurigen horizontalen Scrollbalken, mit dem man sich in der Produktansicht vorwärts bewegt, sag ich schon gar nichts mehr.        

Immer, wenn man denkt, es könne ja nicht noch schlimmer kommen, kommt es eben doch schlimmer. Natürlich kann ich das onlineshoppen nicht lassen - oder zumindest das stöbern. Zum Kaufabschluß kommt es selten, und das liegt, wie man hier in der letzten Zeit lesen konnte, auch an schlechten Suchfunktionen in Onlineshops. Hier wieder ein besonders fieses Beispiel:


Gesucht wurde nach "Hose". Der rote Kreis soll verdeutlichen, dass die Suchfunktion tatsächlich benutzt wurde - sonst glaubt mir das Ergebnis vielleicht keiner:



Sieht jemand eine Hose? Nein. Und auch kein Suchergebnis-Feedback, sprich kein "Sie suchten nach Hose, wir fanden xyz Artikel" oder ähnliches. Kein Wunder, wenn der Nutzer verwirrt ist: falsches Produkt gefunden und nicht mal ein Hinweis darauf, dass dies tatsächlich das Suchergebnis ist. Der Nutzer wird hier in der Regel zunächst annehmen, er habe einen Eingabefehler gemacht. Ganz schlecht!

Übrigens, im Shop sind durchaus Hosen vorhanden. Es ist also nicht so, dass es nichts zu finden gegeben hätte...

Wenn die Sortierung nicht funktioniert, sind Schwierigkeiten mit der Suchfunktion (hierzu übrigens auch was bei Claus Wagner) kein Wunder. Hier ein Screenshot von Neckermann.



Ausgewählt wurde, wie auch bei der korrekten Brotkrumennavigation ersichtlich, "Mode für Sie" - "Shirts" - "Rundhals" - "Langarm". Das Ergebnis: abgesehen von der irritierenden Anzeige, was "andere Kunden" gekauft haben (und was ich ganz sicher nicht ÜBER meinem Suchergebnis sehen möchte!), sind gleich die ersten zwei Artikel KEINE Langarmshirts. Und das sind nicht die einzigen falsch sortierten Produkte in dieser Kategorie. Das nervt und verfälscht die Suchergebnisse. Und nicht nur das: es gibt eben offenbar keine 215 Damen-Langarmshirts im Neckermann-Shop. Das täuscht eine Produktvielfalt vor, die so nicht existiert.

Hier mal wieder ein Beispiel dafür, dass eine Suchfunktion wirklich gute Technik im Hintergrund erfordert:



Gesucht wurde nach "Jeansbluse". Man beachte den Herrn in der Strickjacke... Von den angegebenen 18 Suchergebnissen handelte es sich nur in sechs Fällen tatsächlich um eine Jeansbluse, und davon fehlte einer noch das Vorschaubild. Der Rest waren Strickjacken, Shirts und andere Kleidungsstücke, die nicht mal entfernt an eine Jeansbluse erinnerten. Ja, Datenbanken sind manchmal dumm. Aber die Kombination "Jeans" und "Bluse" in einem Wort sollte wirklich nicht zu Herrenstrickjacken führen.