Hallo! Hotjar gibt es jetzt auch auf Deutsch 🇩🇪 Jetzt gratis starten.

Lerne / Leitfäden / UX-Design

Zurück zu Leitfäden

6 inspirierende Beispiele für gelungenes UX-Design

Um in einem schnelllebigen Markt wettbewerbsfähig zu sein, müssen digitale Produkte ein herausragendes Nutzererlebnis (User Experience, UX) bieten, die sich an den sich stetig ändernden Kundenbedürfnissen orientiert.

Eine gelungene UX sorgt dafür, dass Kunden:innen konvertieren, die Abwanderungsrate sinkt, die Nutzenden bleiben und der Impact deines Produkts in jeder Hinsicht maximiert wird.

Zuletzt aktualisiert

30 Nov 2023

Lesezeit

14 Min.

Teilen

UX-Design ist äußerst wichtig, aber du solltest dich davor hüten, dich von auffälligen Designtrends verführen zu lassen, dein Produkt zu überladen und zu vergessen, dass es bei einem optimalen UX-Design nicht um dich geht: Es geht darum, Probleme für deine Nutzenden zu lösen.

Wie dir das gelingt, zeigt dir dieser Artikel anhand von sechs brillanten Beispielen für nutzerzentriertes UX-Design. Lasse dich von diesen Beispielen inspirieren und schaffe eine beeindruckende User Experience – unsere praktischen Tipps helfen dir dabei, die Beispiele in die Praxis umzusetzen.

Bringen deine UX mit Hotjar auf ein neues Level

Finde heraus, was deine Nutzenden erleben – und verbessere deine UX.

Gutes und schlechtes UX-Design 

Beim UX-Design geht es in erster Linie darum, Produkte zu entwickeln, die die Bedürfnisse der Nutzenden einfach, effizient und so aufwandslos wie möglich erfüllen. Jeder einzelne Customer Touchpoint trägt zum Nutzererlebnis bei, vom Laden deiner Landing Page über die Erkundung deines Produkts und Conversion bis hin zum Onboarding und der Nutzung deiner Produktfunktionen.

UX-Design ist wichtig, damit deine Kund:innen das Gewünschte finden, ohne dabei auf Hindernisse zu treffen. Wenn sie zum Beispiel zehn Schritte brauchen, um etwas zu kaufen, geben sie vielleicht auf und gehen woanders hin. Ein gutes UX-Design hilft dir, das Vertrauen der Kund:innen zu gewinnen, Frustration zu vermeiden, und erleichtert die Conversion. Eine gute User Experience kann sich auch stark auf deine Platzierung in den Suchmaschinen auswirken, da deine Website und deine Inhalte leichter zugänglich sind.

Taylor Ryan

Was ist gutes UX-Design?

Bei gutem UX-Design geht es darum, sich in die Nutzenden hineinzuversetzen, um sicherzustellen, dass ihre Reise durch dein Produkt, deine Website oder deine App sowohl funktional als auch angenehm ist. Dabei variiert es je nach Kund:in und Marke: Gutes UX-Design ist gut für deine Kund:innen und dein Produkt.

Gutes UX-Design:

  • legt den Schwerpunkt darauf, den Nutzenden zu helfen, das zu tun, wozu sie gekommen sind;

  • reagiert auf Kundenverhalten, Feedback und veränderte Bedürfnisse;

  • beseitigt Reibungen im Kundenfluss;

  • sieht potenzielle Hindernisse und Quellen der Verwirrung im Voraus und beseitigt diese;

  • bietet eine ansprechende und zugängliche Nutzeroberfläche (UI);  

  • beinhaltet Möglichkeiten zur Kundenzufriedenheit;

  • gibt Nutzenden eine Stimme, indem sie Feedback geben oder sich mit dem Kundendienst in Verbindung setzen können.

Man muss die Welt mit den Augen der Nutzenden sehen! Sie zu beobachten ist gut – aber man sollte ihre Perspektive einnehmen, wie sie denken und alles selbst ausprobieren. Das erfordert mehr zwar mehr Forschung, aber die Ergebnisse sind es absolut wert.

Nick Cadina
Lead UX-Designer, Hackr.io

Was ist schlechtes UX-Design?

Anstatt für ein reibungsloses Produkterlebnis zu sorgen, hindern UX-Design-Fehler die Kund:innen daran, ihre Bedürfnisse zu erfüllen und führen zu Verwirrung oder Frustration. 

Schlechtes UX-Design: 

  • basiert eher auf Annahmen als auf tiefgreifender UX-Forschung;

  • legt mehr Wert auf Ästhetik als auf Nutzerfreundlichkeit und Bedienbarkeit;

  • bleibt statisch und entwickelt sich nicht mit den sich ändernden Erwartungen und Bedürfnissen der Nutzenden weiter;

  • überfordert Nutzende mit schlecht organisierten Informationen und Navigationsoptionen;

  • fesselt Nutzende nicht und hält ihre Aktivität nicht aufrecht.

Ein häufiger Fehler beim UX-Design besteht darin, dass man sich sofort auf Lösungen stürzt, ohne das Problem bzw. den Kontext vollständig zu verstehen. Um dies zu vermeiden, frage stets nach dem Warum: Sprich mit deinen Nutzenden und Stakeholdern darüber, warum ein bestimmtes Problem für sie wichtig ist. Informiere dich dann anhand von Daten darüber, wo sich das Problem am stärksten auf die User Experience auswirkt, welche Segmente am meisten von dem Problem betroffen sind, usw.

Saskia Everard
Produktdesigner, Hotjar

6 inspirierende Beispiele für gutes UX-Design

Kommen wir jetzt zum Kern der Sache: Wie sieht gutes UX-Design eigentlich aus? 

Nachfolgend schauen wir uns sechs Beispiele für brillantes UX-Design in Aktion an und zeigen dir, wie du diese Erkenntnisse nutzen kannst, um eine reibungslose User Experience zu schaffen.

Los geht's!

1. N26: Antizipation von Nutzerbedürfnissen

Mit seinem Online-Banking und seiner mobilen App bietet N26 Nutzenden eine einfache, personalisierte Möglichkeit, ihre Finanzen zu verwalten

#Einfaches, symbolbasiertes UX-Design der N26-App. Bildquelle: n26.com
Einfaches, symbolbasiertes UX-Design der N26-App. Bildquelle: n26.com

Darum ist das UX-Design so gut

Die einfache, intuitive Nutzeroberfläche (User Interface, UI) zeigt uns, dass es bei gutem UX-Design nicht um unnötigen Schnickschnack oder ausgefallene Grafiken geht. N26 stellt die Nutzenden in den Mittelpunkt und tut alles dafür, um alle möglichen Anforderungen an eine Fintech-App zu erfüllen.

Bei der Organisation von Finanzinformationen stehen Nutzenden zahlreiche Optionen zur Verfügung – man kann sich sowohl Standard-Kontoauszüge als auch ausführliche Infografiken und Statistiken zu seinen Ausgaben anzeigen lassen.

N26 bietet zahlreiche Möglichkeiten zur Personalisierung, die sowohl ästhetisch als auch funktional sind. Nutzende können verschiedene Sparbereiche oder „Spaces" erstellen und Bilder oder Beschreibungen hinzufügen – zum Beispiel ein Foto ihres nächsten Urlaubsziels in ihren „Urlaubsgeld“-Bereich stellen. Das sorgt für eine flexible, personalisierte User Experience.

#Users can customize spaces and bank cards based on individual preferences. Image source: n26.com
Users can customize spaces and bank cards based on individual preferences. Image source: n26.com

Die N26-App bietet außerdem für jeden Schritt auch Standardoptionen an. Dadurch sind die Nutzenden nicht gezwungen, zusätzliche Entscheidungen zu treffen, wenn sie dies nicht wollen.

Nutzerfreundlichkeit ist bei N26 ein wichtiges Gestaltungsprinzip, aber auch eine hohe Sicherheit spielt eine zentrale Rolle. So können Nutzende mit wenigen Klicks Transaktionen durchführen, die normalerweise zeitaufwendig sind (z. B. eine Karte kündigen oder eine neue bestellen), doch dabei werden sie immer aufgefordert, ihren Fingerabdruck oder ihr Passwort einzugeben, um eine hohe Sicherheit zu gewährleisten. Auch der Wechsel zwischen verschiedenen Anzeigeoptionen vertraulicher Karten- und Kontoinformationen ist ganz einfach. 

Das UX-Design von N26 ist also ein schlankes, intuitives UX-Design, das eine Vielzahl von Funktionen bietet, ohne die Nutzenden zu verwirren. Es sorgt dafür, dass sonst aufwändige Bankprozesse einfach, ja sogar angenehm abzuwickeln sind.

Das kannst du dir davon abschauen

Tue es der leistungsstarken UX von N26 gleich, indem du deine Nutzenden in den Mittelpunkt stellst.

Bei der Navigation durch das Produkt scheint es fast, als ob N26 auf magische Weise an alle möglichen Bedürfnisse und Vorlieben der Nutzenden gedacht hätte ...  

Aber natürlich sind die UX-Designer:innen von N26 keine Gedankenleser. Sie wissen lediglich, dass es bei großartiger UX darum geht, mit den Nutzenden zu sprechen, sich in sie einzufühlen und ihr Feedback umzusetzen.

Nutze Erkenntnisse zum Produkterlebnis und UX-Tools, um zu verstehen, wie die Nutzenden dein Produkt erleben und warum sie sich auf deiner Website auf eine bestimmte Weise verhalten.

Hotjar Recordings helfen dir, dich in die Köpfe deiner Nutzenden hineinzuversetzen und die Customer Journey virtuell mit ihnen zu durchleben.

Mithilfe von Feedback-Widgets findest du heraus, warum sich Nutzende auf eine bestimmte Art und Weise verhalten. Zudem kannst du Nutzervorschläge sammeln, um zu erfahren, welche zusätzlichen Funktionen, Einstellungsoptionen oder Unterstützung benötigt werden.

#Beispiel für eine Session-Aufnahme von Hotjar
Beispiel für eine Session-Aufnahme von Hotjar

Direktes Feedback von den Nutzenden darüber, wie sie mit dem System interagieren, ist der erste Schritt zur Entwicklung maßgeschneiderter Lösungen. UX-Designer:innen sollten sich bei allem, was sie tun, an den tatsächlichen Bedürfnissen der Nutzenden orientieren und nicht an falschen Annahmen. Daten sind also ein zentraler Bestandteil des Prozesses.

Dennis Lenard

2. ASOS: interaktiv und informativ

ASOS bietet ein verlockendes Online-Einkaufserlebnis.

#Die ASOS-Landing Page: optisch ansprechend und mit gut platzierten Schaltflächen. Bildquelle: asos.com
Die ASOS-Landing Page: optisch ansprechend und mit gut platzierten Schaltflächen. Bildquelle: asos.com

Darum ist das UX-Design so gut

Ein Onlinehandel für Mode muss visuell überzeugen und gleichzeitig sicherstellen, dass alle praktischen Bedürfnisse der Nutzenden erfüllt werden. Die Landing Page von ASOS lockt mit einem hellen, lebendigen Bild sowie perfekt platzierten Handlungsaufforderungen (CTAs) und Navigationsschaltflächen, die Kund:innen dazu verleiten, bestimmte Bereiche und Produkte zu erkunden. 

Das riesige Angebot an Produkten könnte auf Kund:innen schnell überwältigend wirken, daher wurde die Nutzeroberfläche so gestaltet, dass die Informationen in Kategorien und erweiterte Produktfilter eingeteilt werden, damit Nutzende schnell zu den Kleidungsstücken gelangen, nach denen sie suchen. 

Auf der jeweils ausgewählten Produktseite gibt es eine klare visuelle Hierarchie. Weitere Informationen, wie z. B. eine Größentabelle, sind einfach zu finden, und alle Extras werden auf der Seite geöffnet, um zu vermeiden, dass Kund:innen zu einer anderen Registerkarte wechseln. Die Nutzeroberfläche ist barrierefrei, sodass die Nutzenden mit wenigen Klicks eine Größe auswählen, den Preis prüfen und das Produkt in den Warenkorb legen können. 

Die UX von ASOS ist sehr interaktiv: Kund:innen werden dazu aufgefordert, visuelle und schriftliche Informationen zu erkunden. Die Produktfotos sind interaktiv, sodass man sich durch viele verschiedene Ansichten aus unterschiedlichen Blickwinkeln klicken kann. Die Funktion „Virtual Catwalk“ von ASOS zeigt Kleidung an einem Model, während es sich auf einem Video bewegt – eine tolle Möglichkeit, um die Kund:innen für das Produkt zu begeistern und auf ihr Bedürfnis einzugehen, vor dem Kauf zu wissen, wie ein Produkt in Echt aussie

#Eine interaktive Produktseite mit einem Virtual-Catwalk-Video und leicht zugänglichen Größenangaben. Bildquelle: asos.com
Eine interaktive Produktseite mit einem Virtual-Catwalk-Video und leicht zugänglichen Größenangaben. Bildquelle: asos.com

Das kannst du dir davon abschauen

ASOS hat offenbar eine Millionen Tests und UX-Validierungen durchgeführt, um jedes Hindernis und jede Störung zu beseitigen, die Nutzenden von einem Schritt hin zur Conversion abhalten könnte, sei es, dass sie lange genug auf einer Produktseite bleiben, um sich das Video anzusehen oder zur Kasse zu gelangen. Die gelungene UX von ASOS beruht vor allem darauf, dass versucht wurde, zu verstehen, wie sich Nutzende verhalten – und warum.  

Um es ASOS gleichzutun, solltest du alle quantitativen UX-Metriken im Auge behalten und eine eingehende UX-Analyse durchführen. Mithilfe von A/B-Tests oder multivariaten Experimenten findest du heraus, wie Kund:innen auf verschiedene Seitenlayouts reagieren. 

Verwende Hotjar Heatmaps, um zu sehen, wo du Klicks – und Kund:innen – verlierst. Vielleicht stellst du fest, dass etwas so Simples wie eine andere Positionierung der CTA-Schaltfläche deine Conversions drastisch steigern kann.

Profi-Tipp: Mit Hotjar Recordings bekommst du ein besseres Gefühl dafür, wie  Nutzende dein Produkt erleben. Filtere nach „Wutklicks“, um zu sehen, wo Nutzenden frustriert herumklicken – und behebe die Blockade so schnell wie möglich!

3. Calm: Einfühlungsvermögen und kleine Schmankerl

Die Calm-App bietet eine übersichtliche Auswahl an Meditationen und Wellness-Audiotracks.

#Die immersive, schlanke Nutzeroberfläche der Mobile-App von Calm. Bildquelle: calm.com
Die immersive, schlanke Nutzeroberfläche der Mobile-App von Calm. Bildquelle: calm.com

Darum ist das UX-Design so gut

Es ist nicht zu übersehen, dass Calm mit viel Einfühlungsvermögen für die Bedürfnisse der Nutzenden entwickelt wurde. Die Nutzeroberfläche mit beruhigenden Farben und Klängen, die vor Auswahl eines Audiotitels beginnen, macht die App zu einer Oase für gestresste Nutzende.

Die Design-Hierarchie ist minimalistisch und klar, so dass Nutzende nicht von einer Vielzahl verschiedener Optionen überwältigt werden. Bei einer Meditation sind lediglich die Symbole für Wiedergabe, Pause, Zurückspulen und Teilen zu sehen.  

Auch die Onboarding-Phase ist sehr gut gestaltet. Die App führt Kund:innen schnell durch einfache, intuitive Fragen – mit ein paar Klicks ist die Einrichtung abgeschlossen und die personalisierte Meditation kann beginnen. Die Antworten auf die eingangs gestellten Fragen dienen zur weiteren Personalisierung der UX: Die Nutzenden erhalten unaufdringliche Hinweise und Erinnerungen an Funktionen, die von Interesse sein könnten. Wird dies nicht gewünscht, lassen sich diese Erinnerungen leicht deaktivieren.

Über die gesamte App verteilt finden sich kleine Extras, Soundeffekte und Meditationen von Celebritys. Das verleiht der User Experience einen ganz besonderen Touch. 

Calm macht sogar UX-Hindernisse zu einem angenehmen Erlebnis. Potenzielle Reibungsmomente wie Ladezeiten werden in das App-Erlebnis integriert. Die Nutzenden werden aufgefordert, während des Wartens tief durchzuatmen, was das Aushalten von Ungeduld (und einen möglichen Abbruch der Nutzenden) in eine Mini-Achtsamkeitsübung verwandelt, die von zusätzlichem Wert ist.

#Celebrity bonus features on the Calm app. Image source: Calm app.
Celebrity bonus features on the Calm app. Image source: Calm app.

Das kannst du dir davon abschauen

Nimm dir ein Beispiel an Calm und versuche, die Gefühle deiner Kund:innen in der Tiefe zu verstehen. 

Mithilfe von Aufnahmen von Sessions kannst du dich zwar vielleicht in die User Experience hineinversetzen, aber um ein tieferes Verständnis davon zu erlangen, wie sich deine Nutzenden dabei fühlen, solltest du direkt mit ihnen sprechen. Führe dazu Interviews und UX-Umfragen durch und verwende Hotjar Surveys, um zu erfahren, was die Nutzenden denken und fühlen, und zwar in ihren eigenen Worten. 

Indem du dich in die Nutzenden hineinversetzt, kannst du Fehler, Hindernisse und Reibungsverluste beseitigen. So kannst du Möglichkeiten ausmachen, wie du das Erlebnis noch angenehmer gestalten und damit die Kundenbindung stärken kannst. 

Frage dabei jedoch nicht nur nach dem, was falsch läuft – frage auch, was deine Kund:innen bei der Nutzung deines Produkts (noch mehr) wollen und wie sie sich gerne fühlen würden. Nutze ihre Antworten, um ihnen mit deinem Produkt einen echten Mehrwert zu bieten.

Egal, wie viel Recherche man im Vorfeld der Erstellung von Inhalten und der Gestaltung des Layouts betrieben hat – es sind die Daten, die die wahre Geschichte darüber erzählen, wie deine Kund:innen interagieren. Tools wie Heatmaps, Recordings sowie Tracking können dabei helfen, Layout und Inhalte für maximal hohe Conversions zu optimieren und zu perfektionieren.

Ben Seidel
CEO und Gründer, Igniting Business

4. Keurig: Informationen in schmackhaften Häppchen

Keurig bietet für seine hochwertigen Kaffeemaschinen und aromatisierten Getränkepads ein informatives Kauferlebnis.

#Die Landing Page von Keurig verbindet Ästhetik mit Nutzerfreundlichkeit. Bildquelle: Keurig.com
Die Landing Page von Keurig verbindet Ästhetik mit Nutzerfreundlichkeit. Bildquelle: Keurig.com

Darum ist das UX-Design so gut

Die Kaffeemaschinen von Keurig sind für ihr elegantes Design und ihre nutzerfreundliche Anwendung bekannt. Kein Wunder also, dass auch bei der E-Commerce-Journey von Keurig die Ästhetik des Designs und die Nutzerfreundlichkeit im Vordergrund stehen. 

Das UX-Design bietet eine solide Balance zwischen visueller Einfachheit und allen technischen Produktdetails, die sich Käufer:innen von Haushaltselektronik wünschen. 

Die Kund:innen können Nahaufnahmen verschiedener Produkte und Funktionen aus unterschiedlichen Blickwinkeln betrachten, um einen visuellen Eindruck davon zu gewinnen. Es gibt eine Menge detaillierter Produktinformationen, die jedoch in intuitiv verständliche Häppchen aufgeteilt und in klarer Sprache erklärt werden. Anstatt einzelne technische Daten aufzulisten, wird in den Produktdetails erklärt, wie sich die einzelnen Funktionen auf die morgendliche Tasse Kaffee auswirken: Potenzielle Kund:innen werden dazu angeregt, sich vorzustellen, wie das Produkt in ihren Alltag passt.

Für einen objektiven Blick auf das Produkt können die Bewertungen ganz einfach aufgerufen werden, und beim Klicken darauf wird man nicht vom gerade angesehenen Produkt abgelenkt. Man sieht auf einen Blick, welche Modelle und Farben verfügbar sind und der Kaufprozess läuft völlig reibungslos ab.

Eine besondere Funktion sind die Vergleichstabellen, mit denen man verschiedene Modelle nebeneinander stellen und direkt vergleichen kann.

#Nutzende wählen, welche Modelle sie vergleichen wollen und sehen auf einen Blick, wie sich die jeweiligen Produktmerkmale unterscheiden. Bildquelle: keurig.com
Nutzende wählen, welche Modelle sie vergleichen wollen und sehen auf einen Blick, wie sich die jeweiligen Produktmerkmale unterscheiden. Bildquelle: keurig.com

Das kannst du dir davon abschauen

Kund:innen alle notwendigen Informationen zu einem technischen Produkt zu bieten, ohne sie dabei zu überfordern, ist eine echte Herausforderung. Klar, du kannst versuchen, ein überladenes Design, Unordnung oder zu viel Fachjargon zu vermeiden – aber wie bestimmst du bei einem minimalistischen Design, welche Informationen wichtig sind und welche nicht? 

Auch hier ist entscheidend, was für deine Nutzenden wichtig ist. Frage sie, höre zu, setze ihr Feedback um und frage sie dann erneut. Sieh dir Aufnahmen an, setze Umfragen ein und sprich vor und nach jeder Iteration mit den Kund:innen. 

Zudem kannst du von Keurig lernen, besonders darauf zu achten, welche Informationen deinen Nutzenden fehlen könnten, um den letzten Schritt zur Conversion zu machen. So stellst du vielleicht fest, dass du die Bewertungen deutlicher hervorheben oder eine Vergleichstabelle anbieten solltest, die den Kund:innen bei ihrer Entscheidung hilft.

Mit den Feedback-Widgets von Hotjar kannst du deine Kund:innen bitten, ihre Erfahrungen zu bewerten und sie fragen, welche Informationen ihnen noch gefehlt haben. 

Analysiere Session-Aufnahmen von Kund:innen, die in der letzten Phase nicht konvertiert haben, und finde heraus, ob sie eventuell nach weiteren Informationen gesucht haben. Frage die Nutzenden außerdem mithilfe von Umfragen zu den Gründen für ihre ausgebliebene Conversion.

#Die zahlreichen Tools von Hotjar bieten Einblicke in das Produkterlebnis, die dir helfen, die User Experience zu verbessern
Die zahlreichen Tools von Hotjar bieten Einblicke in das Produkterlebnis, die dir helfen, die User Experience zu verbessern

5. Airbnb: einfach und flexibel

Die Airbnb-Website ist stylisch und einfach zu navigieren. Sie hilft Nutzenden, Ferienunterkünfte zu finden oder ihr Zuhause als Gastgeber zu vermieten.

#Einfach einstellbare Suchoptionen: die mobile Suchoberfläche von Airbnb. Bildquelle: airbnb.com
Einfach einstellbare Suchoptionen: die mobile Suchoberfläche von Airbnb. Bildquelle: airbnb.com

Darum ist das UX-Design so gut

Die Kund:innen wissen genau, was sie auf der Landing Page von Airbnb zu tun haben: Die Call-to-Action (CTA)-Schaltfläche ist unübersehbar und liegt gut positioniert im „Above-the-Fold“-Bereich (ohne Scrollen sofort sichtbarer Bereich). 

Das UX-Design von Airbnb ist auf die Bedürfnisse zweier sehr unterschiedlicher Zielgruppen zugeschnitten: Gastgeber:innen und Gäste. Jede Nutzergruppe wird anders mit visuellen Elementen angesprochen, die ihren Wünschen entsprechen (ein entspannender Urlaub für Gäste; eine stabile, sorgenfreie Einkommensquelle für Gastgeber:innen). Mithilfe von Storytelling wird eine Verbindung zwischen beiden Nutzergruppen hergestellt. 

Die Suchfunktion ist das Herzstück der UX von Airbnb. Los geht die Suche mit einem übersichtlichen, einfachen Suchfeld. Im weiteren Suchprozess lassen sich ganz einfach weitere Filter wie Preisklasse, Zimmer oder Wohnung anwenden.

Die UX ist durch ein responsives Design mit verschiedenen Möglichkeiten zur Visualisierung von Informationen gekennzeichnet, z. B. die Sortierung von Immobilien nach Preis, Ausstattung (wie Swimmingpools oder Balkone) oder die Anzeige von Immobilien auf einer interaktiven, beweglichen Karte.

Auch wird eine gewisse Dringlichkeit vermittelt, um Conversions anzustoßen: Die Website zeigt an, wenn es nur noch wenige freie Termine für eine Immobilie gibt oder man eine Immobilie gefunden hat, die normalerweise weit im Voraus ausgebucht ist.

#Nutzende können die aufgelisteten Objekte mit Bildern und auf einer interaktiven Karte sehen. Bildquelle: airbnb.com
Nutzende können die aufgelisteten Objekte mit Bildern und auf einer interaktiven Karte sehen. Bildquelle: airbnb.com

Das kannst du dir davon abschauen

Airbnb führt es dir ganz klar vor Augen: Achte auf die Basics! Bevor du komplexe Überarbeitungen deines UX-Designs in Angriff nimmst, solltest du zuerst einmal auf grundlegende Faktoren achten, z. B. wie gut sichtbar dein CTA ist, ob Nutzende gerne darauf klicken oder ob sie problemlos und ohne Zögern eine erste Suche starten. 

Verlasse dich dabei nicht auf Vermutungen: Verwende Tools zur Analyse des Produkterlebnisses wie die von Hotjar, um eine Kombination aus quantitativen und qualitativen Daten zu erhalten, sodass du fundierte UX-Entscheidungen treffen kannst.

Das herausragende UX-Design von Airbnb verbindet Nutzerfreundlichkeit, Design, Product Storytelling und Marketing. Man merkt, dass viele verschiedene Teams und Expert:innen an der Entwicklung des Produkts beteiligt waren: spezialisierte UX- und UI-Designer:innen, Produktteams, Marketing und Vertrieb, Business-Analyst:innen und mehr. 

Genauso kannst du dich dazu inspirieren lassen, gutes UX-Design teamübergreifend zu entwickeln. Mit cross-funktionaler Zusammenarbeit deckst du alle Bereiche des UX-Designprozesses ab, erhältst viele verschiedene Perspektiven und kannst Nutzerbedürfnisse und Unternehmensziele auf einen Nenner bringen.

Profi-Tipp: Mit Hotjar Highlights kannst du Erkenntnisse ganz einfach mit deinem Team und deinen Stakeholdern teilen. Sende mit wenigen Klicks Nutzer-Clips und Datensheets und automatisiere Slack-Benachrichtigungen, um alle auf dem Laufenden zu halten.

6. Babbel: Immersion und Gamification

Babbel bietet seinen Nutzenden eine übersichtliche Oberfläche zum Sprachenlernen, die ihnen dabei hilft, sich zu konzentrieren.

#Lernende bekommen ihre Punktzahl, Nachrichten mit positiver Bestätigung und einen Überblick über anstehende Lerninhalte angezeigt. Bildquelle: babbel.com
Lernende bekommen ihre Punktzahl, Nachrichten mit positiver Bestätigung und einen Überblick über anstehende Lerninhalte angezeigt. Bildquelle: babbel.com

Darum ist das UX-Design so gut

Von dem Moment an, in dem man die App zum ersten Mal ausprobiert, tut Babbel alles dafür, seine Kund:innen in einen immersiven Flow zu ziehen. 

Das UX-Design wurde auf Grundlage von Bildungs- und Nutzerforschung entwickelt und soll eine konzentrationsfördernde, anregende Lernumgebung schaffen. Beim Aufrufen einer Lektion füllt der Lerninhalt die gesamte Bildschirmfläche aus, es gibt keinerlei Ablenkungen oder zusätzliche Schaltflächen. In den Lektionen werden zudem schriftliche, visuelle und auditive Inhalte miteinander kombiniert, um die Lerninhalte abwechslungsreich und fesselnd zu gestalten.

Babbel bietet verschiedene UX-Pfade: Die Lektionen können sowohl als Teil eines strukturierten, progressiven Kurses absolviert werden als auch einzeln als gelegentliche Spielerei für Zwischendrin. 

Bei Babbel wird das Sprachenlernen zum Spiel. Es wird eine Punktzahl vorgegeben, die es zu übertreffen gilt. Die Lektionen sind so aufgebaut, dass sie zwar eine Herausforderung darstellen – aber keine übermäßig große, damit die Lernenden nicht entmutigt werden. 

Die UX und UI sind so gestaltet, dass die Lernenden schnell an Bord sind und aktiv bleiben, während sie ihre Lernerfahrungen genießen und ihre Ziele Stück für Stück erreichen.

So setzt du die Inspiration in die Tat um

Der Vizepräsident für Produktdesign bei Babbel sagt: „Wir führen regelmäßig Untersuchungen zur Nutzerfreundlichkeit durch, wobei wir davon ausgehen, dass neue Designs mindestens zwei Iterationen durchlaufen, bis sie perfekt sitzen.“

Lerne vom Produktteam vom Babbel: Sammle kontinuierlich neue Erkenntnisse zu deinen Kund:innen und passe dein Produkt dementsprechend an.

Validiere deine Annahmen stets durch gründliche Nutzerforschung.

Das Beispiel von Babbel zeigt auch, dass nicht alle Nutzenden die gleichen Bedürfnisse haben oder auf dieselbe Art und Weise mit deinem Produkt oder deiner Website in Kontakt treten wollen: Einige wünschen sich vielleicht ein schnelles Engagement, während andere Nutzende eher eine strukturierte, regelmäßige Interaktion suchen.

Deshalb ist es wichtig, quantitative Daten durch qualitative Erkenntnisse zu bestimmten Nutzergruppen zu ergänzen. Anhand von Heatmaps und Analysedaten siehst du vielleicht, dass ein bestimmter Prozentsatz der Nutzenden abwandert, aber dafür kann es mehrere Gründe geben. Setze deshalb zusätzlich Aufnahmen – gefiltert nach demografischen Merkmalen der Nutzenden –, Umfragetools und Interviews ein, um herauszufinden, welche Nutzerbedürfnisse nicht erfüllt werden.

Zur Erinnerung: Mit Heatmaps, Recordings, und Surveys von Hotjar hast du Zugriff auf mehrere Arten von Nutzerdaten an einem einzigen Ort!

Schaffe eine Kultur des nutzerzentrierten UX-Designs

Diese inspirierenden Beispiele machen deutlich: UX-Design ist ein fortlaufender Prozess. Gute Teams suchen kontinuierlich nach Möglichkeiten, ihre Nutzenden besser zu verstehen und deren Erfahrung zu optimieren.

Für ein hervorragendes UX-Design sollte jeder Aspekt deines Produkts darauf ausgerichtet sein, die Bedürfnisse deiner Kund:innen zu erfüllen. 

Mit Tools zum Einblick in die Produkterfahrung kannst du quantitative Analysen mit umfangreichen qualitativen Informationen kombinieren. Indem du dich in die Nutzenden hineinversetzt, kannst du ein kundenorientiertes UX-Erlebnis schaffen, das die Conversion Rate, die Kundenbindung und den Impact deines Produkts steigert.

Bringen deine UX mit Hotjar auf ein neues Level

Finde heraus, was deine Nutzenden erleben – und verbessere deine UX.

FAQs zu gutem UX-Design