Mobiles UI-Design: Touch-Ziele, Navigation, Lesbarkeit

Gutes mobiles UI-Design ist keine verkleinerte Version eines Desktop-Layouts; es ist ein Erlebnis, das mit dem Finger bedient, einhändig in einer ablenkenden Umgebung gehalten und bei wechselndem Licht gelesen wird. Nutzer schauen oft im Gehen, bei greller Sonne oder mit nur halber Aufmerksamkeit auf den Bildschirm. Deshalb ruht mobiles Design, das wirklich funktioniert, auf drei Fundamenten: ausreichend großen Touch-Zielen, einer Navigation, die der Daumen bequem erreicht, und einer Typografie, die auf kleinem Bildschirm lesbar bleibt. Dieser Artikel erklärt diese drei Prinzipien mit konkreten Zahlen und anwendbaren Regeln.

Größe und Abstand von Touch-Zielen

Eine Fingerkuppe ist ein weit gröberer Zeiger als eine Maus. Die Kontaktfläche eines erwachsenen Fingers misst etwa 8–10 mm, daher führen winzige Schaltflächen zu ständigen Fehlberührungen. Die Plattformrichtlinien geben klare Empfehlungen:

• Apple Human Interface Guidelines: antippbare Ziele sollten mindestens 44×44 pt sein.
• Google Material Design: mindestens 48×48 dp, mit mindestens 8 dp Abstand zwischen Zielen.
• WCAG 2.2 (2.5.8): eine Mindestgröße von 24×24 CSS-Pixeln — das ist jedoch eine absolute Untergrenze, kein Komfort.

Selbst wenn das sichtbare Symbol klein ist, kannst du die Trefferfläche vergrößern. Im Web geschieht das mit padding oder einer unsichtbaren Erweiterungszone:

.icon-button {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Der Abstand zwischen den Zielen zählt genauso viel wie ihre Größe. Wenn du zwei Schaltflächen nebeneinander quetschst, trifft der Nutzer die falsche, selbst wenn sie die richtige Größe haben. Bewahre vertikalen Rhythmus in Listenzeilen und Formularfeldern.

Die Daumenzone und Navigation

Die meisten Menschen bedienen ihr Telefon einhändig, mit dem Daumen. Die untere Bildschirmmitte ist am leichtesten zu erreichen, während die oberen Ecken — besonders bei großen Telefonen — für den Daumen schwierig sind. Deshalb ist es ein Eckpfeiler des modernen mobilen Designs, primäre Aktionen unten zu platzieren:

• Untere Tab-Leiste: ideal für 3–5 Hauptbereiche; immer sichtbar und mit dem Daumen erreichbar.
• Primäre Aktionsschaltfläche: halte Hauptaktionen wie „Senden" oder „In den Warenkorb" unten verankert und destruktive Aktionen (löschen) weiter entfernt.
• Hamburger-Menü: gut für sekundäre Links, aber schlecht auffindbar; verstecke deine Kernnavigation nicht darin.

Halte häufige Aktionen — Zurückgehen, Scrollen, Tab-Wechsel — dort, wo das System die Nutzer gewohnt hat, sie zu erwarten. Vom linken Rand wischen, um auf iOS zurückzugehen, und die System-Zurück-Geste auf Android sind Verhaltensweisen, die Nutzer aus dem Muskelgedächtnis kennen; brich sie nicht.

Typografie und Lesbarkeit

Lesbarkeit auf kleinem Bildschirm hängt von Kontrast und Zeilenlänge genauso ab wie von der Schriftgröße. Praktische Ausgangswerte:

• Fließtext: mindestens 16px (Eingabefelder unter 16px lösen in iOS Safari unerwünschtes Zoomen aus).
• Zeilenhöhe: 1,4–1,6 für Fließtext; enge Zeilen ermüden das Auge auf dem Handy.
• Zeilenlänge: idealerweise 35–45 Zeichen; da die Spalte auf dem Handy ohnehin schmal ist, halte großzügige Seitenränder.
• Kontrast: WCAG AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text.

Respektiere die Schriftskalierung des Systems. Skalierbare Einheiten und rem statt absoluter px zu verwenden lässt die Oberfläche sich anmutig anpassen, wenn ein Nutzer seine Textgröße vergrößert:

html { font-size: 100%; }      /* Nutzereinstellung respektieren */
body { font-size: 1rem; line-height: 1.5; }
h1   { font-size: clamp(1.5rem, 5vw, 2.25rem); }

Responsives Layout und Safe Areas

Moderne Telefone haben Notches, abgerundete Ecken und eine untere Gestenleiste. Damit Inhalte nicht unter diesen Bereichen verschwinden, verwende die safe-area-inset-Variablen:

.app-bar {
  padding-top: env(safe-area-inset-top);
}
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

Brich das Layout für den Inhalt um, nicht für Geräte. Verwende statt fester Pixelraster flexible flexbox/grid und min()/max()/clamp(). Begrenze Bilder mit max-width: 100% und optimiere Touch-Karussells für das Wischen.

Performance und Feedback sind auch Design

Auf dem Handy schlägt gefühlte Geschwindigkeit visuellen Feinschliff. In langsamen Netzen brechen Nutzer nach wenigen Sekunden Wartezeit ab. Ein paar praktische Punkte:

• Gib jeder Berührung sichtbares Feedback — einen gedrückten Zustand, eine kleine Animation oder ein haptisches Vibrieren.
• Skeleton-Screens während des Ladens erzeugen weniger Unruhe als eine leere weiße Seite.
• Komprimiere Bilder, verwende loading="lazy" und rendere den sichtbaren Bereich schnell.
• Blockiere die Touch-Reaktion nicht; verlagere schwere Arbeit weg vom Haupt-Thread.

Design ist erst fertig, wenn du testest

Teste mobiles Design nicht nur im Browser-Emulator, sondern auf einem echten Gerät in echter Hand. Der Emulator zeigt weder Fehlberührungen noch die einhändige Reichweite noch den Kontrast im Sonnenlicht. Probiere es mit deinem eigenen Finger, idealerweise über mehrere Bildschirmgrößen und auf iOS wie auf Android.

Häufige Fragen

Wie viele Pixel hat das minimale Touch-Ziel genau?

Apple empfiehlt 44×44 pt, Google 48×48 dp; WCAG nennt 24×24 CSS-Pixel als absolute Untergrenze. Sichere Faustregel: Auch wenn das sichtbare Symbol klein ist, halte die Trefferfläche mindestens 48px und lasse mindestens 8px Abstand zwischen den Zielen.

Soll ich untere Navigation oder ein Hamburger-Menü verwenden?

Bei 3–5 Hauptbereichen ist eine untere Tab-Leiste besser auffindbar und daumenfreundlicher. Ein Hamburger-Menü eignet sich für mehr oder sekundäre Links — aber vergrabe den Kernablauf deiner App nicht im Menü.

Was ist die kleinste Schriftgröße für Fließtext?

16px ist die sichere Untergrenze für Fließtext. In iOS Safari zoomen Formularfelder unter 16px beim Fokussieren hinein, halte daher auch Eingabefelder bei mindestens 16px.

Möchtest du deine mobile Oberfläche benutzbarer und schneller machen? Von Touch-Zielen über Navigation bis Performance kann ich deine Oberfläche von Anfang bis Ende überarbeiten. Nimm Kontakt auf und lass uns über dein Projekt sprechen.