Wie der Touch-First-Ansatz das Bedienen von Geräten optimiert und den Alltag erleichtert
Wie oft landen Sie auf einer Webseite, die Sie eigentlich gar nicht interessiert? Und wie oft ist das der Grobmotorik Ihres Fingers zuzuschreiben? Das Smartphone, die Kaffeemaschine oder das Ticketsystem am Bahnhof – Touch-Screens begleiten unseren Alltag. In diesem Artikel erfahren Sie, was Touch-First bedeutet und welchen Unterschied schon der kleinste Abstand macht.
Was ist Touch-First?
Im Webdesign wird im Normalfall zwischen zwei führenden Ansätzen unterschieden: Mobile-First und Desktop-First. Für welches Gerät ist ein Design ausgelegt – Handy oder Computer? Während die Desktop-First-Herangehensweise von großen Bildschirmflächen ausgeht, ist die Gestaltung nach Mobile-First-Prinzip für kleinere Bildschirme ausgelegt.
Doch insbesondere in den vergangenen Jahren haben Mobilgeräte massiv an Popularität gewonnen. Und mit Ihnen die Touch-Funktion. Touch-First setzt voraus, dass ein Gerät in der Hauptsache gut mit dem Finger bedienbar ist. Das ist ein echter Gamechanger, da herkömmliche Designs für den Desktop durch eine präzise Maus bedient werden – und diese Präzision haben unsere Finger nicht.
Der Mobile-First-Ansatz geht grundsätzlich von einem kleinen Handy-Bildschirm aus. Touch-First lässt sich hingegen nicht nur auf ein, sondern auf diverse Geräte anwenden. Einfacher gesagt: Während Mobile-First auf eine Kategorie von Geräten ausgelegt ist, ist Touch-First auf eine Art der Eingabe ausgelegt. Das Gerät ist egal, es geht um das Bedienen per Touch – ob auf dem Handy, Tablet oder anderen Geräten.
Gestalten mit einem Touch-First-Ansatz
Die Anzeigefläche eines breiten Desktop-Bildschirms bietet Ihnen viel Raum für Buttons, Menüseiten und Suchoptionen. Diese Vielfalt wirkt auf kleineren Geräten eher unübersichtlich. Durch Touch-First können (und müssen) Sie einzelne Bedienelemente in den Fokus nehmen und ihnen den nötigen Platz geben. Etwa durch
- das Weglassen anderer (unwichtiger) Elemente,
- das Vergrößern von Abständen,
- eine veränderte Anordnung.
Insbesondere die Größe der Elemente spielt eine wichtige Rolle, damit diese mit dem Finger gut zu erwischen sind. Eine Mindestgröße von 48 Pixel hat sich in den letzten Jahren als Standard für klickbare Flächen etabliert.
Eine lange Filterliste mit 30 dicht nebeneinander platzierten Kategorien können Sie zum Beispiel auf fünf zentrale Elemente reduzieren und mit deutlich sicht- und erreichbaren Buttons ausstatten. Weitere Kategorien können die User per Scroll erreichen und auswählen. Dadurch lässt sich die Liste gut mit dem Finger navigieren. Das Risiko, dass User sich vertippen, ist viel niedriger.
Die Benutzerfreundlichkeit hat Priorität. Navigation und Interaktionsmöglichkeiten müssen intuitiv erkennbar sein. Dabei kommt es oft auf Details im Design an:
- Hintergrundfarben,
- Flächengrößen,
- Rahmen,
- Formatierungen oder
- Symbole
können ein Element als interaktiv kennzeichnen. Aus dieser Priorisierung können Sie aber auch ebenso wichtige Erkenntnisse für Desktop-Layouts ableiten. Etwa bezüglich Fokus, Anordnung oder Einteilung.
Anwendungsbeispiel: Die Website von Diercke Weltatlas
Nutzen Sie Touch-First, wenn es zu Ihrer Zielgruppe passt und das Bedienen mit dem Finger für sie relevant ist. Im Fall unseres Kunden Diercke Weltatlas richtet sich das Webdesign beispielsweise zu einem Großteil an Schulkinder. Die Arbeit mit Tablets ersetzt zunehmend den altbewährten Ausflug in den Computerraum – insbesondere im Erdkundeunterricht. Das Tablet ist als Mittelweg zwischen Smartphone und Computer eine besondere Herausforderung, die in diesem Fall eine Mischung aus Touch-First-Prinzipien und Desktop-Features erfordert:
- Die Vielfältigkeit der Weltkarten und Suchoptionen wird auf der Startseite durch eine übersichtliche Anzahl an Schlagwörtern, Hauptthemen und Neuigkeiten repräsentiert.
- Unabhängig von der Wortlänge verfügen alle Buttons über eine Mindestgröße, damit sie mit dem Finger gut angetippt werden können.
- Hauptthemen und Neuigkeiten können nicht nur über einen Button, sondern über die gesamte Schaltfläche des Elements ausgewählt werden.
- Alle Elemente sind horizontal angeordnet, sodass die Seite verkürzt wird.
- Die Suchfunktion befindet sich ganz oben am Seitenanfang, sodass ohne langes Scrollen nach bestimmten Karten gesucht werden kann.
Filtermöglichkeiten werden in reduzierter Form dargestellt und die Suchergebnisse verfügen über ausreichenden Abstand zum Nachbarn.
Was es zu beachten gilt
Wenn Sie einzelne Elemente hervorheben, stellen Sie fast automatisch andere Elemente zurück. Dabei ist es wichtig, richtig zu priorisieren. Zudem müssen Sie bedenken, dass Touch-Elemente viel Platz einnehmen und den ein oder anderen Swipe mehr erfordern. Viele große Bedienelemente auf einen Schlag können schnell überladen wirken, den User verwirren (Paradox of Choice) und unendliches Scrollen bewirken. Insbesondere die Funktionalität ist nach Touch-First-Prinzip wichtig. Dabei sollte die Ästhetik jedoch auch nicht vernachlässigt werden.
Umfangreiche Benutzertests helfen Ihnen dabei, noch nutzerfreundlichere Websites zu gestalten. Aber auch während des Designprozesses können Sie Tools nutzen, die Kontrastverhältnisse oder die Größe der Bedienelemente beurteilen. Außerdem hilft es oft, sich eigene Erfahrungen mit dem Navigieren anderer Websites in Erinnerung zu rufen und potenziell frustrierenden Momenten so vorzubeugen.
