Читать книгу Laws of UX - Jon Yablonski - Страница 14

Haben Sie sich jemals gefragt, woher Formularelemente ihr charakteristisches Aussehen beziehen (Abbildung 1-1)? Die Menschen, die sie entworfen haben, hatten ein mentales Modell davon, wie diese Elemente aussehen sollten – und dieses beruhte auf Steuerpulten, die sie aus der physischen Welt kannten. Das Design von Webelementen wie Options- und Kontrollfeldern und sogar Schaltflächen orientiert sich am Vorbild ihrer greifbaren Pendants.

Wenn unsere Designs nicht mit dem mentalen Modell des Benutzers übereinstimmen, entstehen Probleme. Eine solche Diskrepanz kann sich nicht nur auf die Wahrnehmung der von uns entwickelten Produkte und Dienstleistungen auswirken, sondern auch auf die Geschwindigkeit, mit der die Nutzer diese verstehen. Dieser Effekt wird als Diskordanz zum mentalen Modell bezeichnet und tritt bei der plötzlichen Veränderung eines vertrauten Produkts auf.

Abbildung 1-1: Vergleich zwischen Schalttafelelementen und typischen Formularelementen (Quelle: Jonathan H. Ward [links], Googles Material Design [rechts])

Ein bekanntes Beispiel für eine solche Diskordanz ist die Umgestaltung von Snapchat im Jahr 2018. Statt schrittweise und durch umfangreiche Betatests begleitete Änderungen einzuführen, lancierte das Unternehmen eine komplett überarbeitete Version, die das vertraute Format der App radikal veränderte, indem sie die Möglichkeit, Storys zu betrachten, und die Kommunikation mit Freunden nun am selben Ort vereinte. Unzufriedene Nutzer drückten auf Twitter sofort massenhaft ihre Ablehnung aus. Noch schlimmer war die anschließende Abwanderung der Nutzer zum Snapchat-Konkurrenten Instagram. Der Snap-CEO Evan Spiegel hatte gehofft, durch die Neugestaltung frischen Wind in das Geschäft mit den Werbekunden zu bringen und dass sich Anzeigen besser an die Nutzer anpassen lassen würden. Stattdessen gingen die Anzeigenaufrufe und -einnahmen zurück, die Nutzerzahl brach dramatisch ein. Snapchat hatte es versäumt, zu gewährleisten, dass das mentale Modell seiner Benutzer mit der neu gestalteten App-Version übereinstimmte, und die daraus resultierende Diskordanz erzeugte einen herben Rückschlag.

Nicht immer müssen größere Neugestaltungen jedoch die Nutzer vergraulen – siehe Google. Google bot seinen Nutzern in der Vergangenheit schon häufiger die Möglichkeit, sich für neu gestaltete Versionen seiner Produkte wie Google Kalender, YouTube und Gmail zu entscheiden. Als das Unternehmen 2017 nach Jahren des im Wesentlichen gleichbleibenden Designs die neue Version von YouTube auf den Markt brachte (Abbildung 1-2), ermöglichte es Desktop-Usern einen schrittweisen und unverbindlichen Einstieg in das neue Material Design-UI. Die Benutzer konnten sich das neue Design als Vorschau ansehen, sich damit vertraut machen, Feedback abgeben und auf Wunsch sogar zur alten Version zurückkehren. Die unvermeidliche Diskordanz zum mentalen Modell wurde abgemildert, indem die Benutzer einfach die Möglichkeit erhielten, erst dann zu wechseln, wenn sie bereit waren.

Abbildung 1-2: Vergleich der Benutzeroberfläche vor (links) und nach (rechts) der Neugestaltung von YouTube im Jahr 2017 (Quelle: YouTube)

Die meisten E-Commerce-Websites setzen ebenfalls auf bereits existierende mentale Modelle. Durch vertraute Muster und Konventionen können Einkaufsseiten wie Etsy (Abbildung 1-3) effektiv darauf hinwirken, dass sich die Kunden auf die wichtige Produktsuche und den Einkauf konzentrieren. Wenn die Erwartungen der Nutzer an den Ablauf der Produktauswahl, die Nutzung des virtuellen Warenkorbs und der Kasse erfüllt werden, können sie auf ihr gesammeltes Wissen aus früheren Onlineshop-Erfahrungen zurückgreifen; der gesamte Vorgang fühlt sich angenehm und vertraut an.

Abbildung 1-3: E-Commerce-Websites wie Etsy nutzen bereits bestehende mentale Modelle, damit sich die Verbraucher auf den Produktekauf konzentrieren können, anstatt neue Interaktionsmuster erlernen zu müssen (Quelle: Etsy, 2019).

Die Verwendung mentaler Modelle als Gestaltungsgrundlage ist nicht auf den digitalen Bereich beschränkt. Einige meiner Lieblingsbeispiele finden sich im Automobilbau, besonders im Hinblick auf die Bedienelemente. Nehmen Sie zum Beispiel den Prototyp EQC 400 von Mercedes-Benz aus dem Jahr 2020 (Abbildung 1-4). Die Bedienelemente zur Sitzverstellung an der Türverkleidung sind der Form des Sitzes angepasst. Dieses Design macht es für den Benutzer leicht verständlich, welchen Teil seines Sitzes er mit dem jeweiligen Knopf verstellen kann. Dies ist ein wirkungsvolles Design, weil es auf unserem bereits bestehenden mentalen Modell eines Autositzes beruht und dann die Bedienelemente an dieses mentale Modell anpasst.

Solche Beispiele zeigen, wie wir die vorhandenen mentalen Modelle der Nutzer verwenden können, sodass sie produktiv werden. Wenn Sie dagegen ein beim Anwender bereits vorhandenes mentales Modell ignorieren, erzeugen Sie möglicherweise Verwirrung und Frustration. Hieraus ergibt sich auch eine wichtige Frage: Fordert Jakobs Gesetz demnach, dass sich alle Websites oder Anwendungen identisch verhalten sollen? Empfiehlt es uns darüber hinaus, nur bereits existierende UX-Strukturen zu verwenden, auch wenn es eine passendere, neue Lösung gibt?

Abbildung 1-4: Bedienelemente zur Sitzverstellung im EQC-400-Prototyp von Mercedes-Benz aus dem Jahr 2020, inspiriert durch das mentale Modell eines Autositzes (Quelle: MotorTrend, 2018)