Fragt man Nutzer, wo sie bestimmte Elemente in einem Online-Shop erwarten, erhält man hohe Übereinstimmungen für die Positionierung zentraler Elemente wie Logo, Suche, Warenkorb oder Navigation. Aufbau und Funktionen vieler Interaktionsmuster und Seiten-Templates scheinen inzwischen fest in den Köpfen verankert zu sein. Als Konzepter/in und UX Designer/in sollte man sich also tunlichst an bewährte Lösungen halten. Hm … oder doch nicht immer? Wie entkommt man sonst der Gefahr, dass irgendwann alle Websites und Online-Shops ähnlich und austauschbar wirken?
Konventionen machen das Leben leichter
Es gibt einen guten Grund, auf Konventionen und Standards zu setzen, der in der menschlichen Biologie liegt: Die Vielfalt der auf uns einströmenden Eindrücke und Informationen beherrschen wir, indem wir nach bekannten Strukturen suchen. Was leicht zu erkennen und einzuordnen ist, wird schneller verarbeitet und als einfacher empfunden als das Unstrukturierte und Neue.
Das gilt für einfache visuelle Muster, aber auch für Prozesse und komplexere Strukturen. Internetnutzer wissen inzwischen, wie ein mehrschrittiger Online-Kaufprozess mit Warenkorb und Kasse funktioniert. Was übrigens auch daran liegt, dass dabei Metaphern zum Einsatz kommen, die auf Begrifflichkeiten und Symbole der analogen Welt zurückgreifen – auf bekannte Muster und mentale Modelle also.
Daraus lassen sich Regeln für die Konzeption und Gestaltung von Benutzeroberflächen ableiten: Klare Muster verwenden. Bewährtes wiederholen. Standards beachten. Der Betrachter sollte nicht gezwungen werden, Neues zu lernen, denn das erfordert deutlich mehr Aufmerksamkeit und Mühe.
Jakob Nielsen sieht in der natürlichen Trägheit des Menschen ein wichtiges Argument für Konservativismus im UX Design: “There’s great inertia in users‹ mental models: stuff that people know well tends to stick, even when it’s not helpful. This alone is surely an argument for being conservative and not coming up with new interaction styles.” (Jakob Nielsen: Mental Models, 2010).
Kein Web ohne Veränderung
“On the other hand”, so Nielsen weiter, “sometimes you do need to innovate, but it’s best to do so only in cases where the new approach is clearly vastly superior to the old, well-known ways.” Als Beispiel führt er den Dienst Netflix an.
Natürlich müssen bei neuen Produkten, Geschäftsmodellen und digitalen Services zum Teil neue Interaktionsmuster gefunden und neue mentale Modelle in den Köpfen der Nutzer etabliert werden. Das mag für diese zunächst anstrengender sein. Doch wenn das Neue attraktiv ist, wird es auch akzeptiert und gelernt. Diesen Prozess beschreiben etwa Diffusionsmodelle wie die Kurve von Everett Rogers: Innovationen werden zunächst von einer kleinen Gruppe angenommen (Avantgarde), bis sie von den etwas zahlreicheren Vorreitern, dann von der frühen Mehrheit und schließlich von der späten Mehrheit und den Nachzüglern akzeptiert werden.
Das Modell von Rogers bezieht sich auf Produktinnovationen, ist aber auch auf (UX/IX-)Design übertragbar. Ein Designer lässt sich von der Idee eines anderen inspirieren, design-affine Nutzer mögen die Website, aufgeschlossene Unternehmen adaptieren den Stil, und die Mehrheit der Nutzer gewöhnt sich an etwas, das sie anfangs befremdlich fand. Funktioniert. Nicht ohne Grund gehört zum Konzept der User Experience nicht nur die Usability, sondern auch die Nutzungsfreude, der Spaß an der Spielerei, an ästhetisch Beeindruckendem, am Überraschungsmoment.
Weitere wichtige Treiber für Veränderungen im UX/IX-Design sind technische Rahmenbedingungen wie Übertragungsraten und Geräteentwicklung, die neue Nutzungsmöglichkeiten und –kontexte erschließen. Mit der Ausweitung der mobilen Nutzung verbreiten sich zum Beispiel mobile Trends wie etwa das Flat-Design auch auf dem Desktop. Ohne Zweifel: Veränderungen, auch in den Interaktionsmustern, gehören selbstverständlich zum Internet.
Beispiele
www.etq-amsterdam.com bricht mit üblichen Mustern: Für den Warenkorb wird mit der Off-Canvas-Lösung ein mobiles Interaktionsmuster für die Desktop-Ansicht adaptiert.
Eher ungewöhnlich: Die Navigation und weitere Details von www.deutschesee.de.
unitec.ac.nz mit einer Suchfunktion ohne sichtbares Eingabefeld und mit einer Subnavigation auf der rechten Seite.
Github überspringt einen Ordner (vorgestellt von Marian hier in uxzentrisch).
Konvention vs. Innovation
Das Spannungsverhältnis von Konvention und Innovation bleibt jedoch. Etablierte Muster entlasten den Nutzer, und das ist besonders da wichtig, wo es um Conversion geht und jede unnötige Hürde vermieden werden sollte. Die Folge ist allerdings, dass man besonders bei Shops viele sehr ähnliche Lösungen sieht.
Beispiel: Produktdetailseiten zweier Sportartikel-Händler
Es ist nicht nur langweilig, wenn alles gleich aussieht und nach Schema F gestrickt ist. Für Marken besteht außerdem die Gefahr, ihr eigenes Gesicht zu verlieren. Sie müssen Charakter zeigen und sich abheben, wenn sie im Gedächtnis bleiben wollen.
Dass man Produktdetailseiten auch anders gestalten und eine starke Markenidentität transportieren kann, zeigt der Schweizer Laufschuh-Hersteller On-Running:
Dieses Beispiel stammt aus dem Artikel „Sterben Sie nicht den Template-Tod – 8 Beispiele für inspirierende Produktdetailseiten von konversionsKRAFT.
Neues mit Maß – und mit Prinzipien
Kommen wir noch mal zurück zum Anfang, zu den klaren Erwartungen von Nutzern an die Positionierung von Elementen. Für diese gibt es durchaus gute Begründungen, wie die Leserichtung von links nach rechts (im westlichen Kulturkreis) oder die Platzierung im sichtbaren Bereich. Einiges beruht aber auf mehr oder weniger willkürlichen Festlegungen, die zu einem festen Pattern geworden sind. Die Suche wird rechts oben positioniert, weil sie dort gesucht wird. Sie wird dort gesucht, weil sie dort am häufigsten vorkommt. So manifestieren sich auch Lösungen, die nicht optimal, aber gewachsen und gelernt sind.
Das heißt nicht, dass man an Konventionen auf keinen Fall rütteln darf. Im Gegenteil. Studien haben etwa gezeigt, dass die auf der rechten Seite positionierte vertikale Navigation nur beim ersten Kontakt zu geringfügiger Verzögerung in der Bedienung führt, bei längerer Nutzung (also, nachdem dies gelernt wurde) zu ähnlich schneller Lösung der im Test geforderten Aufgaben wie bei der klassischen linken Positionierung.
Sehr spezifische Regeln aus den Anfangstagen des Internet wie „Links müssen blau und unterstrichen sein“ gelten inzwischen als veraltet. Links müssen als solche erkannt werden können und konsistent verwendet werden. Das genügt. Das Beispiel der Links legt auch den Schluss nahe, dass Konventionen variiert und aufgeweicht werden können, sobald sie vollends etabliert sind. War es zu Beginn wichtig, die neue funktionale „Sprache“ der User Interfaces korrekt zu verwenden, um verstanden zu werden, sind mittlerweile auch Variationen möglich.
Entscheidender als Vorschriften und die strenge Einhaltung von Konventionen ist die Beachtung von Grundprinzipien, die aber einen relativ weiten Rahmen für die konkrete Ausgestaltung bieten:
- Konsistente Verwendung von Elementen
- Klarheit und Deutlichkeit in der Gestaltung
- Anknüpfung an Vorwissen bzw. bekannte Muster
- Vermittlung von Orientierung und Sicherheit
- Ermöglichung von Alternativen
Ob und wie weit man sich mit Neuerungen vorwagen sollte, hängt auch vom jeweiligen Kontext ab. Zum Schluss also noch ein paar Entscheidungshilfen, wenn es um die Frage geht: Konvention oder Innovation?
- Handelt es sich um einen kritischen Punkt im Nutzungsablauf, zum Beispiel einen Schritt im Check-out-Prozess?
- Wie stark ist der Standard, von dem ich abweichen will? Was hat sich vielleicht seit seiner Etablierung verändert?
- An welche Zielgruppe richtet sich die Website?
- Wie aufgeschlossen gegenüber Neuem ist die Zielegruppe? Und wie geübt darin, Interaktionsmuster aus anderen Anwendungen zu übertragen? (Die Kunden von ETQ Amsterdam sind sicher jung und an mobile Interaktionsmuster gewöhnt, die sie wahrscheinlich problemlos auf den Desktop übertragen können.)
- Passt Innovationsfreudigkeit zur Marke und zum Kontext?
- Kann man den Nutzern Hinweise und Erklärungen zur Funktionsweise eines neuen Patterns auf der Seite mitgeben?
- Und schließlich: Habe ich eine Möglichkeit, das ungewöhnliche Design oder die neuen Interaktionsmuster zu testen?
