---
title: "Gedanken zum Design von Touchscreen-Benutzeroberflächen"
date: 2020-06-24
language: de
topics: ["creating", "creativity", "design", "game", "howto", "iOS", "iPad", "smartphone", "snake"]
source_url: https://willem.com/de/2020-06-24_gedanken-zum-design-von-touchscreen-benutzeroberflachen/
---
# Gedanken zum Design von Touchscreen-Benutzeroberflächen

*Intuitive, natürliche Oberflächen gestalten*

> 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.

## 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!

![Alte UI-Muster auf einem modernen Touchscreen-Gerät nachzubauen, wird dir keine Usability-Preise einbringen... (obwohl, wer vermisst Clippy nicht?)](https://willem.com/global/images/9710101b75bf.webp)

## 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.

![Elemente auf dem Bildschirm direkt zu bedienen fühlt sich natürlich an, eine Maus wäre hier überflüssig](https://willem.com/global/images/37433282f380.webp)

## 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.

![Die großen Ja/Nein-Tasten verringern die Fehlergefahr, weil sie keine pixelgenaue Zeigerführung brauchen](https://willem.com/global/images/1c0b65647905.webp)

## 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.

![Kontextabhängige Tastaturen sind der bessere Weg zur Texteingabe. Es ergibt keinen Sinn, eine komplette QWERTZ-Tastatur zu zeigen, wenn nur eine Zahl gefragt ist.](https://willem.com/global/images/9022cd4a6bb1.webp)

## 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.

![Die Tasten Zurück / Ausblenden / Speichern liegen in Daumennähe: Sie sind gut erreichbar und verdecken dabei nicht den Bildschirminhalt](https://willem.com/global/images/9e15010dbbdf.webp)

## 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.

![Menüs, die auf Hover-Effekten beruhen, funktionieren auf Touchscreens NICHT](https://willem.com/global/images/8b0744e3bebc.webp)

## 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.

![Snake '97: Macht Spaß, aber das UI-Design ist wohl schlecht](https://willem.com/global/images/840381231d21.webp)

Als ich das Snake_97_Spiel (https://snake97.com) für Touchscreen-Geräte gebaut habe, habe ich den alten Eingabemechanismus mit_viel_Liebe_zum_Detail (https://willem.com/en/2018-02-21_updating-snake-97/) 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.

![Vögel zu katapultieren macht Spaß dank der natürlichen Interaktion, die den Kern von Angry Birds bildet](https://willem.com/global/images/c673e319ed77.webp)

## 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!