Mobile UX: Praxisleitfaden für bessere Websites

Von Patricia Jarmek Inhalte und Websites 30. Oktober 2026

6 Min. Lesezeit

Eine mobile Website kann einen technischen Responsive-Test bestehen und trotzdem mühsam sein. Text passt auf den Bildschirm, doch Schaltflächen sind winzig. Die Navigation funktioniert, versteckt aber die wichtigste Aktion. Das Formular ist kürzer als am Desktop, öffnet jedoch die falsche Tastatur und löscht Eingaben nach einem Fehler.

Mobile UX bedeutet daher nicht, ein Desktop-Design zu verkleinern. Entscheidend ist, was Nutzer zuerst brauchen, was warten kann und wie sie eine Aufgabe einhändig, bei schwächerer Verbindung und trotz Unterbrechungen abschließen.

Beginnen Sie mit der Aufgabe

Definieren Sie die wichtigste mobile Aufgabe: Information finden, Dienstleistung vergleichen, Anfrage senden, Produkt kaufen oder Bestellung prüfen. Der erste Bildschirm braucht nicht jedes Desktop-Element in derselben Reihenfolge, sondern einen klaren nächsten Schritt.

Analysieren Sie Wege nach Gerät: Wo brechen mobile Nutzer ab, gehen zurück, zoomen oder öffnen denselben Schritt mehrfach? Eine niedrigere Conversion beweist nicht automatisch schlechte UX, ist aber ein Signal für Forschung.

Responsive ist mehr als einige Breakpoints

Ein belastbares Layout reagiert auf Platz, Inhalt und Gerätefunktionen. web.dev weist darauf hin, dass Seiten ohne korrekte viewport-Angabe stark verkleinert laden können und Text dadurch schwer lesbar wird [1].

WCAG 2.2 verlangt, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne Informations- oder Funktionsverlust und ohne zweidimensionales Scrollen nutzbar bleiben, außer wenn ein zweidimensionales Layout notwendig ist [2].

Nutzen Sie eine klare Hauptspalte, flexible Medien, durchdachte Tabellen und Komponenten, die auch bei Textvergrößerung funktionieren. Entfernen Sie wichtige Inhalte nicht nur, weil ihre Anordnung schwieriger ist.

Das Touch-Ziel muss größer als das Icon sein

Menschen tippen nicht mit einer Cursorspitze. WCAG 2.5.8 nennt mindestens 24 × 24 CSS-Pixel oder ausreichenden Abstand zwischen kleineren Zielen [3]. Das ist die Untergrenze, nicht das Ideal für jede Hauptaktion.

Apple empfiehlt mindestens 44 × 44 pt [4], Android 48 × 48 dp. Ein sichtbares Icon darf kleiner sein, wenn Padding seine aktive Fläche erweitert [5].

Prüfen Sie Modal-Schließen, Warenkorb, Mengenwahl, Slider-Pfeile, Checkboxen, Footerlinks und Filter. Benachbarte Ziele dürfen ungenaues Tippen nicht in eine falsche Aktion verwandeln.

Für Daumen und wechselnden Griff gestalten

Häufige Aktionen sollen bequem erreichbar sein, doch es gibt keine universelle Daumenzone. Gerätegröße, Hand und Kontext verändern die Reichweite. Wichtige Kontrollen dürfen kein präzises Strecken verlangen; destruktive Aktionen gehören nicht neben den Haupt-CTA.

Eine feste untere Navigation hilft nur mit wenigen klaren Zielen. Sie stört, wenn sie Inhalte, Cookie-Banner oder Tastatur überdeckt. Ein Sticky CTA sollte verschwinden, wenn er nicht mehr relevant ist.

Text muss ohne Zoomen lesbar bleiben

Lesbarkeit umfasst Kontrast, Zeilenabstand, Zeilenlänge, Hierarchie und Freiraum. Eine vierzeilige Überschrift, die nützliche Inhalte verdrängt, kann ebenso problematisch sein wie zu kleine Schrift.

Deaktivieren Sie Zoom nicht. Beim Vergrößern muss sich die Seite ohne Funktionsverlust neu anordnen. Akkordeons können die Seite verkürzen, doch ihre Titel müssen den Inhalt erklären und zentrale Informationen zugänglich bleiben.

Mobile Formulare sollen weniger Arbeit verlangen

Fragen Sie nur Daten ab, die für den nächsten Schritt notwendig sind. Jedes Feld braucht eine dauerhafte Beschriftung, bei Bedarf ein Beispiel und eine Fehlermeldung mit Korrekturhinweis. Placeholder ersetzen keine Labels.

Verwenden Sie passenden Feldtyp, inputmode und autocomplete. Das GOV.UK Design System empfiehlt autocomplete, damit Formulare schneller ausgefüllt werden können, kombiniert mit klaren Labels und Hinweisen bei besonderen Formaten [6].

Prüfen Sie die richtige Tastatur, Passwortmanager, den Erhalt der Eingaben nach Fehlern, Fehlermeldungen am Feld und ob die Tastatur das aktive Element verdeckt.

Schnelle Rückmeldung ist Teil der Nutzbarkeit

Nach dem Tippen muss erkennbar sein, was passiert: Buttonzustand ändert sich, Warenkorb bestätigt, Menü öffnet oder Laden wird angezeigt. Ohne Rückmeldung wiederholen Nutzer die Aktion.

Interaction to Next Paint misst die Reaktionsfähigkeit auf Interaktionen. web.dev bewertet bis zu 200 ms am 75. Perzentil als gut, getrennt für mobile und Desktop-Besuche [7]. Die Kennzahl ist nicht die gesamte UX, doch eine langsame Oberfläche behindert direkt.

Mobile darf nicht die inhaltsarme Version sein

Google nutzt die mobile Version für Indexierung und Ranking. Empfohlen werden Responsive Design und gleichwertige Hauptinhalte, Überschriften, Metadaten, strukturierte Daten und Alt-Texte auf Mobile und Desktop [8].

Inhalte können in Tabs oder Akkordeons verschoben werden. Entfernen Sie jedoch keine Leistungsbeschreibungen, Bedingungen, Lieferinformationen, Bewertungen oder andere Entscheidungsgrundlagen.

Auf Geräten testen

Emulatoren sind hilfreich, aber unvollständig. Testen Sie ein kleines und großes Smartphone, iOS und Android, Hoch- und Querformat, langsamere Netze, vergrößerten Text und die echte Bildschirmtastatur.

Durchlaufen Sie den gesamten Weg bis zur Bestätigung. Prüfen Sie Zurück-Navigation, Drehung, Neuladen, Unterbrechung durch einen Anruf und Formularfortsetzung. Analytics zeigt, wo das Problem liegt; Nutzerbeobachtung erklärt warum.

Mobile-UX-Checkliste

Hauptaufgabe ist sofort sichtbar
gewöhnliche Inhalte brauchen kein horizontales Scrollen
Text bleibt bei Vergrößerung lesbar
Touch-Ziele sind groß und getrennt
Navigation verdeckt keine Inhalte
Formulare nutzen Labels, Autocomplete und richtige Tastatur
Fehler löschen keine Eingaben
Aktionen erhalten sofort sichtbare Rückmeldung
mobile und Desktop-Inhalte sind gleichwertig
Hauptweg ist auf echten Geräten getestet

Mobile UX ist gut, wenn Menschen die Oberfläche nicht bewusst bemerken. Sie können lesen, tippen, Fehler korrigieren und abschließen — ohne Mauspräzision, perfekten Empfang oder ununterbrochene Aufmerksamkeit.

Häufig gestellte Fragen

Ist Responsive Design dasselbe wie gute Mobile UX?

Nein. Responsive Design passt das Layout an; Mobile UX umfasst zusätzlich Prioritäten, Touch, Lesbarkeit, Formulare, Geschwindigkeit und den gesamten Weg.

Wie groß sollten mobile Buttons sein?

WCAG nennt 24 × 24 CSS px oder ausreichenden Abstand als Minimum, Apple empfiehlt 44 pt und Android 48 dp.

Sollte Mobile weniger Inhalt haben?

Nicht unbedingt. Inhalte dürfen anders angeordnet sein, doch Hauptinformationen und SEO-Elemente sollten gleichwertig bleiben.

Wie vereinfacht man mobile Formulare?

Nur notwendige Daten abfragen und dauerhafte Labels, Autocomplete, passenden inputmode sowie klare Fehler ohne Datenverlust verwenden.

Reicht ein Browser-Emulator?

Nein. Echte Geräte zeigen Probleme mit Tastatur, Griff, Browsern, Netz, Zoom und Unterbrechungen.