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

Lerne / Leitfäden / UX-Design

Zurück zu Leitfäden

10 häufige UX-Design-Fehler und wie du sie behebst

Wir alle kennen das ungute Gefühl, wenn man hohe Bounce Rates, niedrige Conversion Rate und Beschwerden beobachtet, die von UX-Design-Fehlern verursacht werden – das wollen wir alle nach Möglichkeit vermeiden.

Zuletzt aktualisiert

28 Nov 2023

Lesezeit

11 Min.

Teilen

So ganz lassen sich Fehler beim User Experience Design (UX-Design) zwar nicht vermeiden, aber du kannst sie minimieren. Gehe proaktiv vor, um immer einen Schritt voraus zu sein und Hindernisse zu beseitigen, die sich negativ auf die UX auswirken.

Um dir dabei zu helfen, haben wir die zehn häufigsten UX-Design-Fehler zusammengestellt – und bieten dir auch gleich noch die Lösungen dazu. Erfahre hier, welche Fehler das sind und warum exzellentes UX-Design für den Erfolg eines jeden Online-Unternehmens entscheidend ist.

Vermeide UX-Design-Fehler mit Hotjar

Melde dich für ein kostenloses Hotjar-Konto an, gewinne wertvolle Erkenntnisse zu den Nutzenden und schaffe proaktiv eine optimale Nutzeroberfläche.

Warum exzellentes UX-Design so wichtig ist

Hervorragendes UX-Design ist der beste Weg, um ein kundenorientiertes Produkt oder eine Website zu entwickeln, die neue Nutzende anzieht, bestehende Nutzende bindet und sie schlicht und einfach begeistert.

Wenn Kund:innen ein positives, reibungsloses und angenehmes Produkterlebnis (PX) haben, dann erreichen sie ihre Ziele, nutzen dein Produkt weiterhin und empfehlen dich sogar weiter.

Andererseits können Nutzende bei einem frustrierenden, verwirrenden oder schlichtweg negativen Erlebnis ihr Abonnement kündigen und dein Produkt nicht mehr nutzen oder negative Bewertungen mit ihrer Community teilen.

Kurz gesagt, die Gestaltung einer exzellenten UX: 

  • schafft Vertrauen und Glaubwürdigkeit;

  • spart Zeit und Geld;

  • konvertiert neue Nutzende;

  • steigert die Akzeptanz;

  • stärkt die Kundenbindung und -loyalität;

  • reduziert Abwanderung;

  • verbessert SEO-Rankings.

Profi-Tipp: Wenn Nutzende bereit sind, ein Produkt im Freundeskreis, in der Familie und am Arbeitsplatz weiterzuempfehlen, ist dies ein guter Indikator für die Kundenzufriedenheit insgesamt. Daher ist die Frage nach der Bereitschaft zur Weiterempfehlung eine der wichtigsten Fragen einer Net Promoter Score (NPS)-Umfrage. Mit den Hotjar Feedback-Tools kannst du Onsite-NPS-Umfragen erstellen und herausfinden, wie wahrscheinlich Nutzende deine Website weiterempfehlen, was dir möglicherweise neue Kund:innen bringt.

#Asking your customers, 'How likely are you to recommend us to a friend or colleague?' helps calculate Net Promoter Score and gauges user satisfaction

#„Wie wahrscheinlich ist es, dass du uns weiterempfiehlst?“ ist eine der wichtigsten Fragen einer NPS-Umfrage.

10 häufige UX-Design-Fehler, die du vermeiden solltest

Da sich die Probleme und Bedürfnisse der Kund:innen weiterentwickeln, musst du auch die UX kontinuierlich optimieren, um das bestmögliche Produkt zu liefern. Das kann eine echte Herausforderung sein. 

Warum also nicht proaktiv an UX herangehen, anstatt auf Schlaglöcher in der Straße zu warten? Mit unserer Liste der zehn häufigsten UX-Designfehler entwickelst du ein Bewusstsein für häufige UX-Probleme und deren Lösung – und vermeidest typische Fehler im Vorhinein.

1. Verhältnis von Ästhetik und Funktionalität ist nicht ausgewogen

Um eine hervorragende UX zu bieten, sollte dein Produkt sowohl gut aussehen als auch gut funktionieren – nicht nur eines davon.

Wenn du die Skala zu weit in eine der beiden Richtungen verschiebst, riskierst du, dass deine Kund:innen durch mangelhafte Funktionalität frustriert werden oder dass deine Marke aufgrund einer minderwertigen visuellen Erfahrung in Verruf gerät.

Normalerweise sollte die Funktionalität einen leichten Vorrang vor der Ästhetik haben. Ein gut aussehendes Produkt ist wichtig, aber wenn es nicht gut funktioniert, leidet die Nutzerfreundlichkeit darunter.

Beginnen wir mit zwei Beispielen. Zunächst die Homepage der Billigfluggesellschaft EasyJet: Das Gesamtdesign ist ansprechend, aber die Funktionalität lässt zu wünschen übrig.

#Die Homepage von Easyjet sieht toll aus, aber sie lenkt Besuchende von dem ab, was sie eigentlich wollen. Bildquelle: EasyJet-Homepage
Die Homepage von Easyjet sieht toll aus, aber sie lenkt Besuchende von dem ab, was sie eigentlich wollen. Bildquelle: EasyJet-Homepage

Die meisten Besuchenden von EasyJet landen dort, weil sie einen Flug buchen wollen. Jedoch nehmen das Buchungsformular und die Box mit „Inspiriere mich“ fast den gleichen Platz auf der Homepage ein, sodass die Nutzenden nicht wissen, was sie tun sollen. Die Website hat außerdem eine überfüllte obere Menüleiste sowie übermäßig viele Pop-ups und dynamische visuelle Elemente – hier ist zu viel los.

Die Besuchenden werden vor der Buchung eines Fluges wahrscheinlich erst einmal abgelenkt oder verwirrt. Auch wenn die Nutzeroberfläche (User Interface, UI) cool aussieht, ist sie nicht praktisch und führt zu einer verwirrenden Customer Journey.

#Die Homepage von Skyscanner kommt direkt auf den Punkt und konzentriert sich auf das Wesentliche. Bildquelle: Skyscanner-Homepage
Die Homepage von Skyscanner kommt direkt auf den Punkt und konzentriert sich auf das Wesentliche. Bildquelle: Skyscanner-Homepage

Die Reisesuchmaschine Skyscanner weist eine viel bessere Balance zwischen Ästhetik und Funktionalität auf. Das Design ist einfach und konzentriert sich auf das, was Besuchende der Website tun wollen: eine Buchung vornehmen. Der Punkt geht also an Skyscanner.

Generell solltest du dafür sorgen, dass deine Nutzenden das, was sie mit deinem Produkt tun wollen, so einfach wie möglich erledigen können. Beginne im Designprozess mit dem grundlegenden Jobs-to-be-done (JTBD)-Rahmen. Lenkt ein Designelement von diesem Prozess ab, entferne es oder passe es an.

Überprüfe dann mit einem Tool zur Erfassung des Produkterlebnisses wie Hotjar Recordings, dass dein Produkt so funktioniert, wie es sollte. Mit einem Tool wie Recordings kannst du dich in die Lage deiner Nutzenden hineinversetzen und Probleme oder Fehler leicht erkennen.

2. Nutzerbedürfnisse und Feedback ignorieren

Deine Nutzenden sollten bei all deinen Entscheidungen im Zentrum stehen. Tappe nicht in die Falle, zu glauben, du wüsstest besser Bescheid als deine Nutzenden, oder noch schlimmer, dass deine Nutzende wie du sind.

Es ist wichtig, Nutzerfeedback ernst zu nehmen, um die Nutzerbedürfnisse in der Tiefe zu verstehen.

Gestalte dein Produkt nutzerzentriert, indem du deine Nutzenden in jeder Phase des Produktdesign- und Optimierungsprozesses in den Mittelpunkt stellst. Frage dich stets, wie du dein Produkt so optimieren kannst, dass die Probleme der Nutzenden einwandfrei gelöst werden können.

Sammle während des gesamten Lebenszyklus deines Produkts mit UX-Umfragen proaktiv Nutzerfeedback, sodass du einen ständigen Kreislauf aus dem Einholen von Feedback und einer dementsprechenden Optimierung deines Produkts schaffst.

„Denke alles als System. Betrachte dein Design nicht isoliert, sondern als Teil einer längeren Konversation, einer größeren Reise, auf der deine Nutzenden unterwegs sind.“

Saskia Everard
Produktdesignerin, Hotjar

3. Nutzende mit Pop-ups bombardieren

Nichts schreckt Nutzende so sehr ab, wie eine Vielzahl von Pop-ups beim Aufrufen deiner Homepage. Anstatt die gewünschten Informationen zu erhalten, müssen sie eine Reihe von Pop-up-Fenstern schließen oder wegnavigieren, bevor sie ihre Reise durch das Produkt oder die Website überhaupt begonnen haben.

Nicht alle Pop-ups sind schlecht, aber vermeide ungünstig platzierte und schlecht gestaltete Pop-ups sowie solche, die sich nicht einfach schließen lassen.

Um UX-freundliche Pop-ups zu entwerfen, solltest du überlegen, wie viele es sein sollen und wann sie erscheinen sollen. Bleibe am besten bei einem Pop-up pro Seite und stelle sicher, dass es die UX nicht unterbricht, indem es den gesamten Bildschirm einnimmt. Deine Pop-ups sollten außerdem einfach zu schließen, mit wenigen Klicks erreichbar und an der richtigen Stelle platziert sein.

„Ein effektives Pop-up hat handfeste Gründe, behandelt valide Probleme und ist die Belästigung der Nutzenden wert.“

Maximillian Piras
Produktdesigner

Profi-Tipp: Bitte die Nutzenden während der Testphase um pop-up-spezifisches Feedback, um sicherzugehen, dass deine Pop-ups nicht stören. Verwende die Feedback-Tools von Hotjar, um in Echtzeit herauszufinden, was deine Nutzenden an deiner Website mögen (und was nicht). Unsere Feedback-Tools sind unaufdringlich und lassen sich mit nur einem Klick schließen. So fügen sie sich nahtlos in das Web-Erlebnis der Nutzenden ein und liefern dir gleichzeitig wertvolle Erkenntnisse.

Der Toolstack von Hotjar wurde entwickelt, um schnelles Nutzerfeedback zu sammeln, ohne die UX zu stören.

4. Leer- und Zwischenzustände beim Design nicht berücksichtigen

Genau wie im echten Leben verlaufen die Dinge in der Welt des Designs selten genau wie geplant. Ein gelungenes UX-Design ist auf unerwartete Umstände ebenso gut vorbereitet wie auf ideale Szenarien.

Behalte während des gesamten Designprozesses immer die gesamte Erfahrung, die Nutzende mit deinem Produkt machen, im Blick. Dazu gehört neben Anfang und Ende auch das Dazwischen.

#Auch die Leer- und Zwischenzustände deines Produkts tragen zur Gesamt-UX bei. Vergiss sie nicht! Bildquelle: dribbble.com
Auch die Leer- und Zwischenzustände deines Produkts tragen zur Gesamt-UX bei. Vergiss sie nicht! Bildquelle: dribbble.com

Mal angenommen, jemand meldet sich auf deiner Website für eine kostenlose Testversion an. Wenn alles wie am Schnürchen läuft, sind die beiden wichtigsten Phasen der Customer Journey die Anmeldeseite am Anfang und die Seite, auf der über die erfolgreiche Anmeldung benachrichtigt wird. 

Aber es gibt auch Stolpersteine und sogenannte „Zwischenzustände“ (auch Empty States oder In-between States), die ebenfalls deine Aufmerksamkeit erfordern, wie z. B:

  • Was sehen die Nutzenden bei der Eingabe ihrer Daten?

  • Was sehen sie, wenn sie bei der Dateneingabe ein Feld vergessen haben?

  • Was sehen sie, wenn sie ihre Daten eingeben, aber ihre kostenlose Testversion bereits genutzt haben?

  • Was sehen sie bei einem System- oder Verbindungsfehler?

Behalte deshalb immer die gesamte User Experience im Blick. Kümmere dich um das Design der Zwischenzustände genauso wie um das Design der Hauptphasen und Best-Case-Szenarien. Baue eine hohe Fehlertoleranz ein, damit du selbst bei Fehlern eine exzellente UX liefern kannst.

5. Auf jeden Designtrend aufspringen

Genau wie Mode, Musik und Frisuren ist auch der Designbereich voll von UX-Trends, die kommen und gehen. Es ist zwar wichtig, bei den Trends stets auf dem Laufenden zu sein, aber du solltest dich nicht unter Druck setzen lassen, alles mitzumachen, nur weil es gerade im Trend ist.

So wurde beispielsweise Flat Design in den frühen 2010er Jahren zu einem beliebten UX-Trend. Flat Design ist ein Ableger des Minimalismus und zeichnet sich durch das Fehlen von visuellen 3D-Elementen aus. Es ist weitgehend aus der Mode gekommen, weil es UX-Probleme mit sich bringt, z. B. dass Nutzende verwirrt sind, welche Elemente anklickbar sind und welche nicht.

#Vergleiche die erhabene und die flache Schaltfläche. Wo will man eher draufklicken? Bildquelle: codenameone.com
Vergleiche die erhabene und die flache Schaltfläche. Wo will man eher draufklicken? Bildquelle: codenameone.com

Überlege immer, wie sich ein Designtrend auf deine Nutzenden auswirkt:

  • Wird dein Produkt dadurch einfacher zu navigieren, weil das Design Reibungsverluste verringert und deinen Nutzenden das Leben leichter macht?

  • Wird die visuelle Ästhetik dadurch aufgewertet und sorgt bei neuen Nutzenden für einen besseren ersten Eindruck?

  • Wird dein UX-Text dadurch leichter lesbar?

Dies sind alles wichtige Fragen, die du dir stellen musst, um zu bestimmen, ob ein bestimmter Designtrend das Produkterlebnis deiner Nutzenden wirklich verbessert.

6. UX-Texte nicht in den Designprozess integrieren

Obwohl UX-Inhalte nicht unbedingt Teil des Produktdesigns sind, sind sie doch ein wesentlicher Bestandteil der User Experience. Allzu oft werden UX-Inhalte erst in einem letzten Schritt oder sogar erst nachträglich zu Produkten hinzugefügt. Dies kann zu einer Diskrepanz zwischen dem, was die Nutzenden lesen, und dem, was das Gesamtdesign ihnen vorgibt, führen.

Erschwerend kommt hinzu, dass Autor:innen manchmal UX-Inhalte verfassen müssen, ohne das Produktdesign zu sehen oder zu wissen, wo ihre Texte letztendlich platziert sind.

Um dieses Problem anzugehen, solltest du beim Designprozess immer die ideale Platzierung von UX-Inhalten im Auge behalten und während der gesamten Produktentwicklung kommunizieren. Screenshots und Wireframes helfen UX-Autor:innen, einen Eindruck davon zu bekommen, wie ihre Texte sich später ins Design einfügen.

Stelle außerdem sicher, dass deine Autor:innen mit den Prinzipien der visuellen Hierarchie vertraut sind. Deine wichtigsten UX-Texte sollten in gut sichtbaren Bereichen platziert werden, die du mit Tools wie Hotjar Heatmaps identifizieren kannst.

#Hotjar-Heatmaps zeigen, dass der Bereich mit der höchsten Sichtbarkeit am oberen Bildschirmrand liegt. Zudem klicken Nutzende häufig auf die Bilder und die Tabs der Menüleiste.
Hotjar-Heatmaps zeigen, dass der Bereich mit der höchsten Sichtbarkeit am oberen Bildschirmrand liegt. Zudem klicken Nutzende häufig auf die Bilder und die Tabs der Menüleiste.

7. Nutzende mit zu vielen Informationen überfordern

Falls du zu einem Produktteam gehörst, bist du ein Experte oder eine Expertin für dein Produkt und hast eine gewisse Begeisterung dafür. Daher kann es verlockend sein, deine Nutzenden gleich zu Beginn mit zu vielen Informationen zum Produkt zu überschütten.

Eine solche Datenflut kann schnell zu Verwirrung oder Überforderung führen, wenn Nutzende keine Zeit haben, die Informationen zu verdauen.

Die erste Seite deiner Website oder der erste App-Frame, den deine Nutzenden sehen, sollte nicht überfordernd sein. Ist eine Seite oder ein App-Frame unübersichtlich oder enthält zu viele verschiedene Elemente, wissen die Nutzenden nicht, wo sie anfangen sollen. Die Folge: Sie verlassen die Seite, bevor sie auch nur das Geringste über dein Produkt erfahren.

Um einen derartigen Designfehler zu vermeiden, solltest du dich auf das Wesentliche beschränken und darauf achten, wie viele Inhalte auf einmal vermittelt werden. Eine UX ist dann exzellent, wenn Nutzende intuitiv mit einem neuen Produkt arbeiten können, ohne zu viel lernen zu müssen.

8. Nicht-responsive Designelemente verwenden

Einer der am häufigsten diskutierten Fehler beim Responsive Design ist, dass man sich beim Design auf Desktop-Computer konzentriert und mobile Geräte außer Acht lässt. Doch mittlerweile sind sich die meisten UX-Designer:innen dessen bewusst, wie wichtig ein für Mobilgeräte optimiertes Design ist.

Ein größeres Problem ist heutzutage dementsprechend genau das gegenteilige Szenario, nämlich dass Designer:innen ausschließlich das Mobile-Design im Auge haben. Der mobile Traffic macht etwa 50% des Web-Traffics aus, aber das bedeutet, dass immerhin auch 50 % aus anderen Quellen wie Desktops und Tablets stammen.

Oftmals lassen auf Mobilgeräte ausgerichtete Designs auf großen Bildschirmen viel zu wünschen übrig. Wenn du dir einmal Instagram auf deinem Desktop-Computer anschaust, hast du ein gutes Beispiel dafür. Die große weiße Fläche, die unharmonische Aufteilung und die winzigen Symbole machen deutlich, dass diese Oberfläche nicht für einen großen Bildschirm entworfen wurde.

#Die UI von Instagram sieht auf dem Handy super aus, ist aber auf dem Desktop-Bildschirm unzureichend. Bildquelle: Hotjar Instagram
Die UI von Instagram sieht auf dem Handy super aus, ist aber auf dem Desktop-Bildschirm unzureichend. Bildquelle: Hotjar Instagram

Exzellentes UX-Design ist responsiv, egal auf welchem Gerät. Entwirf ein Design für das jeweilige Medium und sorge dafür, dass dein Produktteam sich die Zeit nimmt, um zu überlegen und zu testen, was auf verschiedenen Bildschirmgrößen am besten aussieht und funktioniert. Wenn du nicht weiterkommst, versuche es mit Hotjar Recordings und Feedback-Tools, um Nutzerprobleme zu identifizieren.

9. Beschriftung von Icons vergessen

Es gibt immer wieder UX-Designer:innen, die entweder vergessen, Icons zu beschriften, oder dies im Sinne minimalistischer Designtrends schlichtweg für überflüssig halten.

Icons nicht zu beschriften ist aus zwei Gründen ein Fehler:

  1. Häufig verwendete Icons wie Herzen, Häkchen oder Smileys haben auf verschiedenen Websites unterschiedliche Bedeutungen, was die Nutzenden verwirren kann.

  2. Zu detaillierte, neuartige oder komplizierte Icons können unklar sein, so dass Nutzende unnötig Zeit und Energie aufwenden müssen, um herauszufinden, was sie bedeuten.

Es ist auch erwähnenswert, dass nicht beschriftete Icons für eine geringere Inklusivität deines Produkts sorgen.

Die Lösung für diesen Fehler ist einfach: Worte und Bilder haben zusammengenommen eine große Aussagekraft, also achte unbedingt darauf, dass deine Icons beschriftet sind.

10. Nutzenden mit Links und Schaltflächen irreführen

Wenn Nutzende auf eine Schaltfläche oder einen Link auf deiner Website klicken, dann immer im festen Glauben daran, dass du ihnen die versprochenen Informationen zur Verfügung stellst.

Wenn zum Beispiel eine Schaltfläche auf deiner Website lautet: Klicke hier, um mehr über unsere Preise zu erfahren, sollte die Schaltfläche zu deiner Preisseite führen und nirgendwo anders hin. Keine Registrierungsseite, um sich für eine kostenlose Testversion anzumelden, kein Formular für Kontaktinformationen… einzig und allein Informationen zu deinen Preisen.

Auch bei den verschiedenen Arten von Inhalten solltest du dein Wort halten. Wenn du auf deiner Website einen Link hast, der zu einem Video führt, stelle sicher, dass dies auch wirklich der Fall ist. Führe die Nutzenden nicht in die Irre und biete ihnen einen Blogbeitrag oder eine Landing Page an, obwohl du ein Video versprochen hast.

Überprüfe deine Links und Schaltflächen genau, um sicherzustellen, dass sie halten, was sie versprechen.

UX-Tools wie Hotjar Heatmaps und Recordings helfen dir, problematische Links und Schaltflächen zu identifizieren. Achte darauf, ob Nutzende auf etwas klicken und dann sofort wieder abspringen. Das kann auf Frustration oder Enttäuschung darüber hindeuten, wohin der Link sie geführt hat. Achte ebenso auf Wutklicks, die ein häufiger Indikator für schlechte UX und defekte Links sind.

Vermeide diese Designfehler und beobachte, wie deine UX durch die Decke geht

UX-Designfehler sind ein normaler Teil des Designprozesses, aber darum sind sie noch lange nicht in Stein gemeißelt. Anstatt darauf zu warten, dass UX-Fehler einfach so passieren, solltest du sie vorhersehen und vermeiden, bevor sie zur Frustration der Nutzenden führen.

Ein guter Anfang ist es, sich über UX-Probleme und -Lösungen zu informieren. Notiere dir die größten Fehler, überlege, ob diese für dein Design relevant sind und ergreife gegebenenfalls Maßnahmen, um sie zu beheben.

Denke daran, dass eine exzellente UX das Herzstück eines jeden Produkts ist. Priorisiere das Beheben von UX-Fehlern, und dein Unternehmen und deine Nutzenden werden davon profitieren.

Vermeide UX-Design-Fehler mit Hotjar

Melde dich für ein kostenloses Hotjar-Konto an, gewinne wertvolle Erkenntnisse zu den Nutzenden und schaffe proaktiv eine optimale Nutzeroberfläche.

FAQs zu UX-Design-Fehlern