Übersichtlichkeit und Klarheit sind im User Interface Design (kurz: UI Design) von entscheidender Bedeutung. Denn die User entscheiden innerhalb weniger Sekunden, ob ihnen eine Website gefällt. Denn die allgemeine Reizüberflutung und Informationsvielfalt in modernen Gesellschaften verkürzen die Aufmerksamkeitspannen der User. Mit Konzepten wie dem Chunking und dem Wissen um die Millersche Zahl kann man trotzdem zum User durchdringen.
Warum ist gutes UI Design so wichtig?
Im UI Design geht es um weit mehr als Farben und Formen. Vor allem ist das Informationsdesign entscheidend, also die logische Auswahl wichtiger Informationen. Sicher, es gibt viele andere Elemente, die zur Attraktivität einer Website oder einem Onlineshop beitragen – eine ansprechende Typografie zum Beispiel oder passende Bilder. Auch das Thema Barrierefreiheit wird immer wichtiger. Das Informationsdesign bleibt dennoch zentral.
Wie im Sport entscheidet auch bei User Interfaces das Zusammenspiel über den Erfolg. Der beste Stürmer bringt kaum etwas, wenn um ihn herum Chaos im Spielaufbau herrscht. Beim UI Design ist das nicht anders.
Zur praktischen Orientierung stellen wir dir heute die Millersche Zahl und das Chunking als grundlegende Prinzipien im UI Design vor. Sie liefern die Grundlage für userfreundliche Navigationen und alle anderen Arten der Anordnung von Elementen und der Vermittlung von Informationen.
Was User von digitalen Interfaces erwarten
Der amerikanische Psychologe und Stanford Professor Dr. BJ Fogg begann bereits in den frühen 2000er Jahren, in mehrjähriger Arbeit zu erforschen, was Nutzer von Webseiten erwarten. Eine von Foggs zentralen Ideen ist die “Website Credibility“, also die Glaubwürdigkeit eures digitalen Touchpoints. Seine Forschung hat auch heute noch eine hohe Relevanz.
7 Faktoren beeinflussen die Gläubwürdigkeit
Laut Fogg sind es sieben Faktoren, die eure digitale Glaubwürdigkeit beeinflussen - sowohl positiv als auch negativ:
Positive Einfluss:
Real-world feel (Usability): Fühlt sich der digitale Touchpoint gut an?
Ease of use: Ist das Interface einfach zu nutzen?
Expertise: Wird die Expertise am Touchpoint deutlich?
Trustworthiness: Sind die Inhalte und Angebote vertrauenswürdig?
Tailoring: Sind die Inhalte und Produkte auf mich zugeschnitten?
Negativer Einfluss:
Commercial implications: Werden die Preise für die Nutzung klar?
Amateurism: Wirkt der Touchpoint amateurhaft?
Dr. Fogg’s Untersuchungen zufolge suchen die User wegen der unüberschaubaren Menge an Angeboten vor allem nach Benutzerfreundlichkeit (Usability) sowie Signalen, die verdeutlichen: Diese Seite hält, was sie verspricht und garantiert (Daten-)Sicherheit. Dabei spielt das UI Design neben der technischen Implementierung eine Schlüsselrolle bei der Erfüllung dieser Bedürfnisse.
Vertrauen ist bei digitalen Touchtpoints essenziell
Bei digitalen Kundenschittstellen verhält es sich nicht anders als bei einem Menschen, dem wir begegnen: Der erste Eindruck zählt. Du würdest doch auch eher einem freundlichen Verkäufer vertrauen, der von Kopf bis Fuß professionell wirkt, als einem chaotischen Flohmarkthändler ohne AGBs - oder?
Es gibt darüber hinaus noch weitere Konzepte, die für alle Menschen gelten, egal, woher sie kommen und wie viel sie wissen. Du bist einem dieser Grundsätze sogar eben in angewandter Form begegnet!
UI Design-Basics: Die Millersche Zahl
Oben hast du die fünf Bullet Points in einer Tabelle gesehen. Hättest du es unübersichtlicher gefunden, wenn es zehn gewesen wären? Höchstwahrscheinlich.
Warum das so ist? Ein weiterer US-Psychologie, George A. Miller, fand bereits in den 50er Jahren eine zugleich einleuchtende und (wie passend!) gut zu merkende Erklärung: Wir können nur 7 plus/minus 2 Informationseinheiten im Kurzzeitgedächtnis behalten. Diese wird Millersche Zahl gezahlt.
Diese Einheiten von Informationen nennt man „Chunks“. Ihr Inhalt ist nicht von Bedeutung, denn es kann sich um Buchstaben, Wörter, Zahlen etc. handeln. Diese Erkenntnis kann man im UI Design zur Kommunikation oder der Abfrage von Informationen nutzen (z.B. auf Landingpages, in Formularen, zur Checkout Optimierung etc). Sie manifestiert sich in einer Methode: Chunking.
Chunking zur Erleichterung der Informationsverarbeitung
Chunking bezeichnet eine Methode zur Erleichterung des Kurzzeitgedächtnisses, bei der einzelne Informationen zu größeren, vertrauteren und daher leichter zu merkenden Gruppen zusammengefasst werden. So lassen sich Informationen außerdem schneller verarbeiten.
Chunking im UI Design
Die Millersche Zahl 7 plus/minus 2 ist nicht in Stein gemeißelt. Es gibt auch neuere Studien, die argumentieren, dass wir im Durchschnitt nur drei bis fünf Chunks behalten oder verarbeiten können. Am Ende kommt es also darauf an, den User nicht zu überfordern.
Unser Kurzzeitgedächtnis ist sehr begrenzt, unabhängig von Alter, Intelligenz, Erfahrung oder anderen Faktoren wie Stress oder Müdgkeit. Deshalb orientiert man sich beim Chunking im UI Design lieber nach unten. Vier oder fünf Chunks sind demnach besser als neun.
Störungen im Alltag sind zudem wahrscheinlicher als Ruhe und beeinträchtigen die Informationsverarbeitung zusätzlich. Wir scannen und überfliegen Websites, Apps und Onlineshops mittlerweile häufig nur noch. Die Rolle des UI Design ist es dafür zu sorgen, dass die wichtigsten Informationen vermittelt werden.
Beispiele für Chunking im E-Commerce
Kreditkartennummern oder IBAN: Die Zahlen und Buchstaben werden immer in Gruppen angezeigt (z. B. DE 87 1234 5678 5678 90).
Zusammenhänge Felder gruppieren: Die Kartenprüfnummer (CVC) sollte im Zahlungsprozess mit der Kartennummer und dem Kartentyp (VISA, Mastercard etc.) eng zusammen abgefragt werden. Gleiches gilt für die Versanddaten.
Telefonnummern: Vorwahl, Nummer und ggfs. Durchwahl werden i.d.R. gruppiert(z.B. 0221/1234-567)
Aufteilung des Checkouts in Schritte: Durch gezielte Checkout Optimierung werden zusammenhängende Schritte gruppiert (z.B. Schritt 1: Name & Adresse, Schritt 2: Versand- udn Bezahlmethode , Schritt 3: Bestellübersicht)
Zusammengehörige Kategorien in der Navigation: Eine Produktkategorie und deren Unterkategorien sind visuell von anderen Kategorien abgegrenzt.
Cluster und Ergonomik beim UI Design
Das Ignorieren der Prinzipien des Chunkings hat deutliche Konsequenzen. So führt eine unübersichtliche Navigation schnell dazu, dass User die Geduld verlieren und zur Konkurrenz wechseln. Gleiches gilt besonders für den Checkout Prozess!
UI Design basiert auf der Darstellung von gruppierten Informationen. Dabei kommen Cluster (= Gruppen von Chunks mit ähnlichen Eigenschaften) zur Anwendung. Chunking und Clustering sollte insbesondere bei der Navigation und den wichtigsten Produktinformationen unbedingt angewandt werden.
Übrig gebliebene Funktionen (wie Newsletter, Kontaktseite oder Karrierebereich) lassen sich gut in grafisch separaten Bereichen unterbringen (z.B. einer Metanavigation oder im Footer).
Hinsichtlich der Orientierung in der Seitentiefe ist es wichtig, eine übersichtliche Anzahl an Optionen zu bieten. Dann verarbeitet der User alle Informationen mühelos. Aus diesem Grund empfehlen wir immer umfassende ergonomische Designs. Dazu arbeiten wir u.a. mit Design Thinking Methoden und Wireframing Techniken.
Übrigens: Eine zu begrenzte Anzahl an Informationen und Auswahlmöglichkeiten wirkt sich ebenfalls negativ aus. In diesem Fall können sich User in ihrer Entscheidungsfreiheit eingeschränkt fühlen.
