Bei der Gestaltung von Website, Apps und anderen digitalen Produkten sollte die Optimierung für Touch Screens einen hohen Stellenwert einnehmen. Unabhängig von der Unterstützung zahlreicher Touch-Gesten, sollten einige Dinge im UI Design und in der Konzeption beachtet werden.

Größe von Tippflächen beachten

Visuell abgegrenzte Elemente wie Buttons oder Menüpunkte müssen über die gesamte Fläche klickbar sein. Zudem sollten alle Tippflächen eine minimale Größe von 7-10mm auf dem Ausgabegerät erreichen, damit eine Bedienung per Touch Screen komfortabel möglich ist. Umgerechnet in Pixel, sind das ca. 44 – 48px. Die Vorgabe mit 44px findet sich u.a. bei Apple, sowie in den Anforderungen für Barrierefreiheit (AAA). Google hingegen empfiehlt eine Klickfläche von 9mm (48x48dp) und nutzt diesen Wert auch zur Beurteilung in Lighthouse. Es gibt allerdings Diskussionen, den 48px-Wert an die gängigen Guidelines anzugleichen.

Die Definition in Pixeln oder DP ist insgesamt unglücklich, da es Displays mit verschiedenen Pixeldichten gibt und Pixel somit nicht immer gleich groß dargestellt werden. Präziser ist daher die tatsächliche Größe auf dem Ausgabegerät.

Auch der Zeilenabstand ist in diesem Zusammenhang relevant, da Fließtexte i.d.R. Verlinkungen enthalten. Damit Links in zwei aufeinanderfolgenden Zeilen gut angetippt werden können, sollte der Zeilenabstand mindestens 150% betragen. Der exakte Wert ist abhängig von der Gestaltung und der verwendeten Schriftart.

Eine sehr detaillierte Übersicht bietet auch der Artikel Designing better target sizes.

Keine Funktionen von Mouse Over abhängig machen

Alles muss so gestaltet werden, dass es auch ohne Mouse Over erreichbar ist und funktioniert. Mouse Over-Effekte sind wichtig und sollten visuell auch gestaltet werden, aber sie dürfen keine Voraussetzung für die Bedienbarkeit sein. Folgende Punkte sollten beachtet werden:

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung