Touch First-Design
Damit Websites auf Touch Screens gut bedient werden können, dürfen u.a. keine Funktionen von Mouse-Over abhängig sein und Schaltflächen müssen eine ausreichende Größe besitzen.

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:
- Navigationspunkte, die über Untermenüs verfügen, müssen per Klick das Untermenü öffnen. Das Öffnen des Untermenüs per Mouse Over führt zu Problemen in der User Experience.
- Tooltips oder ähnliche einblendbare Elemente müssen über Schließen-Funktionen verfügen.
- Alle klickbaren Elemente müssen so gestaltet werden, dass auch ohne Mouse-Over-Effekt ersichtlich ist, dass das Element anklickbar ist.