Gedanken zum Design von Touchscreen-Benutzeroberflächen

Zusammenfassung

In den letzten Wochen habe ich an einer neuen App rund um die persönliche Gesundheit gearbeitet. Die größte Herausforderung ist eine intuitive, natürliche Oberfläche, die auf kleinen Touchscreen-Geräten gut funktioniert. Aber was macht eine Touchscreen-Oberfläche eigentlich gut? Lies weiter für ein paar bewährte Grundsätze.

Volltext

Das Erbe von Maus und Tastatur

Klassische PC-Anwendungen wurden vor allem für ganz bestimmte Eingabegeräte entworfen und entwickelt, etwa Tastatur und Maus. Viele Konventionen, bewährte Verfahren und Designmuster stammen aus dieser Zeit. Das ist in Ordnung, solange du eine App für klassische PCs baust. Aber heutzutage nutzt deine Zielgruppe mit großer Wahrscheinlichkeit moderne Touchscreen-Geräte. Es wäre ein Fehler, die alte Oberfläche auf modernen Touchscreen-Geräten einfach nachzubauen!

Natürliche Interaktion

Moderne Touchscreen-Geräte machen Interaktion natürlicher, weil sie Eingabegeräte wie die Maus überflüssig machen. Das Gerät ist die Eingabetaste: Elemente auf dem Bildschirm lassen sich per Touch und Gesten direkt und unmittelbar bedienen.

Entrümpeln und Elemente richtig dimensionieren

Ein Finger ist viel größer als ein spitzer Mauszeiger. Deshalb musst du die Größe von Bedienelementen anders planen. Interaktive Elemente sollten groß genug sein, um sie zu treffen, und genug Abstand zueinander haben. Liegen die Ziele zu nah beieinander, steigt die Gefahr von Fehlern.

Texteingaben optimieren

Je nachdem, was du baust, brauchst du früher oder später eine Text- oder Zahleneingabe. Der einfache (und falsche) Weg ist, einfach eine komplette virtuelle Tastatur einzublenden. Statt die Vergangenheit (die physische Tastatur) virtuell nachzubauen, solltest du die Gelegenheit nutzen und neu überlegen, was du den Nutzer eigentlich fragst. Je nach diesem Eingabekontext zeigst du dann eine minimale Tastatur, die nur die passenden Tasten anbietet.

Positionen neu denken

Klassische PC-Anwendungen haben ihre Symbolleisten oft oben im Fenster. Auf einem Touchscreen würden die Hände dann den Rest des Bildschirms verdecken. Neben dem sichtbaren Inhalt solltest du auch die Ergonomie bedenken, also wie man das Gerät in der Hand hält. Oft genutzte Schaltflächen gehören am besten dorthin, wo die Finger ohnehin liegen.

Vergiss Hover-Effekte und Tooltips

Vergiss Bedienelemente wie Menüs, die auf Hover-Effekte angewiesen sind. Die meisten Touchscreens erkennen keine Finger, die über dem Glas schweben. Genauso wenig kannst du dich darauf verlassen, dass Tooltips die Funktionen deiner Oberfläche erklären. Eine Touchscreen-Oberfläche sollte auf den ersten Blick verständlich sein.

Sei kreativ

Das Design für Touch-Bedienung solltest du vor allem als kreative Aufgabe sehen. Statt das Alte nachzubauen, denk lieber an all die Möglichkeiten, die das Neue bietet.

Als ich das Snake 97 Spiel für Touchscreen-Geräte gebaut habe, habe ich den alten Eingabemechanismus mit viel Liebe zum Detail nachgebildet. Ich finde das lustig, aber als UI-Design ist es wohl schlecht, weil es alle Möglichkeiten der neuen Technik ignoriert. Kein Wunder also, dass Spiele wie Angry Birds so erfolgreich sind: Sie nutzen die natürliche Interaktion per Touch voll aus.

Fazit

Ein einflussreicher Professor hat mich einmal gefragt: "Aber macht es Spaß, Willem?" Diese Frage solltest du dir beim Design für Touch wirklich stellen. Wenn du sie mit "JA!" beantworten kannst, bist du auf dem richtigen Weg.

Statt alte Dinge nachzubauen, solltest du Interaktion neu denken. Sicher, nicht alles Alte ist schlecht. Aber es wäre ein Fehler, das Gute zu ignorieren, das moderne Technik möglich macht!