Blog

Maus gegen Touch – oder friedlich miteinander?

André Ihme
30. September 2010

Bedienung per Touch ist in aller Munde. Dennoch scheuen sich viele Unternehmen noch, einfach auf den Zug aufzuspringen und ihre Anwendungen komplett umzustellen – denn eine Bedienung per Touchscreen erfordert andere Interaktionskonzepte und kann daher mit großen Umstellungen und hohen Kosten verbunden sein. Auch ist eine solche Umstellung nicht ohne Risiken, denn nicht immer ist die Touch-Bedienung für alle Anwendungsszenarien die geeignetere. Der folgende Artikel zeigt am Beispiel einer Combobox wie man Maus- und Touch-Bedienung verheiraten und so das Beste aus beiden Welten kombinieren könnte – und soll dabei in erster Linie diejenigen inspirieren, die Maus- und Touch-Bedienung gleichermaßen schätzen.

Zu bezweifeln ist zunächst einmal, dass die Bedienung per Finger wirklich für alle Anwendungsszenarien und Branchen die angenehmere und geeignetere ist. Fakt ist, dass sich inzwischen eine Menge Consumer Produkte und Smartphones auf dem Markt befinden, die mittels Touchbedienung wunderbar funktionieren (und wie beim iPhone diesem Umstand höchstwahrscheinlich auch ihren enormen Erfolg verdanken). Auch im industriellen Umfeld nehmen Touchscreens Fahrt auf und werden erfolgreich eingesetzt, wie es beispielsweise unserer folgenden Case Study zu entnehmen ist. Businessanwendungen wie ERP oder CRM Systeme, die an klassischen Schreibtischarbeitsplätzen genutzt werden, werden hingegen nach wie vor bevorzugt mit der Maus gesteuert.

In Zeiten in denen Betriebssysteme wie Windows 7 die Touch-Bedienung allerdings bereits von Haus aus unterstützen, ist die Versuchung groß, die eigene Anwendung mit wenigen Aufwänden „touch-friendly“ zu machen. Zumeist beschränken sich diese Versuche allerdings darauf, die Standard GUI Elemente schlicht und einfach zu vergrößern. Dies ist natürlich für einen seriösen Einsatz unzureichend. Gerade an klassischen Desktop-Arbeitsplätzen muss zunächst einmal auf die Ergonomie der „Hardware“ geachtet werden, bevor überhaupt die Software in Betracht gezogen wird. Andernfalls tritt aufgrund des permanenten Hochhaltens des Armes und der daraus resultierenden Ermüdung des Armes der berühmte „Gorilla Arm“ Effekt auf.

Ist ein solch ergonomisches Hardware Setup aber nicht zu gewährleisten, sollte man Nutzern zumindest die Möglichkeit geben, zwischen Touch- und Mausbedienung wechseln zu können. Dies wiederum stellt aber besondere Anforderungen an die Software: GUI Elemente müssen sowohl per Finger als auch per Maus angenehm bedienbar sein. Was das genau bedeutet, soll an einem kleinen Beispiel demonstriert werden.

Folgende beiden Szenarien auf Mikro-Interaktionsebene zeigen Schritt für Schritt und im Vergleich, wie sich eine Combobox bei der Selektion eines Items üblicherweise verhält, einmal optimiert für Mausbedienung (links) und einmal optimiert für die Bedienung per Single-Touch (rechts). Wir gehen dabei von einer Combobox aus, die nur eine geringe Anzahl von Items enthält, so dass ein Scrollen nicht notwendig ist (wie z.B. in Pie Menüs).

Maus- und Touchbedienung einer Combobox – ein Vergleich

Maus-Bedienung Touch-Bedienung
1) Initialzustand
Initialer Zustand der Combobox
Die Combobox ist geschlossen und kein Item ist ausgewählt.
2) MouseOver Zustand
Icon - Left mouse button down Combobox - Produkt auswählen
Die ComboBox ändert die Farbe und zeigt nach einer kurzen Verzögerung einen Tooltip an, der kurz beschreibt welchen Zweck die Combobox erfüllt. Bei der Touch-Bedienung können Tooltips aufgrund des fehlenden MouseOver Zustands nicht realisiert werden. Auf Tooltips wird in Touch-Systemen daher oft generell verzichtet.
3) Vorbereitung „Popup öffnen“
Icon - left mouse button down Combobox - Linke Maustaste gedrückt
Nach Drücken der Maustaste wird die ComboBox ebenfalls in „gedrücktem“ Zustand visualisiert (MouseDown Ereignis)
4) Aufklappen des Popups mit der Auswahlliste
Icon - Left mouse button down Combobox - Mouse up Icon - Finger down Finger drückt auf Combobox
Das Loslassen der Maustaste öffnet das Popup mit der Elementliste (MouseUp Ereignis). Bereits der erste Kontakt mit dem Touchscreen öffnet das Popup mit der Elementliste (TouchDown Ereignis).
5) Navigieren durch die Auswahlliste
Icon - Mouse move Combobox - Mausbewegung ausserhalb Icon - Finger move Combobox - Finger move
Das Popup bleibt geöffnet, auch wenn die Maus die Combobox verlässt. Erst ein Klick außerhalb der Combobox schließt das Popup wieder. Ohne Halten der Maustaste kann nun die Auswahl erfolgen (MouseMove Ereignis). Letzteres ist zwar ein feines Details, kann aber von großem Vorteil sein, da das Bewegen der Maus bei gleichzeitig gedrückter Maustaste einigen Menschen motorische Probleme bereitet. Eine Auswahl erfolgt über das Wischen des Fingers zum Listenelement ohne Kontaktverlust zum Bildschirm (Wipe Ereignis). Im Gegensatz zum Bewegen der Maus bei gedrückter Maustaste ist dies eine angenehme und natürliche Art der Interaktion.
6) Auswahl eines Elements
Icon - left mouse button down Combobox - Mouse down
Das Drücken der linken Maustaste wählt ein Element aus. Das Popup bleibt weiterhin geöffnet (MouseDown Ereignis). Dieser Zwischenschritt entfällt beim Touchscreen.
7) Element übernehmen
Icon - Left mouse button down Combobox - Mouse up Icon - Finger up Combobox - Finger release
Lässt man die Maustaste wieder los, erscheint das „angeklickte“ Element als Auswahl in der Combobox (MouseUp Ereignis). Hebt der Nutzer den Finger ab wird direkt das aktuell hervorgehobene Element als Auswahl übernommen (TouchUp Ereignis).

Zwischenfazit

Die Auswahl eines Elementes in der Combobox benötigt mit der Maus einen Klick mehr. In erster Linie ist dieser Umstand mit der Unzulänglichkeit zu begründen, die das Bewegen der Maus und das gleichzeitige Halten der Maustaste mit sich bringt. Die Touchbedienung wiederum birgt Nachteile, da sie in diesem Fall keine Tooltips unterstützt.

Im folgenden soll gezeigt werden, wie die Combobox auf Mikrointeraktionsdesign Ebene so optimiert werden kann, dass sie sowohl „mouse-friendly“ als auch „touch-friendly“ wird:

Das neue Verhalten der Combobox

1.1) Öffnen der Auswahlliste und Anzeige des Tooltips
Icon - left mouse button down Icon - Finger move down Combobox - Mouse und Touch Tooltip
Bereits beim MouseDown/TouchDown Ereignis sollte die Auswahlliste aufgehen. Idealerweise geht die Liste nach links versetzt auf, damit der Finger genug Platz zum Wischen über die Liste hat, ohne dabei die Items zu verdecken. Eine Alternative wäre es, das Popup nach oben aufgehen zu lassen. Dies birgt jedoch den Nachteil, dass sich die Bewegung des Fingers ungleich unkomfortabler anfühlt, da sich der Fingernagel – je nach Oberflächenbeschaffenheit des Touchscreens – unangenehm vom Nagelbett abheben oder über die Oberfläche „stottern“ könnte.

Bevorzugterweise sollte sich der Tooltip kurz nach dem MouseDown/TouchDown Ereignis öffnen, diesmal jedoch oberhalb der Combobox, da der Finger ihn sonst verdecken könnte.

Die Items in der Auswahlliste könnten etwas höher visualisiert werden, damit die Auswahl eines Items auch gut mit dem Finger zu treffen ist.

1.2) Schließen der Auswahlliste
Icon - Left mouse button down Icon - Finger up Finger schwebt über dem Touchscreen
Die Auswahlliste schließt sich nach einem MouseUp/TouchUp Ereignis, ohne jedoch eine Aktion anzustoßen. Somit kann der Nutzer gefahrlos das Interface erforschen.
2) Auswahl eines Elements
Icon - left mouse button down

Icon - Mouse move

Icon - Finger move Combobox - Mouse & Touch Auswahl
Mit gedrückter Maustaste oder aufliegendem Finger kann der Nutzer ein Element hervorheben (Drag/Wipe Ereignis). Wie bereits erwähnt ist das Gedrückthalten der Maustaste bei gleichzeitiger Mausbewegung für manche Menschen unkomfortabel. Doch auch für diese Zielgruppe funktioniert die vorgestellte Lösung: wenn die Auswahlliste wie in Schritt 1.1 geöffnet bleibt, auch nachdem man die Maustaste wieder gelöst hat, kann man sich zunächst einen Überblick über die Liste verschaffen und dann bequem mit der Maus ohne Festhalten der Maustaste zum entsprechenden Item rollen und dieses durch einen weiteren Klick auswählen.
3) Element auswählen
Icon - Left mouse button down Icon - Finger up Combobox - Mouse Up Finger Up
Mit dem Loslassen der Maustaste oder des Fingers wird das aktuell hervorgehobene Item als Auswahl übernommen (MouseUp/TouchUp Ereignis). Dabei schließt sich die Auswahlliste wieder.

Fazit

Sowohl die Bedienung per Maus- als auch die Bedienung per Touch wartet mit Vor- und Nachteilen auf, und für Interfacedesigner lohnt sich der direkte Vergleich auf Mikro-Interaktionsebene. Der Nutzer kann dabei nur gewinnen, da er sich bei einem für beide Welten ausgelegten System mitten in seiner Arbeit dazu entschließen kann, von Touch auf Maus oder umgekehrt zu wechseln, ohne dafür die Anwendung umkonfigurieren oder sogar neu starten zu müssen.

Windows ist eine Marke oder eingetragene Marke
der Microsoft Corporation in den USA und/oder anderen Ländern.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Employee Experience Manager
+49 681 959 3110

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.