Webdesign als Conversion-Killer

Wie bedeutsam ist gutes Webdesign für den Online-Erfolg eines Unternehmens? Gerade die großen Premiummarken wie Gucci, Hugo Boss oder Dior tun sich schwer damit, ihren Online-Auftritt oder gar eCommerce-Shop als vollwertigen Bestandteil ihrer Markenstrategie zu verstehen.Die Marken, die sonst in den edlen Einkaufsstraßen mit großen Flagship-Stores aufwarten und ihre Kunden eben nicht nur durch die Produkte, sondern auch durch das Ambiente der Läden, deren Umgebung und durch den sozialen Wert der Interaktion mit der Marke verführen, sehen anonyme Websurfer mit Schnäppchenjägermentalität nicht als ihre Zielgruppe an.Dort wo die Marken selbst die Online-Aktivitäten forcieren, flammt ein Problem von Neuem auf, das längst beerdigt schien: der Konflikt zwischen Design und Funktion. Im Bemühen, ästhetisch einzigartige Websites zu schaffen, versteigen sich die Designer in navigationelle Experimente, die keiner Usability-Prüfung standhalten. Hartmut Esslinger, Gestalter des ersten Macintosh-Computers, formulierte in den Neunzigern, dass kein guter Designer sein kann, wer sich nicht traut, die Regeln zu brechen. Gilt das auch für die gelernten Regeln der Benutzerführung?

Die Nielsen-Liste

Jakob Nielsen veröffentlichte bereits 1996 eine Liste der zehn schlimmsten Fehler im Webdesign. Erstaunlich daran: Auch heute wäre sie noch mit Beispielen brandaktueller Websites zu füllen.War man in den Anfangsjahren des Webdesigns noch davon ausgegangen, dass sich ein paar der Kinderkrankheiten mit der Zeit erledigen, muss man diese Perspektive inzwischen als gescheitert erachten. Die schlimmsten Probleme waren die unterschiedlichen Anzeigeleistungen der Browser und Betriebssysteme, die verschiedenen Bildschirmgrößen und die wechselnden Bandbreiten. Angesichts von Tablets und Smartphones werden diese Probleme in den kommenden Monaten eher größer als geringer.Daraus folgt: Das Testen auf unterschiedlichen Endgeräten, mit verschiedenen Browsern und mit echten Nutzern wird immer wichtiger. Jedes Website-Element ist im Spannungsfeld Design versus Funktion zu prüfen. Im Folgenden bauen wir die Nielsen-Liste deshalb erneut auf.1. LesbarkeitsproblemeZwei Prinzipien standen stets im Mittelpunkt dieses Problems, nämlich die Verwendung extrem verspielter, verschnörkelter Schriftarten, sowie die Darstellung in viel zu kleiner Textgröße. Interessanterweise hat ausgerechnet der kleinste, verfügbare Bildschirm - das Smartphone - auf einmal einen Workaround für dieses Problem gefunden. Mit Hilfe der Zweifinger-Geste wird die Seite so lange vergrößert, bis auch das Kleingedruckte sichtbar wird.

Es gibt aber natürlich auch eine inhaltliche Dimension der Nichtlesbarkeit. Und die ist entweder dann gegeben, wenn die gewählten Begriffe nicht verstanden werden, oder wenn einfach kein Text da ist. Klaus Kuenen ist das erstgenannte Problem jüngst erst schmerzvoll begegnet.Kuenen verantwortet die Website des Deutsche Post Leserservice. In Adwords-Anzeigen wirbt die Website für den Verkauf von Zeitschriftenabos. Eine frühere Headline lautete: "Der Leserservice der DP". Die Vergleichsalternative mit: "Aboshop: Deutsche Post AG" verkaufte doppelt so viele Abos. "Kein Mensch in unserer Abteilung hätte gedacht, dass es jemanden gibt, der nicht weiß, was DP bedeutet", skizziert Kuenen einen klassischen Fehler im Webdesign, die Insidersprache.Das Problem hat die Website der schicken und gleichzeitig preisgünstigen Boccia-Uhren nicht. Dort verzichtet man bei der Produktdarstellung konsequenterweise auf jeden Text. Nur die Bestellnummer ist angegeben. Wohlgemerkt hat natürlich auch eine Markenwebsite ohne Shop jede Menge Conversion-Potenzial, etwa die längere Beschäftigung mit einem oder mehreren Produkten, die mögliche Registrierung für Newsletter oder die Weiterleitung in den Shop-Finder.2. LinksEine der Lieblingsübungen ambitionierter Gestalter ist das Verstecken von Hyperlinks. Die einfachste Variante lässt sich beobachten auf der US-Designer-Site 2ndNature. Die obere Liste der mit Plus versehenen Begriffe zeigt Arbeitsproben (klickbar), die untere zeigt Arbeitsbereiche (nicht klickbar). Bis auf einen Unterschied im Grauton ist die Formatierung identisch.Im optisch stark gemachten Gucci-Store legt sich die Detailansicht wie ein Layer über die Produktübersichtsseite. Ein ähnlicher Effekt wie bei einer Lightbox. Das "x" zum Schließen dieser Detailansicht fehlt. Stattdessen erwartet der Gucci-Designer, dass man den kleinen Knopf "zurück" links oben klickt. Der ist nicht nur schwer zu finden, sondern auch metaphorisch nicht ideal gelöst.Die Bauweise selbst unterdessen hat einen Vorzug: Sie unterstützt den Back-Button des Browsers. Eine derzeit häufig anzutreffende und komplett falsch verstandene Ästhetik ist die Einbindung von Links zu sozialen Netzwerken in Farben, die an die gastgebende Website angepasst sind. Gelegentlich findet man auch Varianten in zarten Graustufen.Schon die Grundidee, ein wichtiges Funktionselement, also einen "Call-to-Action" farblich anzupassen, ist falsch. Die Links zu den sozialen Netzwerken - allen voran Facebook - leben als gestaltliche Repräsentation der verlinkten Seite und nicht der gastgebenden.3. FlashDie geballte Verunsicherung der Web-designer-Branche wird beim Thema Flash sichtbar. Seit dem iPad wissen die Gestalter nicht mehr, ob das gerade bei Premiummarken so beliebte Flash - und damit die erworbenen Flashkenntnisse - noch nachhaltig einsetzbar sind. Hugo Boss hat sich (noch) für Flash entschieden.Der gewiefte Website-Tester schaltet sofort die Plug-ins im Browser aus, um zu sehen, was dann passiert, und siehe da: Die Boss-Site hat eine Plug-in-Erkennung, die ein statisches Ersatzbild und eine deutlich sichtbare Fehlermeldung anzeigt. Die Site selbst ist allerdings nicht mehr navigierbar.Schon bricht sich die nächste Boshaftigkeit Bahn und die Seite wird testweise mit einem Android-Handy ohne Flash Player angesteuert. Und welche Überraschung: Die Boss-Designer haben eine todschicke mobile Website entwickelt, die auch bestens in jedem stationären Browser ohne Flash Player funktionieren würde. Es könnte so einfach sein.4. Webgerechte TexteRolf Saim Alkan hat sich auf das Analysieren von Webseitentexten spezialisiert. Mit seiner Agentur Aexea bearbeitet er den Wortlaut der Angebote so, dass die Texte nicht nur für die Leser besser zu verstehen sind, sondern auch für die Suchmaschinen.Einer seiner wichtigsten Tipps lautet: Verzicht auf Passivkonstruktionen. Statt "Auf dem iPad werden Farben strahlend angezeigt" könnte da stehen "Das iPad strahlt in allen Farben". "Die Texte werden insgesamt um rund ein Drittel kürzer und sind vor allem viel aktivierender", so der Schwabe.