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 Größe von 7-10mm (ca. 44 Pixel) auf dem Ausgabegerät erreichen, damit eine Bedienung per Touch Screen komfortabel möglich ist. Eine sehr ausführliche Erklärung dazu findet ihr im Smashing Magazine.
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.
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.