Wissenswertes / Leitfäden / UX-Design
Wie du dein Mobile-UX-Design mithilfe von Nutzer-Insights perfektionierst
Stell dir vor, dein Auto könnte rechts abbiegen, aber nicht links. Nur einen Teil des Fahrerlebnisses zu haben, wäre ziemlich frustrierend, oder? Genau so ist es für deine Kund:innen, wenn deine Desktop-Website wunderbar ist, aber dein UX-Design nicht auf Mobilgeräten funktioniert.
Da dein Mobile-UX-Design Teil des Kundenerlebnisses ist, darf es nicht in den Hintergrund treten.
Ob bewusst oder unbewusst – mobile Besuchende beurteilen alles, womit sie interagieren. Eine schwer zu navigierende Seite mit lästigen Pop-ups vertreibt die Leute, während eine intuitive und ansprechende Seite Kund:innen anzieht und die Markenbeliebtheit stärkt.
Dieser Leitfaden zeigt dir
TL;DR
Eine Website zu erstellen, die auf einem Mobilgerät einfach und angenehm zu nutzen ist, ist ein wichtiger Teil des Kundenerlebnisses, das sich auf Engagement, Loyalität und Conversions auswirkt.
Verbessere dein Mobile-UX-Design, indem du
identifizierst, was mobile Besuchende antreibt, von Referral-Quellen bis Nutzerzielen;
Hindernisse für Engagement und Conversions beseitigst, z. B. defekte Buttons oder eine verwirrende Navigation;
verkaufsfördernde Hooks auf Basis deiner User-Personas einsetzt;
die Nutzung deiner Website auf Mobilgeräten und Desktop vergleichst, um das Erlebnis anzupassen;
barrierefreies Design priorisierst, damit alle Besuchenden deine mobile Website reibungslos nutzen können;
Website-Analysen durchführst und dein UX-Design regelmäßig überarbeitest.
6 Wege zur Verbesserung des UX-Designs für Mobilgeräte
Beim Mobile-UX-Design geht es darum, eine Website zu erstellen, die auf einem Mobilgerät einfach und angenehm zu nutzen ist. Es ist ein wichtiger Teilbereich des UX-Designs, weil sich 57 % der Zeit, die Menschen mit dem Surfen im Internet verbringen, auf einem Mobilgerät abspielt.
Während die gleichen UX-Design-Grundsätze für mobile und Desktop-Websites gelten, interagieren die Besuchenden beim Surfen auf Desktop- und Mobilgeräten möglicherweise anders.
Weil deine Kund:innen deine mobilen und Desktop-Websites unterschiedlich nutzen, musst du sie getrennt voneinander testen und abstimmen – aber es lohnt sich. Hier ist der Grund dafür:
Jetzt, da du weißt, warum Mobile-UX-Design wichtig ist, wollen wir uns mit den Optimierungs-Strategien beschäftigen.
1. Finde heraus, was mobile Besuchende antreibt
Die Gründe, warum und wie die Besuchenden auf deine Website kommen, sind entscheidend. Der Pfad, auf dem sie auf deine Website gelangen, und das, was sie tun möchten, können sich zwischen Desktop und Smartphone unterscheiden. Deshalb solltest du deine mobile Website so gestalten, dass die relevanten Informationen im Vordergrund stehen.
Hier sind ein paar Möglichkeiten, wie du herausfinden kannst, was deine mobilen Besuchenden antreibt:
Finde deine beliebtesten Landing-Pages für mobile Besuchende und priorisiere dort UX-Verbesserungen.
Sieh dir Aufnahmen von echten Besucherinteraktionen an, um zu erfahren, wie sich die Nutzenden durch deine Website bewegen und welche Inhalte oder Seiten sie sich ansehen.
Teste deine Startseite oder markante Buttons für Seitenkategorien und schau, was bei mobilen Besuchenden am beliebtesten ist.
💡 Profi-Tipp: Nutze mobile-UX-freundliche Umfragen, um mehr über deine Kund:innen zu erfahren.
Mit Umfragen kannst du direkte Insights von deinen Kund:innen sammeln, damit du Verbesserungsmöglichkeiten für dein UX-Design finden kannst. Aber wenn du nicht aufpasst, kann deine Onsite-Umfrage für Mobilgeräte das Erlebnis sabotieren, das du verbessern möchtest.
Hier sind ein paar Möglichkeiten, wie du Umfragen nutzen kannst, ohne die Prinzipien des Mobile-UX-Designs zu missachten:
Verwende eingebettete Umfragen, die Teil der mobilen Seite sind, anstatt Pop-ups, die den gesamten Nutzer-Bildschirm verdecken.
Versende eine Umfrage an Kund:innen per E-Mail, um sie über ihre Erfahrungen mit deiner mobilen Website zu befragen.
Wenn du eine Pop-up-Umfrage verwendest, teste das Design auf verschiedenen Geräten, um sicherzustellen, dass der „X“-Button auffällig und einfach zu bedienen ist.
2. Beseitige Hindernisse für Engagement und Conversion
Ein Hindernis ist alles, was mobile Besuchende dazu veranlasst, eine Seite zu verlassen, z. B. ein Button, der nicht funktioniert, oder fehlende Informationen. Diese Abbrüche beeinträchtigen das Nutzererlebnis und hinterlassen einen bleibenden Eindruck, der potenzielle Kund:innen davon abhält, wiederzukommen.
Bugs, ein fehlerhaftes Design und Frustration lassen sich manchmal kaum vermeiden, also halte am besten Ausschau nach Hindernissen, die behoben werden müssen. So funktioniert’s:
Filtere Aufnahmen nach Wutklicks und U-turns, die Frustration oder Verwirrung durch wiederholte Klicks oder schnelles Zurückgehen zu einer vorherigen Seite signalisieren.
Verwende ein Onsite-Feedback-Widget, um Seiten zu finden, mit denen Besuchende unzufrieden sind.
Verwende Heatmaps, um zu visualisieren, wo die meisten Besuchenden scrollen, klicken und sich bewegen, um kritische Elemente zu finden, die sie ignorieren, oder unnötige Designs, die du löschen kannst.
🏃 Du hast es eilig? Probier diese schnellen Lösungen für häufige mobile UX-Probleme aus.
Die obigen Tipps helfen dir, Hindernisse zu finden, die für deine Zielgruppe und deine mobile Website spezifisch sind, aber es gibt noch andere häufige Probleme mit mobilen Websites, die du lösen kannst, um deine UX zu verbessern.
Verwende den Test zur Mobilgerätefreundlichkeit von Google, um nicht responsive Designelemente zu finden.
Optimiere Bilddateien mit Smoosh.
Erstelle für Buttons und Links Touch-Ziele, die mindestens 44 Pixel groß sind, und setze das Padding für Buttons und Links auf mindestens 8 Pixel für jede Seite.
Lege für Pop-ups Parameter fest, z. B. eine Mindestanzahl besuchter Seiten, um sicherzustellen, dass sie nur interessierten Besuchenden angezeigt werden.
Ersetze automatisch abspielende Inhalte durch ein statisches Bild, um zu vermeiden, dass der Akku eines Mobilgeräts leer wird und zu viele Daten verbraucht werden.
3. Recherchiere Hooks, die zum Kaufabschluss führen
Hooks bzw. Aufhänger sind die Elemente, die Nutzende zum Handeln oder zum Kauf bewegen. Du musst also herausfinden, was gut bei den Nutzenden ankommt, um dein Design zu verbessern und die Conversions zu erhöhen.
Hier sind ein paar Möglichkeiten, um Hooks zu finden:
Identifiziere Kund:innen, die mobil eingekauft haben, und sende ihnen einen Link zu einer Umfrage nach dem Kauf, um herauszufinden, was ihnen am Kauferlebnis gefallen hat und was sie fast vom Kauf abgehalten hätte.
Führe A/B-Tests durch, um UX-Design-Varianten zu finden, die den Umsatz steigern, und sieh dir die zugehörigen Session-Aufnahmen an, um zu verstehen, warum das Design funktioniert hat.
Führe Interviews mit Kund:innen durch und frage sie nach ihren Zielen, Herausforderungen und Vorlieben. Verwende dann ihre Formulierungen in deinen Designs.
💡 Profi-Tipp: Lerne deine Kund:innen kennen, um herauszufinden, wie dein ideales Mobile-UX-Design aussehen muss.
Indem du die Kunden-Psychografie verstehst, also wer deine Kund:innen abgesehen von klassischen demografischen Daten (wie z. B. Alter) sind, kannst du ein Mobile-UX-Design erstellen, mit dem deine Nutzenden gerne interagieren.
Das Branding und Layout einer mobilen Website für einen Outdoor-Ausrüster würde sich zum Beispiel stark von dem einer Website für luxuriöse Stadt-Apartments unterscheiden, weil die Ziele und Prioritäten der einzelnen Kundengruppen unterschiedlich sind.
Hier sind ein paar Beispiele dafür, wie Kund:innen das UX-Design beeinflussen:
Persönlichkeit: Extrovertierte Menschen bevorzugen vielleicht Gruppenfotos, während introvertierte Menschen Bilder mit Einzelpersonen bevorzugen könnten.
Interessen: Menschen, die sich für Popkultur interessieren, könnten eine Verbindung zu einem Unternehmen aufbauen, das Filmreferenzen in seinem Design verwendet.
Überzeugungen: Eine Sammlung an Logos von Organisationen, an die ein Unternehmen spendet, könnte ein sozialbewusstes Publikum ansprechen.
Werte: Käufer:innen mit kleinem Budget könnten sich von Produktbildern mit Stickern für Rabattaktionen bei Großbestellungen oder Abonnements angezogen fühlen.
4. Vergleiche die Annahmen über deinen User-Flow mit der Realität
Selbst die nutzerorientiertesten UX-Entscheidungen sind immer noch eine Art Schätzung – du musst sehen, wie die Nutzenden in der Realität interagieren, und das mit deinen Annahmen vergleichen.
User-Experience-Tools geben dir einen Echtzeit-Einblick in die Interaktionen auf mobilen Websites:
Filtere Funnels nach Smartphone- und Tablet-Sitzungen, um zu sehen, wo die Nutzenden abspringen, und um sie mit Desktop-Besuchenden zu vergleichen.
Überprüfe die Session-Aufnahmen für Smartphone- und Tablet-Besuchende, um zu erfahren, wie die Menschen auf deiner Website auf Mobilgeräten im Vergleich zum Desktop navigieren.
Nutze Heatmaps, um herauszufinden, mit welchen Navigationselementen mobile Besuchende interagieren, und setze damit Prioritäten für deine Design-Roadmap.
Wie re:member seine mobile Website optimiert hat
re:member, eines der führenden Kreditunternehmen Skandinaviens, nutzte die UX- und Verhaltensanalyse-Tools von Hotjar, um Conversions um 43 % zu steigern. Hier sind die fünf Schritte, die das Unternehmen befolgt hat, um ein mobiles UX-Problem zu erkennen und zu beheben, und die auch du machen kannst.
Aufnahmen beobachten: re:member stellte fest, dass die Nutzenden der mobilen Website auf der Anmeldeseite beim Abschnitt „Vorteile“ stoppten und häufig das Anmeldeformular hoch- und runterscrollten, ohne es auszufüllen.
Click-Heatmaps überprüfen: Besuchende versuchten, auf den Abschnitt mit den Vorteilen zu tippen und erwarteten, dass die Aufzählungspunkte einen erweiterbaren Bereich aufmachten.
Nutzerverhalten zwischen verschiedenen Traffic-Quellen vergleichen: Das re:member-Team ging bei der Analyse noch einen Schritt weiter und verglich die mobilen UX-Interaktionen zwischen verschiedenen Traffic-Quellen.
Hypothese aufstellen: Sie stellten fest, dass die Nutzenden (vor allem die von Affiliate-Links) mehr Informationen über die Vorteile haben wollten, bevor sie eine Entscheidung trafen.
Lösung testen: Das Team hat den Abschnitt „Vorteile“ an den oberen Rand der mobilen Seite verschoben und einen erweiterbaren Abschnitt auf der Desktop-Version erstellt.
re:member entdeckte, dass zusätzliche Kartendaten die Besuchenden dazu ermutigten, einen Antrag auszufüllen
5. Priorisiere barrierefreies Design
Du möchtest, dass alle Menschen deine Website nutzen können, also musst du auf deine UX-Design-Zugänglichkeit achten. Visuelle, geistige oder körperliche Beeinträchtigungen und auch vorübergehende Verletzungen wie eine gebrochene Hand haben Auswirkungen darauf, wie Kund:innen deine Website nutzen.
Hier sind ein paar Tipps zur Barrierefreiheit, die du in dein Design einbauen solltest:
Setze Labels in den Code für dynamische Inhalte, damit sie mit Bildschirmlesern funktionieren.
Überprüfe Heatmaps, um herauszufinden, welche Navigationselemente von den Besuchenden häufig verwendet werden und welche du löschen kannst, um dein Design zu vereinfachen.
Verwende WAVE, um die Barrierefreiheit von Schriftarten zu überprüfen.
Überprüfe den Farbkontrast deiner Website.
Verlasse dich nicht auf Farben, um eine Botschaft zu vermitteln, wie z. B. grün für „gut“ und rot für „schlecht“, sondern füge auch Symbole oder Text hinzu.
💡 Profi-Tipp: Sprich mit Kund:innen über ihr mobiles Nutzererlebnis.
Sprich mit Kund:innen, insbesondere mit solchen mit Behinderungen, die sich auf die Nutzung deiner Website auswirken, um eine neue Perspektive auf deine UX-Barrierefreiheit zu gewinnen.
Schicke deinen Kund:innen eine kurze Umfrage per E-Mail, um Teilnehmende für Barrierefreiheitstests zu rekrutieren, und mach dann ein Interview, um mehr über ihre Erfahrungen mit deiner mobilen Website herauszufinden.
Passe die Fragen deiner Rekrutierungsumfrage an, um Teilnehmende aus einem bestimmten Segment zu finden
6. Messen und überarbeiten
Nachdem du die vorherigen Strategien umgesetzt hast, solltest du ihre Performance messen. Die Metriken für mobile Websites zeigen dir mögliche Probleme und leistungsstarke Seiten an und helfen dir so, Seiten zu finden, die du überarbeiten kannst, und Designs, die du nachahmen kannst.
Hier erfährst du, was du messen solltest, um dein mobiles UX-Design zu überwachen:
Checkout- und Warenkorb-Abbruchrate: Finde heraus, welche mobilen UX-Momente Kund:innen dazu bringen, einen Kauf abzubrechen.
Conversion-Rate: Vergleiche Conversion-Raten zwischen Geräten und im Zeitverlauf, um UX-Probleme zu erkennen.
Net Promoter Score® (NPS): Finde heraus, wie wahrscheinlich es ist, dass mobile Kund:innen dich ihren Freund:innen weiterempfehlen.
Kundenzufriedenheit (CSAT): Miss die allgemeine Kundenzufriedenheit, um die Wahrnehmung deines UX-Designs zu bewerten.
💡Profi-Tipp: Mit Hotjar Trends bekommst du einen Überblick über UX-Metriken.
Detaillierte Nutzeranalysen, wie z. B. eine einzelne Aufnahme eines mobilen Besuchs, helfen dir, die Details deines Mobile-UX-Designs zu verbessern – aber du solltest auch die Performance auf einer höheren Ebene überprüfen.
Mit Hotjar Trends kannst du das Nutzerverhalten visualisieren, um die User-Experience im Blick zu behalten. So kannst du zum Beispiel überprüfen, ob die Zahl der U-turns auf deiner mobilen Website steigt, um so Seiten mit veralteten Informationen oder kaputten Designelementen zu finden.
5 tolle Beispiele für Mobile-UX-Design, von denen du lernen kannst
Das beste Mobile-UX-Design passt genau zu deinem Unternehmen und deiner Zielgruppe – und das braucht seine Zeit, bis es perfekt ist. Dennoch bekommst du mit inspirierenden Beispielen für großartiges UX-Design für Mobilgeräte schon mal einen Ausgangspunkt und du kannst von ihnen lernen, ohne alles selbst ausprobieren zu müssen.
1. Die integrierte Umfrage von Duolingo
Auf der mobilen Website von Duolingo werden neue Nutzende gefragt, wie sie von dem Programm erfahren haben und warum sie lernen möchten
Warum es funktioniert:
Die Website von Duolingo identifiziert Motivationen, indem sie fragt, wie mobile Besuchende von dem Unternehmen erfahren haben.
Alle Antwortmöglichkeiten erscheinen auf der Seite, ohne dass gescrollt werden muss.
Es gibt erkennbare Icons für die Optionen neben dem Text.
Es gibt nur eine Frage pro Seite, um die Besuchenden nicht zu überfordern.
2. Hotel Tonight setzt Prioritäten für unterwegs
Hotel Tonight zeigt oben auf der mobilen Seite schnelle Hoteldetails wie Gästebewertungen und Standort an
Warum es funktioniert:
Auf der mobilen Website von Hotel Tonight befindet sich die Hotelkarte ganz oben auf der Seite – und nicht weiter unten wie auf der Desktop-Version –, was für Kund:innen, die unterwegs sind, perfekt ist.
Die Besuchenden können sich dank des Texts „Warum wir es gut finden“ ganz oben auf der Seite schneller eine Meinung bilden.
Der Button „Jetzt buchen“ mit dem Übernachtungspreis ist immer sichtbar, sodass die Besuchenden nicht nach oben oder unten scrollen müssen, um sie zu finden.
3. Hotjars unaufdringliches Feedback
Das Feedback-Widget von Hotjar wird nicht automatisch eingeblendet und verdeckt nicht die gesamte Seite der mobilen Website
Warum es funktioniert:
Das Feedback-Widget von Hotjar öffnet sich nur, wenn Besuchende darauf tippen – keine aufdringlichen Pop-ups.
Der X-Button auf dem ersten Pop-up ist sichtbar und das Pop-up blockiert nicht den Bildschirm.
Über das Textfeld können Besuchende weitere Kommentare hinzufügen.
4. Die Inhaltshierarchie von InVision
Der Blog von InVision lässt dem Inhalt so viel Platz wie möglich auf der mobilen Website, indem er alle ablenkenden Seitenleisten eliminiert
Warum es funktioniert:
Die Website von InVision konzentriert sich nur auf den Inhalt – es gibt keine Ablenkungen und die Schrift ist so groß wie möglich.
Ein dezenter Fortschrittsbalken am oberen Rand der Seite zeigt den Lesenden an, wie weit sie bereits gekommen sind.
Zwischen den Absätzen und Zeilen gibt es Leerraum, um die Lesbarkeit zu verbessern.
5. Die schönen Details von Spotahome
Spotahome verwendet eine dezente Illustration an der Seite der mobilen Website, die ein Quiz für neue Nutzende zur Wohnungssuche öffnet
Warum es funktioniert:
Die Katze an der Seite der mobilen Website von Spotahome sorgt für Begeisterung. Zuerst bemerkst du sie nicht, aber sie ist zu niedlich, um sie nicht zu beachten.
Das kurze Quiz fühlt sich an wie ein Abenteuer, das man erlebt, während man für das Unternehmen die Hauptrolle spielt.
Der Fortschrittsbalken zeigt an, wie weit Besuchende fortgeschritten sind.
Großartiges mobiles UX-Design beginnt mit Einfühlungsvermögen
Das Nutzerverhalten und die Interaktionen verwandeln deine Website von einer Ansammlung von Code in ein Erlebnis – deshalb ist es wichtig, die Kund:innen in dein Mobile-UX-Design einzubeziehen. Von den Kund:innen zu lernen, hilft dir, relevante Design-Entscheidungen zu treffen und eine angenehme mobile Website für die Besuchenden zu schaffen, ohne lange zu raten.
Du weißt vielleicht nicht immer, was du wann fragen sollst, aber wenn du mit Einfühlungsvermögen vorgehst und auf deinem Weg stetig dazulernst, wirst du deine Ziele erreichen.
Teste dein mobiles UX-Design mit Hotjar
Mit den Tools von Hotjar kannst du genau sehen, wie mobile Besuchende mit deiner Website interagieren, damit du dein Design testen und verbessern kannst.
