Einkauf mit Hindernissen

Inhaltsverzeichnis

"Da weiß die linke Hand nicht, was die rechte tut." Wenn Webdesigner und Onlineberater Markus P. über einen seiner großen Kunden aus der Touristikbranche spricht, gerät er in Rage. "Wir messen alles, aber die Zahlen liest kaum einer und die richtigen Schlüsse werden sowieso nicht gezogen". Markus P. spricht eines der größten Ärgernisse beim Entwickeln transaktionsorientierter Websites an, den Verzicht auf strategische Webanalyse und Usability-Tests.

Beim Launch eines neuen Onlineshops gerät das Testen durch Zeitprobleme schnell ins Hintertreffen. Wenn überhaupt, wird mit halbfertigen Prototypen hantiert. Dort stehen allerlei Blindtexte auf den entscheidenden Buttons, von den Programmierern als Platzhalter angefertigt. Dumm nur, wenn die Designer hinterher vergessen, die Platzhalter in kaufanreizende Schlüsseltexte umzuwandeln. Das passiert auch bei großen Shops, etwa dem von Reno.

Im November 2009 rollte das Unternehmen den Schuhladen mit viel PR-Getöse aus, und bis Ende 2010 hieß der Button, der zum Versand einer Bestellung führt, nicht "Bestellen" oder "Jetzt kaufen", sondern schlicht "Weiter". Fehlbestellungen sind so vorprogrammiert und führen zum Supergau des Onlinehandels, einer hohen Retourenquote. Inzwischen wurde der Fehler erkannt und beseitigt. Auf dem Button steht heute "Bestellung abschließen". Im laufenden Betrieb eines Webshops scheitert der Benutzertest nicht selten am Budget. Allerdings können die unterschiedlich verteilten Zuständigkeiten ebenfalls Probleme verursachen, wenn etwa die Marketingabteilung die Anrisstexte schreibt, der Vertrieb die Produktseiten optimiert und die IT an der internen Suche arbeitet.

Dabei war es für die Shopbetreiber bisher noch recht einfach. In den letzten Jahren glichen sich die Browser-Landschaft, die verfügbare Bandbreite und die Rechnerleistung über die gesamte Nutzerschaft hinweg an. Das Optimieren für einzelne Browsertypen – das große Usability-Dilemma aus den Neunzigern – hatte sich weitgehend erledigt. Das bewog sogar den als Nörgler bekannten Usability-Papst Jakob Nielsen zu der Aussage: "Unterm Strich ist die Usability in den Onlineshops deutlich besser geworden". Wer Zalando kopiert, ist schon weit vorn.

2011 kommt der Wind jedoch wieder von vorn. Der Grund hierfür liegt in der schnellen Verbreitung von Tablet-Computern und internetfähigen Smartphones. Jedes Gerät weist eigene Spezifikationen auf in Sachen Bildschirmgröße, Rechnerleistung und Browserausstattung (Flash, Video et cetera). Ein- und dasselbe Gerät lässt sich mit unterschiedlichen Bandbreiten betreiben, je nach Einsatzzweck. Zuhause läuft das iPad mit voller Geschwindigkeit, im Zug nur mit tröpfelnder und nicht selten kostenpflichtiger GPRS-Verbindung. Die Mehrzahl aller in Deutschland verkauften Flatrates drosseln den Datendurchsatz nach einem definierten Volumen. Jedes zusätzliche Kilobyte kostet Geld.

Allmählich scheint sich die Hoffnung zu zerschlagen, man könne diesem Trend mit speziell für die jeweiligen Endgeräte entwickelten Apps begegnen. Außer den Großen – eBay, Amazon, vielleicht Otto – sowie einigen starken Marken wie Deutsche Bahn, Lufthansa oder Sixt dürften nur wenige Onlinehändler den direkten Weg auf das Smartphone schaffen. Betrachtet man beispielsweise den aktuellen iPad-Katalog von Manufactum, wird klar, dass sich die Installation via App Store nicht lohnt. Die große Mehrheit der Apps dürfte von der Darstellung im iPad-Browser abhängen und hier machen viele Webshops keine gute Figur. Der folgende Text beschreibt zehn grobe Schnitzer und einige Varianten. Als Grundlage dient die bekannte Liste von Jakob Nielsen. Sie baut auf der Kritik schlechten WebDesigns auf, hier wird sie um Shop-spezifische Eigenschaften ergänzt. Die dargestellten Schwierigkeiten stammen nicht aus der Vergangenheit, sondern sind im Mai 2011 so zu sehen gewesen. Und es handelt sich nicht um kleine Garagenshops, sondern um zumeist große Anbieter. Allerdings dürften die offensichtlichen Macken nur in wenigen Fällen eine Bestellung verhindern.

Unklare Interface-Elemente

Unklare Interface-Elemente

Unklare Bedienelemente können verschiedene Fehler auslösen. Zunächst stellt sich die Frage, ob der Benutzer ein bestimmtes Element überhaupt als klickbar wahrnimmt. Klaus Kuenen vom Deutsche Post Leserservice hat in umfassenden Tests bemerkt, dass die Nutzer andauernd auf Elemente klicken, hinter denen keine Funktion liegt. Ein recht deutliches Beispiel dieser Technik zeigt der Onlineshop des Technikversenders Avides. Während die Buttons bei den Produkten prominent und deutlich erkennbar sind, ist der Funktionsknopf im Checkout fast unsichtbar. Und gerade an dieser Stelle reagiert der Kunde besonders sensibel auf Störungen.

Eine Variante lautet: Versteck den Hyperlink. Erst wenn die Maus über den Link rollt und der Mauszeiger sich zur Hand verändert, erkennt der Benutzer, das das Element klickbar ist. Besonders perfide Designer lassen solche Suchlinks wie Fließtext aussehen. Und umgekehrt geht’s selbstverständlich ebenso: Was aussieht wie ein Button, sollte auch einer sein. Ausgerechnet hier schwächelt Branchenliebling Zalando. Der Farbwähler zur Linken zeigt nicht deutlich, welche Farben nun wählbar sind und welche nicht.

Inkonsistente Benutzerführung

Die Grundregel klarer Benutzerführung: Jeder Link mit gleicher Funktion und gleichem Ziel sollte gleich heißen. Avides benutzt jedoch sechs unterschiedliche Texte und Bilder, um zum Produkt zu gelangen. Von "Jetzt bestellen" bis "Details". Hier ist Redundanz sicher nicht sonderlich schädlich. Schwieriger wird es, wenn der Link ein Versprechen abgibt, dass die Landeseite nicht einlöst. So findet sich bei Gourmondo eine Promotion zum Thema Grillen, die Rabatte auf Produkte von Block House bewirbt. Die Landeseite vereint dann alle infrage kommenden Angebote und sieht Block House nur als einen Menüpunkt unter 30 weiteren. Deutlich erkennt man den Fehler bei Zara.de. Dort verwirren zahlreiche Textfehler, die vermutlich schlechter Übersetzung zuzuschreiben sind. So muss sich der geneigte Kunde vor dem Kauf explizit "ausweisen" während er seine Daten eingibt.

Bestellknopf falsch ausgezeichnet

Bestellknopf falsch ausgezeichnet

Einer der signifikantesten Fehler in Onlineshops liegt beim Bestellknopf. Im Wesentlichen gibt es drei Fehler: falsche Farbe, falsche Position und falscher Beschriftungstext. Als Position hat sich unten rechts etabliert. Das gilt nicht notwendigerweise für die ganze Seite, sondern für die einzelne Einheit, also den Informationskasten auf der Produktseite zum Beispiel. Die richtige Farbwahl hängt vom Publikum ab und sollte unbedingt getestet werden. Usability-Profi Tim Ash war ziemlich überrascht, als er eine recht schick gestaltete Landeseite des US-Mobilfunkanbieters Credo mit einem deutlich sichtbaren, türkisfarbenen Bestellknopf gegen eine banale weiße Seite mit klassischem Orange auf dem Button verglich. Letztere erzielt 84 Prozent mehr Umsatz. Seine Theorie: Die Designseite wirke zu sehr wie ein Werbebanner.

Ebenfalls Gegenstand von Tests sollte die Beschriftung des Bestellknopfes sein. Experten bestehen gemeinhin auf klarer Sprache: "Jetzt bestellen", "Jetzt kaufen" oder "In den Warenkorb legen". Christian Sauer von Webtrekk fand jedoch per Webanalyse heraus, dass eine Hotelbuchungs-Site, die schon die Verfügbarkeitsanfrage mit dem Button "Jetzt buchen" auslöst, abschreckt und die tatsächliche Buchung verhindert. Auch das bewusste Verstecken von Hyperlinks fällt in diese Kategorie. Viele Designer unterdrücken aus gestalterischen Gründen die Unterstreichung oder farbliche Kennzeichnung bei Standardlinks. Dabei erfüllen beide einen wichtigen Zweck. Erstens will man den Link finden und zweitens sehen, welchen von mehreren man bereits "abgearbeitet" hat. Beim neuen Media-Saturn Redcoon-Onlineshop gibt es ein lustiges Tool, den Angebotsmixer. Wirft der Bestellwütige hier eine Handvoll Produkte hinein, errechnet der Shop einen Gesamtrabatt. Eine tolle Idee, die leider niemand findet und versteht, weil der Link nicht andeutungsweise wiedergibt, worum es geht.

Zu wenig oder kein Feedback

Je interaktiver die Anbieter ihre Webshops gestalten, desto wichtiger wird das Feedback auf Aktionen des Nutzers. Ein Klassiker: In Formularen findet die Reaktion des Systems zu weit entfernt vom Fehler statt. Bei SportScheck etwa erscheinen die Eingabefehler im Registrierungsformular als Liste im Kopf der Seite. Sie verweisen auf filigran mit roter Haarlinie umrahmte Felder, in denen der Kunde Korrekturen vornehmen soll. Die Nachrichten müssen natürlich erläutern, was er falsch gemacht hat. So ärgert sich der Sport-Scheck-Shop über die Datumsangabe 1.1.01 ohne darauf hinzuweisen, dass er gerne 01.01.1901 lesen möchte.

Schuhversand Zalando zeigt, wie es richtig geht. Wählt der Nutzer nur Schuhe, nicht aber Größe und Farbe aus, so reagiert der voreilig betätigte Bestellbutton, indem er eine deutlich sichtbare Meldung ausgibt, und zwar exakt dort, wo geklickt wurde. Usability-Expertin Myriam Eberhard spricht vom Gesetz der Nähe: "Die Konzentration der Nutzer liegt in diesem Moment auf dem Bestellbutton. Die Fehlermeldung wird also deutlich wahrgenommen."

Nicht nur bei Fehlern ist Feedback enorm wichtig. Auch sobald der Kunde neue Informationen anfordert, einen Suchfilter einschaltet oder eine Bestellung absendet, muss ihm der Server ein hinreichendes Signal dafür liefern, dass es geklappt hat. Zwei Fehlervarianten sind hier häufig zu beobachten: Entweder die neue Seite hat das gleiche Design wie die alte, nur irgendein Text sagt "Danke für die Bestellung". Oder die Veränderung passiert in einem Bereich, den der Nutzer nicht sieht, schlimmstenfalls unter dem unteren Bildschirmrand. Kleine Animationen können hier helfen. Wenn jemand bei Gucci.com ein Produkt in den Warenkorb legt, wird dieser ästhetisch ansehnlich rechts oben geöffnet und wieder geschlossen.

Unüberwindbare Formulare

Unüberwindbare Formulare

Schlecht funktionierende Formulare sind häufig Ausdruck der mangelhaften Zusammenarbeit zwischen Design und Coding. Die gröbsten Schnitzer:

• die Felder sind zu klein für die Texte
• Tabulator-Weiterschaltung ist nicht vorgesehen
• falsche Feldreihenfolge
• falsche Reaktion auf die Enter-Taste

Letzteres ist beispielhaft zu sehen auf der Website der Deutschen Bahn. Wer sich im Verlauf eines Buchungsvorgangs ins eigene Konto einloggen möchte, sollte die Eingabe von Benutzername und Passwort nicht mit [Enter] bestätigen, sonst wird er an den Anfang seiner Suche zurückgeworfen – besonders ärgerlich, wenn man ein Smartphone benutzt. Das Phänomen tritt gleichermaßen in allen relevanten Browsern auf.

Abfrage zu vieler Daten

Für Jakob Nielsen ist das Abfragen zu vieler Informationen ein Vertrauensbruch, für Nikolaus von Graeve (Rabbit eMarketing) ein plumper Bestellverhinderer. "Wenn Sie möglichst viele Neukunden für ihren Newsletter begeistern wollen, dann fragen Sie nur die E-Mail-Adresse ab. Sonst nichts. Sie haben später tausendmal die Möglichkeit, weitere Daten zu erheben", so von Graeve. Für Christian Sauer gehört es zur Pflicht, dass Onlineshops eine Bestellung durchführen, ohne dass der Kunde ein Konto anlegt: "Für einen Einmalkauf benötigt man kein Konto, bei dem man sich Benutzername und Passwort merken muss." Warum aber will der Webshop von Zara meine Telefonnummer wissen? Noch ein kleines bajuwarisches Schmankerl von SportScheck: Auf der Pflichtregistrierungsseite gibt es zwei Buttons. Der nach links lautet "Zur Anmeldung", der nach rechts "Neu anmelden".

Keine Standardwerte vorgeben

Das Vorgeben von Standardwerten ist eine Untergruppe der schlechten Formulare und gleichzeitig des unzureichenden Feedbacks und des Mangels an wahrgenommener Aufforderung; Formulare, die es versäumen, dem Nutzer zu erklären, was und vor allem wie er etwas wo hinein schreiben soll, provozieren Fehleingaben. Das fängt wie oben beschrieben beim Datumsformat an. Es betrifft vielleicht auch die nicht immer klare Unterscheidung zwischen Land und Bundesland und gilt auf jeden Fall für die Suche. Manche Suchmaschinen akzeptieren nur Bestellnummern, etwa die auf Gucci.com. Und fast alle Onlinebanking-Systeme erkennen die Leerzeichen in der Bankleitzahl nicht und schneiden am Ende zwei Stellen ab. Falsche Standardwerte sind ebenfalls ein Fehler. Die schicke Buchungsmaske der Austrian Airlines auf deren Facebook-Seite setzt nicht etwa das aktuelle Datum als Standardformat ein, wie das vermutlich alle anderen Buchungssysteme tun, sondern nimmt immer den 18. März (Abbildung 4).

Umständliche und zu lange Texte

Umständliche und zu lange Texte

Rolf Saim Alkan ist Experte für webgerechtes Formulieren. Er gibt fünf handliche Tipps für die gute Lesbarkeit von Texten:

• der Kundennutzen formulieren
• das Wichtigste nach vorne bringen
• mehr als Fließtext schreiben (Listen, Aufzählungen)
• Schlüsselwörter richtig verwenden
• Überflüssiges streichen

Letzteres geschieht vor allem durch den Verzicht auf Passivkonstruktionen. Das spart bereits ein Drittel der Textlänge. Vielleicht übertreibt die Website des Uhrenherstellers Boccia Titanium ein wenig, wenn sie gar keine Textinformationen zu den Produkten mehr liefert außer der Bestellnummer. Bei Deichmann erfährt man ebenfalls reichlich wenig über die Fußware. "Nike Runningschuh", das muss genügen (Abbildung  5). Der Rest ist Gottvertrauen.

Freilich gibt es neben der reinen Sichtbarkeit von Texten ein inhaltliches Problem. Wer würde erwarten, dass eine Stuttgarter Immobilienmaklerin ihre Wohnungsangebote hinter dem Navigationsbutton "Werden Sie fündig!?" verbirgt. Im schlecht übersetzten Shop des Modegiganten Zara erscheint ein neuer Knopf "Bestellung bearbeiten", sobald man einen Artikel in den Warenkorb gelegt hat. Es liegt nahe, dass dieser Knopf die Warenkorbansicht öffnet. Darin aber heißt der Button, der "Weiter" oder "Zur Kasse" heißen müsste, erneut "Bestellung bearbeiten". Das stiftet Verwirrung und ist ein klassischer Bestellverhinderer.

Flash durchdacht einsetzen

Flash ist nicht per se schlecht, wird aber häufig falsch eingesetzt. Es gelten folgende Regeln:

• niemals nur Flash
• das Fehlen eines Plug-in automatisch erkennen
• Flash nur einsetzen, wenn andere Techniken es nicht besser können
• nie die neuesten Features nutzen

Letzteren Fehler macht Redcoon. Dort verlangt der Video-Player aus purer Schlamperei den Flash Player 10.2. Das eingesetzte Video läuft aber schon mit dem wesentlich weiter verbreiteten Flash Player 9 (Abbildung 6). Die ganze Tragödie zeigt sich bei Hugo Boss. Fehlt der Flash Player, zeigt die Site lediglich ein statisches Foto und die Meldung, man möge den Flash Player installieren (Abbildung 7). Dabei verfügt der Shop über eine mobile Website unter der Adresse m.hugoboss.com. Die funktioniert natürlich fürs iPhone und somit ohne Flash. Sie würde sich perfekt als Fallback-Variante für die Flash-Site eignen. Möglicherweise mögen die Designer der Website die der Mobile-Site nicht oder wissen gar nichts von deren Existenz.

Dürftige Suche

Dürftige Suche

Zuletzt noch ein Blick auf den Running Gag der Usability-Branche, die interne Suche. Im Jahr 18 des deutschen WWW finden sich immer noch Engines, die keine Umlaute kennen oder Sonderzeichen falsch behandeln. Beim Kaufhaus Breuninger ergibt die Suche nach "Fußballschuhe" akzeptable 25 Treffer. Filtert man sie aber nach einem der angebotenen Kriterien, so wird daraus plötzlich "fuüballschuhe" und dazu gibt’s nur sechs Treffer (Abbildung 8). Immerhin kann man bei Breuninger filtern. Bei Zara hingegen nicht, und das ist aus Sicht der Navigation vor allem deshalb ärgerlich, weil der Shop Kinder- und Erwachsenenmoden vermischt anzeigt.

Eine dritte Fehlervariante resultiert aus der Intoleranz der Suchmaschinen. Suchspezialist FACT-Finder kann ein Lied davon singen, wie viele Möglichkeiten es für die Benutzer gibt, sich zu verschreiben. 117 Artikel findet etwa die Suche nach "Ray-Ban" im Otto-Shop Refashion. "rey ban" bringt fünf Ergebnisse, die jedoch nichts mit Sonnenbrillen zu tun haben. "rayban" hingegen wird korrekt auf "ray-ban" umgesetzt. Bei der falschen Eingabe "Addidas" setzt die Suchroutine den Begriff richtig in "Adidas" um. Manchmal funktioniert’s, manchmal nicht, eine Gesetzmäßigkeit ließ sich nicht erkennen.

Fazit

Die angeführten Beispiele mögen zum Schmunzeln anregen. Sie sollen aber vor allem zum Testen animieren. Jede Form des Tests, ob Expertise, Labortest, Hausfrauen-Test (mit der eigenen Schwiegermutter) oder der Einsatz einer Onlinetesting-Plattform findet Inkonsistenzen und Macken aller Art. Eine schöne Form der Kommunikation könnte sein, das Aufspüren von Fehlern durch Kunden oder Angestellte zu belohnen.

Frank Puscher arbeitet als Berater, Autor und Journalist im Onlinemarketing. (jd)
(map)