Mobile UX-Prinzipien

Mobile UX-Prinzipien

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

Was Sie in diesem Modul lernen

Sie kennen acht Prinzipien für mobile Nutzerführung und deren wirtschaftliche Relevanz.

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

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

Vorwissen aktivieren

Welche drei Touch-Elemente Ihrer mobilen Seite nutzen Kunden am häufigsten?

Wo liegt der wichtigste Button auf Ihrer mobilen Produktseite?

Wie viele Felder muss ein mobiler Käufer im Checkout durchschnittlich ausfüllen?

Was bedeutet das für Ihren Shop?

Mobile UX ist keine Frage des Geschmacks, sondern der Conversion-Rate.

Jede unnötige Reibung kostet Käufer, die Sie bereits teuer gewonnen haben.

Die meisten Prinzipien lassen sich ohne Programmierprojekt testen und umsetzen.

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 und bequemsten.

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 Pixel ist die Untergrenze

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

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

Auch der Abstand zwischen zwei klickbaren Elementen reduziert Fehleingaben deutlich.

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 und zum Versand 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 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 Conversion.

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.

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.

Häufige Fehler bei Mobile UX

Fehler eins: Desktop-Layout einfach verkleinern statt neu zu denken.

Fehler zwei: Schrift zu klein wählen, weil mehr Text auf den Screen passen soll.

Fehler drei: Sticky-CTAs so groß gestalten, dass sie den Inhalt verdecken.

Meine Perspektive

Ich teste jeden Shop zuerst auf dem Handy — denn dort entscheidet sich der Großteil des Umsatzes.

Die besten Ergebnisse erzielen wir, wenn UX, Speed und Vertrauen gemeinsam verbessert werden.

Nicht der schönste Button gewinnt, sondern der, der am leichtesten zum richtigen Zeitpunkt getippt wird.

Ü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