{"id":1330,"date":"2010-09-30T22:56:57","date_gmt":"2010-09-30T20:56:57","guid":{"rendered":"http:\/\/www.centigrade.de\/de\/blog\/?p=1330"},"modified":"2020-02-13T16:28:11","modified_gmt":"2020-02-13T15:28:11","slug":"maus-gegen-touch","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/maus-gegen-touch\/","title":{"rendered":"Maus gegen Touch \u2013 oder friedlich miteinander?"},"content":{"rendered":"

Bedienung per Touch ist in aller Munde. Dennoch scheuen sich viele Unternehmen noch, einfach auf den Zug aufzuspringen und ihre Anwendungen komplett umzustellen \u2013 denn eine Bedienung per Touchscreen erfordert andere Interaktionskonzepte und kann daher mit gro\u00dfen Umstellungen und hohen Kosten verbunden sein. Auch ist eine solche Umstellung nicht ohne Risiken, denn nicht immer ist die Touch-Bedienung f\u00fcr 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\u00f6nnte \u2013 und soll dabei in erster Linie diejenigen inspirieren, die Maus- und Touch-Bedienung gleicherma\u00dfen sch\u00e4tzen.
\n<\/p>\n

Zu bezweifeln ist zun\u00e4chst einmal, dass die Bedienung per Finger wirklich f\u00fcr 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\u00f6chstwahrscheinlich auch ihren enormen Erfolg verdanken). Auch im industriellen Umfeld nehmen Touchscreens Fahrt auf und werden erfolgreich eingesetzt, wie es beispielsweise unserer folgenden Case Study<\/a> zu entnehmen ist. Businessanwendungen wie ERP oder CRM Systeme, die an klassischen Schreibtischarbeitspl\u00e4tzen genutzt werden, werden hingegen nach wie vor bevorzugt mit der Maus gesteuert.<\/p>\n

In Zeiten in denen Betriebssysteme wie Windows 7 die Touch-Bedienung allerdings bereits von Haus aus unterst\u00fctzen, ist die Versuchung gro\u00df, die eigene Anwendung mit wenigen Aufw\u00e4nden \u201etouch-friendly\u201c zu machen. Zumeist beschr\u00e4nken sich diese Versuche allerdings darauf, die Standard GUI Elemente schlicht und einfach zu vergr\u00f6\u00dfern. Dies ist nat\u00fcrlich f\u00fcr einen seri\u00f6sen Einsatz unzureichend. Gerade an klassischen Desktop-Arbeitspl\u00e4tzen muss zun\u00e4chst einmal auf die Ergonomie der \u201eHardware\u201c geachtet werden, bevor \u00fcberhaupt die Software in Betracht gezogen wird. Andernfalls tritt aufgrund des permanenten Hochhaltens des Armes und der daraus resultierenden Erm\u00fcdung des Armes der ber\u00fchmte \u201eGorilla Arm<\/a>\u201c Effekt auf.<\/p>\n

Ist ein solch ergonomisches Hardware Setup aber nicht zu gew\u00e4hrleisten, sollte man Nutzern zumindest die M\u00f6glichkeit geben, zwischen Touch- und Mausbedienung wechseln zu k\u00f6nnen. Dies wiederum stellt aber besondere Anforderungen an die Software: GUI Elemente m\u00fcssen sowohl per Finger als auch per Maus angenehm bedienbar sein. Was das genau bedeutet, soll an einem kleinen Beispiel demonstriert werden.<\/p>\n

Folgende beiden Szenarien auf Mikro-Interaktionsebene zeigen Schritt f\u00fcr Schritt und im Vergleich, wie sich eine Combobox bei der Selektion eines Items \u00fcblicherweise verh\u00e4lt, einmal optimiert f\u00fcr Mausbedienung (links) und einmal optimiert f\u00fcr die Bedienung per Single-Touch (rechts). Wir gehen dabei von einer Combobox aus, die nur eine geringe Anzahl von Items enth\u00e4lt, so dass ein Scrollen nicht notwendig ist (wie z.B. in Pie Men\u00fcs<\/a>).<\/p>\n

Maus- und Touchbedienung einer Combobox \u2013 ein Vergleich<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Maus-Bedienung<\/td>\nTouch-Bedienung<\/td>\n<\/tr>\n
1) Initialzustand<\/td>\n<\/tr>\n
\"Initialer<\/td>\n<\/tr>\n
Die Combobox ist geschlossen und kein Item ist ausgew\u00e4hlt.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
2) MouseOver Zustand<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n<\/td>\n<\/tr>\n
Die ComboBox \u00e4ndert die Farbe und zeigt nach einer kurzen Verz\u00f6gerung einen Tooltip an, der kurz beschreibt welchen Zweck die Combobox erf\u00fcllt.<\/td>\nBei der Touch-Bedienung k\u00f6nnen Tooltips aufgrund des fehlenden MouseOver Zustands nicht realisiert werden. Auf Tooltips wird in Touch-Systemen daher oft generell verzichtet.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
3) Vorbereitung „Popup \u00f6ffnen“<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n<\/td>\n<\/tr>\n
Nach Dr\u00fccken der Maustaste wird die ComboBox ebenfalls in „gedr\u00fccktem“ Zustand visualisiert (MouseDown Ereignis)<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
4) Aufklappen des Popups mit der Auswahlliste<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n\"Icon<\/td>\n\"Finger<\/td>\n<\/tr>\n
Das Loslassen der Maustaste \u00f6ffnet das Popup mit der Elementliste (MouseUp Ereignis).<\/td>\nBereits der erste Kontakt mit dem Touchscreen \u00f6ffnet das Popup mit der Elementliste (TouchDown Ereignis).<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
5) Navigieren durch die Auswahlliste<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n\"Icon<\/td>\n\"Combobox<\/td>\n<\/tr>\n
Das Popup bleibt ge\u00f6ffnet, auch wenn die Maus die Combobox verl\u00e4sst. Erst ein Klick au\u00dferhalb der Combobox schlie\u00dft das Popup wieder. Ohne Halten der Maustaste kann nun die Auswahl erfolgen (MouseMove Ereignis). Letzteres ist zwar ein feines Details, kann aber von gro\u00dfem Vorteil sein, da das Bewegen der Maus bei gleichzeitig gedr\u00fcckter Maustaste einigen Menschen motorische Probleme bereitet.<\/td>\nEine Auswahl erfolgt \u00fcber das Wischen des Fingers zum Listenelement ohne Kontaktverlust zum Bildschirm (Wipe Ereignis). Im Gegensatz zum Bewegen der Maus bei gedr\u00fcckter Maustaste ist dies eine angenehme und nat\u00fcrliche Art der Interaktion.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
6) Auswahl eines Elements<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n<\/td>\n<\/tr>\n
Das Dr\u00fccken der linken Maustaste w\u00e4hlt ein Element aus. Das Popup bleibt weiterhin ge\u00f6ffnet (MouseDown Ereignis).<\/td>\nDieser Zwischenschritt entf\u00e4llt beim Touchscreen.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
7) Element \u00fcbernehmen<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Combobox<\/td>\n\"Icon<\/td>\n\"Combobox<\/td>\n<\/tr>\n
L\u00e4sst man die Maustaste wieder los, erscheint das \u201eangeklickte\u201c Element als Auswahl in der Combobox (MouseUp Ereignis).<\/td>\nHebt der Nutzer den Finger ab wird direkt das aktuell hervorgehobene Element als Auswahl \u00fcbernommen (TouchUp Ereignis).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Zwischenfazit<\/h2>\n

Die Auswahl eines Elementes in der Combobox ben\u00f6tigt mit der Maus einen Klick mehr. In erster Linie ist dieser Umstand mit der Unzul\u00e4nglichkeit zu begr\u00fcnden, 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\u00fctzt.<\/p>\n

Im folgenden soll gezeigt werden, wie die Combobox auf Mikrointeraktionsdesign Ebene so optimiert werden kann, dass sie sowohl <\/em>\u201emouse-friendly\u201c als auch<\/em> \u201etouch-friendly\u201c wird:<\/p>\n

Das neue Verhalten der Combobox<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<\/td>\n<\/td>\n<\/td>\n<\/tr>\n
1.1) \u00d6ffnen der Auswahlliste und Anzeige des Tooltips<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Icon<\/td>\n\"Combobox<\/td>\n<\/tr>\n
Bereits beim MouseDown\/TouchDown Ereignis sollte die Auswahlliste aufgehen. Idealerweise geht die Liste nach links versetzt auf, damit der Finger genug Platz zum Wischen \u00fcber die Liste hat, ohne dabei die Items zu verdecken. Eine Alternative w\u00e4re es, das Popup nach oben aufgehen zu lassen. Dies birgt jedoch den Nachteil, dass sich die Bewegung des Fingers ungleich unkomfortabler anf\u00fchlt, da sich der Fingernagel – je nach Oberfl\u00e4chenbeschaffenheit des Touchscreens – unangenehm vom Nagelbett abheben oder \u00fcber die Oberfl\u00e4che „stottern“ k\u00f6nnte.<\/p>\n

Bevorzugterweise sollte sich der Tooltip kurz nach dem MouseDown\/TouchDown Ereignis \u00f6ffnen, diesmal jedoch oberhalb der Combobox, da der Finger ihn sonst verdecken k\u00f6nnte.<\/p>\n

Die Items in der Auswahlliste k\u00f6nnten etwas h\u00f6her visualisiert werden, damit die Auswahl eines Items auch gut mit dem Finger zu treffen ist.<\/td>\n<\/tr>\n

<\/td>\n<\/tr>\n
1.2) Schlie\u00dfen der Auswahlliste<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Icon<\/td>\n\"Finger<\/td>\n<\/tr>\n
Die Auswahlliste schlie\u00dft sich nach einem MouseUp\/TouchUp Ereignis, ohne jedoch eine Aktion anzusto\u00dfen. Somit kann der Nutzer gefahrlos das Interface erforschen.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/td>\n<\/tr>\n
2) Auswahl eines Elements<\/td>\n<\/tr>\n
\"Icon<\/p>\n

\"Icon<\/td>\n

\"Icon<\/td>\n\"Combobox<\/td>\n<\/tr>\n
Mit gedr\u00fcckter Maustaste oder aufliegendem Finger kann der Nutzer ein Element hervorheben (Drag\/Wipe Ereignis). Wie bereits erw\u00e4hnt ist das Gedr\u00fcckthalten der Maustaste bei gleichzeitiger Mausbewegung f\u00fcr manche Menschen unkomfortabel. Doch auch f\u00fcr diese Zielgruppe funktioniert die vorgestellte L\u00f6sung: wenn die Auswahlliste wie in Schritt 1.1 ge\u00f6ffnet bleibt, auch nachdem man die Maustaste wieder gel\u00f6st hat, kann man sich zun\u00e4chst einen \u00dcberblick \u00fcber die Liste verschaffen und dann bequem mit der Maus ohne Festhalten der Maustaste zum entsprechenden Item rollen und dieses durch einen weiteren Klick ausw\u00e4hlen.<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/td>\n<\/tr>\n
3) Element ausw\u00e4hlen<\/td>\n<\/tr>\n
\"Icon<\/td>\n\"Icon<\/td>\n\"Combobox<\/td>\n<\/tr>\n
Mit dem Loslassen der Maustaste oder des Fingers wird das aktuell hervorgehobene Item als Auswahl \u00fcbernommen (MouseUp\/TouchUp Ereignis). Dabei schlie\u00dft sich die Auswahlliste wieder.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Fazit<\/h2>\n

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

Windows ist eine Marke oder eingetragene Marke
\nder Microsoft Corporation in den USA und\/oder anderen L\u00e4ndern.<\/div>\n","protected":false},"author":18,"featured_media":0,"template":"","tags":[],"class_list":["post-1330","blog","type-blog","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/18"}],"version-history":[{"count":1,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1330\/revisions"}],"predecessor-version":[{"id":11300,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1330\/revisions\/11300"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=1330"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=1330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}