UX Design nach psychologischen Regeln
Manchmal müssen Designs für neue Softwarefeatures schnell erstellt werden und die User Experience wird dabei vernachlässigt. Mithilfe einiger einfacher Regeln kann man die UX in den Designs jedoch zügig aufwerten. Wissen aus der Psychologie hilft uns dabei.
In der Softwareentwicklung stoßen regelmäßig neue Anforderungen auf das bestehende Produkt. Das User Interface wird also oft ergänzt und verändert. Dabei kann es schnell passieren, dass der Fokus bei der Konzeption auf unternehmensinterne Rückfragen und Kommunikation fällt. Die User Experience gerät dabei dann schnell in den Hintergrund. Es besteht das Risiko, dass das gewählte Design (die Positionierung des neuen Features, ihre Optionen und Benennungen, gewählte Interaktionselemente, etc.) nicht intuitiv nutzbar ist. Nach mehreren Diskussionsrunden weiß der Stakeholder, worüber diskutiert wurde und was entsprechend das Design beeinflusst hat. Der Nutzer weiß das nicht zwingend und findet sich unter Umständen ohne dem Hintergrundwissen nicht in dem neuen Feature zurecht. Idealerweise beauftragt man in dem Fall einen ausgebildeten oder erfahrenen Designer. Doch was, wenn keiner im Team verfügbar ist? Oder das Feature eigentlich so klein ist oder es ja schnell veröffentlicht werden muss?
Erste Mockups für neue Anforderungen werden nicht selten von Nicht-Designern erstellt oder Ideen zumindest dem Entwicklerteam beschrieben. Es kann also immer hilfreich sein, ein paar Regeln eines optimalen UX Designs zu kennen. So kann auch die User Experience eines Features, das kurzfristig entwickelt und veröffentlicht wird, optimiert werden.
Im Folgenden werden drei Regeln beschrieben, die von Psychologen und Experten im User Experience Bereich erforscht wurden. Die Regeln sind nicht allein auf Nutzer von Softwareprodukten projizierbar: Sie gelten allgemein, oder zumindest mehrheitlich, für menschliche Verhaltensweisen und Denkmuster. Somit sind die Regeln nicht auf Produkte bestimmter Branchen zu begrenzen. Die Regeln können einerseits helfen, die Optik des Designs aufzuwerten, aber auch Ordnung in die Logik des Features zu bringen. Es werden einige Beispiele angeführt, die aus der Softwarenutzung, aber auch aus dem Alltag stammen und sie sollen helfen, das Verständnis zu erleichtern.
1. Hick's Law
Je mehr Optionen und je komplexere Optionen dem Nutzer angeboten werden, desto länger seine Reaktionszeit. Ein einfaches Beispiel aus dem Alltag: Man betrachtet die Speisekarte eines Restaurants und fühlt sich erschlagen von einer seitenlangen Liste verschiedener Gerichte und Getränke. Hierbei spricht man von der Kognitiven Belastung (Cognitive Load), also der beanspruchten Komplexität der Denkprozesse während einer Nutzung. Man handelt ineffizient, da zunächst viele Informationen verarbeitet werden müssen.
Und an der Stelle die Frage beim Design eines Features: Welche Informationen muss der Nutzer überhaupt verarbeiten? Werden wirklich nur die Informationen dargestellt, die im angestrebten Anwendungsfall benötigt werden? Können bestimmte Daten visualisiert statt ausgeschrieben / aufgelistet werden? Dann könnte der Nutzer den Inhalt schneller verarbeiten. Sind Daten oder ganze Komponenten des Designs sogar verzichtbar, da sie vom Fokus der Funktion ablenken oder keinen Mehrwert bieten? Vielleicht findet die Komponente dann in einer anderen Ansicht einen besseren Platz.
Weitere Beispiele:
Die Knöpfe einer Fernbedienung für Receiver (hohe Anzahl, u.a. für Teletext, Input, Vorspulen) & einer Fernbedienung für einen Fire TV Stick (geringe Anzahl, u.a. für allgemeine Navigation, Bestätigung der Auswahl)
Einstellungen einer Software, zum Beispiel bei Facebook. Dort gibt es aktuell 21 Navigationspunkte für Unterthemen. Die wiederum haben natürlich auch jeweils Unterthemen.
2. Miller's Law
Informationen sollten nach Möglichkeit inhaltlich gebündelt werden, sodass der Nutzer eine vorgruppierte, nachvollziehbare Übersicht erhält. Ziehen wir wieder das Beispiel der Speisekarte hinzu: Die Karte wird meist unterteilt zwischen Gerichten und Getränken. Die Gerichte werden unterteilt zwischen Vorspeisen, Hauptgerichten und Nachspeisen. Je nachdem, wie groß die Auswahl der Gerichte ist, werden diese Gruppen erneut aufgeteilt, zum Beispiel Hauptspeisen in Pizzen, Pasta und Überbackenes.
Als Gast kann man die Karte also effizienter überspringen: Wenn der Gast nie Vorspeisen bestellt, wird er die ersten Seiten dazu komplett überspringen. Hatte der Gast von Anfang an Appetit auf Pizza, wird er seine Überlegungen, was er bestellen wird, ausschließlich auf die eine Gruppe fokussieren. Die Kognitive Belastung wird also gleichzeitig weniger beansprucht.
Gleiches sollte man mit der logischen Struktur in Nutzeroberflächen machen. Ein komplexes Formular, in dem der Nutzer Daten einpflegen soll, kann zum Beispiel so vereinfacht werden. Eingabefelder, die sich auf Kontaktdaten des Nutzers beziehen, können eine Gruppe sein. Eingabefelder für verschiedene Produkte können jeweils eine weitere Gruppe bilden.
Noch übersichtlicher kann man die Oberfläche gestalten, wenn man die Gruppen mit Überschriften versieht. So wird der Fokus jedes Abschnitts deutlich. Ein wichtiger Tipp: Fällt es schwer, eine kurze Überschrift zu wählen, kann das ein Hinweis darauf sein, dass der Fokus der Gruppe oder sogar des ganzen Features noch nicht gefunden wurde.
Weiterhin sollte man die Gruppen visuell voneinander trennen. Einzelne Boxen und Trennlinien sind eindeutig, aber manchmal reicht es auch, den Abstand der Element-Gruppen leicht zu erhöhen. Subtile Lösungen können eleganter wirken, ohne an Wirksamkeit zu verlieren. Wie solche Gruppen visualisiert werden, ist jedoch von Corporate Design und Produktdesign unterschiedlich. Vielleicht gibt es schon vergleichbare Komponenten, von denen man sich Designentscheidungen abgucken kann? So kann man die Konsistenz des Produktdesigns wahren.
Weitere Beispiele:
Wer eine IBAN für eine Überweisung abtippen wollte, hat vielleicht schon zwei Situationen erlebt: Die Ziffern stehen wie eine Mauer ohne Leerzeichen nebeneinander: DE41123456789123456789. Oder sie werden gruppiert dargestellt: DE41 1234 5678 9123 4567 89. Welche Darstellung finden Sie leichter zum Abtippen?
Wie die Speisekarte werden auch Navigationspunkte eines Webshops gruppiert. Überthemen wie Bücher und Kleidung, weiterhin Unterthemen wie Fachbücher und Hörbücher helfen bei einer effizienten Eingrenzung der Suche.
3. Jakob's Law
Mentale Modelle (Mental Models) bauen sich bei Nutzern bei täglicher Bearbeitung von Aufgaben auf. Diese Modelle sind unterbewusste Assoziationen und Erwartungen. Sie können durch Erfahrungen in der realen Welt aufgebaut werden, aber auch durch Gewohnheiten aus der Software- und Webnutzung.
Beim Überfliegen einer Speisekarte muss der Gast kein Wort gelesen haben, um beim Anblick einer Weinglaszeichnung zu erkennen, dass er sich im Getränkeabschnitt befindet. Solche Visualisierungen kann man sich auch bei Benutzeroberflächen zunutze machen. Ein einfaches Beispiel ist das Icon zum Triggern einer Löschfunktion. Der Mülleimer und seine Funktion ist dem Nutzer aus dem realen Leben bekannt: Wenn er etwas nicht mehr braucht, wird es hier reingeworfen.
Andere Visualisierungen, die der Nutzer nicht aus dem realen Leben und vielleicht auch nicht von anderen Softwares kennt, kann der Nutzer dennoch erlernen. Wenn eine Software zum Beispiel verschiedene große Features anbietet, können diese durch individuelle Icons und Farben gekennzeichnet werden. Wiederholen sich diese Kennzeichen konsistent in vielen Seiten, so baut der Nutzer eine Assoziation zwischen dem Icon und der Farbe und dem Feature auf. Künftig wird es dem Nutzer dann leichter fallen, sich durch die Seiten zu navigieren, da ihm die Farben und Icons einen sicheren, schnell erfassbaren Bezugspunkt geben. Der Nutzer erkennt etwas wieder, bevor er etwas lesen muss.
Weitere Beispiele:
Autos, die man im Alltag sieht, sind sich üblicherweise so ähnlich im Design, dass man sie als Auto erkennt. Oft wird man Betrachten sogar sofort detaillierter und stuft die Marke und das Modell ein. Ein Auto müsste schon sehr kurios gebaut sein, dass man es als solches nicht wieder erkennt.
Checkboxen sind so weit verbreitete Interaktionselemente im Web, dass ihre Interaktionsmöglichkeit und die Bedeutung der Status beim Internetnutzer als bekannt eingestuft werden kann.
