Mobile UX-Prinzipien

Mobile UX-Prinzipien

Wie Sie mobile Seiten so gestalten, dass Kunden mit dem Daumen kaufen — nicht mit dem Geduldskonto.

Lernziel

Sie lernen acht Prinzipien für mobile Nutzerführung kennen.

Sie erkennen, warum Daumenreichweite, Touch-Größe und Lesbarkeit das Kaufverhalten steuern.

Sie wenden die Prinzipien direkt auf Ihre Produktseiten und Checkout-Formulare an.

Das mobile Gehirn hat andere Prioritäten

Auf dem Smartphone entscheiden Nutzer in Sekundenbruchteilen über Vertrauen und Nutzbarkeit.

Sie scrollen schneller, lesen weniger und verlassen Seiten bei Reibung sofort.

Design muss deshalb für Ablenkung, schwaches Licht und unbequeme Haltung bauen.

Daumenreichweite bestimmt Hierarchie

Der Daumen erreicht den unteren Bildschirmbereich am sichersten.

Primäre Aktionen gehören in die untere Zone, Sekundäres nach oben.

Die Mitte ist für Informationen, die der Kunde nur liest, nicht anklickt.

Touch-Targets: 44 px ist die Untergrenze

Apples Human Interface Guidelines und Material Design empfehlen mindestens 44 px beziehungsweise 48 dp.

Kleinere Flächen werden verfehlt, doppelt getippt oder ignoriert.

Auch der Abstand zwischen zwei klickbaren Elementen reduziert Fehleingaben.

CTA-Platzierung: unten sichtbar, oben erklärend

Die wichtigste Aktion muss am unteren Rand oder als sticky Bar erreichbar sein.

Oben bleibt Raum für Kontext, Vertrauen und Produktinformationen.

Ein CTA, das beim Scrollen verschwindet, kostet Käufe.

Sticky-CTAs: sichtbar, aber nicht aufdringlich

Eine dünne Leiste am unteren Rand hält den Kauf-Button jederzeit parat.

Sie sollte den Inhalt nicht überdecken und schnell schließbar sein.

Transparenz zur Höhe des Buttons reduziert Unsicherheit.

Navigation kollabieren, nicht kopieren

Die Desktop-Navigation passt nicht auf sechs Zoll Display.

Kategorien müssen priorisiert, Untermenüs zusammengefasst und die Suche prominent bleiben.

Ein Hamburger-Menü reicht nicht — wichtige Pfade brauchen direkte Sichtbarkeit.

Suche, Filter und Sortierung sichtbar halten

Auf Mobilgeräten verschwinden Filter oft hinter Symbolen oder Untermenüs.

Sichtbare Filter-Chips und eine prominente Suche verkürzen den Weg zum Produkt.

Jeder zusätzliche Tipp in der Navigation ist eine potentielle Abbruchstelle.

Formulare minimieren und Autofill nutzen

Jedes zusätzliche Feld erhöht die Wahrscheinlichkeit eines Abbruchs.

Browser-Autofill für Adresse, Name und E-Mail reduziert den Tippsaufwand drastisch.

Gast-Checkout und digitale Wallets entfernen die größten Hürden im Kaufprozess.

Autofill richtig konfigurieren

HTML-Attribute wie autocomplete='shipping-address' helfen Browsern, Daten korrekt einzusetzen.

Falsche oder fehlende Attribute verhindern, dass Vorschläge erscheinen.

Testen Sie Ihre Formulare auf iOS und Android, nicht nur im Desktop-Browser.

Lesbarkeit unter erschwerten Bedingungen

Die Schriftgröße auf Mobile sollte mindestens sechzehn Pixel für Eingabefelder betragen.

Zeilenlängen über sechzig Zeichen erschweren das Lesen auf kleinen Displays.

Kontraste von mindestens vier zu eins nach WCAG halten Text auch bei Sonnenlicht lesbar.

Scannability mit Chunking

Nutzer scannen Mobile-Seiten in Blöcken, statt linear zu lesen.

Kurze Absätze, Zwischenüberschriften und Aufzählungen machen Inhalte erfassbar.

Wichtige Informationen gehören an den Anfang jedes Blocks.

Mobile Mental Models: Erwartungshaltungen nutzen

Nutzer erwarten auf Mobile bestimmte Muster: Wischen für Galerien, Tippen für Entscheidungen, Zurück für die vorherige Ansicht.

Diese Mental Models sollten bestärkt, nicht gebrochen werden.

Neue Interaktionen erfordern Lernaufwand — und der kostet Konversion.

Progressive Disclosure: erst das Wesentliche

Nicht jede Information muss sofort sichtbar sein.

Beschreibungen, Spezifikationen und Bewertungen können hinter klaren Akkordeons liegen.

Der erste Bildschirm muss nur Vertrauen schaffen und zur nächsten Aktion führen.

Vorher/Nachher: Eine Produktseite auf Mobile

Vorher: kleine Buttons oben, lange Texte, Filter versteckt, Checkout mit Pflichtregistrierung.

Nachher: sticky CTA unten, 44-Pixel-Touch-Targets, Gast-Checkout und sichtbare Filter-Chips.

Ergebnis: niedrigere Abbruchrate, höhere mobile Conversion und weniger Support-Anfragen.

Der Kunde in der S-Bahn

Ein Kunde sucht ein Geschenk, hat nur eine Hand frei und schlechtes Netz.

Er tippt zweimal auf den falschen Button, weil die Touch-Targets zu klein sind.

Nach dreißig Sekunden gibt er auf und kauft bei der Konkurrenz.

Ihr Mobile-UX-Schnellcheck

Öffnen Sie Ihre wichtigste Produktseite auf einem echten Smartphone.

Prüfen Sie: Daumenreichweite, Touch-Target-Größe, Lesbarkeit, Formularlänge und CTA-Sichtbarkeit.

Notieren Sie die drei größten Schwachstellen und eine erste Maßnahme pro Punkt.

Zusammenfassung

Mobile UX folgt der Physiologie des Daumens, nicht der Desktop-Maus.

Touch-Targets von mindestens 44 px, sichtbare CTAs und minimierte Formulare senken Reibung.

Lesbarkeit, Scannability und bekannte Interaktionsmuster schaffen Vertrauen.

Übergang zu Mobile Speed & Performance

Selbst die beste UX scheitert, wenn eine Seite länger als drei Sekunden lädt. Im nächsten Modul zeigen wir, wie Ladezeit und Core Web Vitals die mobile Conversion beeinflussen.

Quiz

Testen Sie Ihr Wissen.

Modul abgeschlossen

Nächstes Modul: Mobile Speed & Performance — Core Web Vitals