Sie sind auf Seite 1von 216

Grit Schuster | Masterarbeit

MA Interaction Design | Institut für Industrial Design | FB IWID | Hochschule Magdeburg-Stendal | 10. September 2008
Masterarbeit

Grit Schuster

Interaction Design
Matrikel-Nr: 20052995
10. September 2008

Betreuung

Prof. Christine Strothotte


Prof. Carola Zwick

Hochschule Magdeburg-Stendal

FB Ingenieurwesen und Industriedesign


Institut für Industrial Design
Breitscheidstraße 2
39114 Magdeburg

Kontakt: mail@gritschuster.de
Selbständigkeitserklärung

Hiermit versichere ich, die vorliegende Arbeit selbständig verfasst und keine anderen als die ange-
gebenen Quellen und Hilfsmittel benutzt sowie Zitate kenntlich gemacht zu haben.

Grit Schuster. Magdeburg, den 10. September 2008


Danksagung

Ich danke ganz herzlich Prof. Christine Strothotte und Prof. Carola Zwick für die konstruktive und
motivierende Betreuung dieser Arbeit und für zahlreiche fruchtbare Konsultationen. Weiterhin
danke ich den Institutsmitarbeitern Jörg Schröder für die Bereitstellung meines Arbeitsplatzes
und für die Hilfe bei Fragen rund um die Elektrotechnik sowie Manfred Hensel für die tatkräftige
Unterstützung in der Werkstatt. Martin Kinzel danke ich für seinen schnellen Einsatz beim Bau
der Tischbox. Ich danke Michael Rüger für den mir zur Verfügung gestellten kompakten und
gleichsam flinken Rechner. Bei ihm und bei Bernd Eckardt gleichermaßen bedanke ich mich für
die Programmiertipps rund um Sophie. Für die Überarbeitung des OSC-Pakets für Squeak und die
hilfreiche Korrespondenz danke ich Markus Gälli und Simon Holland. Bert Freudenberg danke ich
für die Versorgung mit vielen wissenswerten Links, weil von ihm die zahlreichsten eingingen. Ich
danke weiterhin der NUI-Group und deren Community für die Bereitstellung von Tools, Wissen
und Erfahrungen, von denen diese Arbeit unbedingt profitiert hat, für die freundliche Unter-
stützung bei der Lösung von Problemen sowie für die Beantwortung grundlegender Fragen. Bei
Constanze Langer bedanke ich mich für die nützlichen Hinweise in Sachen Layout und Dokumen-
tation. Ich danke ebenso Kristin Mitschke und Annekathrin Gröninger für das ausdauernd be-
kundete Interesse hinsichtlich dem Fortschritt meiner Arbeit, für ihre Hilfsbereitschaft und für den
erholsamen Ideenaustausch bei Kaffee und Ciabatta. Meinen lieben Eltern gilt besonderer Dank
für ihre Unterstützung, ihre Geduld, ihren Zuspruch und ihr mir entgegengebrachtes Vertrauen.
Inhalt
Einleitung
1.1 Intuitive Computernutzung 8 | 1.2 Motivation 10 | 1.3 Überblick 13

Technik
2.1 Multitouch-Technologien 16 | 2.2 Realisiertes Multitouch-System 32

Recherche
3.1 Nonverbale Kommunikation 54 | 3.2 Multitouch-Anwendungen 66 | 3.3 Andere relevante Ansätze 76

Analyse
4.1 Multitouch-Gesten 94 | 4.2 Multitouch-Zeichen 128

Applikation
5.1 Zielsetzung 144 | 5.2 Konzepte 150 | 5.3 Ausarbeitung 184
Zusammenfassung
6.1 Zusammenfassung 200 | 6.2 Ausblick 201

Quellen
1 Einleitung
Intuitive Computernutzung
Einleitung


1.1 Die heute gängigsten Eingabegeräte für


Desktop-Computer sind Tastatur und Maus.
Diese Werkzeuge ermöglichen Texteingabe,
die rasche Umpositionierung des Cursors auf
dem Bildschirm sowie die Manipulation von „Hello, computer.” – Scotty spricht in „Star Trek IV: The
grafischen Elementen – wie Fenstern, Schaltflä- Voyage Home“ in eine Maus, um mit einem Computer zu
kommunizieren.
chen, Schiebereglern, Symbolen etc. – und den
Fokuswechsel zwischen diesen.

Die Maus hat sich als Single Pointing Device wohnt ist und eine neue Erfahrung darstellt, vielen Laptops integrierte Touchpad entspricht
vor allem bei nichtmobilen Computersyste- die in der realen Welt kaum eine Rolle spielt. bzgl. Mapping und Indirektheit der Maus.)
men als sehr praktisch erwiesen und weitge- Zudem weist die Eingabe mittels Maus einen
hend durchgesetzt. Obwohl die Interaktion gewissen Abstraktionsgrad auf, da der Nutzer So effizient heutige Eingabegeräte auch sein
mittels Maus effektiv ist, ist besonders bei nicht direkt mit den auf dem Bildschirm darge- mögen – betrachtet man die Interaktion mit
erwachsenen Erstnutzern zu beobachten, dass stellten Objekten interagiert, sondern indirekt einem Computersystem als einen Kommuni-
der Umgang mit diesem Eingabegerät erst über den Mauscursor. kationsvorgang, ist die Idee, Computer unter
erlernt werden muss, da die Übersetzung der Nutzung herkömmlicher zwischenmensch-
Handbewegung in die des Cursors – also das Der Einsatz von Touchscreens, die sowohl als licher Kommunikationsmittel – etwa mittels
Mapping der relativen Bewegung – unge- Anzeige- als auch als Eingabegerät – mitun- Spracheingabe – zu steuern, weitaus nahe
ter in Kombination mit einem Eingabestift liegender, als mit Eingabegeräten wie Tastatur,
– dienen, konkretisieren die Interaktion und Maus oder Stylus zu arbeiten. Wäre diese Art
»Multi-touch-sensing was designed to allow non- reduzieren damit den Lernaufwand, was den der Eingabe so weit entwickelt, wie es oft in
Vorgang intuitiver macht. Zudem ist diese Art Science-Fiction-Serien wie beispielsweise „Star
techies to do masterful things while allowing der Eingabe vor allem bei mobilen Geräten Trek“ dargestellt wird, würde sie höchstwahr-
praktischer, da sich der Einsatz einer Maus in scheinlich aufgrund ihrer Natürlichkeit bereits
power users to be even more virtuosic.« (J. Han) diesem Kontext in Ermangelung einer festen breite Anwendung finden.
Unterlage als eher hinderlich erweist. (Das in

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design




Die menschliche Kommunikation beschränkt Betrachtet man die Interaktion mit einem Die Steuerung von Computern mit Hilfe von
sich aber nicht allein auf Sprache im Sinne von Computersystem abgesehen vom Kommuni- Hand- und Fingerbewegungen, die sich nicht
akustischen Signalen. Gesten und Handbewe- kationsaspekt als Manipulationsvorgang, so nur auf eine einzelne Fingerspitze beschränkt,
gungen sind als Mittel des Informationsaus- scheint dieser mittels einem Single Pointing könnte aufgrund des vergrößerten Handlungs-
tauschs älter und zum Teil universeller. Device – sei es Maus, Stylus, Finger, Joystick raums, der vertraute Motorik und Gestik der  Zu Beginn der Sprachevolution des Menschen standen
Treffen zwei Menschen mit unterschiedlicher oder Trackball – im Vergleich zu den Mög- realen Welt besser abbildet, eine einfachere Gesten und Gebärden – das gesprochene Wort erlernten
die Urmenschen frühestens vor 1,8 Millionen Jahren.
Muttersprache aufeinander, so verständigen lichkeiten der Objektmanipulation in der und unmittelbarere Art der Interaktion darstel-
}}} [Kir07] |||
sie sich notfalls „mit Händen und Füßen“. realen Welt als höchst unzureichend. Wenn len, als sie es zur Zeit mit gängigen Einga-
Davon ausgehend ist die Entwicklung einer der Mensch einen Gegenstand bearbeitet, begeräten ist. Die intuitive und komfortable
Art Eingabe-Zeichensprache denkbar, die die so benutzt er in der Regel mehr als nur eine Benutzung des Apple iPhone – neben dem
Anforderung, intuitiv zu sein, dank ihrer Natür- Fingerspitze. Gerade der Daumen, der den an- Apple iPod Touch das erste massentaugliche
lichkeit und Direktheit erfüllt. deren Fingern physiologisch gegenüber steht, Multitouch-Device auf dem Markt – mittels
macht die menschliche Hand zu einem vielsei- (Zwei-)Finger-Gesten scheint diese Annahme
tig einsetzbaren Greifwerkzeug, das von Natur zu bestätigen.
aus sogar als Paar „daherkommt“. Der Wunsch
liegt nahe, das zur Verfügung stehende
„Hand-Paar“, das in der realen Welt tagtäglich
zum Einsatz kommt, auch als Eingabemittel für
Computersysteme und computergesteuerte
Geräte voll zu nutzen.

Bildskalierung mittels zweier Finger am Apple iPhone.


}}} http://www.apple.com/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Motivation
10

Daten-Navigation in der Zukunft?


}}} „Minority Report“, 2002 |||

1.2 Multitouch ist als Eingabetechnologie in


jüngster Zeit in aller Munde. Darunter versteht
man die Eingabe durch Berührung eines
Spätestens seitdem jedoch das Apple iPho-
ne auf dem Markt ist, erreicht das Thema
Multitouch eine breite Öffentlichkeit. Weitere
Touchscreens oder eines Touchpads mit den Hard- und Software-Entwickler „ziehen nach“,
Fingern – und zwar mit mehreren Fingern indem sie ebenfalls Produkte anbieten (MS
gleichzeitig. Die Idee ist nicht so neu, wie Surface, Dell Latitude XT) oder zumindest  Microsoft Surface ist ein Tabletop-System, das in
es die zum Teil euphorischen Beiträge zum ankündigen. Diese Karenzzeit von ca. 25 bis öffentlichen Geschäften zum Einsatz kommt.
}}} http://www.microsoft.com/surface |||
Thema in der aktuellen Fachpresse vermuten 30 Jahren von ersten Forschungsprojekten bis
 Dell bietet mit dem Latitude XT ein Multitouch-Note-
lassen. Bereits in den frühen 1980er Jahren zur Vermarktung massentauglicher Anwen-
book an. }}} http://www.dell.com |||
wurden innerhalb verschiedener Forschungs- dungen entspricht in etwa dem Zeitraum, den
gruppen Prototypen von Multitouch-Pads und die Maus brauchte, um sich – anfangs ein
 Die Input Research Group der University of Toronto -Screens gebaut und die Interaktionsform unhandlicher Holzklotz – zu einem weithin  Mehr zur Geschichte der Maus findet sich auf der
baute 1984 ein kapazitives Multitouch-Pad, zur gleichen wissenschaftlich erforscht und beschrieben. genutzten Standard-Eingabegerät zu entwi- MouseSite – ein Sammelsurium von Material von und
Zeit entwickelten Bell Labs in Murray Hill, New Jersey ein über Douglas C. Engelbart und seine Kollegen im Stan-
ckeln. Zieht man also Parallelen zur Geschichte
Multitouch-Display. ford Research Institute in den 1960er Jahren.
der Maus, so kann man annehmen, dass sich
}}} http://www.billbuxton.com/multitouchOverview. }}} http://sloan.stanford.edu/MouseSite/ |||
html ||| die Multitouch-Eingabe auch zu einem Einga-
be-Standard entwickeln kann.

Die Apple Mighty Mouse.


Vom ersten Prototypen Anfang der 1960er Jahre von Bis heute unterliegt das Eingabegerät Maus einer ständigen
Douglas C. Engelbart bis zur ersten kommerziell erfolg- Metamorphose – sowohl in technischer als auch in
reichen Maus am Macintosh 1984 von Apple vergingen ca. ergonomischer Hinsicht. Die Grundform und vor allem die
20 Jahre. Grundfunktion eines Pointing Device ist jedoch nach wie
}}} http://www.cc.gatech.edu/classes/cs6751_97_fall/ vor die gleiche.
projects/follow_me/hw4/douglas.html ||| }}} http://www.apple.com/ |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


11
Zukunftsszenario Multitouch.
}}} „The Matrix Reloaded“, 2003 ||| »Tap is the new click.« [Saf08]

Vor allem Jefferson Han, der am Courant Die Anwendungen für diese Technologie sind Das steht in einem starken Gegensatz zu dem  Jeff Hans Homepage der NYU
Institute of Mathematical Sciences an der New allerdings oft noch sehr einseitig, beschränken aktuellen „Hype“, der den Eindruck erweckt, }}} http://www.cs.nyu.edu/~jhan/ |||
Perceptive Pixel – von Jeff Han gegründet
York University einen relativ billigen Prototypen sich zuweilen schlicht auf visuelle Effekte oder Multitouch sei der Eingabestandard der Zu-
}}} http://www.perceptivepixel.com/ |||
eines Multitouch-Screens gebaut, verschiedene werden gelegentlich beliebig verwendet, um kunft und werde damit die zur Zeit gängigsten
Jeff Hans beeindruckende Demo auf ted.com
Interaktionsmöglichkeiten untersucht und die Technik ihrer selbst Willen vorzuführen. Eingabegeräte Maus und Tastatur verdrängen. }}} http://www.ted.com/index.php/talks/view/id/65 |||
seine Ergebnisse auf beeindruckende Weise Sinnfällige Anwendungen, in denen Mul- Diese These gilt es zu hinterfragen, auch
präsentiert hat, machte das Thema Multi- titouch-Eingabe einen Mehrwert bietet, der so- wenn oder gerade weil die Multitouch-Einga-
touch-Input unter Informatikern, Interaktions- fort ins Auge springt, sind noch rar gesät. Die be sofort aufgrund ihrer Direktheit und ihrer
Designern und „Hardware-Bastlern“ populär. oft sehr spezifischen Anwendungen verwen- Natürlichkeit fasziniert.
Unzählige ambitionierte Entwickler in For- den in der Regel nur wenige Gesten in einem
schungsgruppen beschäftigen sich seither ver- sehr begrenzten Interaktionskontext. Dass diese Eingabetechnik neue Interaktions-
stärkt mit der Technik und ihrer Anwendung. möglichkeiten gegenüber traditionellen Ein-
Auf Messen und anderen Veranstaltungen, Zeigegeräten eröffnet, steht dabei außer Fra-
bei denen interaktive Installationen ausgestellt ge. Wichtig ist die Untersuchung dieser neuen
werden, sind zunehmend Multitouch-Screens Möglichkeiten hinsichtlich ihrer Sinnfälligkeit.
in verschiedenen Ausprägungen zu besichtigen
und zu berühren.
Jeff Hans Prototyp in Aktion
}}} http://www.ted.com/ |||
}}} http://www.cs.nyu.edu/~jhan/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Motivation
12

»Every device is best for something and worst for something else.« [Bux02]

Dieses Zitat von William Buxton, der seit So haben sich Maus und Tastatur für die Bedie- Demzufolge ist es wahrscheinlicher, dass die
einigen Jahrzehnten Eingabeparadigmen nung der gängigen Betriebssysteme und vieler Multitouch-Eingabe zu einem erfolgreichen
untersucht, drückt den Umstand aus, dass Applikationen als adäquat erwiesen. In einigen Werkzeug in bestimmten Anwendungskon-
ein bestimmtes Eingabegerät hinsichtlich der Anwendungen jedoch – besonders in Grafik- texten wird, ohne dabei bewährte Geräte
Qualität seiner Nutzbarkeit nicht zu pauschali- programmen – kann sich der Nutzer mit Stylus vollständig zu ersetzen. Welche Anwendungs-
sieren ist. und Tablet eloquenter ausdrücken. kontexte das genau sind, ist zu erforschen.

Verschiedene Werkzeuge eignen sich für bestimmte Vorgänge besser oder schlechter – auch wenn es wie hier immer darum geht, etwas zu zerteilen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Überblick
13

1.3 Im Rahmen dieser Masterarbeit erfolgt


eine Analyse der Multitouch-Eingabe und
die Entwicklung eines Repertoires für diese
Eingabe optimiert ist. In diesem Kontext wird
ein Gestenvokabular zur Textbearbeitung,
Textformatierung und direkten Manipulation
Interaktionsform. Es werden verschiedene grafischer Objekte zusammengestellt. Anhand
Möglichkeiten des Mappings von Gesten auf dieses Beispiels werden das Potential und
Funktionen untersucht und Schlussfolgerungen die Nutzbarkeit der Multitouch-Interaktion
gezogen, was für Gesten sich für welche Funk- ausgelotet.
tionstypen eignen. Damit wird ein Werkzeug
geliefert, auf dessen Grundlage es möglich ist, Das entwickelte Konzept wird prototypisch
sich strukturiert der Suche nach passenden umgesetzt, wobei ein selbst gebautes Mul-
Applikationen zu nähern, für die diese Art der titouch-Tischsystem als Setup dient. Parallel
Interaktion einen echten Mehrwert bietet. bietet diese Arbeit einen Überblick über den
Bau dieses Systems und über andere techno-
Es wird darüber hinaus eine konkrete An- logische Möglichkeiten zur Umsetzung eines
wendung entwickelt, die auf die Multitouch- Multitouch-Interface.

Masterarbeit „Multitouch Input“ | Grit Schuster


2 Technik
Multitouch-Technologien

Technik Multitouch-Vorreiter
16

2.1 In diesem Kapitel werden zunächst verschie-


dene Multitouch-Technologien vorgestellt. Im
Anschluss daran, gehe ich auf den Aufbau
An dieser Stelle erfolgt ein kurzer Überblick
über die Entwicklung von Multitouch-Einga-
begeräten. Eine profunde Übersicht findet sich
Die Eingabe mittels dieses Keyboards zusam-
men mit der Maus ist für Geübte äußerst effizi-
ent und mächtig, jedoch ist das Chord-System
 William Buxton ist zur Zeit bei Microsoft Research tätig und die Funktionsweise des im Rahmen dieser auch auf der Homepage von Bill Buxton. für den Durchschnittsnutzer extrem kryptisch
und ist erfahrener Forscher und Entwickler für natürliche Arbeit entstandenen Multitouch-Tisches ein. und sehr schwierig zu lernen, weshalb es sich
Mensch-Computer-Interaktion.
Das multitouchfähige Eingabegerät, das wohl nicht durchgesetzt hat.
}}} http://www.billbuxton.com/multitouchOverview.
Im Allgemeinen funktionieren Touchscreens jedem Computernutzer geläufig ist, ist die
html/ |||
oder -pads, indem sie die Änderung von Tastatur: Die so genannten Modifier-Tasten
Parametern mit Hilfe von Sensoren registrieren, (Shift, Ctrl, Alt etc.) werden stets in Kombi-
sobald der Nutzer das Gerät mit seinem Finger nation mit anderen Tasten gedrückt. Dieser
oder einem Stylus berührt. Dabei kann es sich Mechanismus – der auch dem der Schreibma-
je nach Technologie um elektrischen Strom, schine entspricht – hat sich gut bewährt, ist
um reflektierte Ultraschall-, Infrarot- oder für unproblematisch ausführbar und ermöglicht
uns sichtbare Lichtwellen handeln. eine effizientere Tastenbelegung.

Die unterschiedlichen Technologien eignen In den 1960er Jahren trieb Douglas Engelbart
sich mehr oder weniger für Multitoucheinga- die Idee der Tastenmehrfachbelegung auf die
ben. Hier werden nur multitouchfähige Tech- Spitze und entwickelte ein 5-Tasten-Keyboard,
nologien vorgestellt und ihre Funktionsweise das nur mit einer Hand bedient insgesamt 31
beschrieben. Darunter finden sich kapazitive Zeichen abdeckte, und zwar mittels Akkorden
 Das oN-Line System – kurz NLS – hat sich nicht durch- Screens, Stereo-Kamera-Systeme, Diffused – so genannter Chords. Das oN-Line-System
gesetzt – weil die Chords sehr schwierig zu lernen sind. Illumination oder Frustrated Total Internal sollte mit der linken Hand zur Artikulation von
}}} http://www.bootstrap.org/chronicle/pix/pix.html |||
Reflection. Commands genutzt werden, während die
rechte Hand die Maus bedient.
Das von Douglas Engelbart entwickelte oN-Line-Sytem
erwies sich trotz hoher Effizienz und Mächtigkeit als zu
schwierig zu lernen und war sehr unintuitiv in der Nutzung.
}}} http://www.bootstrap.org/ |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


17

Das erste Multitouch-System, bei dem es sich Myron Krueger et al. entwickelten Anfang
tatsächlich um einen Screen und nicht um dis- der 1980er Jahre ein kamerabasiertes System,
krete Tasten handelt, war das Flexible Machine mit dem mehrere Nutzer gleichzeitig durch
Interface, das 1982 in der Masterarbeit von Körper-, Hand- und Fingergesten interagieren  Das Flexible Machine Interface besteht aus einer
Nimish Mehta an der University of Toronto konnten. Videoplace war zwar kein Touch- Milchglasplatte mit Projektor. Dahinter befindet sich eine
Kamera, die die dunklen Berührungspunkte auswertet
beschrieben wurde. Als Anwendungen wurden System, wird aber hier aufgeführt, weil ohne
und von deren Größe auf den Berührungsdruck schließt.
ein Malprogramm und simple Grafikmanipula- Zuhilfenahme von Eingabeinstrumenten ein
}}} Mehta: „A Flexible Machine Interface“, 1982.
tion umgesetzt. breites Spektrum an Gesten eingesetzt werden [Meh82] |||
konnte und es damit als eine der ersten ges-
tenbasierten Installationen ein natürlich anmu-
tendes Interaktionserlebnis bot. Die Autoren  Videoplace kombiniert die Live-Videoaufnahme des
betonen schon damals, wie wichtig es sei, die Nutzers mit der Computerwelt, in der grafische Objekte in
Echtzeit auf die Bewegungen des Nutzers reagieren.
Die Tastenbelegung des NLS folgt dem binären Zahlen- Mechanismen des Mensch-Computer-Interface
}}} Krueger et al.: „Videoplace – An Artificial Reality“,
system, welches auf das Alphabet abgebildet wird. Es wird zu hinterfragen.
1982. [Kru85] |||
dabei keine Rücksicht Usability-Aspekte wie die Denkweise
oder kognitiven Fähigkeiten des Nutzers oder auf Häufig-
keiten bestimmter Buchstaben oder Buchstabenkombinati-
onen genommen.
}}} http://www.bootstrap.org/ |||

Schnappschüsse aus der Anwendung Critter für


Videoplace, in der der Nutzer das Verhalten einer virtuellen
Kreatur durch seine Gestik beeinflusst.
}}} [Kru85] |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

18

 Die Input Research Group in Toronto baute bereits 1985 beschreiben Lee et al. ein drucksensi- 1991 veröffentlichte Pierre Wellner vom Com-
1984 ein kapazitives Multi-Touchpad, das auch drucksen- tives Multitouch-Pad, das in der Input Research puter Laboratory der University of Cambridge
sitiv war.
Group der University of Toronto entwickelt in Zusammenarbeit mit Rank Xerox Euro-PARC
}}} Lee et al.: „A Multi-Touch Three Dimensional Touch-
wurde. Das Pad beinhaltet eine Matrix von DigitalDesk, ein Multitouch-System mit  DigitalDesk war ein frühes Multitouch-System mit
Sensitive Tablet“, 1985. [Lee85] |||
Sensoren, die die Änderung einer kapazitiven Top-Down-Projektion, das den realen Schreib- Frontprojektion, das konzeptionell die digitale Welt
sinnfällig mit der physischen verbinden sollte.
Spannung bezüglich einer Referenzspannung tisch mit dem virtuellen verschmelzen sollte.
}}} Wellner: „The DigitalDesk Calculator: Tactile Mani-
messen, die bei Berührung eintritt. Dabei Eine Kamera wertete Handbewegungen und
pulation on a Desk Top Display“, 1991. [Wel91] |||
findet eine Interpolation der Messungen aufgelegte reale Dokumente aus, deren Inhalte
benachbarter Sensoren statt, um den Mit- somit auch digital verarbeitet werden konnten.
telpunkt jeder Berührung möglichst exakt zu Zusätzlich gaben akustische Sensoren dem Sys-
bestimmen. tem Auskunft darüber, wann der Screen ange-
tippt wurde. Der Autor betont die Möglichkeit,
 An dieser Stelle lediglich eine Sekundärquelle: Zur gleichen Zeit entwickelten Bell Labs in digitale Dokumente genau wie physische taktil DigitalDesk hat übrigens als eines der ersten
}}} http://www.billbuxton.com/multitouchOverview. Murray Hill, NJ einen kapazitiven Multitouch- und nebeneinander zu manipulieren. Nicht Systeme die heute üblichen Multitouch-Ges-
html/ |||
Screen, bei dem transparente kapazitive Sen- umsonst heißt sein Desktop „Desk Top“ – die ten für das Skalieren von grafischen Objekten
soren vor einem CRT-Monitor fixiert wurden. physische Tischoberfläche im wörtlichen Sinne. beschrieben.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


19

1992 brachte Wacom Grafiktabletts auf den Dieser geschichtliche Abriss ist keinesfalls
Markt, die multipoint-fähig waren. Sie wurden vollständig, sondern soll nur einen Eindruck
zweihändig bedient: Mit einem Stylus, dessen geben, wie lange schon in der Richtung Mul-
Berührungsdruck gemessen werden konnte, titouch-Eingabe geforscht wird. Seit circa 25
und mit einem Maus-artigen Puck. Spätere Jahren werden verschiedene Technologien ver-
Modelle (Intuos, 1998, 2001) konnten zusätz- feinert, um diese Art der Mensch-Computer-
lich die Neigung des Stylus in x- und y-Rich- Interaktion zu ermöglichen. Daneben werden
 William Buxton beschreibt in diesem Zusammenhang tung messen – neben der Messung des Posi- Forschungen hinsichtlich möglicher Interak-
kurz die Zusammenarbeit seiner Arbeitsgruppe mit tions- und Rotationswertes des Pucks. Solch tionsparadigmen angestellt, auf die hier gar
Wacom und Alias / Wavefront unter:
ein Signalreichtum ist erforderlich, will man nicht eingegangen wurde. Näheres dazu findet
}}} http://www.billbuxton.com/multitouchOverview.
komplexe physische Instrumente überzeugend sich in Kapitel 3 „Recherche“ dieser Arbeit.
html/ |||
simulieren, z. B. eine Airbrush-Pistole.
Auf den folgenden Seiten werden Multitouch-
Technologien beschrieben, die aktuell relevant
sind. Dabei wird näher auf die Funktionsweise
dieser Systeme eingegangen und parallel wer-
den Beispiele für die Umsetzung der jeweiligen
Technologien genannt.

In diesem Zukunftsszenario aus dem Jahr 1991 wird


dargestellt, wie Inhalte einfach von physischen in digitale
Dokumente überführt werden. Dabei wird durch das
Aufziehen eines Rechtsecks mit den Fingern ein Abschnitt
im Papierdokument selektiert und die Selektion durch eine
Drag-Bewegung in das digitale Dokument kopiert. Bemer-
kenswert hierbei ist die Integration von Funktionalitäten
der digitalen Welt in einen physischen Kontext.
}}} http://www.idemployee.id.tue.nl/g.w.m.rauterberg//
Movies/digital_desk.mpeg |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

Kapazitiver Screen – Apple iPhone


20

In kapazitiven Touchscreens befindet sich eine Aus der Funktionsweise ergibt sich, dass nur dieses Gitters verhalten sich die übereinander
Kondensatorschicht (zwei voneinander durch Berührungen mit leitfähigen Gegenständen liegenden Leiter wie einzelne Kondensatoren,
eine nicht leitende Schicht getrennte Leiter- wahrgenommen werden können. Deshalb an denen unabhängig voneinander Span-
platten: ein Sender und eine Antenne), an die funktioniert beim iPhone, das für Fingerein- nungsänderungen gemessen und ausgewertet
eine Spannung angelegt ist. Die Kondensator- gabe konzipiert ist, keine Eingabe mit einem werden können. So ist mit der kapazitiven
schicht speichert diesen elektrischen Strom. Stylus aus bspw. Kunststoff. Technik Multitouch-Eingabe möglich.
Sobald der Nutzer den Screen mit seinem
Finger berührt, wird ein Teil des Stroms vom Die Signaländerung variiert mit der Entfernung
geerdeten Körper abgeleitet, wodurch die des Fingers vom Screen (je näher desto stärker)
Spannung in der Schicht an der Berührungs- und der Berührungsfläche (je größer desto
position am stärksten sinkt. An den Ecken des stärker). Diese zusätzlichen Parameter können
Screens befinden sich Schaltkreise, die diese für die Interaktion ausgenutzt werden.
Abnahme messen. Aus den Differenzen dieser
vier Messungen wird dann die Position der Für das iPhone wurde diese Technologie
stärksten Entladung, also des Berührungser- weiterentwickelt, um Multitouch-Eingaben zu
eignisses, berechnet. Besteht die kapazitive ermöglichen. Mehrere längliche Elektroden
Schicht aus transparenten Materialien, ist es sind in der kapazitiven Schicht in einer gitter-
möglich, das Display dahinter zu positionieren. förmigen Matrix angeordnet. An jedem Punkt

Der multitouchfähige Screen des Apple iPhone besteht aus


folgenden Schichten:
Einer Schutzschicht (protective shield),
einer Kondensatorplatte (capacitive touch panel) mit
Eine detailliertere Abbildung der Schichten in einem
elektrischem Feld (electrical field) und
kapazitiven Multitouch-Screen: Hier sieht man deutlich die
einer TFT-LCD-Anzeige (TFT LCD display).
sich kreuzenden Sende- und Empfängerelektroden.
}}} http://www.apple.com/ |||
}}} http://electronics.howstuffworks.com/ |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Kapazitiver Screen – Merl DiamondTouch
21

 DiamondTouch wurde in den Mitsubishi Electric Neben dem iPhone existieren noch weitere nale, die der Nutzer durch die Berührung des
Research Laboratories in Cambridge, MA USA entwickelt. – ältere – Multitouch-Screens, die auf der Screens mit seinem Finger ableitet, an einen
}}} Dietz & Leigh: „DiamondTouch: A Multi-User Touch
kapazitiven Technik basieren. Dazu gehören Empfänger weiterleitet. Die gemessene Kapa-
Technology“, 2001. [Die01] |||
DiamondTouch und SmartSkin. zität ergibt sich aus einer Kombination aus der
}}} http://diamondtouch.merl.com/ |||
Kapazität zwischen berührendem Finger und
 SmartSkin entstand in den Sony Computer Science Bei DiamondTouch handelt es sich um ein Screen und der Kapazität zwischen Nutzer und
Laboratories. Multi-User-Tabletop-System mit Topdown- Stuhl. Dabei hängt die erstgenannte von der
}}} Rekimoto: „SmartSkin: An Infrastructure for Projektion, das in der Lage ist, die einzelnen Touchposition des Fingers auf dem Screen ab
Freehand Manipulation on Interactive Surfaces“, 2002.
Nutzer voneinander zu unterscheiden. Das (welche Antenne wird berührt) und die letztere
[Rek02] |||
}}} http://ftp.csl.sony.co.jp/person/rekimoto/smartskin/ funktioniert, indem jeder Nutzer auf einem davon, auf welchem Stuhl der Nutzer sitzt
||| leitenden Stuhl sitzt, der die elektrischen Sig- (Nutzeridentität).

Ein Schema der Funktionsweise von DiamondTouch und ein


Besprechungsszenario.
}}} http://diamondtouch.merl.com/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

Kapazitiver Screen – Sony SmartSkin


22

SmartSkin ist auch ein Tabletop-System mit Zusätzlich nutzt SmartSkin nicht leitende
Topdown-Projektion, bei der die Möglichkeit Objekte, die teilweise mit einer Kupferschicht
ausgenutzt wird, den Abstand des Fingers in einem zusammenhängenden charakteristi-
zum Screen aus dem gemessenen elektrischen schen Muster beklebt sind. Greift der Nutzer
Signal abzuleiten. Eine Kapazitätsänderung tritt solch ein Objekt auf dem Screen (um es zu
ab einer Entfernung von 5-10 cm ein. Somit ist erden), kann das System Art, Lage und Aus-
eine Simulierung von Button-Press- und But- richtung des Objekts erkennen und auswerten.
ton-Release-Status möglich – eine Emulierung So wird SmartSkin zu einem Tangible Interface,
der Maus-Interaktion. mit dem der Nutzer gleichzeitig mit Finger-
und Handgesten in Verbindung mit getaggten
physischen Objekten interagieren kann.

SmartSkin erkennt auch Finger, die sich knapp über dem


Screen befinden und zieht aus dem gemessenen Signal
Rückschlüsse auf die Entfernung.
}}} http://ftp.csl.sony.co.jp/person/rekimoto/smartskin/
|||

SmartSkin integriert leitende Objekte, die das System


anhand ihrer kapazitiven Eigenschaften erkennt – wenn der
Nutzer das Objekt berührt – und entsprechend reagiert.
}}} http://ftp.csl.sony.co.jp/person/rekimoto/smartskin/
|||

SmartSkin: Eine spielerische Beispielanwendung.


}}} http://ftp.csl.sony.co.jp/person/rekimoto/smartskin/
|||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Die DRI-Technik wird übrigens u. a. bereits 1997 in
[Mat97] und 2001 in [Rin01] beschrieben.
}}} Matsushita & Rekimoto: „HoloWall: Designing a
Finger, Hand, Body, and Object Sensitive Wall“, 1997.
[Mat97] |||
}}} Ringel et al.: „Barehands: Implement-Free Interac-
Diffused Rear Illumination – Microsoft Surface tion with a Wall-Mounted Display“, 2001. [Rin01] |||
23

Bei Microsoft Surface handelt es sich um ein MS Surface ist ein Vision-basiertes System. Neben Fingerberührungen erkennt Surface
geschlossenes Tabletop-System mit einem Das bedeutet, die Interaktion auf dem Display auch bestimmte Objektformen und so genann-
30-Zoll-Display, das seit 2008 in einigen AT&T wird mittels Bildverarbeitung ausgewertet. te Domino-Tags, die von Microsoft zu diesem
Einzelhandlungen und in Kasinos in den USA Zu diesem Zweck befinden sich innerhalb Zweck entwickelt wurden. Mit diesem Feature
zum Einsatz kommt und demnächst auch in der Tischbox fünf Kameras, deren Sichtbe- in Kombination mit der integrierten Bluetooth-
weiteren Läden, Restaurants, Hotels und ande- reiche zusammen die gesamte Displayfläche bzw. Wi-Fi-Verbindung setzt Microsoft interes-
ren öffentlichen Einrichtungen zur Verfügung abdecken. Die Technik, die hier verwendet sante Interaktionsszenarien um: Mobile Geräte
stehen soll. Der Verkauf an Endverbraucher ist wird, heißt Diffused Illumination (DI). Der mit einer drahtlosen Schnittstelle wie Digital- MS Surface besteht aus folgenden Komponenten:
nach Angaben von Microsoft erst in mehreren innere Boxbereich wird komplett mit IR-Licht kameras oder Mobiltelefone werden, wenn 1_Acrylplatte mit Diffuser
2_Intel Core 2 Duo Prozessor, 2GB RAM, 256 MB Grafik-
Jahren geplant. ausgeleuchtet. Wird der Screen von außen sie auf dem Display abgelegt werden, erkannt,
karte, Ethernet, Bluetooth & Wi-Fi zur Kommunikation mit
berührt, wird dieses Licht zurück reflektiert. und um das Gerät herum tauchen z. B. dort
externen Geräten, erweitertes MS Windows Vista
Dies nehmen die IR-Kameras als helle Blobs gespeicherte Bilder auf dem Tischdisplay auf 3_IR-LED-Lichtquelle, 850 nm
wahr. Eine Bildverarbeitungssoftware wertet und können direkt mit den Fingern verscho- 4_fünf Infrarotkameras, Nettoauflösung 1280 x 960
die Kamerabilder aus und ordnet die hellen ben und skaliert werden. Durch Auflegen 5_DLP-Projektor, Auflösung 1024 x 768
Bereiche Berührungspunkten zu. mehrerer mobiler Geräte können (Bild-) Daten }}} http://www.popularmechanics.com/ |||

Surface zu Hause – liegt wohl noch in einiger Ferne. einfach zwischen ihnen ausgetauscht werden,
}}} http://www.microsoft.com/surface ||| indem die angezeigten Bilder mit dem Finger
zu demjenigen Gerät geschoben werden. In
diesem Szenario, in dem Bilder „aus“ einem
physischen Gerät fallen und in ein anderes
„hineingeschoben“ werden können, scheinen
digitale Daten für den Nutzer greifbar und
werden so Teil unserer realen Objektwelt.

Die Abbildung illustriert das Prinzip von DI


(rear illumination)
}}} http://iad.projects.zhdk.ch/multitouch |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

Diffused Front Illumination – MTmini


24

 Bauanleitung, Software und Tipps zum MTmini Eine erstaunlich einfache, billige und schnelle Benutzt man mit DFI eine IR-Kamera, ist diese
}}} http://ssandler.wordpress.com/MTmini/ ||| Methode, sich ein Multitouch-Pad zu bau- Technik auch bedingt mit Rückprojektion
en, ist mittels Diffused Front Illumination. geeignet – also nicht nur als Multitouch-Pad,
Man braucht dazu eine Kamera (muss keine sondern auch als Multitouch-Screen. Da aber
IR-Kamera sein), eine oben offene Box, eine die Umgebung dabei sehr hell sein muss, er- Die MTmini-Version von Touchlib integriert in ihrer Filter-
transparente Scheibe (Glas, Plexiglas oder scheint die Projektion mit einem durchschnitt- kette eine Bildinvertierung (drittes Fenster „invert2“), so
dass aus dunklen Blobs vor hellem Grund helle Blobs vor
anderer Kunststoff) und ein Blatt Papier. Die lichen Projektor zwangsläufig nicht besonders
dunklem Grund werden.
Kamera wird am Boden der Box nach oben brillant.
gerichtet fixiert, und auf die Box legt man die
Scheibe, auf der das Papier befestigt ist. Ist das
Umgebungslicht hell und diffus genug, sieht
die Kamera die Fingerberührungen auf dem
Blatt als dunkle Bereiche. Genau diese Bereiche
können dann mittels Bildverarbeitung selektiert
und getrackt werden.

Seth Sandler stellt auf seinem Blog diese


Technik – sein MTmini – vor und stellt die
dazugehörige Software samt ausführlicher
Dokumentation zur Verfügung. Er nutzt Touch-
lib (Siehe Abschnitt 2.2 „Die Software“), das
eigentlich für FTIR (siehe nächste Seite) und
DRI (siehe vorige Seite) gedacht ist, indem er
das Kamerabild einfach invertiert, so dass die
dunkelsten Bereiche zu den hellsten werden.

Mit einer Pappschachtel und einigen Handgriffen ist


MTmini in wenigen Minuten nachgebaut.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Treffen Lichtwellen von einem transparenten Material Frustrated Total Internal Reflection – J. Han
auf die Grenzfläche eines anderen transparenten Materi- 25
als, dann werden sie gebrochen. Die Brechung hängt von
der Brechzahl (auch „Brechungsindex“) der Materialien
Jefferson Han hat Multitouch-Eingabe mittels Durch Anbringen eines Diffusers auf der Rück-  Jeff Hans Paper über FTIR
ab, die ein Maß für deren optische Dichte darstellt. Licht,
Frustrated Total Internal Reflection populär ge- seite der Platte – was allerdings eine Disparität }}} Han: „Low-Cost Multi-Touch Sensing through Frus-
das von einem optisch dichteren Material in ein optisch
trated Total Internal Reflection“, 2005. [Han05] |||
dünneres Material übergeht (z. B. von Glas nach Luft), macht. FTIR ist ein physikalisches Phänomen, zwischen Interaktionsebene und Displayebene
Jeff Hans Homepage der NYU
wird vom Einfallslot weg gebrochen, d. h. der Brechungs- bei dem Totalreflektion unterbunden wird. abhängig von der Plattendicke hervorruft
}}} http://www.cs.nyu.edu/~jhan/ |||
winkel ist größer als der Einfallswinkel. Überschreitet der – kann an die Scheibe von hinten projiziert Perceptive Pixel
Einfallswinkel den Wert, bei dem der Brechungswinkel
Bei der FTIR-Technik wird IR-Licht seitlich in werden. }}} http://www.perceptivepixel.com/ |||
90° beträgt, also entlang der Grenzfläche verläuft, so
eine Acrylglasplatte eingestrahlt. Bei einer Jeff Hans beeindruckende Demo auf ted.com
kann das Licht die Grenzfläche nicht mehr durchdringen
Brechzahl von 1,5 werden alle Lichtstrahlen Auf der puren Acryloberfläche werden Berüh- }}} http://www.ted.com/index.php/talks/view/id/65 |||
und wird komplett reflektiert, wobei der Reflektionswinkel
gleich dem Einfallswinkel ist. Dieses Phänomen der To- innerhalb der Platte total reflektiert, deren rungen nur gut erkannt, wenn der Kontakt
talreflektion (Total Internal Reflection, TIR), das ab einem Einfallswinkel größer als ca. 42° ist. Im opti- sehr eng ist. Probleme gibt es bei Handschu-
bestimmten Einfallswinkel („Grenzwinkel“) auftritt, wird z.
malen Fall, wird das Platteninnere von IR-Licht hen, Styli und bei trockener Haut – besonders
B. bei Lichtleitern wie Glasfaserkabeln ausgenutzt.
durchflutet. bei Drags. Eine praktikable Schichtung wird in
Abschnitt 2.2 dieser Arbeit vorgestellt.
Berührt nun eine Fingerspitze die Displayober-
fläche, wird der sie treffende Lichtstrahl nicht
mehr durch die Grenzfläche zur Luft, sondern
direkt vom Finger reflektiert – und zwar zur
Displayrückseite hinaus. Die Totalreflektion
wird also gestört – „frustrated“. Eine IR-Kame-
ra hinter dem Display nimmt diese Berüh-
rungen als helle Blobs wahr und Bildverarbei-
Ist der Einfallswinkel beta kleiner als der Grenzwinkel tungssoftware kann diese dann detektieren
(gelb), so wird das Licht in das optisch dünnere Mate- und tracken.
rial (Luft) gebrochen. Ist beta jedoch größer als dieser
Grenzwinkel (ganz rechts), so kommt es zur Totalreflektion
Das System ist zwar nicht drucksensitiv, aber
– der Grund, warum das seitlich eingestrahlte IR-Licht die
Acrylplatte nicht verlässt – bis eine Berührung diese TIR über die Blobgröße kann man Rückschlüsse
stört – „frustrate“ – und das Licht nach hinten austritt. auf den ausgeübten Druck ziehen. Jeff Han stellt sein Multitouch-System 2006 auf der TED- Die Abbildung illustriert das Prinzip von FTIR
}}} http://www.geogebra.org ||| Konferenz vor – und löst weltweit Begeisterung aus. }}} http://iad.projects.zhdk.ch/multitouch |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Stereo-Kamera-Systeme – Microsoft / EON TouchLight
26

Abbildungen oben: Bei TouchLight, das von Microsoft patentiert für den Nutzer sichtbaren Projektion – und so die Aufnahme hoch aufgelöster Scans und
Die Demo zeigt links, dass Objekte nahe am Display wurde und inzwischen von EON Reality auch Bewegungen des Nutzers auswerten, damit die Digitalisierung von Dokumenten, die
vom System erkannt werden – helle Bereiche sind die
weiter entwickelt wird, handelt es sich um ein die kurz vor dem Display ausgeführt werden. auf das Display aufgelegt werden.
Übereinstimmungen der beiden Kamerabilder. Rechts ist die
Stereo-Kamera-System, bei dem zwei horizon- So kann der Nutzer „in der Luft“ interagieren,
Digitalisierung eines Dokuments durch Auflegen zu sehen.
}}} http://research.microsoft.com/~awilson/touchlight tal versetzte Videokameras die Interaktion des ohne unbedingt das Display berühren zu müs- Die Befestigung eines Mikrofons am Screen
||| Nutzers auswerten. In dem System wird von sen. Aufgrund der binokularen Disparitäten ermöglicht zusätzlich eine Klopf-Interaktion
hinten auf eine transparente holographische in den Stereobildern kann das System auf die mit dem System.
 TouchLight wurde innerhalb einer Arbeitsgruppe von Schicht (DNP HoloScreen), die auf einer vertikal Entfernungen der vom Nutzer ausgeführten
Microsoft Research entwickelt. ausgerichteten Acrylplatte angebracht ist, Eingabegesten zum Screen schließen und so EON Reality setzt die Technologie vorrangig
}}} Wilson: „TouchLight: An Imaging Touch Screen and
projiziert. genau solche Gesten auswerten, die einen be- für die Interaktion mit 3D-Modellen ein, die
Display for Gesture-Based Interaction“, 2004. [Wil04]
stimmten Abstand vom Screen unterschreiten. durch den transparenten Screen in der Luft
|||
}}} http://research.microsoft.com/~awilson/touchlight/ Der Nutzer steht vor dem Display, das von zu schweben scheinen. Handbewegungen
||| hinten gleichmäßig mit IR-Licht ausgeleuchtet Die Durchsichtigkeit des Screens ermöglicht werden vornehmlich zur Rotation und Skalie-
wird. Die beiden Firewire-Infrarot-Kameras den Kameras die Wahrnehmung von Objekten rung der virtuellen Objekte genutzt. Ziel ist der
können aufgrund seiner Transparenz durch das und des Nutzers in einiger Entfernung vom Einsatz des Systems in Bereichen des Produkt-
 EON Reality, Inc. bieten Software mit interaktiven 3D- Display „hindurch sehen“ – der wahrgenom- Screen. Die Integrierung einer zusätzlichen Marketing sowie interaktiver Trainings- und
Inhalten und im Bereich Virtuelle Realität an. mene Infrarotbereich interferiert nicht mit der „normalen“ Kamera hinter dem Screen erlaubt Lernanwendungen.
}}} http://www.eonreality.com |||

In TouchLight-Anwendungen werden vornehmlich Wisch- EON Reality setzt auf die Interaktion mit 3D-Modellen
bewegungen der Hände eingesetzt – einzelne Fingerbewe- – deren Rotation oder Skalierung – durch Bewegungen der
gungen werden selten ausgewertet. Hände.
}}} [Wil04] ||| }}} http://www.eonreality.com |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Integrierte Sensoren – Microsoft ThinSight
27

 ThinSight wurde innerhalb einer Arbeitsgruppe von Mit ThinSight wurde ein optisches Multi- Die Entwickler erwähnen, dass in heller Umge-
Microsoft Research entwickelt. touch-System entwickelt, das – im Gegen- bung die Emitter der Sensoren auch abgestellt
}}} Hodges et al.: „ThinSight: Versatile Multi-touch Sen-
satz zu den anderen vorher beschriebenen werden können und die Berührungspunkte
sing for Thin Form-factor Displays“, 2007. [Hod07] |||
optischen Technologien – sehr kompakt ist, dann umgekehrt als dunkle Schatten vor dem
}}} http://research.microsoft.com/~shahrami/?0sr=a
||| da hier, statt mit Kameras und Projektoren zu IR-reichen hellen Umgebungslicht wahrgenom-
arbeiten, rückreflektierende optische Sensoren, men werden. Diese beiden Modi – reflective &
die IR-Licht senden und empfangen können, shadow mode – entsprechen dem weiter oben
hinter einem LCD-Display platziert werden. Es beschriebenem Technologie-Paar DRI und DFI.
können dabei sowohl Fingereingaben erkannt
werden, die das Display berühren oder sich Weiterhin können die Silhouetten von Bar-
nahe daran befinden, als auch alle IR-reflek- codes auf Objekten ausgewertet werden, die
tierenden Objekte für die Interaktion genutzt sich vor oder auf dem Display befinden. Neben
werden. der zusätzlich möglichen Interaktion mit IR-
Pointern ist außerdem – durch die Möglichkeit
Die Technologie wird als „intrinsically inte- des Systems, IR-Licht sowohl zu senden als
grated sensing“ bezeichnet. Die IR-Sensoren auch zu empfangen – der Datenaustausch mit
werden in einer Matrix hinter dem LCD-Display mobilen Geräten (Smartphones, PDAs) über
angebracht und senden IR-Licht aus. Das Licht den IR-Kanal denkbar.
tritt nach vorn durch das Display und wird von
IR-undurchlässigen Objekten vor dem Screen
– wie Fingerspitzen – zu den Sensoren zurück
reflektiert, welche diese Reflektion wahrneh-
men. Aus den Sensorwerten wird software-
seitig ein Grauwertbild zusammengesetzt, aus
dem die hellen Berührungsflächen detektiert Im beschriebenen Prototyp ist nur eine begrenzte Fläche im
und getrackt werden können. Zentrum des Displays von IR-Sensoren bedeckt, in der mit
Fingern interagiert werden kann.
}}} [Hod07] |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

Links: Hover und Touch im Kamerabild.


Schattenanalyse – Microsoft PlayAnywhere Rechts: Die extrahierten Schatten im Binärbild.
}}} [Wil05a] |||
28

 Microsoft Research verwendet in ihrem Prototyp einen Bei PlayAnywhere handelt es sich um ein Im binarisierten Bild werden dann die Formen Die Arbeitsgruppe hat zusätzlich ein Set
NEC WT600 DLP Projektor in Verbindung mit einer IR- kompaktes Multitouch-System, das innerhalb der Schatten ausgewertet. In jeder abgeschlos- visueller Codes entwickelt, die auf Objekten
Kamera und einem IR-Scheinwerfer. Bei einer Entfernung
einer Arbeitsgruppe von Microsoft Research senen Schattenform definiert der höchste angebracht vom System erkannt werden
von 2,5“ wird eine Projektion mit einer Bilddiagonalen
entwickelt wurde und bei dem ein Projektor Punkt die Fingerposition. Durch die Analyse können. Für PlayAnywhere ist diese Technik
von 40“ erzeugt.
}}} Wilson: „PlayAnywhere: A Compact Interactive in extrem kurzer Entfernung von vorn aus der Schattenform kann ermittelt werden, ob für Spielsteine angedacht, die im Kontext von
Tabletop Projection-Vision System“, 2005. [Wil05a] ||| einem sehr schrägen Winkel ein vergleichswei- der Finger die Oberfläche berührt oder nicht: Tangible Entertainment-Anwendungen zum
}}} http://research.microsoft.com/~awilson/ ||| se großes Bild auf einer horizontalen (Tisch-) Eine verjüngte Form kommt durch die partielle Einsatz kommen können. Allerdings kann die
Oberfläche erzeugt. Schattenverdeckung bei Tischberührung zu- Verdeckung solcher Codes durch die Hand
stande, eine runde, breite Form wird durch ei- des Nutzers zu Missinterpretationen durch das
Die Vision des Projekts ist es, in Zukunft ein nen über der Oberfläche schwebenden Finger System führen.
kleines mobiles Gerät zu haben, das die Projek- erzeugt. So kann das System sowohl Touch- als
tion, die Bildanalyse und die Computereinheit auch Hover-Gesten auswerten. Mit dieser Mit PlayAnywhere wurden auch Techniken zur
in sich vereint, ohne zusätzlichen Aufwand Technik kann allerdings nur ein Finger pro Integration physischer Dokumente untersucht.
(wie etwa Kalibrierung) vom Nutzer auf jeder Hand erkannt werden und auch nur, wenn der Es wurde ein Algorithmus zur Erkennung und
beliebigen planen Oberfläche schnell einge- Arm von der dem Kamerasystem gegenüberlie- Verfolgung von Papierseiten implementiert, um
setzt und leicht transportiert werden kann. genden Seite ins Bild kommt. Eine komplexere z. B. Bilder exakt darauf zu projizieren.
Bildanalyse könnte aber Abhilfe schaffen.
Für die Realisierung der Multitouch-Interakti- Die Entwickler betonen, dass PlayAnywhere
on wird vom System das Kamerabild mittels eines der gegenwärtig flexibelsten, mobilsten
Analyse der Schattenformen ausgewertet, und am einfachsten zu installierenden Kamera-
die die Hände auf die Oberfläche werfen. Die basierten Multitouch-Systeme überhaupt ist.
Schatten – alle Bereiche, die einen Helligkeits-
schwellwert unterschreiten – können einfach
aus dem Bild extrahiert werden. Das funktio-
niert, weil sowohl Hände als auch Tischoberflä-
che das IR-Licht des Scheinwerfers reflektieren
Oben: Die Vision eines kompakten, mobilen und flexibel und im Kamerabild hell erscheinen – nur die
einsetzbaren Unterhaltungsgeräts. geworfenen Schatten erscheinen dunkel.
Unten: Das prototypische Setup.
Zwei physische Dokumente werden erkannt und getrackt. Auf die Dokumente werden Bilder projiziert.
}}} [Wil05a] |||
}}} [Wil05a] ||| }}} [Wil05a] |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 LucidTouch wurde in Zusammenarbeit des Mitsubishi Pseudo-Transparenz – Merl / Microsoft LucidTouch
Electric Research Lab mit der University of Toronto und 29
Microsoft Research entwickelt.
}}} Wigdor et al.: „LucidTouch: A See-Through Mobile
Bei LucidTouch handelt es sich um ein LucidTouch soll mit beiden Händen so gehal- Die Entwickler haben sich Gedanken über
Device“, 2007. [Wig07] |||
}}} http://research.microsoft.com/users/baudisch/pro- mobiles Gerät, das mittels Toucheingabe auf ten werden, dass sich die Daumen vor dem Eingabetechniken mit dem Gerät gemacht.
jects/lucidtouch/ ||| dessen Rückseite bedient werden soll. Damit Gerät und die langen Finger dahinter befinden. Für die Texteingabe haben sie bspw. eine
}}} http://www.merl.com/projects/lucidtouch/ ||| begegnet man dem Problem, dass die Finger Damit ist eine zusätzliche Eingabe mittels der Software-Tastatur gestaltet, indem sie die
– besonders bei kleinen Screens – genau die Daumen von vorn möglich, während acht QWERTY-Anordnung auf die LucidTouch-Fin-
Elemente verdecken, mit denen der Nutzer ar- Finger die Rückseite bedienen können. gerhaltung gemappt haben. Weiterhin wurde
beiten will. Dazu setzen die Entwickler Pseudo- eine Interaktions-Technik zur „Übergabe“ von
Transparenz ein: Das Display-Bild wird mit der Objekten von einem Finger der einen Hand zu
Silhouette der Finger, die sich hinter dem Gerät einem Finger der anderen Hand erarbeitet, da
befinden, kombiniert. Dadurch hat der Nutzer es mit ein und dem selben Finger aufgrund der
den Eindruck, das Gerät wäre halbtransparent. LucidTouch Tastatur- Handhaltung nicht möglich ist, ein grafisches
Anordnung. Objekt von einer Seite des Screens zur gegenü-
}}} [Wig07] |||
Der Prototyp von LucidTouch integriert hinter berliegenden zu draggen.
dem eigentlichen Gerät eine Kamera, die die
Finger des Nutzers aufnimmt. Das Kamerabild
wird verarbeitet, und ein halbtransparentes
Konturenbild der Finger überlagert in Echtzeit
den Displayinhalt. Durch diese Technik bleibt
der komplette Screen sichtbar, auch wenn
mit vielen Fingern interagiert wird. Darüber
hinaus kann die Berührung präziser erfolgen,
da der Mittelpunkt der Fingerberührung, der
viel kleiner ist, als die Berührungsfläche selbst,
visualisiert wird. Auch werden die Mittelpunkte
Der LucidTouch-Prototyp besteht aus einem resistiven der Fingerspitzen eingeblendet, die den Screen
Single-Touch-Display, einem FingerWorks iGesture Multi- momentan nicht berühren. Das System kann
Touchpad und einer Logitech Kamera. Zukünftig soll das
also sowohl den Touch-Zustand, als auch den
Gerät mittels eines Bildsensors ohne Kamera auskommen.
Hover-Zustand der Finger interpretieren.
}}} [Wig07] |||
Der LucidTouch-Prototyp. }}} http://www.microsoft.com |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Technologien

Multipoint-Systeme mit dem Nintendo Wiimote


30

 Lee ist PhD-Doktorand am Human-Computer Johnny Chung Lee untersucht Techniken, um Lee implementiert einen Maus-Emulator, um  Den Controller der Nintendo Wii-Konsole kann man
Interaction Institute der Carnegie Mellon University in mit dem Nintendo Wii Controller – dem Wii- mit dem LED-Pen mit gängigen Applikati- auch einzeln erwerben.
Pittsburg, PA. }}} http://www.wii.com/ |||
mote – Multipoint-Systeme zu realisieren. Das onen zu interagieren. Weiterhin bietet er eine
}}} http://www.cs.cmu.edu/~johnny |||
Wiimote ist standardmäßig mit einer Infrarot- Bauanleitung für die Pens an und stellt einige
Lees Wiimote-Projekte finden sich unter:
}}} http://www.cs.cmu.edu/~johnny/projects/wii ||| kamera mit einer Auflösung von 1024 x 768 (Multitouch-) Applikationen zum Herunterla-
Die passenden Diskussions-Foren: Pixeln ausgestattet, die bis zu vier Lichtpunkte den bereit.
}}} http://www.wiimoteproject.com ||| bei einer Frequenz von 100Hz tracken kann.
Sowie Lees Project Blog: Darüber hinaus enthält es einen Beschleuni- Head Tracking für VR-Displays. Befestigt
}}} http://procrastineering.blogspot.com |||
gungssensor. man zwei IR-LEDs am Kopf, so kann das Wii-
mote die Kopfposition tracken. Mit den wahr-
Fingertracking. Indem er an seinen Finger- genommenen Werten kann ein sichtabhän-
spitzen reflektierendes Tape befestigt und giges Bild gerendert und dargestellt werden.
diese mit IR-LEDs anstrahlt, kann Lee mit Auf diese Weise fungiert das Display als Portal
dem Wiimote seine Fingerbewegungen in 2D in eine virtuelle Umgebung, da es dem Nutzer
tracken. In C# DirectX hat er ein Programm zur durch die berechneten Sichtanpassungen die
Visualisierung der getrackten Blobs implemen- Illusion von Tiefe und Raum vermittelt, als sehe
tiert, mit dem das Wiimote via Bluetooth-Ver- er durch ein echtes Fenster.
bindung kommunizieren kann.
3D-Tracking. Unter Verwendung mindestens
Ein interaktives Multipoint Whiteboard. zweier Wiimotes kann ein Multipoint-3D-Tra-
In diesem Projekt trackt das Wiimote Pens cking-System gebaut werden.
mit eingebauter IR-LED in der Spitze. Zeigt
das Wiimote auf ein Projektionsbild oder ein Universelle Pointer.
LCD-Display, so kann dieses in ein interaktives …
Whiteboard bzw. in einen Tablet-PC umfunk- Es lohnt sich einen Blick auf Lees Project Blog
Alle Abbildungen auf dieser Seite zeigen Bilder aus Lees tioniert werden. Das Wiimote kann dabei bis zu werfen, denn dort findet sich ein ganzes
Tutorial-Filmen zu den Projekten. zu vier LED-Pens tracken und kommuniziert Sammelsurium von Ideen, was man alles mit
}}} http://www.cs.cmu.edu/~johnny/projects/wii |||
wieder via Bluetooth mit einem Programm. dem Wiimote anstellen kann…

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


31

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

32

2.2 Ich habe im Rahmen dieser Masterarbeit zu-


nächst ein Multitouch-Tabletop-System gebaut,
das auf FTIR beruht. Im Anschluss habe ich
die DI-Technologie aufgesetzt. Im Folgenden
Materialien: beschreibe ich detailliert das System – den Auf-
_schwarz durchgefärbtes MDF, 19 mm stark, verschraubt bau der Tischbox, die integrierte Hardware, die
mit Winkeln
Elektronik und die verwendete Software.
_2 Topfbänder für die Tür
_4 Schwenkrollen Höhe 100 mm, Durchmesser 75 mm,
angeschraubt Die rechte Abbildung zeigt die Maße der Box
_Holzplatten, Winkel und Klettband für Projektorhalte- und grob die Anordnung der integrierten tech-
rung nischen Geräte. Die Box ist insgesamt knapp
_Holzleisten und Winkel für Displayhalterung ein Meter hoch, so dass man bequem davor
_Polystyrolplatten für Kamerahalterung
stehen und auf dem Display mit den Fingern
_Philips SPC 900NC PC Webcam mit 4,3 mm CCTV-Objek-
tiv und 3 Schichten unbelichteter Fotofilm interagieren kann. Die Projektion selbst misst
_Toshiba TDP-EX20 Projektor mit B + W UV-IR-CUT Filter ungefähr 51 x 38 cm (25 Zoll Bilddiagonale).
_Acrylplatte 70 x 52 cm, 8 mm dick, als Display mit Kau-
Po SORTA-Clear 40 Silikonkautschuk, Transparentpapier, Unter der Box befinden sich 4 abbremsbare
IR-Blockerfolie und Rosco Screen grau Projektionsfolie
Schwenkrollen, um Stabilität bzw. ein komfor-
_Aluminium-U-Profile als LED-Halterung
_24 IR-LEDs 940 nm, Litze, Widerstände, Isolierung,
tables Bewegen des Systems zu garantieren.
Platine
_AC/DC Adapter = Netzteil für den LED-Stromkreis Eine Tür an einer Stirnseite der Box ermöglicht
_PC oder MiniMac (inkl. Maus & Tastatur) den Zugriff ins Innere, um die technischen
_Stromverteiler Geräte zu bedienen oder ggf. auszutauschen.
_2. Acrylplatte für DI, 73 x 55 cm, 10 mm dick als Display
mit Diffuserfolie Lee-Farbfilter 225 neutral density frost
_2 Ecoline IR-Scheinwerfer TV6700 mit je 24 IR-LEDs, Am Boden und an der Türseite befinden sich
850 nm, 70° Abstrahlwinkel Lüftungsaussparungen, da vor allem der
_Lee-Farbfilter 273 Reflektor als Innenverkleidung Projektor im Betrieb viel Wärme produziert. Ein
zusätzliches aktives Lüftungssystem ist aber vor
allem für längere Betriebsspannen ratsam.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Objektiveigenschaften wie Lichtstärke und Brenn-
weite, Treiberfunktionalitäten wie das manuelle
Die IR-Kamera
Einstellen von Verschlussgeschwindigkeit und 33

Eine Infrarotkamera kann man sich aus einer Für das Multitouchsystem muss die Kamera Verstärkung und eine adäquate Bildrate für die
handelsüblichen Kamera ziemlich einfach aber noch weitere Anforderungen erfüllen. Ne-
selbst bauen, wenn es gelingt, den Infra- ben einer ausreichenden Bildrate für Echtzeitin- Interaktion in Echtzeit sind ausschlaggebende
rotblocker zu entfernen, der in der Regel in teraktion sollte die Belichtungsautomatik der
„normalen“ Kameras eingebaut ist, um das für Kamera abgestellt werden können, damit sich Kriterien für die zu verwendende Infrarotkamera.
das Bild sonst störende Infrarotlicht herauszu- die Helligkeit des Bildes nicht ständig verän-
filtern. Dieser Blocker ist meist ein kleines Stück dert. Das ist wichtig, da die hellen Berührungs-
Glas, das mit einem Material beschichtet ist, flächen im Bildauswertungsprozess über einen
welches IR-Licht reflektiert, und befindet sich festen Schwellwert vom Hintergrund getrennt
im Objektiv oft hinter der Linse. werden. Ein Treiber, der zudem die Justierung
von Verschlussgeschwindigkeit, Verstärkung
Der IR-Blocker muss entfernt werden, damit und Bildrate erlaubt, ist sehr wünschenswert.
die Kamera nachher auch das Licht im
IR-Bereich wahrnehmen kann. Damit die Ein wichtiges Element der Kamera ist das
Kamera aber effektiv als IR-Kamera fungie- Objektiv selbst. Eine hohe Lichtstärke und die
ren kann, muss zudem das für uns sichtbare optimale Brennweite für die Systemgegeben-
Licht weitestgehend blockiert werden. Sonst heiten sind unerlässlich.
würde zum Beispiel die Projektion auf dem
Display das Kamerabild zu stark beeinflussen. Im Laufe meiner Experimente habe ich insge-
Zu diesem Zweck eignet sich eine Doppel- bis samt vier Webcams getestet – und musste
Dreifachschicht nicht belichteter entwickelter letztendlich für die am besten geeignete
Negativfilm sehr gut. Solch eine Schichtung Webcam ein neues Objektiv installieren, um
wird also an Stelle des IR-Blockers in das Ob- ein befriedigendes Ergebnis zu erhalten.
jektiv der Kamera integriert, und fertig ist die
IR-Kamera.

Im Infrarotbereich wirken viele Dinge anders, als wir es mit


unserer Wahrnehmung gewohnt sind.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

Die erste Kamera, die ich umgebaut habe, war meine


Philips PCVC 820K Philips PCVC 820K. Ihre größte Schwäche ist, dass sie unter
Windows XP nicht stabil läuft. Weiterhin ist die Bildqualität
34
nicht sehr gut, was besonders an dem lichtschwachen
Objektiv liegt. Aber für die ersten Experimente hat sie sich
sehr gut bewährt.

Dieses Modell ist sehr unkompliziert auseinanderzunehmen,


ohne dabei Teile des Gehäuses zerstören zu müssen. An den
IR-Blocker kommt man ohne weiteres heran. Im Bild sieht
man, wie der IR-Blocker rötlich schimmert, was zeigt, dass
(infra-) rotes Licht reflektiert wird.

Mit dem bloßen Auge sieht der IR-Blocker – blickt man


direkt hindurch – jedoch aus, wie normales Glas.
Beim Ausbau ist der IR-Blocker etwas zersplittert, aber der
Rest vom Objektiv hat keinen Schaden genommen.

An die Stelle des IR-Blockers wird ein Filter integriert, der


umgekehrt fast nur das infrarote Licht hindurch lässt und
den sichtbaren Frequenzbereich blockiert. Dazu eignet sich
eine Doppelschicht nicht belichtetes entwickeltes Filmma-
terial. Zwei kreisrunde Stücke davon habe ich im Objektiv
befestigt. Später verwende ich eine Dreifachschicht, um die
Empfindlichkeit gegenüber sichtbarem Licht noch weiter
zu senken.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


35

Hier sind einige Objekte, die mit der IR-Ka- erscheint: Genau in diesem Frequenzbereich
mera aufgenommen worden sind, „norma- liegt ja nachher die Reflektion, die durch eine
len“ Aufnahmen gegenübergestellt. Für das Fingerberührung auf dem Display hervorgerufen
FTIR-System ist besonders relevant, wie hell die wird und ausgewertet werden muss.
Infrarotlampe einer Fernbedienung im IR-Bild

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System
T-Com USB Cam

36

Weil die Philips PCVC 820K unter Windows XP nicht stabil


läuft, habe ich weitere Kameras getestet. Um die T-Com
USB Cam umzubauen, musste rabiater herangegangen
werden – um nachher festzustellen, dass das Kamerabild
qualitativ minderwertiger ausfiel.

Apple iSight

Die Apple iSight Kamera auseinanderzubauen verlangte


Fingerspitzengefühl. Nachdem ich den IR-Blocker erfolg-
reich entfernt hatte, musste ich allerdings feststellen,
dass der Autofokus nicht mehr funktionierte. Nach der
Wiederherstellung der Originalzusammensetzung war
er wieder betriebsbereit. Aufgrund dieser Tatsache habe
ich nicht mehr recherchiert, ob die Belichtungsautomatik
deaktivierbar ist. Auch die fehlende Kompatibilität mit dem
Windows-Betriebssystem hätte wegen der letztendlich
verwendeten Multitouch-Erkennungssoftware gegen die
iSight gesprochen

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Philips SPC 900NC

37

Die Philips SPC 900NC mit einem 4,3 mm CCTV-Objektiv in


der Halterung innerhalb der FTIR-Tischbox.

Bei der Philips SPC 900NC Kamera kann man ist es jedoch möglich, jedes beliebige CCTV-
das Objektiv nach Entfernen des Aufsatzes Objektiv aufzuschrauben. Ich habe deshalb an
sehr einfach abschrauben. Das Objektiv selbst ein sehr lichtstarkes CCTV-Objektiv, das von
ist nicht so leicht manipulierbar. Es enthält ein vornherein keinen IR-Blocker enthält und die
aufwändigeres und fest integriertes Linsensys- für mein System passende Brennweite besitzt
tem. (4,3 mm), eine Dreifachschicht Negativfilm
geklebt und dieses dann auf die Kamera
Deshalb habe ich zunächst das veränderte geschraubt.
und kompatible Objektiv der Philips PCVC
820K aufgeschraubt, welches jedoch ziemlich Um die Kamera im FTIR-System zu integrieren,
lichtschwach ist. wurde der Klemmbügel entfernt und eine
Halterung aus Polystyrolplatten gebaut, die
Da die Objektivfassung der Philips Kamera mit einfach auf dem Boden der Tischbox befestigt
denen von CCTV Boardkameras kompatibel ist, werden kann.

CCTV-Objektive mit verschiedenen Brennweiten wurden


ausprobiert und die Optimalste gewählt.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

Das Display
38

 Rosco Screen }}} http://www.rosco.com/uk/screens/ Hauptbestandteil des Displays ist eine Acryl- Hier wird KauPo SORTA-Clear 40 verwendet,
roscoscreen.asp||| wurde bezogen bei platte. Für das FTIR-System verwende ich eine welches aus 2 Komponenten besteht und
cast C. ADOLPH & RST DISTRIBUTION GmbH
8 mm dicke Platte, deren Fläche ca. 52 x 70 nach Mischung gleichmäßig auf die Acrylplatte
}}} http://www.rstdistribution.de|||
cm misst. gegossen wurde.
 KauPo Plankenhorn e.K. liefert Kautschuk und Poly-
ethane über }}} http://www.kaupo.de ||| Damit das IR-Licht der LEDs gut in die Platte Damit der Rosco-Screen nicht am Silikon
 Bei Modulor findet man viele Materialien eindringen kann, müssen die Kanten möglichst kleben bleibt, was störende helle Reflektionen
}}} http://www.modulor.de ||| glatt sein und poliert werden. hervorruft, die als Berührungsflächen inter-
 IFOHA GmbH & Ko. KG hat viele selbstklebende Folien pretiert werden, muss zwischen die Projek-
im Sortiment }}} http://www.ifoha.de ||| Auf der Platte ist eine Schichtung notwendig. tionsfolie und das Silikon eine Trennschicht.
Zum einen benötigt man ein Projektions- Als Material hat sich Transparentpapier ganz
material. Hier wird die Rosco Screen grau gut bewährt. Es ist darauf zu achten, dass
Projektionsfolie verwendet. Damit Display- und das Papier einerseits keine zu starke Struktur
Berührungsfläche auf einer Ebene liegen, wird aufweist, damit die Qualität der Projektion
die Projektionsfolie oben auf der Acrylplatte nicht zu stark beeinträchtigt wird, und ande-
positioniert und nicht darunter. rerseits eine raue Oberfläche besitzt, damit das
Silikon nicht wiederum daran haften bleibt. Ich
Für einen guten Kontakt zwischen Acrylplatte verwende transparentes holzfreies Skizzen-
und Projektionsfolie bei Berührung des Screens papier aus 100 % Zellulose mit 40 g / m2 von
sorgt eine rund 1 mm dicke Silikonschicht. Modulor.
Durch ihre Flexibilität wird sie bei Berührung
leicht eingedrückt, was den Kontakt ver- Zwischen dem Transparentpapier und der Pro-
bessert. Ohne sie würde die Berührung des jektionsfolie habe ich zusätzlich eine Infrarotfo-
Nutzers erst bei sehr starkem Druck erkannt lie integriert, die das IR-Licht aus der äußeren
werden, und die Erkennung einer durchgän- Umgebung blockieren soll. Die Folie stoppt das
Die Schichtung des Displays entspricht u. a. der von Tim gigen Drag-Bewegung wäre fast unmöglich. IR-Umgebungslicht zwar nicht komplett, aber
Roth in seinem Projekt 180. Das Silikon macht die Nutzereingabe damit es macht das System etwas robuster in einer
}}} http://timroth.de/180/ |||
komfortabler und robuster. nicht vollständig dunklen Umgebung.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


39

Für die FTIR-Technik müssen IR-LEDs seitlich in


die Acrylplatte strahlen. Als Halterung für die
LEDs verwende ich Aluminium-U-Profile, die
die Acrylplatte genau fassen können. Für die
LEDs wurden Löcher in die U-Profile gebohrt,
in denen sie dann befestigt wurden.

Mit der Anzahl der LEDs habe ich ein wenig


experimentiert und nutze letztendlich insge-
samt 24 Stück in 4 parallelen Reihen mit je 6
LEDs in Reihe, die gleichmäßig rund um die
Acrylplatte angeordnet sind.

Der LED-Schaltkreis wird mittels eines ange-


löteten Steckers mit einem AC/DC-Adapter
verbunden, über den die Stromversorgung
gewährleistet werden kann.

Die Abbildung zeigt den LED-Schaltkreis mit Widerständen


und die Polarität, auf die beim Anstecken des AC/DC-Adap-
ters geachtet werden muss.
Spezifikation der IR-LEDs:
Ein erster prototypischer Aufbau mit Projektor, IR-Kamera
940 nm, 20°, 20 / 30 mA, max. 50 mA, 1.0-1.2 V, 8 mW
und Display.

Masterarbeit „Multitouch Input“ | Grit Schuster


40

Aluminium-U-Profile mit Bohrungen


dienen als Halterungen für die IR-LEDs.

Damit das Infrarotlicht gut in die Acrylplatte eindringen


kann, müssen die Kanten glatt poliert werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


41
Die IR-LEDs werden in den Bohrungen mit Heißkleber befestigt. Oben rechts ist eine Infrarotaufnahme des Screens mit den IR-LEDs in einem frühen Entwicklungsstadium.

Es gibt verschiedene Ausführungen von IR-LEDs. Solange Wellenlänge und Leuchtkraft stimmen, sollten sie geeignet sein.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

42

KauPo SORTA-Clear 40 wird aus zwei Komponenten


gemischt…

… anschließend auf die Acrylplatte gegossen…

Für die Schichten auf der Acrylplatte mussten einige


Materialien und Materialkombinationen getestet werden.

… und gleichmäßig verteilt.

Dabei ist durch vorsichtiges Rühren und langsames Gießen


darauf zu achten, dass Lufteinschlüsse möglichst vermieden
werden. Die gleichmäßige Dicke von rund 1 mm erreicht
man durch befestigte Abstandhalter am Rand der Platte
und einen Stab o. ä. zum glätten des Silikons, bevor man es
im Anschluss komplett aushärten lässt.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


43

Diese Abbildungen zeigen Arbeitsschritte bei der


Beschichtung der Acrylplatte:
_Silikon
_Transparentpapier
_Infrarotfolie
_Projektionsfolie

Am Schluss wurden die Schichten mit Tape fixiert.

Die resultierende Projektionsqualität


ist sehr zufrieden stellend.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

Der Projektor
44

Ich verwende im vorgestellten FTIR-System den len von 90 cm. Darüber hinaus erreicht er eine Für den Projektor wurde eine Halterung aus
Toshiba TDP-EX20, weil er eine extrem kurze Bildauflösung von 1024 x 768 Bildpunkten und Brettern, Winkeln und einer Klettschnalle ge-
Brennweite aufweist: Bei einem Mindestab- verfügt über die Funktionalitäten Rückprojekti- baut, um ihn sicher und wie gewünscht in der
stand von einem halben Meter liefert er ein on und Trapezverzerrung, die für die optimale Tischbox zu fixieren.
scharfes Bild mit einer maximalen Bilddiagona- Ausrichtung des Projektionsbildes nötig sind.

Der Projektor kann auf die Halterung geschnallt werden


und erhält so genügend Stabilität. Die Halterung ist auf
dieses Projektormodell optimiert – kleine Korrekturen
ermöglichen die justierbaren Füße des Projektors.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


45

Für die IR-Kamera erscheint der UV-IR-Sperrfilter dunkel, da


er die für sie sichtbaren Lichtbereiche nicht hindurch lässt,
sondern fast komplett reflektiert – deshalb ist im Bild die
Kamera selbst als Reflektion zu sehen.

Vor der Linse des Projektors wird zusätzlich ein


 B + W UV-IR-CUT MRC 486 77 mm IR-Sperrfilter befestigt, damit der Hotspot
}}} http://www.schneiderkreuznach.com ||| – die Reflektion, die der Projektor an der
Rückseite der Acrylscheibe erzeugt – keine
IR-Anteile enthält, die das Kamerabild stören
würden.

Der IR-Sperrfilter wird vor der Projektorlinse fixiert – hier ist eine prototypische Halterung abgebildet.

Oben links ist der Hotspot des Projektors zu erken-


nen, der durch die Reflektion des Projektorlichts an der
Rückseite der Acrylplatte erzeugt wird. Dieser Hotspot stört
die Bildauswertung, da er als Berührungspunkt interpretiert
werden kann. Durch den der Projektorlinse vorgelagerten
IR-Sperrfilter wird der für die IR-Kamera sichtbare Hotspot
eliminiert (Bild oben rechts).

Für die menschliche Wahrnehmung erscheint der UV-IR-


Sperrfilter völlig transparent, nur von der Seite betrachtet
ist eine rötlich-grünlich-schimmernde Reflektion sichtbar
– die Frequenzbereiche, die der Filter nicht durch lässt.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

Die Software
46

 Touchlib wird von der NUI (Natural User Interface) Als Betriebssystem verwende ich Windows Blob Detection, also die Selektion der hellen  OSC – OpenSound Control. Dieses Protokoll wird
Group entwickelt und bereitgestellt. XP, da für die Kamera, für die ich mich ent- Berührungsareale („Blobs“) und ihre Koordi- zur Kommunikation zwischen Computern, Multimedia-
}}} http://touchlib.com ||| Geräten oder Programmen über ein Netzwerk oder das
schieden habe, ein Windows-Treiber mit den naten und Flächen, sowie Blob Tracking, also
}}} http://nuigroup.com ||| Internet genutzt, kann aber auch auf nur einem Rechner
benötigten Einstellungsmöglichkeiten existiert. die Identifizierung der einzelnen Blobs und ihre
unter der Benutzung des localhost laufen. Es wurde
Touchlib nutzt für die Bilderkennungsschritte OpenCV – Für Mac OS X gibt es nur einen rudimentären richtige Zuordnung über die Zeit von Frame zu entwickelt, um Sound und andere Medien in Echtzeit zu
Intels Open Computer Vision Bibliothek, eine Sammlung Treiber, der die oben beschriebenen Anforde- Frame. Die Ergebnisse dieser Bildauswertung verarbeiten und zu steuern.
von Computer-Vision-Routinen }}} Wright et al.: „OpenSound Control: State of the Art
rungen nicht erfüllt. beinhalten folgende Eigenschaften für jeden
}}} http://sourceforge.net/projects/opencvlibrary/ ||| 2003“, 2003. [Wri03] |||
detektierten Blob:
}}} http://www.intel.com/technology/computing/open- }}} http://opensoundcontrol.org |||
cv/index.htm ||| Um das Kamerabild auszuwerten, also die Be- _ID
rührungspunkte bzw. -flächen zu detektieren _(x, y)-Koordinate  TUIO ist ein Protokoll, das speziell für Tangible Table-
Damit Touchlib auf Windows läuft, benötigt man: und zu tracken, benötigt man eine Software, _(deltaX, deltaY)-Bewegung Tops entwickelt wurde. Es ermöglicht die Erkennung
_Visual Studio 2005 SP1 x86 redistributable package und das Tracking sowohl von Multitouch-Eingaben als
die dies erfüllt. Für die Entwicklung meiner _Fläche (Rückschluss auf den Druck)
}}} http://www.microsoft.com/downloads/details. auch von getaggten Objekten und deren Identifizierung,
prototypischen Beispielanwendung verwen-
aspx?FamilyID=200b2fd9-ae1a-4a14-984d-389c36f8564 Position und Orientierung auf dem Display.
de ich dafür Touchlib. Touchlib ist eine Nativ kann eine Multitouch-Anwendung direkt }}} Kaltenbrunner et al.: „TUIO: A Protocol for Table-Top
7&displaylang=en |||
_Java Runtime Environment freie C++-Bibliothek, die unter Windows und in C++ geschrieben werden. Alternativ ist es Tangible User Interfaces“, 2005. [Kal05] |||
}}} http://www.java.com/ ||| Ubuntu läuft und mit einigen Tweaks wohl aber auch möglich, Multitouch-Anwendungen }}} http://reactable.iua.upf.edu/?tuio |||
auch unter Mac OS X. Allerdings sind diese in anderen Entwicklungsumgebungen zu im-
Um die im ausführbaren Paket enthaltenen Flash-Client- nicht trivial – ein weiterer Grund, warum ich plementieren, da Touchlib die erkannten Touch
Applikationen zu starten benötigt man zusätzlich den mich gegen dieses Betriebssystem entschieden Events in das standardisierte Protokoll OSC
_Flash Player 9
habe. „verpackt“, genauer gesagt in das TUIO-Proto-
}}} http://labs.adobe.com/downloads/flashplayer9.html
koll, welches auf OSC basiert. Jede Applika-
|||
Touchlib greift auf die Bilder der angeschlos- tion, die das OSC-Protokoll versteht, kann als
senen Kamera zu, führt einige Bildverarbei- Multitouch-Client dienen – als Anwendung,
tungsschritte aus – die möglichen Filter (z. B. die die Touch-Events als Nutzereingabe verar-
Hintergrundsubtraktion, Hochpass, Schwell- beitet und ein Feedback produziert, also das
werteinstellung) können frei gewählt und vom Nutzer wahrnehmbare Interface darstellt.
justiert werden – und wertet die Resultate aus.
Die wichtigen Schritte bei der Auswertung sind Anzeige der Filterergebnisse in Touchlib

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


47

Links: Das Kalibrierungsmodul von Touchlib zur Synchroni-


sierung von Kamerabild und Projektionsfläche. Mitte: Die
im Paket enthaltene flickr-Applikation in Flash. Rechts: Die
ebenfalls integrierte Smoke-Applikation in C++.

Mögliche Clients können u. a. in C++ (mit  OSCPack }}} http://www.audiomulch.com/~rossb


OSCPack), C#, Java, Processing, vvvv, code/oscpack |||
Pure Data, Max/MSP, Flash (ab Action-  Processing }}} http://processing.org |||
Script 3, also Flash 9 oder CS3), Python oder  vvvv }}} http://vvvv.org |||
Squeak implementiert sein.  Pure Data }}} http://puredata.info |||
 Max/MSP }}} http://www.cycling74.com/products
Aufgrund meiner Programmiererfahrungen maxmsp |||
verwende ich als Client Squeak. Auf nähere  Flash }}} http://www.adobe.com/ products/flash |||
Details gehe ich später in Kapitel 5 „Applikati-  Squeak }}} http://www.squeak.org |||
on“ ein. mit OSC }}} http://map.squeak.org/package/61f807be-
83a3-4944-bfa1-686ddac7153c |||
und wahlweise mit TUIO }}} http://map.squeak.org/
package/39fc4295-ae3e-4ce6-aca0-2bd1215926fe |||
und Simon Hollands Einführung in TUIO in Squeak
}}} http://mcs.open.ac.uk/sh2/squeakmusic.html |||

Die Abbildung illustriert, wie eine Multitouch-Eingabe von


Touchlib verarbeitet und ausgewertet wird und aus ihr
schließlich ein visuelles Feedback für den Nutzer entsteht.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

Die DRI-Anpassung
48

Statt Touchlib kann man auch andere Software Ich habe für mein System eine DRI-Anpassung
für die Multitouch-Erkennung nutzen. Man (Diffused Rear Illumination) vorgenommen, da
könnte aufbauend auf der OpenCV Library ein ich mit der Touch-Detection-Qualität in FTIR
eigenes System in C++ implementieren. noch nicht 100%ig zufrieden war: Bei schnel-
len Drag-Bewegungen hat der Touch-Blob
Es existiert auch eine Blob-Detection-Biblio- aufgrund einer minimal auftretenden Haftung
 Blob Detection für Processing, auch nutzbar für thek für Processing, so dass das komplette zwischen Transparentpapier und Silikon eine
andere Java-Implementierungen System mit Processing umgesetzt werden Spur nach sich gezogen, die selbst auch als Be-
}}} http://www.v3ga.net/processing/BlobDetection/ |||
kann. Allerdings stößt man damit schnell auf rührungsfläche interpretiert wurde. Versuchte
Grenzen die Performance betreffend. ich dies durch eine Senkung des Helligkeits-
schwellwertes zu kompensieren, wurde die
 Die ReacTIVision-Software ist verfügbar unter: Alternativ kann man auch ReacTIVision Erkennung der eigentlichen Touchflächen
}}} http://reactable.iua.upf.edu/?software ||| verwenden, ebenfalls ein open source Multi- unzuverlässiger.
touch-Framework – die reacTable-Software, Die Reflektionsfolie, mit der die Innenseiten der Tischbox
für die TUIO ursprünglich entwickelt wurde. Für DRI muss keine so komplexe Display- ausgekleidet wurden, ermöglicht durch ihren Streueffekt
eine gleichmäßige diffuse IR-Ausleuchtung.
ReacTIVision läuft unter Windows, Mac OS X Schichtung erfolgen wie für FTIR: Es wird ledig-
und Linux und kann mit den gleichen Client- lich eine Trägerplatte mit einer reflektierenden
Programmen kommunizieren wie Touchlib. Projektionsschicht benötigt. Ich verwende
eine 10 mm starke, 73 x 55 cm messende
Es sind viele weitere videobasierte Multitouch- Acrylplatte, auf der ich einen Diffuser fixiert  Als Diffuser verwende ich den Lee-Farbfilter 225
Implementierungen frei verfügbar, wie z. B. habe. Innerhalb der Tischbox installierte ich 2 neutral density frost. Er ist z. B. bei Skyshopping 24,
einem Shop für DJ-Equipment und Lichttechnik erhältlich.
 Die libavg-Homepage: auch libavg für Linux- und Mac-OS-X-Sys- IR-Scheinwerfer bestehend aus je 24 LEDs
}}} http://www.skyshopping24.de |||
}}} https://www.libavg.de ||| teme. Je nach Vorkenntnissen, verwendetem mit 850 nm Wellenlänge. Damit die Schein-
System und Vorlieben kann sich der Entwickler werfer selbst keine Hotspots auf der Rückseite  Ich verwende Ecoline IR-Scheinwerfer TV6700, die
also eine Implementierung unter inzwischen der Acrylplatte verursachen, platzierte ich sie man z. B. beim first mall Online Shop erwerben kann.
}}} http://firstmall-security.de |||
zahlreichen aussuchen. von oben nicht sichtbar unter dem Projektor
auf dem Boden der Tischbox.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


49

Die IR-Scheinwerfer müssen, damit das ID- Durch den Einsatz der DI-Technik habe ich nun
System auch funktioniert, den Innenraum der keine Probleme mehr mit Drag-Spuren, die auf
Tischbox gleichmäßig ausleuchten. Das gelingt die Bildinterpretation einen störenden Einfluss
mit Hilfe der Auskleidung der Tischboxinnen- ausüben. Dadurch kann ich die Filtereinstellun-
 Ich benutze den Lee-Farbfilter 273, eine Reflektorfolie, flächen mit Reflektionsfolie und ein bisschen gen in Touchlib großzügiger wählen, wodurch
die ebenfalls bei Skyshopping 24 erhältlich ist. Geduld bei der Ausrichtung der Scheinwerfer. die Berührungs-Blobs im Resultatbild bei weni-
}}} http://www.skyshopping24.de |||
ger Druckausübung sehr viel heller und größer
erscheinen und damit die Toucherkennung
stabiler läuft.

Die Berührungs-Blobs erscheinen nun heller als je zuvor.

Die beiden IR-Strahler sitzen unter dem Projektor. Das neue DI-Display in Aktion.

Masterarbeit „Multitouch Input“ | Grit Schuster


Realisiertes Multitouch-System

50

Damit ist das DRI-System schon komplett. Ich Ich kann in einer hellen Umgebung mein
musste einige Vorteile gegenüber dem ur- System übrigens auch in einen DFI-Modus
sprünglichen FTIR-Aufbau feststellen. Das neue (Diffused Front Illumination) umschalten: Die
DRI-System ist: LEDs bzw. LED-Scheinwerfer werden aus-
geschaltet und die Touchlib-Version für den
_stabiler. Es gibt keine Drag-Spuren mehr und MTmini verwendet, die das Kamerabild (dunkle
die Berührung ist auch bei weniger Druck gut Berührungsblobs vor hellem Hintergrund)
erkennbar. invertiert. Da der verwendete Toshiba-Projek-
_brillanter. Die Projektion ist durch die feh- tor sehr lichtstark ist, ist die Projektion auch in
lende Schichtung brillanter und schärfer. heller Umgebung gut erkennbar. So ist mein
_schöner. Der neue Diffuser liegt durch die gebautes Multitouchsystem noch flexibler
fehlende Schichtung plan auf der Acrylplatte einsetzbar.
auf und wirft keine Wellen. Die Anmutung ist
edler (dunkelgrau, fast schwarz) und harmo- Was nach Abschluss dieser Arbeit noch aus-
niert mit der Farbe des durchgefärbten MDF. steht, ist der Einbau eines aktiven Lüftungssys-
Die passgenaue Acrylplatte, die keinen LED- tems neben den schon gebohrten Luftlöchern
Rahmen erfordert, integriert sich hervorragend im Boden und dem Lüftungsschlitz über der
als Tischoberfläche. Türklappe, da der Projektor das Tischinnere
_vielseitiger. Die DRI-Technologie erlaubt stark aufheizt und die auf Dauer erhebliche
Impressionen der fertigen Multitouch-Tischbox. zusätzlich die Verwendung von Fiducials – op- Temperaturerhöhung die integrierten tech-
tischen Markern – die man an der Unterseite nischen Geräte beschädigen kann.
physischer Objekte befestigen kann. Diese
kann die Kamera nun sehen, wenn man solche
Objekte auf dem Screen auflegt. Das System
kann die Muster auswerten und die Objekte
und ihre Position und Orientierung erkennen.
So ist die Umsetzung von Tangible Interfaces
möglich.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Hier noch ein paar Materialmuster: 51

transparentes holzfreies Ifoha Infrarotfolie silber-hell Rosco Screen grau Lee-Farbfilter 225 Lee-Farbfilter 273 Reflektor
Skizzenpapier aus 100 % neutral density frost
Zellulose mit 40 g / m2 von
Modulor

Masterarbeit „Multitouch Input“ | Grit Schuster


3 Recherche
Nonverbale Kommunikation

3.1 Wir verwenden in unserem Alltag Computer


oder computergesteuerte Geräte als Hilfsmit-
Menüsteuerung – etabliert. Des Weiteren ist
die Eingabe mittels eines Zeigegerätes in vielen
direktere Variante der Interaktion, da sichtbare
Objekte auf dem Bildschirm für den Nutzer
tel, die uns bei der Bewältigung von Hand- Fällen praktikabler als eine lautsprachig ausge- scheinbar ohne eine zwischengeschaltete
lungen unterstützen. Dabei müssen wir mit drückte Anweisung. Instanz angefasst und manipuliert werden
dem jeweiligen System kommunizieren, damit können, wohingegen ein Touchpad ein für den
es „weiß“, was es für uns tun soll. Sprachbegleitend oder teilweise sogar die Nutzer sichtbares Instrument darstellt, das die
mündliche Rede ersetzend nutzt der Mensch Fingereingaben an das System erst weiterleitet.
Recherche Für die Kommunikation mit Desktop-Systemen oft Handbewegungen. Besonders ausdiffe-
54 oder Laptops verwenden wir im Allgemeinen renziert sind die Handgesten, die in Gebär- Die berührungsfreie Interaktion mit den Hän-
Tastatur und Maus oder Touchpad, bei der densprachen verwendet werden. Aber auch den entspricht in der Ausführung wohl eher
Verwendung von mobilen Geräten wie Han- hörende Menschen, die sich untereinander der gestenbasierten Kommunikation zwischen
dys oder PDAs oft Tasten oder einen Stylus. lautsprachig unterhalten, kommunizieren auf Individuen als die Toucheingabe und kann
Tastatur, Maus und Tasten haben dabei eher einer parallelen Ebene mit ihren Händen. Die zudem bei einem Stereo-Vision-System im
digitalen Charakter (Klick, Tastendruck), Touch- Hände werden außerdem genutzt, wenn eine dreidimensionalen Raum interpretiert werden.
pad und Stylus eher analogen, da sie eine Sache effizienter durch Zeigen oder Darstellen Die Kommunikation mit einem Computersys-
Art Übersetzer einer kontinuierlichen (Zeige-) kommuniziert werden kann als durch Wörter. tem ähnelt allerdings weniger einem Zwie-
Fingerbewegung darstellen. gespräch zweier gleichgestellter intelligenter
Als Pendant zur zwischenmenschlichen Wesen, sondern eher der Manipulation von
Die Lautsprache – die offensichtlichste Form Kommunikation via Handgesten kann die Objekten in der realen Welt. Und hierbei spielt
der zwischenmenschlichen Kommunikation Mensch-Computer-Interaktion mittels Handbe- die haptische Komponente eine große Rolle:
– ist als Eingabemodus für Computersysteme wegungen angesehen werden. Diese lässt sich Wir fassen Objekte an, um sie zu bearbeiten.
aufgrund des daran geknüpften Interpreta- unterteilen in berührungslose Eingabe – oft Daher ist die Manipulation durch Berührung
tionsaufwandes und der Fehleranfälligkeit kameragesteuert oder mittels Datenhandschuh aufgrund unserer Erfahrung leichter zu kont-
derzeitiger Algorithmen in Verbindung mit den – und die Eingabe durch Fingerberührung rollieren und zu koordinieren als die vorher
vielfältigen Artikulationsmustern der breiten eines Gerätes über ein Touchpad oder einen genannte magisch anmutende Manipulation
Nutzerschaft nicht oder nur für sehr simple Touchscreen. Dabei handelt es sich bei einem durch Gestikulieren in der Luft. Zudem ist ein
Anwendungen – z. B. telekommunikative Touchscreen im Gegensatz zum -pad um die Zeichensystem, bei dem alle Finger eingesetzt

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


werden können, auch in der zweidimensio-
nalen Ebene – der Screenoberfläche – komplex
genug, um ein großes Vokabular abzudecken.
Um alle Finger bei der Toucheingabe involvie-
ren zu können, bedarf es eines Multitouch-
Screens als Schnittstelle.
Tastatur / Tasten  Touchpad  berührungslose Handgeste 
Nebenstehende Abbildungen verdeutli- Übersetzung: Tastendruck – Bewegung Übersetzung: Bewegung – Bewegung, relativ Übersetzung: Bewegung – Bewegung, relativ od. absolut
chen gegenüberstellend am Beispiel Objekt Direktheit: indirekt, Aktionstyp – Reaktionstyp inkompatibel Direktheit: indirekt über Cursor Direktheit: direkt, aber ohne Kontakt 55
Kontrolle: Aktion begrenzt zw. Taste gedrückt & Taste los Kontrolle: gut, keine Differenzierung zw. over & down Kontrolle: hoher Freiheitsgrad, dadurch schwierig zu
verschieben die Eigenschaften verschiedener
Genüsslichkeit: leicht ausführbar, aber inkompatibles Genüsslichkeit: kompatibles Mapping, eingeschränkter kontrollieren
Eingabemechanismen bezüglich Übersetzung,
Mapping Aktionsraum Genüsslichkeit: ausgeprägt, aber schwierig kontrollierbar
Direktheit und Kontrolle und der daraus resul-
tierenden Genüsslichkeit. Der Single-Touch-
screen wird dabei vom Multi-Touchscreen
übertroffen, da die gleichzeitige Benutzung
mehrerer Finger zur Eingabe der Interaktion
mit realen Objekten sehr viel näher kommt, als
nur eine Fingerspitze verwenden zu können.
Somit fühlt sich die Interaktion natürlicher an.

Maus  Stylus & Tablet  Touchscreen 


Übersetzung: Bewegung – Bewegung, relativ Übersetzung: Bewegung – Bewegung, absolut Übersetzung: Bewegung – Bewegung, absolut
Direktheit: indirekt über Cursor Direktheit: indirekt über Cursor Direktheit: direkt
Kontrolle: gut, aber Übung für Erstnutzer erforderlich Kontrolle: leicht handhabbar durch Erfahrung: Stift Kontrolle: sehr gut, Aktion bei Berührung
Genüsslichkeit: kompatibles Mapping, aber beeinträchtigte Genüsslichkeit: kompatibles Mapping, besonders genüss- Genüsslichkeit: sehr ausgeprägt, da Übersetzung unsicht-
Feinmotorik lich bei Drucksensibilität bar, Nutzer „berührt“ digitale Daten

Masterarbeit „Multitouch Input“ | Grit Schuster


Nonverbale Kommunikation

Handgesten im Alltag – Interaktion

Bevor in dieser Arbeit auf mögliche Anwen- Die Hände sind die primären Werkzeuge, mit Alltägliche Interaktionen können auf ein
dungen der Multitouch-Technologie und denen wir Objekte in unserer Umwelt unter- digitales Interface übertragen werden, indem
auf sinnfällige Abbildungen von Gesten auf suchen und bearbeiten. Besonders nützlich man eine Handbewegung in einen bestimmten
Bedeutungen und Aktionen eingegangen wird, dabei ist der Daumen, der den langen Fingern Kontext setzt und bekannte Metaphern aus
werden an dieser Stelle menschliche Handges- anatomisch gegenüber steht. Dies ermöglicht der realen Welt nutzt. Dem Nutzer aufgrund
ten und ihr Einsatz als Kommunikationsmittel das Greifen und Festhalten von Dingen mit nur seines Erfahrungsschatzes eine Antizipation
beschrieben, um das dahingehende Verständ- einer Hand. Die Interaktion mit Objekten findet zu ermöglichen, was seine Aktion hervorrufen
nis als Grundlage für die Entwicklung eines meist mit mehreren oder sogar allen Fingern wird, und diese Vermutung auch zu bestäti-
eigenen Gestenvokabulars zu vertiefen. statt. Aktionen mit nur einem Finger beschrän- gen, macht ein intuitives Interface aus. Eine
56 ken sich auf Berühren, Streichen, Tippen oder rotierende Geste im Uhrzeigersinn in Verbin-
Der Mensch benutzt seine Hände in vielfäl- Drücken. Erst die Nutzung der Finger in Kom- dung mit einem digitalen Schraubverschluss
tiger Weise: Um Dinge zu ertasten, um mit bination ermöglicht komplexere Vorgänge. wird etwas öffnen, wohingegen die Bewegung
Objekten zu interagieren und um zu kommu- Zweihändige Aktionen erlauben sogar noch gegen den Uhrzeigersinn eher etwas schließen
 Dies entspricht der Klassifikation durch Cadoz: nizieren. Die letzteren beiden Aspekte sollen kompliziertere Manipulationen: Das Binden sollte. Die Berührung einer digitalen Klaviatur-
_ semiotische Gesten: kommunizierend hier näher untersucht werden. von Schnürsenkeln, viele handwerkliche Tätig- taste sollte einen Ton erzeugen, die Umschlie-
_ ergotische Gesten: manipulierend, kreierend
keiten und Handarbeit sind kaum mit nur einer ßung eines digitalen Objekts mit den Fingern
_ epistemische Gesten: taktil erfahrend, haptisch
Hand denkbar. Deshalb ist es wünschenswert, könnte es fixieren, die Zueinanderbewegung
explorierend
}}} Mulder: „Hand Gestures in HCI“, 1996. [Mul96] ||| auch bei der Eingabe über einen Touchscreen der Finger einer Hand sollte ein digitales Ob-
alle Finger beider Hände zur Verfügung zu jekt kontrahieren oder verkleinern usw.
haben, um ein vielseitigeres Interaktionsvoka-
bular abzudecken, das an Interaktionen mit
Objekten in der physischen Welt anknüpft.
Die nebenstehenden Abbildungen geben eine
kurze Übersicht über diese Vielfalt.
Die menschlichen Hände dienen dem Ertasten,
dem Agieren und der Kommunikation.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Interface-Elemente in der realen Welt, die man nur mit
einem Finger bedient, beschränken sich auf simple Objekte,
wie Tasten, Schalter, Knöpfe, einige Regler und druck-
sensitive Oberflächen. Konkret können das Klingeltasten,
Lichtschalter, Druckknöpfe, Klaviertasten, Schreibmaschi-
nentasten oder Klickverschlüsse sein.

57

Mit den Händen kann man, nachdem man etwas gegriffen


Objekte, die man mit mindestens zwei Fingern oder der hat, unterschiedliche Bewegungen ausführen. So kann
ganzen Hand bedient, sind schon komplexer. Darunter man etwas drehen – wie Drehregler, Verschlusskappen,
finden sich Klickverschlüsse, Scheren, Zangen, Reißver- Schlüssel, Hähne, Muttern oder Schrauben – oder etwas
schlüsse, Kurbeln, bestimmte Schalter und vieles mehr. horizontal oder vertikal drücken, ziehen, heben, tragen oder
Mehrere Finger benötigt man auch, um etwas festzuhalten, zusammendrücken – wie Schubladenfächer, Türklinken,
wie beim Umblättern von Seiten. Tassen oder Zitronen. Man kann auch Geräusche erzeugen,
wie z. B. mit den Fingerknöcheln gegen einen Gegenstand
klopfen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Nonverbale Kommunikation

Handgesten im Alltag – Kommunikation

Um aus Handbewegungen ein Vokabular für Neben der Gebärdensprache – einem vollwer- drehende Faust – untermalt werden.
die Interaktion mit einem computergestützten tigen Sprachsystem – nutzt aber jeder Mensch Was für eine Geste ausgewählt wird, hängt
Gerät zu entwickeln, liegt es nahe, Mechanis- bewusst oder unbewusst mehr oder weniger davon ab, welcher Aspekt des Gesagten als
men der Gebärdensprachen näher zu untersu- stark redebegleitende Gesten, die die gesagten besonders wichtig empfunden wird und unter-
chen, da diese bereits elaborierte Handgesten- Worte untermalen oder ihren Sinn erweitern. strichen werden soll.
vokabulare darstellen. Diese redebegleitenden Gesten folgen auch
einer Grammatik. So unterteilt die deutsche Für die Entwicklung eines Vokabulars für die
Sieht man sich als hörender Mensch solch ein Gestenforscherin Cornelia Müller diese Ges- Multitouch-Eingabe muss beachtet werden, ob
System näher an – es gibt weltweit verschie- ten in 4 Kategorien: der Nutzer bei einer bestimmten Aktion primär
58 dene Gebärdensprachen – so stellt man schnell _agierende Gesten eine Funktion – Verb – im Kopf hat oder ein
fest, dass die benutzten Gesten weit davon _zeichnende Gesten Objekt – Substantiv, Adjektiv – um sich dann
 Laut einem Artikel in der NZZ am Sonntag entfernt sind, für Unkundige intuitiv verständ- _modellierende Gesten auf ein geeignetes Mapping festzulegen: Agie-
}}} Kramer: „Grammatik der Gesten“, 2008. [Kra08] lich zu sein. Neben zahlreichen Gesten, die _verkörpernde Gesten rende Gesten passen, wenn der Fokus auf der
|||
man auf Bilder zurückführen kann, existieren Funktion liegt, zeichnende oder verkörpernde
Mehr zum Thema findet sich auf der Homepage der viele Gebärden für abstrakte Begriffe, die Diese Gesten nehmen analog zur Lautsprache Geste bei dem Fokus auf einem Objekt.
Linguistin Cornelia Müller: genau wie bei einer Fremdsprache erst erlernt bestimmte grammatische Funktionen ein und
}}} http://www.cmhmueller.de/ |||
werden müssen. Zudem zeichnet die Gebär- spiegeln damit Denkmuster wider, die sich Neben diesen redebegleitenden Gesten gibt es
sowie auf der Internetpräsenz des Projekts „Towards a
densprache im Gegensatz zur sequenziellen auch in der Strukturierung von Lautsprache fin- losgelöste Handzeichen, die für bestimmte Be-
Grammar of Gesture“:
}}} http://www.togog.org/ ||| Lautsprache eine simultane Erzählstruktur aus: den. Agierende Gesten entsprechen dabei der griffe stehen, die sich aber in ihrer Bedeutung
Mehrere Zeichen werden über unterschiedliche Funktion des Verbs, zeichnende und modellie- von Kulturkreis zu Kulturkreis stark voneinan-
Kanäle gleichzeitig dargestellt, denn neben der rende Gesten stehen für Adjektive (2D und 3D der unterscheiden können. Ist ein Handzeichen
Handhaltung spielen auch Mimik, Kopf-, Arm- betreffend) und verkörpernde Gesten stellen in einem Kulturkreis, der dem der potentiellen
und Rumpfhaltung eine wichtige Rolle für die Objekte dar. Beispielsweise kann die Rede über Nutzerschaft entspricht, etabliert, so kann
Bedeutung. Weiterhin ist Gebärdensprache einen Globus durch eine agierende – An- man sich für ein Multitouch-Vokabular auch
räumlich: Die Bedeutung des Dargestellten deutung der Drehbewegung – , durch eine hier bedienen. Dennoch sollte man bei der
hängt von Objektplatzierungen in der Luft und zeichnende – Kreisform umreißen – , durch Verwendung mehrdeutiger Zeichen Vorsicht
dazugehörenden Handbewegungsrichtungen eine modellierende –Kugelform nachahmen walten lassen.
ab. [Rol07] – oder durch eine verkörpernde Geste – sich

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Diese Abbildungen illustrieren die Vielfalt, aber auch die „Gut“ – Diese Geste ist in vielen Kulturkreisen
Mehrdeutigkeit von Handzeichen. Es gibt Gesten, die in unmissverständlich.
unterschiedlichen Kulturkreisen verschiedene Bedeutungen
haben, aber auch solche, die in ein und dem selben
Diese Geste hat je nach Kontext mehrere Bedeutungen:
Kulturkreis verschieden gedeutet werden können. Auch
„Eins“
können Variationen der Handhaltung die Bedeutung einer
„Vorsicht!“
Fingerstellung komplett verändern. Zudem existieren
„Moment“
innerhalb eines Kulturkreises für eine Bedeutung mitunter
„Darf ich reden?“
verschiedene Handzeichen.

Diese Geste hat je nach Kulturkreis verschiedene


Bedeutungen: 59
„Auszeit“ – im westlichen Kulturkreis
„Scheckheft“ / „-karte“ – in Japan
Auch diese Geste wird je nach Kulturkreis unterschiedlich
gedeutet:
„OK“, „gut“ – im westlichen Kulturkreis
„Anus“ – in Brasilien
„Geld“ – in Japan

Die Abbildungen auf dieser Seite stammen aus dem Film


von Jeff Werner: „Hand Gestures“, 2006
}}} http://jeffwerner.ca/2006/02/hand_gestures.html
Die Handorientierung kann bei gleicher Fingerhaltung die Bedeutung einer Geste komplett verändern:
|||
(Beleidigung) – Handfläche nach innen „Victory“, „Frieden“ – Handfläche nach vorn

Masterarbeit „Multitouch Input“ | Grit Schuster


Nonverbale Kommunikation

Kommunikative – „semiotische“ – Gesten Für die Konzeption rein gestischer Interfaces


können nach ihrer Funktion in 6 Gruppen ist es nützlich zu wissen, wie stark die eben
 Die Autoren tragen hier Taxonomien unterteilt werden: aufgezählten Gestentypen mit Lautsprache
aus der Linguistik zusammen: _symbolische Gesten. Die oben beschrie- verknüpft sind, inwieweit sie also in Verbin-
}}} Buxton et al.: „Human Input to Computer Systems:
benen Zeichen, die innerhalb eines Kultur- dung mit Gesprochenem auftreten oder ein
Theories, Techniques and Technology“, 2002. [Bux02]
kreises oder bestimmter sozialer Gruppen defi- eigenständiges Sprachsystem darstellen kön-
|||
niert sind. Hierunter fallen auch die Zeichen in nen. Kendons Modell, ein Kontinuum, das  Kendon ordnet in seinem Modell Gestentypen nach
Gebärdensprachen. die Abhängigkeit von Gesten und Lautsprache ihrer „linguisticity“, also wie nah sie einem eigenständi-
gen Sprachsystem kommen.
_deiktische Gesten. Bewegungen, die auf beschreibt, bietet eine Systematisierung hierzu
}}} Kendon: „How Gestures Can Become Like Words“,
60 Objekte, Richtungen oder Orte in der Umge- an:
1988. [Ken88] |||
bung zeigen oder hinweisen. Sie spezifizieren
ein „dies“, „hier“ oder „dort“. Diese Form der
Geste wird häufig im HCI-Bereich angewandt. Gestikulation – beschreibende Gesten – Pantomime – Symbole – Gebärden
_ikonische Gesten. Beschreiben Eigen-
schaften von Objekten näher, wie Größe,
Form, Farbe, Orientierung etc. und begleiten In dem Kontinuum stehen links die sprachbe- Das bedeutet, dass Gesten, die ganz links ein-
ein „ist so“, „sieht so aus“ oder „verhält sich gleitenden Bewegungen und rechts solche, die zuordnen sind, ohne einen parallelen Sprach-
so“. ein eigenes Sprachsystem darstellen und damit kanal am wenigsten verständlich sind. Gebär-
_pantomimische Gesten. Zeigen Bewe- Lautsprache ersetzen können. Ganz links wä- densprachen und symbolische Gesten können
gungen, Handhabungen oder Vorgänge. ren daher redebegleitende rhythmische Gesten im Gegensatz dazu ganz ohne lautsprachige
_rhythmische Gesten. Sind Handbewe- und Kohäsionen einzuordnen. Weiter rechts Unterstützung vom Kommunikationspartner
gungen, die im Rhythmus des Gesagten folgen dann ikonische und pantomimische interpretiert werden.
ausgeführt werden. Gesten und am rechten Ende des Kontinuums
_ Kohäsionen. Unterstreichen Verbindungen haben Symbole und Zeichensprachen den
zwischen thematisch und semantisch zusam- höchsten linguistischen Stellenwert.
mengehörigen Inhalten während des Sprech-
flusses.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Schlussfolgerungen für den HCI-Bereich

Die letzten Abschnitte haben gezeigt, dass der Gestaltung eines Gesten-Interface entschei- Für Anwendungen mit einem umfassenderen Bei der Gestaltung
Mensch in seiner physischen Umgebung Hand- den, was für Gestentypen angebracht sind. und abstrakteren Funktionsumfang eignet sich
gesten sowohl zur Manipulation als auch zur Die meisten gestenbasierten Systeme nutzen die Integrierung symbolischer Gesten. Solche eines gestenbasierten
Kommunikation einsetzt. Im kommunikativen deiktische und symbolische Gesten. Deiktische können in ihrer Bedeutung mächtiger sein und
Bereich haben sich sogar abstrakte Handsym- Gesten eignen sich besonders für die direkte komplexere Eingaben ermöglichen. Ein großer Interface sollte man
bole und komplexe gestische Zeichensysteme Manipulation grafischer Objekte, da durch Nachteil symbolischer Gesten ist allerdings,
etabliert. Das legt nahe, dass der Mensch Zeigebewegungen leicht Objekte angespro- dass diese sich bei der Interaktion oft nicht von die Balance zwischen
auch mit Computersystemen gut über Gesten chen und Positionen oder Richtungen einfach selbst erschließen und vorher gelernt werden
kommunizieren kann. Existierende Projekte artikuliert werden können. Solche Interfaces müssen. Je größer der Gestenumfang in einer direkten deiktischen
und Produkte, die die Interaktion mittels Hand- sind meist sehr intuitiv, fühlen sich natürlich an Anwendung ist, desto schwieriger kann es 61
gesten realisieren, belegen dies auch (siehe und erfordern kaum eine Lernphase, um mit auch werden, sich diese alle zu merken. und abstrakten symbo-
folgende Abschnitte dieser Arbeit). dem System umgehen zu können. Ein Beispiel
dafür ist Videoplace (siehe Abschnitt 2.1 dieser Allgemein sollte man bei der Konzeption einer lischen Gesten finden,
Je nachdem, um was für eine Anwendung es Arbeit und [Kru85]). Anwendung einen Kompromiss zwischen der
sich im Speziellen handelt, sollte man für die Nutzung einfacher deiktischer Gesten, die um eine gleichermaßen
intuitiv sind, und komplexerer symbolischer
Gesten, die dem Nutzer mehr Möglichkeiten intuitive wie mächtige
Die Existenz von Gebärdensprachen und sym- eröffnen, finden. Darüber hinaus sollte man
versuchen, aus dem Fundus auch der anderen Interaktion zu ermögli-
bolischen Gesten legt nahe, dass der Mensch in Gestentypen zu schöpfen, um ein expressives
Interface umzusetzen, das Freude bereitet. chen.
der Lage ist, auch bei der Computernutzung ein
vollwertiges zweihändiges Gestenvokabular zur
Kommunikation zu nutzen – auch wenn dieses
womöglich erst erlernt werden muss.

Masterarbeit „Multitouch Input“ | Grit Schuster


Nonverbale Kommunikation

Handgesten in der Mensch-Computer-Interaktion

 Buxton plädiert für natürliche User Interfaces: Buxton weist darauf hin, dass nonverbale Aber immerhin kann über die Maus die hori-
}}} Buxton: „The Natural Language of Interaction: A Dialoge eine günstige Interaktionsform darstel- zontale Handbewegung (zum Bewegen des
Perspective on Non-Verbal Dialogues“, 1990. [Bux90]
len, um (mit Computersystemen) zu kommu- Cursors), ein Niederdrücken einzelner Finger
|||
nizieren. Gesten zählen für ihn zum natür- (zum Anklicken, zum gedrückt Halten) und die
lichen nonverbalen Vokabular des Menschen, Streichbewegung eines Fingers (zum Scrollen)
weshalb er die Fähigkeit, mit beiden Händen kommuniziert werden.
zu interagieren, von vornherein mitbringt. Der
Autor zeigt anhand von Studien, dass Nutzer Eine fließendere und feinmotorisch besser zu
sehr gut in der Lage sind, Interaktionsaufga- steuernde Bewegung ermöglicht der Stylus
62 ben auf beide Hände aufzuteilen. Er empfiehlt in Verbindung mit einem Tablet oder direkt
so eine Aufgabenteilung vor allem dann, wenn auf einem Display angewendet. Für die
ein Arbeitsschritt einem anderen zwischenge- Styluseingabe etwa bei mobilen PDAs und in
schaltet ist. Der Zwischenschritt – die sekun- Ermangelung einer Tastatur bei diesen Geräten
däre Aufgabe – kann dann an die zweite Hand haben sich Gestenvokabulare zur Texteingabe
delegiert werden, damit die primäre Aufgabe etabliert. Solche Zeichensätze – wie Graffiti Graffiti-Gesten.
nicht in ihrem Fluss unterbrochen wird (z. – lehnen sich an die uns bekannten latei-
B. erste Hand malt, zweite Hand verschiebt nischen Buchstaben an, wobei jedes Zeichen in
zwischendurch die Ansicht). einer einzigen Linie umgesetzt wird.

Es gibt zahlreiche Beispiele, bei denen die Solche Zeichen, die durch einen Pfad defi-
Nutzereingabe über Gesten erfolgt. Mit der niert sind, wurden auch für die Mauseingabe
Maus und dem Einzug des GUI wurde es konzipiert – hier eher als Befehlszeichen zur
erstmals möglich, über Handbewegungen mit Steuerung von Applikationen. Ein Beispiel
Computersystemen zu kommunizieren – auch dafür ist StrokeIt, mit dem Funktionen via  StrokeIt kann für Windows-Systeme
wenn dieses Eingabegerät nicht primär dafür Mausbewegungen z. B. in Webbrowsern, Me- heruntergeladen werden:
}}} http://www.tcbmi.com/strokeit/ |||
konzipiert ist, Gesten, wie wir sie in der phy- diaplayern oder Chatprogrammen ausgeführt
sischen Umgebung einsetzen, zu übertragen. werden können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Ein noch direkteres Interaktionserlebnis als die Kamerasysteme schließlich machen eine Trackingsysteme werten diese dann aus. Be-
Styluseingabe bieten Touchscreens, die vor Interaktion mittels Handbewegungen in sonders im Bereich der Unterhaltungsindustrie
allem an öffentlichen Automaten zum Einsatz der Luft möglich, ohne dass der Nutzer ein kamen solche Systeme – neben Projekten in
kommen. Dort sind sie nicht nur sinnvoll, weil Instrument berühren muss. Die Kamera der Forschung – zum Einsatz. Erfolgreich war
kein Eingabeinstrument vorhanden ist, das nimmt die ausgeführten Bewegungen wahr vor allem das EyeToy-System von Sony für  EyeToy wurde aufgrund der neuen
beschädigt oder entwendet werden kann, son- und Bilderkennungs-, Bildverarbeitungs- und die Playstation 2. Interaktionsmöglichkeiten sehr populär.
}}} http://www.eyetoy.com/ |||
dern auch, weil die Eingabe durch Berührung
(von Buttons etc.) besonders intuitiv ist.

Um eine natürlichere Kommunikation mit 63


Rechnersystemen zu ermöglichen, wurden
schon viele Forschungen in Interaktionstech-
niken investiert, bei denen der Nutzer in der
Luft gestikulieren kann. Ein Beispiel dafür sind
Datenhandschuhe als Eingabegerät, die kom-
plexe Fingerbewegungen des Trägers direkt
messen können.

EyeToy lädt zu expressiven Körperbewegungen ein,


um Spielaufgaben zu meistern.
}}} http://dicasonline.com.br/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Nonverbale Kommunikation

Ähnlich expressive Gesten können mit dem


 Nintendo entwickelt im Moment immer mehr verschie- Nintendo Wii zur Kommunikation eingesetzt
dene Eingabegeräte für die Wii-Konsole, um natürliche werden, und zwar auch hier zum Spielen. Bei
Gesten und Körperbewegungen auswerten zu können.
den Eingabegeräten handelt es sich um mit
}}} http://www.wii.com/ |||
Sensoren versehenen Controllern, die Orientie-
rung, Bewegungsrichtung und Beschleunigung
der beiden Hände messen können.

Es zeigt sich, dass die Interaktion mittels Hand-


64 bewegungen besonders viel Freude bereitet,
vor allem, weil hier physische Aktionen sehr
natürlich nachempfunden werden und die
Manipulation der digitalen Welt als viel di-
rekter wahrgenommen wird. Objekte können
anvisiert und bewegt werden und Armbewe-
gungen werden zum Teil so direkt auf den
Repräsentanten des Nutzers abgebildet, als
„stecke er in seiner Haut“. Die Bewegung wird
sozusagen analog übertragen. Diese Form,
auf intuitive Weise Kontrolle über digitale Wii Sports mit dem Nintendo Wii: Ein Tennis-Doppel mit
Artefakte ausüben zu können, steigert die echtem körperlichen Einsatz.
}}} http://www.wiiwii.tv |||
Genüsslichkeit bei der Interaktion.

Je analoger die Interaktion, desto natürlicher fühlt sie sich an.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Apple hat mit seinen mobilen Multitouch-Geräten,
besonders mit dem iPhone, einen regelrechten Multi-
touch-Hype ausgelöst. Die Multitouch-Pads von Apples
Laptops werden in Zukunft sicher noch an Funktionsum-
fang zulegen.
}}} http://www.apple.com/ |||

 Das Latitude XT von Dell ist ein Tablet PC, über dessen TouchKit besteht fast nur aus einem Screen und einem
Display sowohl mit Stylus als auch mittels Multitouch-Ein- Gestell als Halterung.
gabe interagiert werden kann. Es existieren seit kurzem }}} http://www.flickr.com |||
bereits Software-Updates, um einige Standard-Applika-
tionen (Google Earth, Outlook, MS Office, Firefox, IE 7) Im digitalen Multimediabereich gibt es im
multitouchfähig zu machen. Moment einen Trend zu Geräten mit Multi-
}}} http://www.dell.com/ ||| touch-Interface. Sowohl kleinformatige mobile
Geräte – Apple iPhone & iPod Touch – als
 Spätestens mit dem Betriebssystem Windows 7 soll die
auch Laptops und Desktopsysteme – Apple
Multitouch-Eingabe allgegenwärtig werden.
}}} http://windowsvistablog.com/blogs/windowsvista/ar-
MacBook Air & MacBook Pro, Dell Latitude
chive/2008/05/27/microsoft-demonstrates-multi-touch. XT, Windows 7, n-Trig DuoSense – sowie
aspx ||| größere stationäre Systeme – Microsoft Sur- Cubit ist modular gestaltet und kann auch von Laien
face, NOR_/D Cubit und TouchKit, Lumin zusammengebaut werden.
 Bei DuoSense handelt es sich um eine transparente }}} http://www.flickr.com |||
Multitouch, Perspective Pixels – erobern 65
Sensorenschicht, die direkt vor Screens installiert werden
den Markt. Dabei handelt es sich sowohl um
kann, um Stylus- und Multitouch-Eingabe zu ermöglichen.
}}} http://www.n-trig.com/ ||| Touchpads als auch um Touchscreens, die die
Mehrfingereingabe ermöglichen.
 Das MS Surface Tabletop-System kommt bereits in
öffentlichen Kasinos, Retail Stores und anderen Einrich- Besonders Touchscreens geben dem Nutzer
tungen in den USA zum Einsatz.
das Gefühl, er könne die grafischen Objekte
}}} http://www.microsoft.com/surface |||
direkt berühren und mit seinen Fingern
 Cubit und TouchKit sind zwei Multitouch-Projekte bei beeinflussen. Diese Erfahrung wird als sehr
NOR_/D. Der Source-Code (die C++-Bibliothek open- natürlich und angenehm empfunden, was
Frameworks) steht zur freien Verfügung – das „plug-and- sich noch steigert, wenn elegante fließende
play“-Setup kann geordert werden.
Bewegungen involviert sind. Die Multitouch-
}}} http://nortd.com/cubit/ |||
Fähigkeit erlaubt zudem vielfältigere Interakti-
}}} http://touchkit.nortd.com/ |||
}}} http://www.openframeworks.cc/ ||| onsformen mit mehreren Fingern und beiden
Händen und bereichert damit die Kommunika-
 Die Lumin Visual Technology AG vertreibt u. a. ein tion zusätzlich. Dabei ist es aber sehr wichtig,
komplettes Multitouch-Tabletop-System. softwareseitig passende Interfaces anzubieten
}}} http://www.lumin.de/multitouch/ |||
und nicht in Paradigmen, die auf Mauseingabe
 Perspective Pixels bietet Lösungen für großformatige optimiert sind, zu stagnieren.
Wall-Multitouch-Systeme.
}}} http://www.perceptivepixel.com/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Anwendungen

Aktuelle Multitouch-Anwendungen

3.2 In diesem Abschnitt werden einige existie-


rende Multitouch-Anwendungen vorgestellt
und ihre Stärken und Schwächen diskutiert.
Viele Entwickler kombinieren die Multitouch-
Interaktion mit physischen Objekten, die
vom System erkannt und getrackt werden kön-
 Es gibt zahlreiche Multitouch-Anwendungen, die
physische Objekte in die Interaktion integrieren. Dazu
gehören Microsoft Surface, reacTable, AudioPad, Pico,
Die herausgegriffenen Beispiele bieten einen nen. Solche so genannten Tangible Interfaces
SenseTable, iBar, TangibleTable, Recipe Table uvm.
Überblick über die aktuellen Einsatzmöglich- scheinen digitale Inhalte greifbar zu machen
}}} http://www.microsoft.com/surface |||
keiten der Multitouch-Technologie, und die aus und verschmelzen damit die digitale mit der }}} http://reactable.iua.upf.edu |||
der Analyse gewonnenen Erkenntnisse können physischen Welt. Diese Schnittstellen, die ihren }}} http://www.jamespatten.com/audiopad |||
für die Gestaltung einer eigenen Multitouch- Reiz und ein großes Potential haben, in Zu- }}} http://www.jamespatten.com/pico |||
Anwendung genutzt werden. kunft eine immer wichtigere Rolle zu spielen, }}} http://www.jamespatten.com/sensetable.php |||
}}} http://www.i-bar.ch |||
66 sind jedoch nicht der Fokus dieser Arbeit. Hier
}}} http://www.tangibletable.de |||
Aktuelle Standard-Anwendungen für die soll das Augenmerk auf die reine Mehrfinger- }}} http://www.recipetable.net |||
Multitouch-Interaktion sind Malprogramme, eingabe gerichtet werden, die an sich schon
 Apples iPhone und iPod Touch nutzen 2-Finger- Landkarten-Navigations-Anwendungen oder eine faszinierende Art der Interaktion darstellt
Manipulation zur Bildbetrachtung und zur Navigation Bildbetrachtungsprogramme. Darüber hinaus und bisher noch nicht umfassend untersucht
in Stadtplänen, MS Surface setzt die Technik auch zur
wird die Multitouch-Technologie auch gern worden ist. Allein die bisher umgesetzten
Bildbetrachtung, zum Malen und zur Karten-Navigation
für Musikanwendungen verwendet, da Ins- Produkte und prototypischen Anwendungen
ein, Dell schlägt Interaktionstechniken für eben solche
Anwendungen vor, so wie auch unzählige weitere trumente oder Synthesizer dazu prädestiniert zeigen, dass hier noch Bedarf besteht, die
Entwickler. sind, mit mehreren Fingern gleichzeitig bedient vielfältigen Möglichkeiten, die die Multitouch-
}}} http://www.apple.com ||| zu werden. Abgesehen davon, gibt es im Mo- Interaktion bietet, besser zu verstehen, um
}}} http://www.microsoft.com/surface ||| ment noch viel Nachholbedarf, was sinnfällige überzeugende Applikationen umzusetzen,
}}} http://www.dell.com |||
Anwendungen für die Multitouch-Eingabe an- die über das Herumschieben von Bildern, die
geht, die das Potential dieser Interaktionsform 2D-Navigation und die Visualisierung von
 Unter Multitouch-Musikanwendungen fallen u. a. wirklich ausschöpfen. Fingerspuren hinausgehen.
Lemur und Dexter von JazzMutant, reacTable oder
AudioPad.
}}} http://www.jazzmutant.com |||
}}} http://reactable.iua.upf.edu |||
»One of the things our grandchildren will find quaintest about us is that
}}} http://www.jamespatten.com/audiopad |||
we distinguish the digital from the real.« (William Gibson, 2007)

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die Geräte von JazzMutant Dexter und Lemur
sind multitouch-fähig.
}}} http://www.jazzmutant.com |||

Die Installation floating.numbers von ART+COM aus dem


Jahr 2004.
}}} http://www.artcom.de |||
Tim Roths Master-Projekt 180 aus dem Jahr 2007.
}}} http://www.timroth.de/180 |||

67
Der Interacitve Table ist ein Beispiel eines
Sensitive.Wall ist ein vertikales Multitouch-Display von iO. Multitouch-Tisches des Werk5.
}}} http://www.sensitivewall.com ||| }}} http://www.interactive-table.de |||

Tangent – ein Forschungsprojekt der


Zürcher Hochschule der Künste. HoloWall – eine der frühen Multitouch-Screens
}}} http://zima.ch/tangent ||| auf der Siggraph‘98.
iBar – ein interaktiver Tresen – reagiert auf Objekte und
Fingerberührungen. }}} http://www.sonycsl.co.jp/person/rekimoto/holowall
}}} http://www.i-bar.ch ||| |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Anwendungen

As-Rigid-As-Possible Shape Manipulation

 As-Rigid-as-Possible Shape Manipulation ist ein Takeo Igarashi und seine Arbeitsgruppe haben zer Übungszeit schon komplexe Bewegungen
Projekt von Takeo Igarashi, Tomer Moscovich, and John F. 2005 ein Multitouch-Animationssystem mit ausführen. Sie nutzen schnell automatisch
Hughes aus dem Jahr 2005.
dem SmartSkin-Touchpad (siehe Kapitel 2) und mehrere Finger (oft beide Daumen und Zei-
}}} Igarashi et al.: „As-Rigid-As-Possible Shape Manipu-
Topdown-Projektion umgesetzt. Während in gefinger), um lebendige und ausdrucksstarke
lation“, 2005. [Iga05] |||
}}} http://www-ui.is.s.u-tokyo.ac.jp/~takeo/research/ri- dem zugehörigen Paper der Fokus auf den Bewegungsabläufe umzusetzen.
gid/index.html ||| Algorithmen und der Implementierung liegt,
konzentriert sich Moscovich in seiner Disserta- Die extrem intuitive Handhabung ergibt sich
tion auf das Interaktionserlebnis des Nutzers. aus dem hohen Freiheitsgrad der Objektsteue-
rung und das direkte Mapping dieser Eingabe
68 Das interaktive System ermöglicht es dem Nut- auf ein Feedback, das dem der physischen
zer, 2D-Figuren direkt mit mehreren Fingern Welt weitgehend entspricht. Menschen sind
 Moscovichs Dissertation über das Projekt und über in Echtzeit zu bewegen und zu deformieren, erfahren darin, Abläufe und zeitliche Gescheh-
fließende, koordinierte Multitouch-Interaktion. indem die Kontroll-Berührungspunkte den nisse mit Hilfe von Bewegungen (Gesten)
}}} Moscovich: „Principles and Applications of Multi-
Fingerbewegungen folgen und die Form der zu kommunizieren und besitzen dabei ein
touch Interaction“, 2007. [Mos07] |||
Figur entsprechend angepasst wird. natürliches Gefühl für Timing. Die expressive
Kraft und Nuancen von Handgesten und Kör-
Die Entwickler konnten beobachten, dass persprache werden in dieser Applikation direkt
Nutzer, die das Programm zum ersten Mal auf die virtuellen Charaktere übertragen. Dabei
verwenden und keinerlei Erfahrungen im Ani- bleibt das Interface simpel (sozusagen unsicht- Nutzer können 2D-Figuren direkt und intuitiv mit ihren
mationsbereich besitzen, die Wirkungsweise bar) und regt aufgrund seiner „Natürlichkeit“ Fingern in Echtzeit animieren.
}}} [Mos07] |||
der Interaktion sofort verstehen und nach kur- Exploration, Kreation und Kollaboration an.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Multitouch-Eingabe ist ein gutes Werkzeug für
Die beschriebene Anwendung zeigt, dass
Multitouch-Eingabe sehr gut für die Echtzeit- die direkte Kommunikation von Ideen, Gedan-
Manipulation grafischer (2D-) Objekte geeignet
ist, bei der die Artikulierung von Ideen in ken und Vorgängen in expressiver Weise – aber
expressiver, spielerischer und ablauforientierter
bzw. erzählerischer („story telling“) Form im inwiefern eignet sie sich für Anwendungen, bei
Vordergrund steht.
denen Genauigkeit, Eindeutigkeit, abstrakte Da-
Anwendungen, die in diesen Bereich fallen,
sind solche, bei denen der Nutzer seine Ideen ten oder diskrete Aktionen eine Rolle spielen? 69
möglichst schnell und direkt – „quick & dirty“
– visualisieren und kommunizieren kann und
dabei genug Freiheiten hat, seine „persönliche Die Frage, ob Multitouch-Eingabe auch in denen der Fokus auf anderen Nutzerakti-
Note“ mit einzubringen. Dazu gehören Auto- anderen Anwendungskontexten eine probate onen liegt, wie die exakte Dateneingabe und
rensysteme, die Kreativität, Ausdruckskraft und Schnittstelle darstellt, wird mit diesem Beispiel -manipulation, die Navigation, Suche oder
unter Umständen Gruppenarbeit unterstützen, nicht beantwortet. Zu untersuchen bleibt, ob Interaktion innerhalb konkreter oder abstrakter
indem sie das Umsetzen von Notizen, Skizzen, und wie diese Art der Interaktion für Applika- Datenstrukturen, die Umsetzung klar spezifi-
Ideenstrukturen und Gedankengängen in tionen einen Mehrwert bieten kann, in denen zierter und nicht vager Vorgänge oder Modelle
irgendeiner Form – in diesem Fall in Form von andere Anforderungen erfüllt werden müssen, oder die Ausführung diskreter Funktionen.
Animationen – zulassen. wie Genauigkeit oder Eindeutigkeit bzw. bei

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Anwendungen

RoomPlanner

 An der University of Toronto haben Wu und Die Multi-User-Anwendung RoomPlanner Es wurden 4 Interaktions-Kategorien der Ein-
Balakrishnan Multitouch-Interaktionstechniken anhand wurde in der Arbeitsgruppe rund um Wu und gabegesten aufgestellt:
einer kollaborativen Beispielanwendung untersucht.
Balakrishnan 2003 in Toronto umgesetzt. Die _Ein-Finger-Eingabe
}}} Wu & Balakrishnan: „Multi-Finger and Whole Hand
Autoren untersuchten dabei Eingabetech- _Zwei-Finger-Eingabe
Gestural Interaction Techniques for Multi-User Tabletop
Displays“, 2003. [Wu03] ||| niken mit den Fingern und Händen sowie _Ein-Hand-Eingabe
Interaktions- und Visualisierungstechniken zur _Zwei-Hand-Eingabe
Unterstützung von Privatsphäre und gemein- Die nebenstehende Abbildung zeigt alle ver-
schaftlich genutzten Bereichen und Objekten. fügbaren Gesten.
Für die Umsetzung wurde das Tabletop-System
70 DiamondTouch (siehe Kapitel 2) verwendet. Möbelobjekte können mittels einfachem Touch
selektiert und mit einer einfachen Drag-Bewe-
In RoomPlanner können mehrere Nutzer gung verschoben werden. Ein Double Tap lässt
grafische Objekte, die Möbelstücke repräsen- eines der vier kontextabhängigen kreisför-
tieren, auf einem 2D-Grundriss anordnen, um migen Menüs zur Erstellung oder Manipulation
die Möblierung eines Raums zu planen. Das von Objekten an der Stelle erscheinen. Die
Interface teilt sich in einen zentralen Gemein- Auswahl in dem Menü erfolgt durch ein Drag
schaftsbereich, in dem der Grundriss angezeigt des immer noch auf dem Screen befind-
ist, und private Bereiche auf, die sich jeweils lichen Fingers in das jeweilige Widget. Gibt
direkt vor den Nutzern befinden. Innerhalb es noch ein Untermenü für diese Auswahl, (a) Tap: Ein-Punkt-Berührung. (b) DoubleTap. (c) Flick:
des eigenen privaten Bereichs können Ideen so erscheint, sobald der Finger innerhalb des schnelle Drag-Bewegung vom Nutzer weg. (d) Catch:
schnelle Drag-Bewegung zum Nutzer hin. (e) Flache Hand:
entwickelt und ausprobiert werden, um dann Widgets ist, die Unterauswahlliste, die mit
Hand liegt flach auf Display auf. (f) Vertikale Hand: Hand-
im gemeinschaftlichen Bereich zusammen mit einem zweiten Finger bedient werden soll. Die
kante berührt Display, Finger zeigen vom Nutzer weg. (g)
den anderen Nutzern die Endvision zusam- Autoren betonen, dass eine solche Auswahl in Horizontale Hand: Handkante berührt Display, Handfläche
menzustellen. einer einzigen fließenden Geste erfolgt. zeigt zum Nutzer. (h) Gekippte Hand: Handfläche der hori-
zontalen Hand nach oben gekippt. (i) Zwei vertikale Hände
zueinander hin oder voneinander weg bewegend. (j) Zwei
gewinkelte Hände: Finger abgeknickt.
}}} [Wu03] |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Dieses Widget für die Unterauswahl – die Tool- den Rotationsmittelpunkt und der zweite den
Palette – „klebt“ an dem ersten Finger und Drehwinkel. Während die Drehung ausgeführt
folgt seiner Drag-Bewegung. Auf diese Weise wird, kann der erste Finger loslassen, um mehr
kann die Palette dorthin geschoben werden, Bewegungsfreiheit zu garantieren. Die Autoren
Die Interaktion mit dem Kontextmenü: (a) Durch ein Double wo der Befehl – z. B. das Erzeugen eines schlagen noch weitere Rotationstechniken vor:
Tap erscheint das Menü um den Finger. (b) Der Finger kann neuen Objekts – stattfinden soll. Die Palette Beide Finger können gleichermaßen die Ro-
auf ein Auswahl-Item gleiten, worauf das entsprechende
verschwindet so lange nicht, wie der erste Fin- tation und gleichzeitig eine Verschiebung des
Untermenü – eine Tool-Palette – erscheint, die an dem
ger das Display nicht verlässt. Auf diese Weise Objekts beeinflussen. Oder die Drehung erfolgt
Finger „klebt“. (c) Ein zweiter Finger kann die Auswahl in
der Palette tätigen. können mehrere Objekte auf der Fläche verteilt nur mit einer Fingerspitze, die sich selbst dreht.
}}} [Wu03] ||| erzeugt werden, ohne dass das Menü immer Diese letzte Technik erfordert allerdings, dass 71
wieder aufgerufen werden muss. das System diese Drehung auch wahrnehmen
kann. Es wird angedacht, die 2-Finger-Rotation
Mit einer Flick-Bewegung kann ein Objekt zu mit einer Skalierung basierend auf der Distanz-
einem anderen Nutzer geschleudert werden. änderung der beiden Finger zu kombinieren.
Diese Geste ist dem Werfen von physischen
Objekten nachempfunden. Eine Catch-Bewe- Eine Rotation kann auch über ein Widget erfol-
gung hingegen kopiert ein Objekt, dessen Po- gen, über das der Nutzer Parameter anpasst.
sition die verlängerte Pfadlinie schneidet, und Dieses Widget „klebt“ auch an dem ersten
die Kopie landet im eigenen privaten Bereich. „Menüfinger“ und kann mit einem zweiten be-
Es existiert dabei in jedem privaten Bereich ein dient werden. Es beinhaltet drei Pfeilpaare mit
Areal, aus dem von anderen Nutzern keine Ob- nach oben und nach unten gerichteten Pfeilen.
jekte kopiert werden können. Durch Berühren der Pfeile vergrößert bzw.
verkleinert sich der Wert des Parameters. Dabei Um Parameter anzupassen kann zwischen drei Auflösungs-
Um Objekte zu rotieren, werden zwei Finger unterscheiden sich bei den drei Pfeilpaaren die stufen zur Inkrementierung gewählt werden. Je weiter die
beiden Finger auseinander liegen, desto stärker ist die
benutzt: Erst berührt ein Finger das Objekt, Inkrementierungen bei der Wertmanipulation
Änderung, je näher zusammen sie sind, desto feiner kann
dann berührt ein zweiter Finger den Hinter- – die dem 1. Finger am nächsten liegenden
justiert werden.
grund nahe des Objekts, um die Rotation Pfeile rufen die geringste Änderung hervor. }}} [Wu03] |||
einzuleiten. Dabei spezifiziert der erste Finger

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Anwendungen

Durch eine Verschiebung der flachen Hand auf Die Auseinanderbewegung zweier vertikaler
dem Display kann die Ansicht der Anwendung Hände verteilt alle dazwischen liegenden
um deren Pivot gedreht werden. Solange Objekte gleichmäßig auf dem Grund, der sich
mindestens ein Kontaktpunkt dieser Berührung zwischen den Händen aufspannt. Bewegen
erhalten bleibt, kann die Rotation – in einer sich die beiden Hände aufeinander zu, so
angenehmeren Handhaltung – fortgesetzt werden alle dazwischen liegenden Objekte
werden. Eine Alternative wäre, die Hand zu zusammengeschoben. Bewegen sich die Hän-
drehen und dabei die Ansicht um den Mittel- de in die gleiche Richtung, dann gleiten alle Mit zwei vertikalen Händen können Objekte
punkt dieser Hand zu rotieren. dazwischen liegenden Objekte mit ihnen mit. zusammengeschoben oder wieder verteilt werden.
}}} [Wu03] |||
72 Diese zweihändigen Gesten werden analog
Mit einer Bewegung der vertikalen Hand kann zu der einhändigen vertikalen Schiebegeste
der Nutzer – analog zur physischen Welt – Ob- abgebildet.
jekte zur Seite wischen. Durch das Aufsetzen
der horizontalen Hand erscheint eine Box vor Mit dem Auflegen zweier angewinkelter Hän-
der Handfläche, in der Eigenschaften von dort de schließlich wird eine rechteckige Bearbei-
befindlichen Objekten angezeigt werden, die tungsfläche erzeugt, die alle darin befindlichen
nur der Nutzer selbst einsehen kann. Diese Box Objekte kopiert. Die Breite der Box wird durch
Die Objekteigenschaften-Box. }}} [Wu03] ||| folgt der aufgesetzten Hand und verschwin- den Abstand der Hände definiert, die durch
det, wenn sie wieder angehoben wird. Verschieben noch geändert werden kann, und
die Höhe entspricht der Länge der Handflä-
Wird nun die Handfläche nach oben gekippt, chen. Die Bearbeitungsfläche samt der auf ihr Zwei angewinkelte Hände definieren eine Box,
fungiert – aufgrund der Topdown-Projekti- liegenden Objekte kann durch Verschieben der die alle in ihr befindlichen Objekte kopiert.
}}} [Wu03] |||
on – die Hand selbst als Display. Mit dieser angewinkelten Hände oder durch nachherigen
subtilen Bewegung werden diskret private einfachen Finger-Drag verschoben werden.
Informationen auf die Hand projiziert.

Die Handfläche als Display für private Informationen.


}}} [Wu03] |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Bei der Konzeption einer Multitouch-Anwendung
gibt es einige Regeln zu beachten: Die Interface-
Anordnung sollte auf die Hände optimiert wer-
den, um z. B. Verdeckungen zu vermeiden. Das
In der Auswertung der Studie von Wu et al. Wird das Widget zur Parameteränderung initial
hat sich gezeigt, dass die Probanden die hier mit dem Daumen aufgerufen, ist die Wertan- System sollte den Nutzer bei der Eingabe durch
aufgeführten Gesten schnell gelernt haben passung mit dem Zeigefinger leicht möglich.
und effektiv anwenden konnten. Zu Interak- Wird jedoch initial der Zeigefinger genutzt, visuelles Feedback und Präzisionsmechanismen
tions-Details gab es folgende Rückmeldungen: fällt die Anpassung mit anderen Fingern der
gleichen Hand sehr schwer. Wenn das System unterstützen. Komplementäre Gesten sollten
Das kreisförmige Menü wurde teilweise durch erkennen kann, welchen Finger der Nutzer
den Finger, der es aufgerufen hatte, verdeckt. initial verwendet, könnte sich die Anordnung auch komplementäre Aktionen hervorrufen.
Es wird vorgeschlagen, deshalb die Menüein- dieses Interface-Elements dem unterordnen.
träge nur oberhalb des Fingers kreisförmig So könnte bei dessen Aufruf mit dem Zeigefin- Wenn der Nutzer die Art der Ausführung einer 73
anzuordnen. ger der Mittelfinger zwischen den Inkrement-
faktoren wählen, während der Daumen den Geste initial selbst bestimmen kann, dann darf
Die Erzeugung der Bearbeitungsfläche könnte Wert auf der anderen Seite des Zeigefingers
eher durch die Berührung des Screens mit erhöht bzw. senkt. ihn diese Entscheidung nicht in nachfolgenden
vier Fingern (2 Daumen und 2 Zeigefingern)
erfolgen, um auch deren Höhe spezifizieren zu Die Probanden erwarteten, dass die Schiebe- Interaktions-Schritten behindern.
können. Eine andere Möglichkeit wäre der Ein- bewegung mit der vertikalen Hand auch mit
satz einer angewinkelten Hand in Verbindung der horizontalen Hand ausgeführt werden Die Probanden konnten das abgeschlossene komplementärer Gesten: Das Auflegen und
mit einer Fingerberührung der anderen Hand, kann. Gestenset gut verinnerlichen und anwenden. Schieben der horizontalen Hand bewirkte
die die gegenüberliegende Ecke der Fläche be- Bei der Studie wurden jedoch einige Schwä- entgegen den Erwartungen der Nutzer etwas
stimmt. Ein nachträgliches Ändern der Größe Dieses Beispiel einer prototypischen Multi- chen des Konzepts offenbart. Diese beinhalten anderes, als die gleiche Bewegung mit der ver-
dieser Bearbeitungsfläche wurde gewünscht. touch-Anwendung und deren Evaluierungs- vermeidbare Probleme wie die Verdeckung tikalen Hand. Schließlich kam es zu Problemen,
ergebnisse bieten eine schöne Erfahrungs- relevanter Interface-Elemente (Widget-Anord- wenn Interaktionen mit anderen Fingern initia-
Bei der Rotation von Objekten wurde eine grundlage, aus der man für die Entwicklung nung) oder die fehlende Unterstützung des lisiert wurden, als es die Entwickler vorgesehen
Snap-Funktion für bestimmte Grundwinkel einer eigenen Applikation Schlussfolgerungen Nutzers durch das System, um Präzision bei hatten. In solchen Momenten sollte das Inter-
vorgeschlagen. Für die Catch-Geste wurde ein ziehen kann. der Manipulation zu ermöglichen (Snapping, face entweder flexibler reagieren oder dem
visuelles Feedback vom System gewünscht, das visuelles Feedback). Ein weiters Problem war Nutzer bessere Anhaltspunkte geben, damit er
visualisiert, welches Objekt kopiert wird. eine Inkonsistenz in der Bedeutungszuweisung Gesten automatisch nicht „falsch“ einleitet.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Anwendungen

reacTable und Fiducials

 Das reacTIVision-Framework besteht aus einem DRI- ReacTable ist ein elektro-akustisches Tabletop- Die Umsetzung eines Musikinstruments eignet Die Interaktion mit dem reacTable
Setup und dazugehörender Software, die frei herunter- Musikinstrument für expressive kollaborative sich in vielerlei Hinsicht, um Multitouch-Inter- vereint Präzision und Expressivität.
geladen werden kann. ReacTable wurde von der Musik }}} http://reactable.iua.upf.edu/ |||
Live-Performances, das mit dem reacTIVision- aktionstechniken zu untersuchen. Musikins-
Technology Group der Pompeu Fabra University in
Framework umgesetzt wurde. Es kann mit trumente bieten generell die Möglichkeit, eine
Barcelona entwickelt und soll Ende 2008 auf den Markt
kommen. Hilfe von mit visuellen Markern versehenen große Bandbreite an Informationen parallel
}}} Kaltenbrunner & Bencina: „reacTIVision: A Pucks – Tangible Objects mit fiducial symbols zu kommunizieren. Genau dieses Potential
Computer-Vision Framework for Table-Based Tangible – bedient werden, indem diese auf das Display eröffnet auch die Multitouch-Interaktion durch
Interaction“, 2007. [Kal07] ||| gelegt und dort verschoben und rotiert wer- die vielen Freiheitsgrade bei der bimanuellen
den. Die Fiducial-Marker werden dabei vom Nutzereingabe. Weitere Eigenschaften, die der
74 Computer-Vision-System erkannt und getrackt, Multitouch-Interaktion zugesprochen werden,
wodurch die Positionen, Orientierungen und sind direkte Manipulation (mit unmittelbarem
 Die reacTable-Homepage: Lagebeziehungen der aufliegenden Objekte Feedback), intuitive Nutzung und ein genüss-
}}} http://reactable.iua.upf.edu/ ||| ausgewertet werden können. licher Umgang, was zur spielerischen Explora-
tion das Systems ermuntert und die Kreativität
Mit Hilfe der Tangibles können auf der runden unterstützt. Für die Realisierung dieser Eigen-
Tischoberfläche Audio-Topologien konstruiert schaften sind Musik-Tools prädestiniert. Das
werden, die wie modulare Synthesizer-Kom- alles spiegelt sich in den Kerneigenschaften
ponenten oder eine „greifbare flussgesteu- des reacTable wider:
erte Programmiersprache“ funktionieren.
Mehrere Nutzer können gleichzeitig durch _kollaborativ: Mehrerer Nutzer können ge-
Manipulation der Objekte in die Topologie meinsam performen.
eingreifen und zusätzliche Parameter mittels _intuitiv: Keine Gebrauchsanweisung nötig.
Fingergesten steuern. Jeder Pucktyp hat dabei _herausfordernd und interessant: Exploration
eine spezielle Funktion zur Soundgenerierung, wird angeregt.
-modifizierung oder -steuerung (Generatoren, _erlernbar und beherrschbar: Selbst von Die Lagebeziehungen der modularen Objekte zueinander,
Modulatoren, Filter etc.). Gleichzeitig gibt die Kindern. ihre Position und Orientierung beeinflussen den Soundfluss.
}}} [Jor07] |||
Displayoberfläche mittels visuellem Feedback _geeignet für Anfänger (für Installationen) und
Aufschluss über den aktuellen „Soundfluss“. fortgeschrittene Musiker (für Konzerte)

Ein Fiducial-Symbol aus dem reacTIVision „amoeba“-Set.


}}} http://reactable.iua.upf.edu/
Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction |||
Design
Für die Multitouch-Technologie eignen sich be-
sonders Anwendungen, die ein intuitives, spie-
lerisches und immersives Interaktionserlebnis
 Das Modell hinter und die Konstruktion von reacTable Der schon seit einigen Jahren praktische ermöglichen. reacTable zeigt, dass eine leicht
wird unter anderem beschrieben in: Einsatz des reacTable – bei Ausstellungen von
}}} Jordà et al.: „The reacTable: Exploring the Synergy
between Live Music Performance and Tabletop Tangible
Laien und bei Konzerten von Experten genutzt zugängliche, expressive und kontinuierliche Inter-
– bestätigt die beschriebenen Eigenschaften.
Interfaces“, 2007. [Jor07] |||
}}} Kaltenbrunner et al.: „The reacTable: A Collaborative aktion, die Novizen anspricht, mit Präzision und
Musical Instrument“, 2006. [Kal06] |||
}}} Jordà et al.: „The reacTable“, 2005. [Jor05] ||| einem mächtigen Funktionsumfang vereinbar ist,
um gleichzeitig Profis zu bedienen.
75

Visuelles Feedback gibt Aufschluss über die Eigenschaften


und die Funktionsweise der physischen Eingabeobjekte.
}}} http://reactable.iua.upf.edu/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

3.3 Neben den oben beschriebenen Beispielen


für die Multitouch-Screen-Interaktion gibt es
verwandte Eingabetechniken, die viele Cha-
rakteristika mit ihr teilen. Darunter fallen die
Multitouch-Pad-Eingabe oder auch die Eingabe
mittels Stylus. Was diese Interaktionsformen
gemeinsam haben, ist die besondere Eignung
für den Einsatz von kontinuierlichen Gesten.
76
Darüber hinaus sind im Rahmen dieser Arbeit
Anwendungen von Interesse, die bimanuelle
Interaktionsmechanismen untersuchen, wes-
halb aus diesem Kontext auch ein Beispiel hier
aufgeführt wird.

Zusätzlich wird ein Blick auf Projekte geworfen, Alle Abbildungen auf dieser Doppelseite stammen von
die das „Klick-Paradigma“ der Maus hinter- }}} http://www.tactiva.com |||
fragen oder Alternativen für die Texteingabe
ohne Tastatur untersuchen – Beispiele, die bei
der Konzeption einer Multitouch-Anwendung
von Interesse sein können.

Die Erstellung verschiedener Objekte wird durch einen


Moduswechsel über ein Toolbar realisiert.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Tactiva – TactaPad

 Tactiva sitzt in Palo Alto, Kalifornien. Das TactaPad soll TactaPad ist ein drucksensitives Multitouch- bietet das TactaPad eine Force-Feedback-Funk- gleichzeitig manipulieren realisiert. Für weitere
via USB-Schnittstelle mit Mac OS X- und Windows Pad, das bei Tactiva entwickelt wurde. Es tion, die dem Nutzer ein taktiles Feedback Funktionen wird leider auf für klassische Einga-
-Systemen kompatibel sein, wird aber noch nicht auf dem
ist als Mausersatz angedacht und kann mit über „angefasste“ Objekte oder ausgeführte begeräte optimierte Paradigmen wie Toolbar
Markt zum Kauf angeboten.
beiden Händen bedient werden, um mit dem Aktionen gibt. zum Moduswechsel und andere Widgets für
}}} http://www.tactiva.com |||
Computer in direkter und natürlicher Weise zu Parametermanipulationen zurückgegriffen.
interagieren. Eine Kamera verfolgt dabei die Um die Mehrfingereingabe und die Force-
Bewegungen der Hände und ermöglicht die Feedback-Funktion zu unterstützen, muss es Interessant an TactaPad ist die Repräsentation
Live-Darstellung der transluzenten Fingersil- natürlich entsprechend angepasste Anwen- der Finger auf dem Screen. Damit nähert sich
houetten auf dem Bildschirm, wodurch dem dungen dazu geben. Tactiva hat das Demopro- das Interaktionserlebnis dem einer Touch-
Nutzer das Gefühl vermittelt wird, er fasse gramm TactaDraw zur Erstellung und Mani- Screen-Benutzung an, wobei die „durchsich- 77
in den Rechner hinein, um digitale Objekte pulation von Vektorgrafiken implementiert. tigen Hände“ keine Verdeckungsprobleme
zu berühren. Jede Berührung wird zusätzlich Damit werden „die üblichen“ Multitouch-In- bereiten.
durch einen Softwarecursor repräsentiert. Um teraktionstechniken wie Objekte mit 2 Fingern
die natürliche Anmutung noch zu steigern, drehen und skalieren oder mehrere Objekte

Objektparameter wie Konturdicke werden klassisch über Objekte können mit 2-Finger-Drags gedreht und skaliert Erst über einen Moduswechsel kann die Ansicht
Widgets mit Schiebereglern und Buttons manipuliert. werden. verschoben, gedreht und skaliert werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

FingerWorks – iGesture & TouchStream

FingerWorks – eine US-Firma, die 1998 und der selben Oberfläche ermöglichen, und  Die FingerWorks-Homepage mit Nutzerguides ist noch
gegründet und 2005 von Apple aufgekauft erkennen darüber hinaus Multitouch-Gesten. aktiv, auch wenn die Firma nicht mehr existiert und die
Produkte nicht mehr vertrieben werden.
wurde – brachte das iGesture Pad und das Dafür wurde ein Gesten-Satz entwickelt, mit
}}} http://www.fingerworks.com |||
TouchStream Pad in mehreren Ausführungen dem die Intention des Nutzers – also ob er
auf den Markt, die via USB mit den heute gän- gerade Tippen, eine Geste ausführen, eine FingerWorks wurde von John Elias und Wayne Wester-
gigsten Betriebssystemen (Windows, MacOS Mausoperation durchführen oder lediglich man, Wissenschaftler der University of Delaware, gegrün-
det – in Westermans Dissertation finden sich Details zur
X, Linux, BeOS) kompatibel sind. Die iGesture- die Hand ausruhen will – identifiziert werden
Technologie und Interaktion:
Pads und das TouchStream Mini sind für die kann. Dieses Vokabular wird an dieser Stelle
}}} Westerman: „Hand Tracking, Finger Identification,
Eingabe mit einer Hand gedacht, die übrigen genauer untersucht. and Chordic Manipulation on a Multi-Touch Surface“,
78 größeren TouchStream-Tastatur-Pads sollen mit 1999. [Wes99] |||
beiden Händen bedient werden. Die FingerWork-Pads unterscheiden im We-
sentlichen drei Modi:
iGesture und TouchStream emulieren Maus- _Tastatureingabe
und Tastatur-Eingaben, indem sie gleichzeitiges _Gesten (Cursorbewegung, Scrollen, Maus-
Tippen (Tastatureingabe), Pointing (Cursorbe- klickgesten, Funktionsgesten, Modifier Chords)
wegung) und Klicken (Mausbutton) auf ein _Ausruhen von Hand / Fingern

Das FingerWorks iGesture numPad und das iGesture Pad. Das FingerWorks TouchStream LP Pad.
}}} http://www.fingerworks.com ||| }}} http://www.fingerworks.com |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Von der jeweils initialen Berührung des Pads Fingerposition absolut auf die Cursorposition. Nutzers muss kein Gerät festhalten und kann
leitet das Eingabegerät ab, in welchem Modus Damit ist es unerheblich, wo die Bewegungs- jederzeit auf dem Pad zum Ausruhen abgelegt
der Nutzer im Moment arbeiten will bzw. ob geste auf dem Pad startet. Das selbe gilt auch werden. Die Effizienz kommt außerdem da-
er einfach seine Hand zum Ausruhen ablegt. für alle Klick-Gesten (Mausbutton-Emulierung): durch zustande, dass sämtliche Gesten überall
Single-Finger-Taps werden als Tastatureingabe Der Klick findet letztendlich dort statt, wo sich auf dem Pad ausgeführt werden können, statt
interpretiert, das Ablegen aller fünf Finger der Software-Cursor gerade befindet – unab- das entsprechende Tastenkürzel umständlich
gleichzeitig als Ausruhen und alle anderen hängig von den Fingerpositionen auf dem Pad. zu greifen oder den Mauszeiger erst zu einem
Berührungen (Mehrfingertaps oder Drags) Interface-Element auf dem Bildschirm bewe-
als Eingabegesten. Die FingerWorks-Pads Die Aufstellung einiger Gesten aus dem Fin- gen zu müssen.
können dabei erkennen, mit welchen Fingern gerWorks-Repertoire auf den folgenden Seiten 79
sie berührt werden, ob die Berührung mit veranschaulicht dessen Charakteristik. Den Die Entwickler verweisen darüber hinaus
dem Handballen vollzogen wird, ob die Finger Entwicklern geht es nach eigenen Angaben auch auf die Natürlichkeit und Flüssigkeit von
gespreizt sind und welche Hand benutzt wird. vor allem um ergonomische Aspekte und um Handgesten als Mittel zur Kommunikation und
Auf diese Weise ist die Unterscheidung vieler Effizienz bei der Eingabe. Durch die Verschmel- darauf, dass Handbewegungen leicht zu erler-
ähnlicher Gesten möglich. zung von Tastatur und Maus in einem Gerät nen und zu merken sind. Vor allem zueinander
und durch die wegfallende Kraftaufwendung, komplementäre Befehle – Undo / Redo, Vor
Für die Zeigerbewegungen (Mauscursor) agiert die beim Niederdrücken von Tasten und Maus- / Zurück, Öffnen / Schließen – können besser
das Pad als relatives Eingabegerät. Das bedeu- buttons nötig ist, kann der Nutzer mit weniger als jeweils verschiedene Tastenkürzel gemerkt
tet, dass die Bewegung der Finger auf die Cur- Finger-, Hand- und Armbewegungen alle werden, wenn die dazugehörenden Gesten
sorbewegung abgebildet wird und nicht die üblichen Eingaben vornehmen. Die Hand des ebenfalls komplementär gestaltet sind.

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

An dieser Stelle folgt eine Aufstellung wich- Mausemulierung Modifier Chords Funktionsgesten
tiger – längst nicht aller – Gesten für die
FingerWorks-Produkte. Cursorbewegung: Shift: Kopieren:
_Drag mit 2 beliebigen _Hold mit den 4 Fingern + _Tap mit Daumen und
benachbarten Fingern Tippen mit der anderen Hand oder Heben Mittelfinger
eines dieser 4 Finger und Tippen mit diesem
Selektieren / Draggen: Ausschneiden:
_Drag mit 3 beliebigen Ctrl / Apfel / Cmd: _Drag von Daumen und
benachbarten Fingern _gespreiztes Hold mit den 4 Mittelfinger zueinander hin
Fingern + Tippen mit der anderen Hand oder
Links-Klick: Heben eines dieser 4 Finger und Tippen mit Einfügen:
_Tap mit 2 beliebigen diesem _Drag von Daumen und
80 benachbarten Fingern Mittelfinger voneinander weg
Der Shift- bzw. Ctrl-Modus bleibt so lange
Doppelklick: bestehen, wie mindestens einer der 4 Finger Undo / Redo:
_Tap mit 3 benachbarten sein Hold aufrecht erhält. _Drag mit Daumen und
Fingern Mittelfinger nach oben / unten
Multi-Modifier-Tastenkürzel wie Ctrl-Alt-Del
Mittel-Klick werden nicht mit Gesten, sondern durch Tab / BackTab:
(nur im 3-Button-Modus): Berühren der aufgedruckten „Tasten“ – also im _Drag mit Daumen und
_Tap mit Daumen, Zeige- & Mittelfinger Tastatur-Modus – durchgeführt. Dabei muss Mittelfinger nach rechts / links
der Nutzer darauf achten, dass er bspw. „Ctrl“
Rechts-Klick und „Alt“ nicht gleichzeitig sondern nachein- Abbrechen:
im 2-Button-Modus: ander berührt, da die Eingabe sonst als Maus- _Rotation der Hand gegen den
_Tap mit Daumen, Mittel- & Ringfinger Klick oder Mausbewegung interpretiert wird. Uhrzeigersinn mit gedrücktem
im 3-Button-Modus: Daumen und Mittelfinger
_gespreiztes Tap mit Daumen,
Ring- & kleinem Finger Leertaste:
_Rotation der Hand im
Scrollen Uhrzeigersinn mit gedrücktem
_Drag mit den 4 Fingern Daumen und Mittelfinger

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Öffnen: Applikation wechseln: Linksbündig (linke Hand):
_Rotation der Hand gegen den _gespreiztes Drag mit Daumen _gespreiztes Drag mit Daumen,
Uhrzeigersinn mit gedrücktem & äußeren 3 Fingern nach rechts / links Ring- & kleinem Finger nach links
Daumen & 3 Fingern
Zoom in / out: Rechtsbündig (linke Hand):
Schließen: _Drag mit 5 Fingern _gespreiztes Drag mit Daumen,
_Rotation der Hand im auseinander / zueinander Ring- & kleinem Finger nach rechts
Uhrzeigersinn mit gedrücktem
Daumen & 3 Fingern Enter: Mittig (linke Hand):
_gespreiztes Tap mit _gespreiztes Drag mit Daumen,
Sichern: Daumen und kleinem Finger Ring- & kleinem Finger nach unten
_Drag von Daumen und
3 Fingern zueinander hin Finden: Blocksatz (linke Hand): 81
_Drag mit Daumen, Mittel- & _gespreiztes Drag mit Daumen,
Neu: Ringfinger zueinander Ring- & kleinem Finger nach oben
_Drag von Daumen und
3 Fingern voneinander weg Vorwärts / Zurück: Fett (linke Hand):
_Drag mit Daumen, Zeige-, _Drag mit Daumen, Zeige-
Drucken: Mittel- & Ringfinger nach rechts / links & Mittelfinger nach oben
_gespreiztes Drag von Daumen
& 3 äußeren Fingern voneinander weg Textcursor bewegen (Pfeiltasten): Kursiv (linke Hand):
_Drag mit 1 Finger _Drag mit Daumen, Zeige-
Applikation verlassen: & Mittelfinger nach rechts
_gespreizte Rotation der Hand Text selektieren:
gegen den Uhrzeigersinn mit gedrücktem _gespreiztes Drag mit 3 Fingern Unterstrichen (linke Hand):
Daumen & 3 äußeren Fingern _Drag mit Daumen, Zeige-
Alles selektieren (linke Hand): & Mittelfinger nach unten
Desktop zeigen: _Drag mit Daumen, Zeige-
_gespreizte Rotation der Hand & Mittelfinger auseinander Link einfügen (linke Hand):
im Uhrzeigersinn mit gedrücktem Daumen _Drag mit Daumen, Zeige- Sämtliche Abbildungen dieser Doppelseite:
& 3 äußeren Fingern & Mittelfinger nach links }}} http://www.fingerworks.com |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

Das Eingabe-Konzept ist weitgehend schlüs- Aber auch innerhalb des Gesten-Repertoires semantische Zuordnung einiger Gesten, die
sig. Die Tastatureingabe lässt jedoch ein treten Probleme auf. Es erschließt sich z. B. aus Ähnlichkeit vieler Gesten untereinander und
taktiles Feedback, wie es bei einer „üblichen“ Nutzersicht nicht, warum die Geste für den die Anforderungen an die koordinativen Fähig-
Tastatur vorhanden ist, missen, was die auf der Maus-Rechts-Klick im 2- und im 3-Button-Mo- keiten des Nutzers.
FingerWorks-Homepage veröffentlichten Studi- dus variiert. (Dies hat wahrscheinlich system-
energebnisse zeigen. Das spielt vor allem eine seitige Gründe: bessere Differenzierung von Als semantisch problematisch sehe ich z. B.
Rolle, weil der Nutzer vorzugsweise bei der Mittel- und Rechtsklick im 3-Button-Modus.) die Geste Abbrechen in Zusammenstellung mit
Eingabe auf den Screen sieht und nicht auf das Zudem bleibt unklar, warum es überhaupt den Gesten für Öffnen, Schließen und Appli-
Pad. Physische Tasten vereinfachen die Orien- diese Modusunterscheidung gibt. Weiterhin kation verlassen an. Die drei letztgenannten
82 tierung der Finger und das Finden der Tasten sind die Modifier Chords („Akkorde“) für die definieren den Uhrzeigersinn als Richtung, die
auf der Tastatur erheblich. Weiterhin sind beim Ein-Hand-Eingabe problematisch, da es unter mit Beendigung assoziiert wird, und verbin-
FingerWorks-Pad Multitasten-Eingaben (Shift, Umständen schwierig sein kann, einige Finger den den Gegenuhrzeigersinn mit dem Beginn
Tastenkürzel) möglich – auch wenn manche gedrückt zu halten, während ein losgelassener einer Handlung. (Die Richtung für Öffnen und
durch Gesten ersetzt werden können. Der der gleichen Hand versucht, eine bestimmte Schließen leitet sich hier vermutlich von der
Nutzer muss jedoch darauf achten, dass er die Taste zu erreichen. Drehrichtung bei Gewinden ab.) Abbrechen
Tasten immer nacheinander, nie gleichzeitig fällt in die semantische Kategorie der Beendi-
berührt, da die Eingabe sonst als Geste falsch Die größten Probleme dieses Gestenreper- gung und sollte daher hier mit einer Geste, die
interpretiert werden würde. toires sind aber meiner Meinung nach die im Uhrzeigersinn verläuft, assoziiert werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Unklar ist auch, warum die Geste Link ein- Einige Gesten schließlich sind nicht leicht ohne
fügen morphologisch in einer Gestengruppe Übung auszuführen. So z. B. die Gesten für
mit den Schriftattributs-Gesten Fett, Kursiv die Textbündigkeit oder die Geste für Drucken
und Unterstrichen integriert ist. Solche se- allein, aber vor allem der Wechsel zwischen
mantischen Unklarheiten erschweren es dem Gesten, bei denen die Fingerkombinationen
Nutzer, sich die Zeichen zu merken, die ihm für fast so wechseln, als würde man Klavier spie-
die Eingabe zur Verfügung stehen. len. Dieses Gefühl wird noch durch die vielen
Gesten verstärkt, bei denen es nötig ist, die
In diesem Fall macht es aber auch die hohe Finger zu spreizen.
Ähnlichkeit vieler Gesten untereinander dem 83
Nutzer schwer, sich die Gesten für bestimmte
Funktionen zu merken. Die Gesten Öffnen
/ Schließen, Vorwärts / Zurück, Applikation
verlassen / Desktop zeigen und Applikation
wechseln gleichen sich alle in der Fingeranzahl Ergonomie und Effizienz allein führen nicht auto-
und sind sich in Fingerkombination und Bewe-
gung so ähnlich, dass sie leicht zu verwechseln matisch zu einem intuitiven Multitouch-Interface.
sind. Das macht ein intuitives und flüssiges
automatisiertes Interagieren schwierig. Wichtig ist die Semantik der Eingabezeichen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

T3 – Tablets, Two-Hands & Transparency

Eine Arbeitsgruppe bei Alias | Wavefront hat gedrückt wird, wird die Position des Pucks der
1997 GUI-Paradigmen für die zweihändige dominanten Hand (D) auf dem Screen durch
 Bei der Entwicklung der Paradigmen in T3 waren Eingabe anhand des Prototypen T3 zur einen Cursor repräsentiert, und an der Position
sowohl Forscher aus dem HCI-Bereich als auch Grafiker Bearbeitung simpler 2D-Grafiken untersucht. des Pucks der nicht-dominanten Hand (ND)
involviert.
Dabei diente die Arbeitsweise von Grafikern „klebt“ eine Toolpalette – das „ToolGlass“.
}}} Kurtenbach et al.: „The Design of a GUI Paradigm
mit physischen Utensilien als Vorbild für die
based on Tablets, Two-Hands, and Transparency“, 1997.
[Kur97] ||| Interaktionsmechanismen. Die zwei vorhandenen Buttons ermöglichen Der analoge Arbeitsplatz eines Grafikers und seine
vier Modi, zwischen denen der Nutzer wech- Vorgehensweise bei der Arbeit diente den entwickelten
Paradigmen in T3 als Vorbild: Die dominante Hand bringt
Bei der Gestaltung des T3-Interface wurden seln kann. Das Mapping für diese Modi, das
Farbe auf das Papier, während die nicht-dominante Hand
84 drei Designziele verfolgt: die Handaufteilung bei der physischen Arbeit
das Blatt justiert oder unterstützend Lineale, Kurvenschab-
Artwork: Den Raum für das eigentliche eines Grafikers reflektiert, sieht folgenderma- lonen oder Abdeckmasken anlegt, fixiert und ggf. wieder
Artwork auf dem Screen maximieren und nicht ßen aus: aus dem Weg räumt.
mit GUI-Elementen belegen. }}} http://www.billbuxton.com/t3.swf |||
Fokus: Die Aufmerksamkeit des Nutzers mög- _Kein Button gedrückt: D bewegt den Cursor,
lichst nicht zum Wechsel zwingen, sondern auf ND bewegt und rotiert das ToolGlass.
der eigentlichen Arbeit belassen. _D-Button gedrückt: D draggt und rotiert
Eingabe: Die Interaktionsqualität durch die Objekte oder führt Toolfunktion aus.
Realisierung von mehr Freiheitsgraden und _ND-Button gedrückt: Toolglass verschwindet
besserem Komfort erhöhen. und ND verschiebt und rotiert Ansicht.
_Beide Buttons gedrückt: Toolglass verschwin-
Als Eingabegeräte werden für T3 zwei Wacom- det und Ansicht wird anhand der Distanzän-
Tablets mit je einem 1-Button-Puck für jede derung zwischen den beiden Pucks vergrößert
Hand genutzt. Das System kann sowohl die bzw. verkleinert (Rein- bzw. Rauszoomen).
x- bzw. y-Position der Pucks als auch deren
Das Eingabe-Setting für T3: Zwei Tablets mit je einem Rotationen auswerten. So ist eine kontinuier- Das Artwork-Designziel wird erreicht, indem
1-Button-Puck, wobei der Puck für die dominante Hand liche Eingabe mit beiden Händen mit je drei abgesehen vom ToolGlass keine UI-Widgets
dynamisch durch einen Stylus ersetzt werden kann.
Freiheitsgraden möglich, was die Eingabemög- permanent eingeblendet werden, die Teile der
}}} [Kur97] |||
lichkeiten verbreitert. Wenn keiner der Buttons Arbeitsfläche verdecken würden. Das Toolglass

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


selbst kann mit der ND-Hand aus dem Weg Grafische Objekte werden mittels der bimanu- der Bewegung und Orientierung des D-Pucks
bzw. in die Nähe des Cursors geschoben wer- ellen Technik „Two Hand Stretchies“ erzeugt: abgebildet, wobei der Pivotpunkt des Objekts
den, ohne die Aufmerksamkeit vom Artwork Der D-Button wird mit dem Cursor über dem dem Startpunkt der Dragbewegung entspricht.
ablenken zu müssen, was zusätzlich das Fokus- Objekttyp-Widget (Rechteck, Dreieck, Kreis, Diese Art der Interaktion korrespondiert stark
Ziel unterstützt. Das ToolGlass und sämtliche Linie) des ToolGlass gedrückt, worauf dieses mit dem physischen Pendant, wodurch sie
andere einblendbare Werkzeuge wie z. B. vir- verschwindet und nun beide Hände durch eine intuitiv vom Nutzer eingesetzt werden kann.
tuelle Kurvenschablonen, die der Position der Drag-Bewegung das Objekt aufziehen können.
ND-Hand folgen, sind halbtransparent, so dass Skalierung, Verschiebung und Rotation sind Die Autoren erwähnen den Nachteil, dass das
das Artwork dahinter immer sichtbar bleibt. dabei gleichzeitig möglich, was die Eingabe- Interface keine Hinweise gibt, wie die beschrie-
qualität erhöht. Während der Erzeugung des benen Interaktionen durchgeführt werden 85
Alle Navigationsfunktionen – Ansicht verschie- Objekts ist dieses transluzent, um das Artwork- müssen. Der Novize braucht eine kurze Einfüh-
ben, drehen, zoomen – werden analog zur Ziel zu unterstützen: Objekte, die darunter rung in die Handhabung des Programms. Die Das halbtransparente ToolGlass mit Objekttyp-Widgets und
physischen Interaktion mit der ND-Hand aus- liegen, sind immer noch sichtbar. Auch bei der Verbesserung der Interaktionsqualität und die anderen Buttons.
}}} [Kur97] |||
geführt. Die einfache und direkt zugängliche Bewegung von Objekten wird die Interaktions- intuitiven Mechanismen jedoch, die vergleich-
Möglichkeit, die Ansicht – „das Blatt“ – zu qualität erhöht, da sie mit gedrücktem D-But- baren Handlungen in der physischen Welt sehr
drehen, steigert die Effizienz und den Komfort ton gleichzeitig verschoben und rotiert werden nahe kommen, gleichen dieses Manko wieder
bei der Arbeit. können. Beide Bewegungen werden linear von aus.

Die zweihändige Interaktion mit einer digitalen Anwendung gewinnt an


Effizienz und Intuitivität, wenn sich die Arbeitsaufteilung der Hände und
das Mapping der Bewegungen an vergleichbaren physischen Handlungen
Die beschriebenen Paradigmen wurden teilweise in dem
orientieren. GUI-Elemente (Widgets) können dank höherer Freiheitsgrade 2D-Grafikprogramm StudioPaint umgesetzt und mit Hilfe
von Grafikern evaluiert.

bei der Eingabe in den Hintergrund treten, um den Fokus auf die eigent- }}} [Kur97] |||

liche Arbeit richten zu können.


Masterarbeit „Multitouch Input“ | Grit Schuster
Andere relevante Ansätze

BumpTop – Physics, Piles & Pen

 BumpTop ist die prototypische Umsetzung eines 21/2D- Mit BumpTop wird die Idee, Aspekte des nutzen zu können, komplexere Interaktionen Zudem kann die freie Anordnung den Nutzer
Desktop, die im Rahmen Agarawalas Masterarbeit an der physischen Schreibtisches auf das digitale kann er sich jedoch nach und nach mit Hilfe dabei unterstützen, sich zu merken, welche
University of Toronto entstanden ist.
Desktop zu übertragen, umgesetzt. Ziel war es, von visuellen Hinweisen, die neue Interakti- Inhalte sich hinter den jeweiligen Dokument-
}}} Agarawala & Balakrishnan: „Keepin‘ It Real: Pushing
Vorteile und vertraute Analogien des Umgangs onstechniken offenbaren, selbst erschließen. Icons verbergen.
the Desktop Metaphor with Physics, Piles and the Pen“,
2006. [Aga06a] ||| mit greifbaren Artefakten zu nutzen, um das Die Tatsache dass jede Aktion leicht wieder
}}} Agarawala: „Enriching the Desktop Metaphor with Interface expressiv, intuitiv und einfach er- rückgängig gemacht werden kann, unterstützt Die Selektion von Icons oder Icongruppen
Physics, Piles and the Pen“, 2006. [Aga06b] ||| lernbar zu gestalten. Die künstliche Physik der ebenfalls den Mut zur Exploration. erfolgt durch eine einkreisende Bewegung. Vor
}}} http://bumptop.com ||| papierartigen Icons impliziert dabei Interakti- Abschluss der kompletten Umkreisung wird
onsmöglichkeiten, die sich an realem Objekt- Verschiedene Interaktionstechniken unter- eine Menüauswahl – das Lassomenü – ein-
86 verhalten orientieren. Fließende Übergänge stützen diese Designziele. So können Objekte geblendet, aus dem der Nutzer wählen kann,
(z. B. Animationen) zwischen Statuswechseln – Icons – direkt durch Drag- bzw. Flick-Bewe- welche Aktion er nach der Selektion ausführen
erlauben dem Nutzer zu verstehen, was sich gungen verschoben oder „geworfen“ werden. will. So vereint eine fließende Geste die Selekti-
geändert hat und den Kontext im Auge zu Die Möglichkeit, Objekte frei auf dem Desktop on mit dem anschließenden Befehlsaufruf und
behalten. zu platzieren, nimmt der Umgebung die ggf. nachfolgender Parameteranpassung.
Sterilität, die digitalen Kontexten oft anhaftet.
Die Anwendung wurde auf die Interaktion mit
einem Stylus direkt auf dem Screen optimiert,
um das Gefühl von Direktheit und Realismus
bei der Manipulation zu unterstützen. Die Ob-
jekte befinden sich direkt unter dem Stift, mit
dem elegante, fließende Gesten ausgeführt
werden.

BumpTop übertragt physikalische Eigenschaften und Es wurde Wert auf ein erlernbares Interface
Expressivität realer Schreibtischsituationen auf das digitale gelegt, das Exploration erlaubt. Eine kleine Die Lasso‘n‘Cross-Technik erlaubt das Erzeugen eines Sta-
Desktop. pels, indem das Stapel-Widget im Zentrum gekreuzt wird.
Menge an Basis-Interaktionstechniken müssen
}}} [Aga06b] ||| Eine Bewegung zurück hebt die Stapelung wieder auf.
dem Novizen zwar nahe gebracht werden,
}}} [Aga06b] |||
um das Programm von Anfang an effektiv

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Ein gestenbasiertes Interface bereitet Freude, wenn direkte fließende Interaktionen, unmittelbares
Feedback, physikalisches Objektverhalten, weiche Animationen und visuelle Hinweise zur spiele-
rischen Exploration einladen.

Weiterhin wurden verschiedene Techniken für hervorstehen. Diese Technik kann genutzt
die Interaktion mit Icongruppen und -stapeln werden, um sich etwas zu merken oder dieses
– „Piles“ – entwickelt, die sich an Interaktionen Dokument nicht zu vergessen (der „Knoten im
mit physischen Dokumentstapeln anlehnen. Taschentuch“). Das herausschauende Objekt
Ein Stapel kann durch eine einzige fließende kann durch eine einfache Drag-Bewegung
Bewegung – der „Lasso‘n‘Cross“-Technik – er- später aus dem Stapel herausgezogen werden.
zeugt werden: Eine Icongruppe wird umkreist
und anschließend die Bewegung zum „create Weitere Interaktionstechniken erlauben das
pile“-Widget weitergeführt, das im Zentrum Durchsuchen von Iconstapeln. Pile-Widgets
der Selektion erscheint. Alternativ können erscheinen bei einem Hover über einem Stapel Verschiedene Techniken, um den Inhalt eines Stapels zu durchsuchen. }}} [Aga06b] ||| 87
Objekte auch über das Lassomenü gestapelt und erlauben unterschiedliche Möglichkeiten,
werden, wo die Entfernung des Endpunkts den Stapel zu inspizieren. Diese Alternativen den Screen wieder verlässt. Einfacher können Eine Studie hat gezeigt, dass Nutzer in der
der Strichbewegung vom entsprechenden erlauben die Einsicht in die Elemente durch Objekte auch auf einen Stapel gelegt werden: Lage waren, verschiedene Funktionalitäten
Menüeintrag bestimmt, ob die Objekte nur animierte Neuanordnung der Icons. Durch einfaches Drag‘n‘Drop oder eine Flick- selbst zu erschließen und die meisten Inter-
zusammengeschoben, unordentlich gestapelt Bewegung. aktionsaufgaben ohne ausgedehntes Training
oder eng gestapelt werden sollen. Diese Tech- Die Pile-Widgets können auch verwendet wer- zu lösen. Die Probanden bestätigten, dass die
nik unterstützt ebenfalls eine kontinuierliche den, um ein Objekt in einen Stapel einzufügen: Zusätzlich können Dokument-Icons an der Interaktionstechniken einfach zu lernen waren,
fließende Interaktion, die stets von einem wei- Das entsprechende Objekt wird zum Stapel Wand fixiert, geknickt, zerknüllt, vergrößert dass die Interaktionen vertraut wirkten (aus
chen visuellen Feedback in Echtzeit begleitet gedraggt und über eines der Widgets geführt, oder verkleinert werden, um ihren Status, Erfahrungen mit der physischen Umgebung)
wird. Zusätzlich können einzelne Elemente das um den Stapel zu „öffnen“. Das Objekt wird ihre Wichtigkeit oder ihre Bedeutung für den und dass ihnen der Umgang mit der Software
Stapels so manipuliert werden, dass sie seitlich dann an der Stelle eingefügt, an der der Stylus Nutzer anzuzeigen. Freude bereitete.

Einzelne Elemente können aus einem Stapel herausragen,


damit sie wieder gefunden oder nicht vergessen werden.
}}} [Aga06b] |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

Don‘t Click It

Die Toucheingabe unterscheidet sich von der Bei einer genüsslichen Toucheingabe jedoch
Mauseingabe in ihrer Direktheit: Der Finger sollte eines der zentralen Interaktionselemente
berührt direkt die grafischen Objekte, die auf die Geste sein – eine fließende Bewegung.
dem Display angezeigt werden. Das berüh- Wenn also bei der Touchinteraktion vornehm-
rungssensitive Display fungiert also gleicher- lich eine kontinuierliche Bewegung Aktionen
maßen als Eingabe- und Ausgabemedium. Im auslöst und bei der Mauseingabe ein binärer
Unterschied dazu sind Eingabe und Ausgabe Klick, so unterscheiden sich diese beiden
bei der Mausinteraktion räumlich voneinander Formen der Interaktion doch in mehr als nur in
getrennt. Aus diesem Grund gibt es bei der ihrer Direktheit.
88 Interaktion mit der Maus einen Cursor – die
grafische Repräsentation der Eingabeposition Don‘t Click It ist ein interessantes Projekt,
auf dem Ausgabemedium. Das System trackt das dieses Paradigma des Mausklicks hinter-  Auf }}} http://dontclick.it ||| kann die Maus-unty-
die relativen Bewegungen des Eingabegerätes, fragt. Auf der Projektwebseite kann live eine pische Interaktion ganz klickfrei ausprobiert werden.
mappt sie auf absolute Screenpositionen, stellt klickfreie Mausinteraktion ausprobiert werden.
diese mittels des Cursors auf dem Bildschirm Aktionsauslösend sind hier die getrackten
dar und dient auf diese Weise dem Nutzer als Mausbewegungen – ähnlich den Gesten bei
visuelles Feedback, damit er weiß, wohin er der Touch-Interaktion. Mit diesem Paradigmen-
klickt, wenn er den Mausbutton betätigt. wechsel würde es sehrwohl ein Pendant zum
Maustracking geben: Eben die Drag-Bewe-
Bei der Toucheingabe gibt es kein Pendant zu gung des Fingers auf dem Screen!
diesem Tracking. Das ist auch nicht notwendig,
da die Isometrie von Eingabe- und Ausgabe- Bei Don‘t Click It werden verschiedene klick-
fläche den Nutzer nicht daran zweifeln lässt, freie Interaktionstechniken zur Navigation
wohin er drückt, wenn er den Screen berührt. und zur Aktivierung von Interface-Elementen
umgesetzt. Deshalb ist dieses Projekt auch für
Ein weiterer Unterschied zwischen Touch- und die Touch-Interaktion lehrreich und wird aus
Mauseingabe ist, dass das zentrale Interakti- diesem Grund hier aufgeführt.
onsparadigma bei der letzteren der Klick ist.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Im Button Lab ersetzen drei unterschiedliche
Mechanismen den Mausklick. Der Nutzer kann
diese Mechanismen selbst testen und etwas
über deren Vor- und Nachteile erfahren.

Im Button Lab auf }}} http://dontclick.it ||| }}} http://dontclick.it |||


89

Aktivierung des Buttons mit Geste 1 Geste 2 Timer

Beschreibung Mauscursor von links nach rechts oder von Mauscursor in kreisförmiger Bewegung Mauscursor einige Sekunden auf dem
rechts nach links über den Button wischen. um den Button bewegen. Button belassen.

Vorteile Einfache und schnelle Geste. Einfache und schnelle Geste. Einfache Geste. Aktivierungsvorgang kann
Ungewollte Aktivierung fast unmöglich. abgebrochen werden.

Nachteile Hohe Wahrscheinlichkeit, ungewollt über Dem Nutzer muss die Geste zur Button-Ak- Interaktionsvorgang wird verlangsamt und
einen Button zu fahren und ihn so zu akti- tivierung vorher gezeigt werden, da diese der Nutzer muss warten.
vieren. Form der Navigation nicht offensichtlich ist.

Diese Charakteristika lassen sich teilweise verallgemeinern und auf die Toucheingabe übertragen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Andere relevante Ansätze

Alternative Texteingaben

Da für die Multitouch-Eingabe in der Regel Es existieren jedoch weitere gestenbasierte


keine Hardware-Tastatur zur Verfügung steht, Technologien zur Texteingabe. Eine davon
ist es nützlich, sich alternative Techniken zur ist Cirrin. Hier sind alle Buchstaben des  Cirrin wurde für die Stylus-Eingabe bei mobilen
Texteingabe anzuschauen, bei denen keine Alphabets in einem Ring so angeordnet, dass Geräten entwickelt.
}}} Mankoff & Abowd: „Cirrin: a word-level unistroke
physischen Tasten verwendet werden. Zeichen, die mit höherer Wahrscheinlichkeit
keyboard for pen input“, 1998. [Man98] |||
in Kombination vorkommen, nah beieinander
Nahe liegend ist das Einblenden einer Soft- liegen, um die Wege, die mit dem Stylus zu-
ware-Tastatur, wie es beim iPhone der Fall ist. rückgelegt werden, möglichst kurz zu halten.
Wahrscheinlich aufgrund des Formfaktors des Zur Eingabe eines Wortes wird eine durchgän-
90 kleinen Gerätes wird hier auf die Möglich- gige Bewegung ausgeführt, die nacheinander
keit verzichtet, die Modifier-Keys (Shift, Ctrl, die Buchstabenfelder durchläuft, die das Wort
etc.) gleichzeitig mit einer anderen Taste zu bilden.
drücken. Bei größeren Screens, die mit beiden
Händen bedient werden, wäre dies denkbar. Ein weiteres Beispiel für gestenbasierte Textein-
gabe ist Quikwriting. Auch hier wird jedes  Quikwriting wurde ebenfalls für die Stylus-Eingabe bei
Weiter oben wurde die für Palm-Systeme Wort durch eine zusammenhängende Geste mobilen Geräten entwickelt.
}}} Perlin: „Quikwriting: Continuous Stylus-based Text
entwickelte gestenbasierte Texteingabe Graffiti dargestellt. Als Template dient ein 3x3-Feld, an
Entry“, 1998. [Per98] |||
beschrieben. Auch so eine Technik wäre eine dessen Rand die Buchstaben so angeordnet
Zum Ausprobieren dieser Technik gibt es eine Demo auf
Möglichkeit, Texteingabe an einem Multi- sind, dass die am häufigsten verwendeten }}} http://mrl.nyu.edu/~perlin/demos/quikwriting.html
touch-Gerät zu realisieren. durch die kürzesten Gesten dargestellt werden. |||
Ein Buchstabe wird artikuliert, indem die Geste
Auch eine Zeichensprache, die über Finger- zunächst aus der Mitte in das Feld geführt
kombinationen codiert wird, wäre denkbar wird, in der sich der Buchstabe befindet. Die
– ähnlich wie Engelbarts NLS-Chords (siehe Position des Buchstaben in dem Feld bestimmt,
Abschnitt 2.1 dieser Arbeit) oder Westermans wohin die Geste weiter verlaufen muss, bevor
Channels bzw. Chords (siehe Abschnitt 4.1 sie wieder zur Mitte zurückkehrt. Danach
dieser Arbeit) – jedoch höchstwahrscheinlich wird der nächste Buchstabe angesteuert usw.
zu kryptisch. Quikwriting bietet außerdem die Möglich-

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Können solche Techniken als Inspiration für eine Multitouch-Texteingabe dienen?

keit, zwischen verschiedenen Zeichensätzen


umzuschalten: Die Symbole im oberen und
unteren Feld bewirken die Anzeige von
Großbuchstaben, Zahlen oder Symbolsätzen Zum Erreichen des „o“ wird eine Geste nach oben und danach nach schräg oben-rechts durchgeführt. }}} [Wil05b] |||
bzw. die Ausführung eines Leerzeichens, eines
Backspace oder eines Zeilenumbruchs. Diese
Art der Texteingabe ist etwas weniger intuitiv
als Cirrin. Ein letztes Beispiel, das hier aufgeführt  Ein Texteingabemechanismus mit hexagonaler
wird, baut auch auf einem probabilistischen Anmutung.
}}} Williamson & Murray-Smith: “Hex: Dynamics and
Die Abbildung zeigt, wie in Cirrin die Geste für „cirrin“ Es existieren auch Texteingabemechanismen, Sprachmodell auf – aber die Anordnung der 91
Probabilistic Text Entry”, 2005. [Wil05b] |||
aussieht. die auf Sprachmodellen beruhen und dyna- Buchstabenauswahl erfolgt über hexagonale
}}} [Man98] |||
misch die nächste Auswahlmöglichkeit von Strukturen, wodurch andere Gestenformen
der Wahrscheinlichkeit des folgenden Zeichens zustande kommen.
abhängig machen.

Ein Beispiel dafür ist Dasher, bei dem von  Dasher ist eine eher unkonventionelle Art der
rechts nach links Rechtecke in den Screen Texteingabe, die von der Inference Group in Cambridge
entwickelt wurde.
fahren, die jeweils für ein mögliches Zeichen
}}} Ward et al.: „Dasher – a Data Entry Interface Using
stehen. Der Nutzer bewegt einen Cursor (über
Continuous Gestures and Language Models“, 2000.
Maus, Stylus oder Eyetracking) nach oben oder [War00] |||
unten, um zum gewünschten Buchstaben Dasher kann ebenfalls online ausprobiert werden:
zu navigieren. Das anvisierte Rechteck wird }}} http://www.inference.phy.cam.ac.uk/dasher/TryJava-
dabei immer größer, damit in ihm von rechts DasherNow.html |||

kommend die Rechtecke für die folgenden


Buchstaben „nachwachsen“ können. Die
Die Abbildung zeigt, wie in Quikwriting die Geste für „quik“ bereits ausgewählten Buchstaben rutschen im
aussieht. Bild nach links. Dasher in Aktion.
}}} [Per98] ||| }}} http://www.inference.phy.cam.ac.uk/dasher/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


4 Analyse
Multitouch-Gesten

4.1 In diesem Kapitel erfolgt eine Analyse von


Multitouch-Gesten. Dabei wird darauf einge-
gangen, was solche Gesten ausmacht, wie
Bei der Multitouch-Eingabe hat ein Nutzer als
„Eingabegerät“ sein Handpaar zur Verfügung.
Der Einsatz dieses Handpaars ist sehr vielseitig,
Vor der Auflistung möglicher Multitouch-Ges-
ten werden zunächst die Parameter analysiert,
aus denen sich solche Gesten zusammen-
sie sich zusammensetzen und welche Bedeu- wird aber durch anatomische und motorische setzen. Diese Analyse dient der späteren
tungen ihnen zugeordnet werden können. Möglichkeiten sowie koordinative Fähigkeiten Beschreibung und Kategorisierung von Gesten
eingeschränkt. als Grundlage.
Der folgende Abschnitt gibt einen Überblick
über mögliche Multitouch-Gesten, wobei Dies betrifft die Entfernungen zwischen
diese gleichzeitig systematisiert werden. Diese den einzelnen Fingerspitzen, die Entfernung
Übersicht bietet ein Repertoire, aus dem man zwischen den beiden Händen, die Anordnung
sich bei der Entwicklung eines Multitouch-Vo- und die Kombination der einzelnen Finger und
kabulars bedienen kann, indem man dann den mögliche simultane Bewegungen von einzel-
einzelnen Gesten Bedeutungen zuordnet. nen Fingern oder der beiden Hände.

Analyse
94

Das menschliche Handpaar mit den für die Touch-Eingabe


»A touch event is the technical term for when relevantesten Bereichen.

a touchscreen system knows that a user has


touched the screen.« [Saf08]

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Touch-Eingabeparameter

Position Die Pixelposition eines Berührungspunktes ist


ein diskretes Wertepaar (x, y), das durch das
Koordinatensystem des Systems definiert wird.
Über diesen Parameter kann bestimmt werden,
auf welchem Interface-Element die Berührung
stattfindet, also in welchem Kontext die Geste
ausgeführt wird. Er beeinflusst damit, welches
Element manipuliert werden soll, und mitunter,
was die Geste hier bedeutet und bewirkt.

Druck Manche Technologien erlauben die Erfassung


des Berührungsdrucks auf den Screen. Der
Druck ist ein kontinuierlicher Wert, der seman-
tisch mit Eigenschaftspaaren wie schwach
– stark, wenig – viel oder vorsichtig – ein-
dringlich assoziiert werden kann. So könnte er
zum Beispiel die Intensität einer quantifizier- 95
baren Interaktion beeinflussen.

Zeitraum und Dauer Der Zeitraum einer Berührung ergibt sich aus
den Zeitpunkten des Berührungsbeginns und
des Loslassens. Die Dauer einer Berührung
kann ihre Bedeutung und damit ihre Wirkung
beeinflussen. Manche Aktionen können nach
einer bestimmten Wartezeit aktiviert werden,
wie zum Beispiel die Einblendung von Tool-
Tipps.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Richtung und Pfad Der Pfad einer Toucheingabe kann eine Kurve,
eine Reihe von Vektoren oder ein einfacher
Vektor sein, der aus einer Länge und einer
Richtung besteht. Dieser Parameter kann direkt
Einfluss auf die Manipulation von Objekten ha-
ben (Verschiebung, Skalierung, Rotation usw.)
oder das ausschlaggebende Merkmal sein, das
eine Geste definiert.

Geschwindigkeit Kommt zur örtlichen die zeitliche Komponente


und Beschleunigung hinzu, kann man Gesten anhand dessen unter-
scheiden, wie schnell sie ausgeführt werden.
Schnell ausgeführte Bewegungen können zum
Beispiel ein stärkeres Feedback hervorrufen.
Durch die Implementierung einer Physik für
die manipulierbaren Objekte (Trägheit, Masse,
96 Beschleunigung) kann das Gefühl der direkten
Interaktion beim Nutzer verstärkt werden.

Manche Systeme können direkt wahrnehmen, Handteil Aus der Größe und der Form einer Berüh-
mit welchem Teil der Hand der Nutzer den rungsfläche kann abgeleitet werden, mit
Screen berührt. Dabei ist es möglich, dass welchem Teil der Hand der Screen berührt wird
auch die einzelnen Finger differenziert werden (Fingerspitze, Handballen, Handseite). Außer-
können. Für solche Systeme könnte es Anwen- dem können über die Flächenänderung einer
dungen geben, für die es einen Unterschied Berührung Rückschlüsse auf deren Druck ge-
macht, ob der Nutzer mit dem Zeige- oder mit zogen werden. Mit dem Niederdrücken einer
dem Mittelfinger agiert. Fingerspitze (Flächenvergrößerung) kann ein
Fläche Maus over – Maus down simuliert werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Anzahl Die Anzahl der Berührungspunkte, aus der
sich eine Multitouchgeste zusammensetzt, ist
ebenfalls ein Parameter zur Differenzierung.
So kann ein 2-Finger-Drag etwas ganz anderes
bewirken als ein 1-Finger-Drag oder ein 3-Fin-
ger-Drag. Die Eingabe mit mehreren Berüh-
rungspunkten macht die Gesten komplexer
und ermöglicht die simultane Interaktion mit
mehreren Elementen.

Anordnung Die Anordnung der verschiedenen Berührungs- Bei der Anordnung von mehreren Berührungs-
punkte einer Multitouchgeste ist ein wei- punkten kann es zur Bildung von Gruppen,
teres Kriterium, bei dem deren Ausrichtung, so genannten Clustern, kommen. Deren
Entfernung zueinander und Gruppierungen Eigenschaften – Gruppenanzahl, Gruppen-
eine Rolle spielen. Dabei kann die Anordnung größe, Intergruppendistanz, Gruppenareal,
entweder absolut oder relativ zur Bewegungs- Gruppenausrichtung – können wiederum zur
richtung oder zu anderen Elementen betrach- Differenzierung herangezogen werden. 97
tet werden.

Reihenfolge und Wenn sich eine Geste aus mehreren Berüh-


zeitliche Überlagerung rungen zusammensetzt, dann spielt automa-
tisch auch deren Reihenfolge eine Rolle. Durch
die Dauerhaftigkeit von Holds und Drags
können sich die einzelnen Berührungen auch
noch zeitlich überlagern oder einschließen. Die
zeitliche Überlagerung bzw. Nähe (Gleichzei-
tigkeit) von Berührungen verbindet sie häufig
erst zur Multitouchgeste.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Die Gestenparameter im Überblick

Aus den oben beschriebenen Parametern Gesteninterpretation vom System nicht die etwas mehr Übung verlangen als die Umset-
lassen sich komplexe Gesten zusammensetzen, ausschlaggebende Rolle spielen. Damit die zung der anderen beschriebenen Aspekte. Für
so wie sich aus Buchstaben Wörter bilden Anwendung gut benutzbar bleibt, sollte das das Multitouch-Repertoire, das ich in dieser
lassen. Aus einer Vielzahl solcher Gesten System höchstens zwischen zwei Druckstärken Arbeit aufstelle, beschränke ich mich daher auf
kann ein Vokabular gebildet werden, dass zur bzw. zwischen einer Druckerhöhung und einer die grundlegenden Parameter:
Kommunikation mit Multitouch-Applikationen Drucksenkung differenzieren, um den begrenz-
herangezogen werden kann. ten feinmotorischen Fähigkeiten des Nutzers • Position
gerecht zu werden. • Dauer
Es müssen bzw. können nicht für jede Anwen- • Pfad / Richtung
dung alle Parameter genutzt werden. Z. B. ist Ähnlich sieht es mit den Parametern Ge- • Anzahl
nicht jeder Touchscreen drucksensitiv und nicht schwindigkeit und Beschleunigung aus. Die • Anordnung
jedes System kann die Größe der Berührungs- Parameterwertebereiche sind kontinuierlich • Reihenfolge / Überlagerungen
fläche bestimmen oder gar, welche Finger und können theoretisch viele Werte anneh-
involviert sind. Es ist also systemabhängig, wie men. Wieder liegt es an der zu groben Auflö- Die zusätzliche Integrierung der oben beschrie-
reich ein Multitouch-Repertoire sein kann. sung bei der Dosierung dieser Aspekte durch benen Parameter Druck, Geschwindigkeit,
98 die menschliche Hand, dass sich die Werte Beschleunigung, Fläche und Handteil würde
Manche der aufgeführten Parameter sind dieser Parameter bei der Gestendifferenzierung den Rahmen dieser Arbeit sprengen. Davon
vom Nutzer leichter zu regulieren als andere. praktischer Weise auf „schnell“ und „langsam“ abgesehen ist es nicht zu aufwändig, für
Eindeutig kann die Anzahl der Berührungs- beschränken sollten. die Konzeption einer konkreten Multitouch-
punkte artikuliert werden, da es sich hier um Anwendung bei Bedarf bestimmte Gesten
einen diskreten Werteraum handelt. Anders Druck, Fläche, Handteil, Geschwindigkeit aus dem Repertoire um diese Parameter zu
sieht es z. B. beim Berührungsdruck aus. Dieser und Beschleunigung sind also Parameter, die erweitern. So kann das hier ausgearbeitete
Parameter bewegt sich in einem relativ engen nicht von allen Systemen interpretiert werden Repertoire zumindest als Grundlage für weitere
kontinuierlichen Bereich und sollte bei einer können bzw. vom Nutzer für die Artikulierung Ausarbeitungen dienen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Es gibt grundlegende Parameter, die jedes Multi- Es sei an dieser Stelle angemerkt, dass die hier
beschriebene Einteilung der Gestenparameter
touch-System „verstehen“ sollte, und solche, die nicht als einzig wahre zu verstehen ist. Andere
Autoren analysieren das Phänomen Geste
die Interaktion zusätzlich bereichern können. unter anderen Gesichtspunkten. Je nachdem,
wofür eine Einteilung als Grundlage dienen
soll, kann sie unterschiedlich ausfallen.

Saffer unterteilt nicht nur die Parameter von  D. Saffer unterteilt Attribute von Gesten allgemein in:
Touch-Gesten sondern von Gesten im Allge- Presence
Duration
meinen. Seine Kategorisierung überschneidet
Width, height, depth
sich sehr mit der hier vorgestellten, obwohl
Orientation
sein Schwerpunkt nicht auf den Berührungs- Pressure
punkten zwischen Hand und Display liegt, son- Including objects
dern auch Handbewegungen im freien Raum Number of touch points / combination
mit in die Analyse einbezogen werden. Sequence of Gestures 99
}}} Saffer: „Interactive Gestures: Designing Gestural
Interfaces“, 2008. [Saf08] |||

Verschiedene gestenbasierte Systeme können unterschied-


liche Aspekte der ausgeführten Gesten wahrnehmen. Die
„Sinneskanäle“ einer Anwendung beeinflussen das Inter-
aktionserlebnis maßgeblich: Je mehr Aspekte ausgewertet
werden, desto lebendiger kann die Kommunikation mit
dem System ausfallen. Die Abbildung zeigt die Interaktion
mit den „Shadow Monsters“ – einer Installation von Philip
Worthington, die zum Körpereinsatz anregt.
}}} http://www.worthersoriginal.com/ |||
Die Abbildung stammt von }}} http://www.flickr.com/ |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Gesten-Systematisierung
Single Tap

Nach der Analyse von Gestenparametern kann Da die Komplexität von Eingabegesten the- 1mal kurz tippen
nun eine Aufstellung und Kategorisierung von oretisch nach oben offen ist, erhebt die hier
möglichen Multitouch-Gesten erfolgen. zusammengestellte Liste von Touch-Gesten Konvention:
keinen Anspruch auf Vollständigkeit. Vielmehr • Entspricht einfachem Klick (point-down-
Zunächst werden Grundelemente von Touch- soll sie einen Überblick verschaffen, welche release)
Gesten aufgelistet, mit konventionellen Möglichkeiten die Eingabe Multitouch eröff- • Etwas selektieren
Maus-Eingaben in Beziehung gesetzt und As- net, indem denkbare Kombinationen der • Etwas aktivieren
soziationen zugeordnet. Im Anschluss darauf Grundelemente dargestellt werden. Dabei wer- • Button klicken
erfolgt die Zusammenstellung von möglichen den Kriterien – „Charakteristika“ – aufgelistet, • Tool / Fokus wechseln
Multitouch-Gesten. nach denen die jeweiligen Gestentypen diffe-
renziert werden können. In zusätzlichen kurzen Assoziationen:
Erläuterungen wird auf die Umsetzbarkeit der • Auf etwas zeigen
Gesten eingegangen, die durch menschliche • Einen Knopf / Schalter drücken
Motorik, Anatomie und kognitive Fähigkeiten • Etwas / jmdn. antippen
begrenzt wird. • Etwas eindrücken
100 • Etwas zerdrücken
• Gegen etwas klopfen
• Krümel auflesen

Der Fundus des Mutlitouch-Gesten-Repertoires


wird praktisch durch Grenzen der Anatomie und
der motorischen und koordinativen Fähigkeiten
des Nutzers eingeschränkt.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Touch-Gesten-Grundelemente

Double Tap Single Hold Single Drag Double Drag

2mal kurz tippen 1mal lange berühren Berühren und bewegen 1 mal kurz tippen und
dann berühren und bewegen
Konvention: Konvention: Konvention:
• Entspricht Doppelklick (2x down-release) • Entspricht Mouse over (point & hold) • Entspricht Drag (point-down-drag) Konvention:
• Ordner öffnen / etwas einsehen oder Mouse down (point-down & hold) • Element verschieben • Entspricht Doppelklick & Drag (down-re-
• Etwas starten / aktivieren • Tool-Tipps einblenden • Text selektieren lease-down & drag)
• Etwas vollständig selektieren • Ordner öffnen • Markierungsrechteck aufziehen • ein alternatives Drag, z. B. statt Rechts-
• Etwas einsehen • (Mal-) Tool benutzen Drag
Assoziationen: • Dokument verschieben (PDF-Handwerk- • Kann beliebig auf Triple Drag usw. erwei-
• Anklopfen / gegen etwas klopfen Assoziationen: zeug) tert werden
• Etwas festhalten / fixieren • Fenster / Element skalieren
• Etwas andrücken / fest drücken • Scrollen: Scrollbar bedienen Assoziationen:
Triple Tap • Einen Knopf / eine Taste gedrückt halten • wie Single Drag
• Eine Öffnung zuhalten Assoziationen:
3mal kurz tippen • Etwas verschieben
• Etwas glatt streichen 101
Konvention: Double Hold • Etwas malen / schreiben
• Entspricht Dreifachklick (3x down-release) • Etwas wegwischen / wegrubbeln
• Etwas vollständig selektieren 1mal kurz tippen und • Einem Pfad folgen
• Kann beliebig auf 4-Tap usw. erweitert 1mal gedrückt halten • Einen Weg beschreiben
werden • Etwas verbinden
Konvention: • Etwas durchstreichen
Assoziationen: • Entspricht Doppelklick & Hold (down-re- • Etwas anstreichen / unterstreichen /
• Anklopfen / gegen etwas klopfen lease-down & hold) markieren
• Mitunter Einblenden eines Kontextmenüs
(statt Rechtsklick & Hold)
• Kann beliebig auf Triple Hold usw. erwei-
tert werden

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
1-Touch (Single-Touch)

Punktförmig | Charakteristikum: Dauer Geradlinig | Charakteristikum: Richtung

Name Ortdarstellung Zeitdarstellung Name Ortdarstellung Zeitdarstellung

1-Tap (Single Tap) Drag rechts für alle Single Drags

2-Tap (Double Tap) Drag links Für die Drag-Gesten ist eine
noch feinere Richtungsab-
3-Tap (Triple Tap) Drag hoch stufung möglich. Bedenkt
man jedoch die begrenzte
n-Tap ... Fähigkeit des Menschen, Win-
kelgrößen zu schätzen und
1-Hold (Single Hold) Drag runter diese mit der recht groben
Fingerspitze zu zeichnen, ist
2-Hold (Double Hold) eine höhere Auflösung als
links stehende mit 8 Rich-
n-Hold ... Drag diagonal rechts hoch tungen nicht zweckmäßig. Je
102 nach Kontext ist eine nied-
Multiple Taps und Holds sind theoretisch in beliebiger Höhe rigere Auflösung mit lediglich
denkbar. Jedoch ist bereits für die Ausführung eines Triple Tap Drag diagonal links hoch 4 Grundrichtungen mitunter
etwas Übung und Konzentration notwendig. Spätestens ab sogar nutzerfreundlicher, da
einem 4-Tap beginnt man in der Regel, die einzelnen Taps im dann die Gestendefinitionen
Kopf mitzuzählen. Tap-Konstrukte aus vielen Taps sind also für Drag diagonal rechts runter einander unähnlicher sind und
viele Menschen zu komplex, um leicht „von der Hand zu ge- damit systemseitige Fehlinter-
hen“. Genauso verhält es sich mit den multiplen Holds, wobei pretationen der Toucheingabe
diese sogar noch schwieriger durchzuführen sind. Drag diagonal links runter unwahrscheinlicher werden.

Alle aufgeführten Drags sind auf Double-Drags, Triple-Drags


usw. direkt übertragbar – wenn auch schwieriger auszuführen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Geradlinig & 1mal Abbiegen | Charakteristikum: Richtungen Geradlinig & 2mal Abbiegen | Charakteristikum: Richtungen

Name Ortdarstellung Es gibt in dieser Kategorie noch weitere Varianten, näm- Name Ortdarstellung
lich analog zu diesen 7 Drags nach rechts die Drags in die
Drag rechts-links anderen Grundrichtungen – insgesamt sind es bei 8 Grund- Drag rechts-runter-links
richtungen 56 (7*8). Erhöht man die Anzahl der Grundrich-
Drag rechts-diagonal links tungen, gibt es theoretisch nach oben keine Grenze. Praktisch
hoch sollte man die Auflösung jedoch an die Fähigkeiten des
Menschen zur genauen Ausführung der Gesten anpassen und Drag runter-rechts-runter
Drag rechts-hoch daran, wie viele er sich merken kann.

Die Komplexität der geradlinigen 1-Touch-Gesten erhöht sich,


indem öfter abgebogen wird. Rechts sind einige Vertreter Drag rechts-diagonal links
Drag rechts-diagonal rechts dieser Gesten mit 2 Abbiegungen aufgeführt. Die Anzahl hoch-diagonal links runter
hoch der möglichen Gesten steigt damit erheblich an. Ein solcher
Reichtum an möglichen Gesten in einer Applikation ist nur
sinnfällig, wenn der Nutzer mit ihren Formen Funktionalitäten u. v. m. ...
Drag rechts-diagonal rechts assoziieren kann. Das wäre beispielsweise der Fall beim „Ein- 103
runter rahmen“ eines Elements (3mal rechtwinklig immer in die glei-
che Richtung abbiegen) oder bei Gesten für Schriftzeichen,
die der Nutzer schon durch die Fähigkeit zu schreiben kennt.
Drag rechts-runter

Drag rechts-diagonal links


runter

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
1-Touch (Single-Touch)

Kreisförmig | Charakteristikum: Sinnrichtung Halbkreisförmig | Charakteristikum: Richtung + Wölbung

Name Ortdarstellung Als Charakteristikum für kreisförmige Gesten könnte auch der Name Ortdarstellung
Startpunkt (oben, unten, rechts, links) hergenommen werden.
Kreis im UZS Allerdings nimmt der Mensch einen Kreis als kontinuierliche Halbkreis nach rechts
Form ohne Start- und Endpunkt wahr. Die Ausführung einer oben herum
Kreisbewegung wird eher mit einem rotierenden Objekt (wie
einem Rad) assoziiert, bei dem die Sinnrichtung – also die Halbkreis nach rechts
Kreis gegen UZS gedankliche Rotationsrichtung – eine größere Rolle spielt, als unten herum
die Startposition, an der der Finger angesetzt hat. Das Cha-
rakteristikum Startpunkt wird hier also außer acht gelassen, Halbkreis nach links
weil eine Differenzierung zwischen z. B. „Kreis im UZS mit oben herum
Spirale einwärts im UZS Startpunkt oben“ und „Kreis im UZS mit Startpunkt unten“ für
den Nutzer zu verwirrend wäre. Halbkreis nach links
unten herum
Bei Halbkreisen sieht es etwas anders aus. Hier spielen die
Spirale einwärts gegen UZS Richtung Startpunkt-Endpunkt (links, rechts, hoch, runter) Halbkreis nach hoch
104 und die Richtung der Wölbung bei der Wahrnehmung eine links herum
größere Rolle als die Sinnrichtung.

Spirale auswärts im UZS Die kreis- und halbkreisförmigen Gesten können zusätzlich Halbkreis nach hoch
mit den geradlinigen kombiniert werden. Daraus ergibt sich links herum
ein schier unerschöpfliches Repertoire allein an 1-Touch-Ges-
ten.
Spirale auswärts gegen UZS Halbkreis nach runter
links herum

Halbkreis nach runter


rechts herum

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Bedeutungsbelegte Single-Touch-Gesten

Name Ortdarstellung Bedeutung Es gibt bereits Gestenvokabulare für die Eingabe von Schrift-
zeichen in Ermangelung einer Tastatur. Ein Beispiel dafür ist
Zickzack Etwas wegstreichen, etwas Graffiti, das ursprünglich für mobile Geräte (PDAs mit Palm OS)
durchstreichen konzipiert wurde, die mit einem Stylus bedient werden.

Graffiti: A ‚A‘ Bei StrokeIt handelt es sich um eine Mausgestenerkennungs-En-


gine für das Betriebssystem Windows, die Gesten auf System-
befehle mappt. Es bietet ein breites Spektrum von Vokabularen,
die an die Funktionalitäten verschiedener Anwendungen
Graffiti: B ‚B‘ angepasst sind. Darüber hinaus können Nutzer ihre eigenen
Gesten definieren.

Es ist denkbar, für die Konzeption eines Multitouch-Interface


auf bereits existierende Gesten solcher Single-Point-Gesten-Vo-
StrokeIt: O Etwas öffnen (‚Open‘) kabulare aufzusetzen – vor allem wenn die potentiellen Nutzer
solche Gesten schon kennen. Allerdings sind diese Gesten eher 105
abstrakt und sollten zur Unterstützung einer natürlich anmu-
tenden Interaktion wenn möglich durch konkretere Eingabebe-
wegungen ersetzt werden.
StrokeIt: N Neu (‚New‘)

u. v. m. ...

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
2-Touch

Tap & Tap | Charakteristikum: Ausrichtung Entfernung zeitlicher Ablauf

Name Ortdarstellung Name Ortdarstellung Name Zeitdarstellung

Horizontal Nah Gleichzeitig

Vertikal
Fern Nacheinander

Diagonal hoch Nacheinander wiederholt ...

Diagonal runter Bei nacheinander ausgeführten Taps kann die Ausrichtung auch welche Finger der Nutzer tatsächlich einsetzt, anhand der Ent-
als Richtung aufgefasst werden, indem das zeitlich erste Tap als fernung zwischen den einzelnen Touchpositionen voneinander
Startpunkt und das zeitlich zweite Tap als Zielpunkt betrachtet unterschieden werden.
Die Charakteristika für die 2-Touch-Geste Tap & Tap sind wird. In diesem Fall würde sich die Anzahl der Ausprägungen
106 Ausrichtung, Entfernung und zeitlicher Ablauf. Diese sollen dieses Charakteristikums verdoppeln (hier: rechts, links, hoch, Ist die Versatzzeit genügend gering, können zwei Taps, die kurz
im konkreten Beispiel nicht isoliert voneinander betrachtet runter, diagonal rechts hoch, diagonal links hoch, diagonal nacheinander erfolgen, als eine 2-Tap-Geste aufgefasst werden.
werden, sondern in Kombination: Eine Tap-&-Tap-Geste hat rechts runter und diagonal links runter). Wäre die Position der Die nacheinander ausgeführte 2-Tap-Geste kann weiter fortge-
immer eine Ausrichtung, eine Entfernung und einen Ablauf. beiden Taps gleich, würde es sich um ein einfaches Double Tap setzt werden, so dass bspw. Zeige- und Mittelfinger immer im
handeln und nicht um eine 2-Touch-Geste. Deshalb wird dieser Wechsel an den Screen tippen.
Die hier aufgeführten vier Ausrichtungen könnten feiner Fall hier gar nicht betrachtet.
aufgelöst werden, jedoch muss dabei hinterfragt werden, ob Die Charakteristika von Tap & Tap können 1:1 auf Double Tap
der Nutzer überhaupt in der Lage wäre, mit seinen Fingern Aus dem Charakteristikum Entfernung könnte man ableiten, ob & Double Tap, Triple Tap & Triple Tap usw. übertragen werden.
solch feine Winkeldifferenzen präzise umzusetzen (siehe auch die beiden Taps von benachbarten Fingern einer Hand oder von Kombinationen aus Tap, Double Tap und Triple Tap unterein-
geradliniges 1-Drag). Als Höchstgrenze für eine Winkelauf- nicht benachbarten Fingern bzw. von je einem Finger beider ander erreichen aber eine Komplexität, die vom Nutzer so viel
teilung sind 12 Richtungen bzw. sechs Ausrichtungen im Hände stammen. Jedoch sollte man mit dieser Schlussfolgerung Konzentration oder Übung verlangt, dass diese nicht in dieses
Abstand von 30° wie bei einer analogen Uhr denkbar, jedoch vorsichtig sein, da sie zwar wahrscheinlich, jedoch nicht immer Repertoire mit aufgenommen werden.
erscheinen vier Ausrichtungen praktikabler. zwingend ist. Trotzdem können Gesten unabhängig davon,

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Hold & Tap | Charakteristikum: Richtung Entfernung zeitlicher Ablauf

Name Ortdarstellung Name Ortdarstellung Zeitdarstellung

Rechts Nah für alle Hold & Tap:

Links
Fern
Hoch
für alle Hold & Double Tap:
Das Charakteristikum Entfernung von Hold & Tap entspricht
dem von Tap & Tap. Das Charakteristikum Richtung ist eine
Runter Erweiterung des Charakteristikums Ausrichtung: Während
ein Finger dauerhaft auf den Screen drückt, tippt ein anderer
Finger an eine andere Position. Die Richtung ergibt sich aus für alle Hold & Triple Tap:
dem Vektor der vom ersten Finger (Hold) auf den zweiten
Diagonal rechts hoch Finger (Tap) zeigt.
107
Für den zeitlichen Verlauf der Geste wird hier nur eine Vari-
Diagonal links hoch ante angegeben: Der zweite Finger tippt während der erste (andere sind schwierig zu koor-
Finger noch den Screen berührt. Andere zeitliche Abläufe sind dinieren)
nicht praktikabel, weil zu schwer zu koordinieren.
Diagonal rechts runter
Die Charakteristika sind 1:1 auf die Gesten Hold & Double
Tap, Hold & Triple Tap usw. zu übertragen. Die jeweiligen
Diagonal links runter zeitlichen Abläufe sind oben dargestellt.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
2-Touch

Hold & Hold | Charakteristikum: zeitlicher Ablauf Ausrichtung / Richtung Entfernung Drag & Tap | Charakteristikum: relative Anordnung

Name Zeitdarstellung Name Ortdarstellung

Gleichzeitig Wie bei Tap davor


Wie bei Tap & Tap Tap & Tap
und Tap dahinter
Gleichzeitig und Hold & Tap
verschieden lange absolute Anordnung Während eines Drag kann
Dieses Charakteristikum man ein Tap durchführen. Es
Nacheinander wird bei allen folgenden Name ist jedoch schwierig sich auf
Wie bei Hold & Tap Gesten nicht mehr explizit die Dragrichtung und gleich-
erwähnt, da die Ausprä- Tap rechts zeitig auf die Position des
Ineinander gungen immer die gleichen Tap links Tap zu konzentrieren. Besser
sind: Nah und Fern. Tap oben ... ist der Zeitpunkt des Tap zu
koordinieren. Wenn z. B. der
Bei der Ausführung einer Hold-&-Hold-Geste können zwei Wenn nach gleichzeitigem Berühren des Screens mit zwei Fin- Dragfinger ein bestimmtes
108 Finger den Screen gleichzeitig berühren oder nacheinander. gern ein Finger wieder losgelassen wird, könnte das ebenfalls Zeitdarstellung Element erreicht und ein an-
In letzterem Fall beginnt die Geste als einfaches Single Hold. einen Statuswechsel im System verursachen. Es kann jedoch derer Finger genau in diesem
Kommt der zweite Finger hinzu, wird die Geste zum Hold & auch sein, dass der Nutzer den einen Finger nur aus ergono- für alle Drag & Tap: Moment tappt, kann das
Hold. Lässt dieser Finger wieder los, wechselt der Status kon- mischen Gründen hebt und nicht, weil er damit etwas bewir- eine Auswirkung auf dieses
sequenterweise wieder zum Single Hold (Ineinander, ähnlich ken will. Deshalb gilt es je nach Kontext abzuwägen, ob diese Drag Element haben.
wie Hold & Tap). Wenn der erste Finger vor dem zweiten Fingerbewegung einen Statuswechsel bewirken soll (Hold Tap
loslässt (Nacheinander), könnte das System wiederum anders & Hold wird zu Single Hold) oder nicht (Hold & Hold bleibt Außerdem ist es möglich, ein
reagieren. erhalten). Ziel sollte dabei immer sein, das System möglichst (andere sind schwierig zu koor- Drag direkt nach einem Tap
nutzerfreundlich zu gestalten. dinieren) auszuführen. Das entspricht
allerdings einem Double-Drag
(siehe Touch-Gesten-Grunde-
lemente).

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Hold & Drag | Charakteristikum: absolute Dragrichtung relative Dragrichtung zeitlicher Ablauf

Name Ortdarstellung Name Ortdarstellung Zeitdarstellung

Rechts Heran für alle Hold & Drag:

Links Hold
Drag
Hoch Weg
(andere sind schwierig zu koor-
dinieren)

Runter Umkreisen im UZS


Die Charakteristika absolute
und relative Dragrichtung
Umkreisen gegen UZS können nicht nebeneinander
Diagonal rechts hoch in ein und dem selben Kon-
text als Gestenkriterien die- 109
In der Kategorie Hold & Drag sind alle Single-Drag-Gesten nen, da verschiedene Gesten,
Diagonal links hoch (weiter oben aufgeführt) mit dem Hold kombinierbar. betrachtet man die absolute
Dragrichtung, unterschied-
Sobald ein Drag mit einem Hold kombiniert wird, kann die liche Bedeutungen haben
Diagonal rechts runter Dragrichtung statt absolut auch relativ zur Hold-Position können, betrachtet man aber
betrachtet werden. Für die absolute Dragrichtung spielt die relative Dragrichtung, das
hingegen die Hold-Position keine Rolle, es sei denn, dies ist in gleiche bedeuten können
Diagonal links runter den Gestendefinitionen explizit vorgesehen. Dann würde das – und umgekehrt. Je nach
Charakteristikum Anordnung hinzukommen. So könnte z. B. ein Kontext sollte entschieden
Drag down mit einem Hold darüber etwas anderes bedeuten, werden, welches Konzept
als ein Drag down mit einem Hold darunter. sinnfälliger ist.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
2-Touch

Drag & Drag | Charakteristikum: relative Bewegung absolute (Aus-) Richtung Anordnung zeitlicher Ablauf

Name Ortdarstellung Name Name Ortdarstellung Zeitdarstellung

Synchron Rechts Nebeneinander


Links
Hoch ... Hintereinander für alle Drag & Drag
(andere sind schwierig zu koor-
Zueinander Für das synchrone Drag & Drag kommt zur Bewegungsrichtung dinieren)
als Charakteristikum noch die Anordnung hinzu: Die Finger
können senkrecht zur Bewegungsrichtung (nebeneinander) Drag-&-Drag-Gesten werden
Waagerecht oder parallel zu Bewegungsrichtung (hintereinander) angeord- zeitlich synchron – beide
Auseinander Senkrecht net sein. Finger berühren den Screen
Diagonal ... gleichzeitig – ausgeführt, da
Für die Drag & Drags Zueinander, Auseinander und Aneinander die Realisierung zusammen
vorbei werden geradlinige Drags angenommen. Bei dem syn- mit der Asynchronität der ört-
Aneinander vorbei chronen, dem gespiegelten und dem gedrehten Drag & Drag lichen Bewegung zu komplex
110 können hingegen die einzelnen Drags beliebige Pfade verfolgen wäre.
(siehe Single Drags).

Gespiegelt Horizontal (li. & re. Hand) Ist das gespiegelte Drag & Drag horizontal ausgerichtet, wird
Vertikal (Daumen & Zeige- angenommen, dass der Nutzer zur Ausführung die Zeigefin-
finger einer Hand) ger der rechten und linken Hand benutzt , was aber auch von
Screengröße und -format abhängt. Ist das gespiegelte Drag &
Gedreht oder - Drag hingegen vertikal ausgerichtet, liegt nahe, dass der Nutzer
doppelt gespiegelt Zeigefinger und Daumen ein und der selben Hand verwendet.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


3-Touch

Tap & Tap & Tap | Charakteristikum: globale Anordnung (Aus-) Richtung Gruppierung

Name Ortdarstellung Name Ortdarstellung Name Ortdarstellung

Gerade Waagerecht 1 Cluster


Senkrecht
Diagonal ...
2 Cluster
Dreieck Rechts

Mit 3 Touchpunkten sind die Anordnungsmöglichkeiten 3 Cluster


schon vielfältiger: Sie können linear oder dreieckig ange-
ordnet sein und sich dabei alle nah zusammen, nur zum Teil Links
nah zusammen oder alle weit auseinander befinden. Hinzu
kommen die verschiedenen Ausrichtungen. Clusteranordnung

Die Finger, die genügend nah zusammen sind, bilden ein Name Ortdarstellung 111
Cluster. Bei der Analyse der möglichen Clusteranordnungen Hoch
kann ein Cluster insgesamt als ein Touchpunkt aufgefasst 2er links, 1er rechts
werden. Deshalb kann für die verschiedenen Ausprägungen
auf die weiter oben aufgeführten 2-Touch-Gesten zurückge- Runter
griffen werden. In dieser Tabelle sind nur die waagerechten 2er rechts, 1er links
und senkrechten Clusteranordnungen aufgeführt, die diago-
nalen sind aber natürlich auch möglich.
2er oben, 1er unten
Auf das Charakteristikum zeitlicher Ablauf der Tap-Tap-Tap-
Geste wird auf der folgenden Seite eingegangen. 2er unten, 1er oben

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
3-Touch

Tap & Tap & Tap | Charakteristikum: zeitlicher Ablauf Hold & Tap & Tap Hold & Hold & Drag | Charakteristikum: Überlappungen Alle weiteren Charakteristika
für Hold & Hold & Drag bzw.
Name Zeitdarstellung Zeitdarstellung Name Ortdarstellung für Hold & Drag & Drag (An-
ordnungen, zeitliche Abläufe,
Gleichzeitig Disjunkt Richtungen, Pfade usw.)
ergeben sich, wenn man
diese 3-Touch-Gesten in ihre
Elemente zerlegt und die ent-
Einzeln nacheinander Überlappend sprechenden Ausprägungen
von diesen übernimmt. So
ergibt sich bspw. aus der
Hold-&-Drag-Geste, dass auch
2 gleichzeitig, danach 1 Hold & Hold & Tap Hold & Drag & Drag | Charakteristikum: Überlappungen hier das Hold das Drag aus
Gründen der Koordination
Zeitdarstellung Name Ortdarstellung zeitlich umschließt.

Einzeln, danach 2 gleich- Disjunkt Es werden aus anatomischen


112 zeitig Gründen allerdings nicht alle
Kombinationen realisierbar
sein. Auf solche Aspekte,
Die verschiedenen Ausprägungen des zeitlichen Ablaufs Die ortsbezogenen Charakte- Überlappend die die motorischen Mög-
vervielfältigen durch die Kombinationsmöglichkeiten mit den ristika von Hold & Tap & Tap, lichkeiten des menschlichen
ortsbezogenen Charakteristika das mögliche Repertoire der Hold & Hold & Tap sowie Handpaars betreffen, wird an
3-Touch-Gesten immens. Bei der Gestaltung eines Multitouch- Hold & Hold & Hold entspre- späterer Stelle eingegangen.
Interaktionskonzepts sollte aber darauf geachtet werden, chen weitestgehend denen
solche Gesten auszuwählen, die die Koordinationsfähigkeiten von Tap & Tap & Tap. Die
des Nutzers nicht übersteigen. möglichen zeitlichen Abläufe
von Hold & Hold & Hold
stellen eine Erweiterung derer
von Hold & Hold dar.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Drag & Tap & Tap Drag & Drag & Tap | Charakteristikum: relative Bewegung absolute (Aus-) Richtung Hold & Drag & Tap

Zeitdarstellung Name Ortdarstellung Name Name Ortdarstellung

Synchron Rechts Hold & Drag (zueinander


Links oder voneinander weg)
Hoch ... neben Tap

Zueinander Drag neben Hold & Tap


Waagerecht
Senkrecht
Diagonal ...
Auseinander
Drag & Tap & Tap ist eine Hold & Drag & Tap ist schon eine sehr spezielle Geste. Hold
Erweiterung von Drag & Tap. und Drag können mit einer Hand ausgeführt werden, wäh-
Die ortsbezogenen Charak- rend die andere Hand zu einem bestimmten Zeitpunkt ein Tap
teristika können von dort Bei Drag & Drag & Tap darf die 2-Drag-Bewegung nicht zu Zeitdarstellung ausführt. Oder aber eine Hand führt das Drag aus, während ein
übernommen werden, jedoch kompliziert – gleichzeitig und einhändig ausführbar – sein, Finger der anderen Hand im Hold verharrt und ein weiterer zu 113
ist – wie da schon erwähnt sonst ist die Geste schwierig zu koordinieren. Die zweite Hand einem bestimmten Zeitpunkt tappt. Ein Tap mit der Hand, die
– die örtliche Koordination führt während dessen das Tap aus, wobei wieder gilt, dass bei auch gerade draggt, auszuführen, ist nicht praktikabel, da es
dieser Geste nicht einfach rea- diesem nicht der Ort sondern der Zeitpunkt ausschlaggebend den Fluss stören würde.
lisierbar: Da sich der Nutzer sein sollte. Insgesamt ist diese Geste kompliziert zu koordinieren.
auf die Bewegung des Drag-
Fingers konzentriert, sollten
die Tap-Finger eher zeitlich
koordiniert werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten
Multitouch-Repertoire
3-Touch

Drag & Drag & Drag | Charakteristikum: relative Dragrichtung Die anderen Charakteristika von Drag & Drag & Drag lassen
sich von der entsprechenden 2-Touch-Geste Drag & Drag
Name Ortdarstellung Name Ortdarstellung ableiten.

Alle synchron 2 zueinander, 1 davon Weitere Touchgesten, die sich aus noch mehr Touchpunk-
ten zusammensetzen sind lediglich Erweiterungen oder
Neukombinationen der bis hierher aufgelisteten Gesten.

Alle zueinander 2 auseinander, 1 heran Die Komplexität von Multitouch-Gesten mit maximal 10
Touchpunkten ist theoretisch nach oben hin ziemlich offen.
Bei der Entwicklung eines Interaktionskonzeptes bzw. eines
Vokabulars, das sich aus solchen Gesten zusammensetzt, ist
2 parallel, 1 heran darauf zu achten, dass ein sinnvolles Maß an Komplexität
Alle auseinander nicht überschritten wird, sonst läuft man Gefahr, dass der
Nutzer überfordert ist, sei es, weil er sich die Gesten nicht
2 parallel, 1 davon merken oder weil er sie schlicht nicht ausführen kann. Ein
extremes Beispiel wäre eine Geste für alle 10 Finger, die sich
114 gleichzeitig in vordefinierte, aber alle in unterschiedliche
Aneinander vorbei Richtungen bewegen sollen. Das soll aber nicht heißen,
dass eine 10-Touch-Geste überhaupt nicht nutzbar ist: Ein
10-Finger-Tap etwa wäre sehr einfach umzusetzen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Vergleich zu anderen Gesten-Systemen

Gesten-Taxonomien anderer Autoren sollen an Westerman beschreibt Gesten als eine Kom-  Siehe }}} Westerman: „Hand Tracking, Finger
dieser Stelle nicht unerwähnt bleiben. bination aus einer Fingerspitzenkombination Identification, and Chordic Manipulation on a Multi-
Touch Surface“, 1999. [Wes99] |||
– Channels – und einer Bewegungsart. Die
 Siehe }}} Heng et al.: „A Touch Interaction Model for Heng et al. teilen Touch-Gesten in einfache Geste kann mit einem von 7 solcher Kanäle
Tabletops“, 2008. [Hen08] ||| (1 Hand) und komplexe Berührungen (2 Hände (2, 3 oder 4 lange Finger, Daumen mit 1, 2,
oder Hintereinanderausführung einfacher 3, oder 4 langen Fingern) eingeleitet wer-
Berührungen) ein. Weiterhin unterscheiden sie den, indem die entsprechenden Finger das
zwei Berührungsstile: solche mit einfachem physische Interface berühren, worauf eine
Kontakt (Fingerspitze, flache Hand, 4 geschlos- Bewegung folgt. Westerman unterscheidet
sene Fingerspitzen, Faust und Handkante) dabei 4 Grundbewegungsarten (Antippen,
und solche mit mehreren Kontaktpunkten Translation, Rotation und Skalierung). Für seine
bzw. -flächen (2-, 3-, 4- und 5-Finger-Gesten). Systematisierung entwickelt er eine Notation
Neben den Berührungsstilen kategorisieren die und schlägt Mappings vor, die sich teilweise
Autoren noch die Bewegungsarten: Press, Tap in den Touchpads von FingerWorks (siehe
und Drag. Für multiple Kontakte unterscheiden Abschnitt 3.3 dieser Arbeit) wieder finden, an
sie zusätzlich das Auseinander-, Zusammen- deren Entwicklung er beteiligt war. 115
und bidirektionale Bewegen (Rotieren) der
Finger und den 1-Finger-Press in Kombination Westermans Systematisierung basiert auf der
mit einem Mehrfinger-Tap. Eine Berührung (ein in seiner Arbeit beschriebenen Technologie
Touch) setzt sich bei Heng et al. aus Berüh- und ist deshalb sehr speziell. So kann er eine
rungsstil und Bewegungsart zusammen. Daumenberührung von der Berührung eines
anderen Fingers differenzieren, aber nicht die
Diese Unterteilung schließt zwar Berührungen Berührungen der langen Finger untereinan-
mit anderen Handteilen als den Fingerspitzen der. Ein Single-Touch bleibt komplett außen
mit ein, bleibt aber in der Bewegungsein- vor. Weiterhin gibt es keine Anordnungsvari-
teilung recht oberflächlich und lässt andere anzen, da die Hände die Gesten stets in ihrer
Aspekte wie Anordnung der Finger oder Orien- Grundhaltung einleiten. Auch beschränkt sich
tierung der Touch-Fläche unerwähnt. Westerman auf die unimanuelle Interaktion.

Masterarbeit „Multitouch Input“ | Grit Schuster


 In Patenten, die Apple 2007 einreichte, werden In diversen Apple-Patenten, deren Autor Diese Systematisierung betont die Vielfältigkeit
Gesten-Systematiken beschrieben und grafische Nutzer- bzw. Co-Autor ebenfalls Westerman ist, findet von Multitouch-Gesten, führt diese aber nur
schnittstellen vorgestellt, mit denen Nutzer Gestenbe-
sich die Gestenzusammensetzung Kanal + auf die unzähligen möglichen Fingerkonstella-
deutungen in einem System nachschlagen und sie ggf.
Bewegung wieder, wobei dort der Kanal als tionen zurück, statt auf z. B. expressive Gesten
auch neu zuordnen können. Zudem werden beispielhaft
für grundlegende Funktionen Gestenzuordnungen Akkord – „Chord“ (wie bei Engelbarts NLS, zu verweisen. Auch werden keine Kombinati-
aufgeführt. siehe Abschnitt 2.1 dieser Arbeit) – bezeichnet onen von Drags, Holds und Taps untereinander
}}} Elias et al.: „Multi-Touch Gesture Dictionary“, 2007. wird und diese Akkorde nicht mehr auf nur vorgesehen, welche das Vokabular auf der
[Eli07] ||| 7 beschränkt bleiben. [Eli07] schreiben jeder einen Seite bereichern würden und auf der
}}} Westerman et al.: „Gesturing With A Multipoint
Hand sogar mindestens 25 Akkorde zu, welche anderen Seite besser vom Nutzer umsetzbar Die von Apple vorgeschlagenen Gesten-Grundbewegungen
Sensing Device“, 2007. [Wes07] |||
noch variiert werden können, indem nur die wären als wilde Fingerkombinationen. Die sind:
2008 wurde ein weiteres Patent von Apple publiziert,
_Drag nach schräg links oben
das im Juni 2007 eingereicht wurde und in dem es um Fingerspitze oder der ganze Finger den Screen Autoren laufen hier Gefahr, in die „Engelbart-
_Drag nach oben
Strategien geht, Nutzern die Multitouch-Interaktion nahe berührt oder indem die Finger nahe beieinan- Falle“ (Siehe Abschnitt 2.1 dieser Arbeit) zu
_Drag nach schräg rechts oben
zu bringen. der liegen oder gespreizt werden. Die Chords tappen. _Drag nach links
}}} Westerman: „Gesture Learning“, 2008. [Wes08] |||
dienen der Klassifizierung von Touchgesten _Tap
auf höchster Ebene. Auf die Fingerkonstella- _Drag nach rechts
116 tion folgt dann die Bewegung, die die Geste _Drag nach schräg links unten
_Drag nach unten
vervollständigt. Die Autoren schlagen 13
_Drag nach schräg rechts unten
Grundbewegungen vor, die mit den Akkorden _Drag Rotation gegen den UZS
kombiniert werden können – womit man bei _Drag Rotation im UZS
mehr als 25 Akkorden und mehr als 13 Bewe- _Expandierendes Drag (Finger auseinanderbewegen)
gungen auf über 300 Gesten kommt. _Kontrahierendes Drag (Finger zusammenbewegen)
. }}} [Eli07] |||

Fingerkombinationen – so genannte Chords – dienen als


Grundlage für eine Gestenkategorisierung, welche z. B.
der Einordnung in Gesten-Wörterbüchern dienen kann,
in denen der Nutzer die Möglichkeit hat, Bedeutungen
nachzuschlagen. }}} [Eli07] |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die hier vorgestellten Gesten-Taxonomien anderer Autoren vernachlässigen
Parameter wie Fingeranordnung, Berührungsentfernung oder symbolhafte
Pfade und verzichten weitgehend darauf, Taps, Holds und Drags miteinan-
der in einer Geste zu kombinieren. Die Konzentration allein auf Fingeran-
zahlen in Kombination mit einigen Grundbewegungen lässt das Repertoire
eher leblos erscheinen und führt zu vielen abstrakten, einander ähnelnden
Gesten, die leicht verwechselt werden können.

117

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Die menschliche Komponente

Wie weiter oben bereits erwähnt und teilweise _die langen Finger können nah zusammen
in der Repertoire-Tabelle angemerkt, kann der liegen oder gespreizt werden
menschliche Nutzer als Folge anatomischer, _die meisten Menschen können ohne An-
motorischer und koordinativer Aspekte prak- strengung die langen Finger nur gleichmäßig
tisch nicht das theoretisch mögliche Gestenre- spreizen oder den Zeigefinger allein abspreizen
pertoire abdecken. Wie diese Grenzen in der _der Durchmesser der Finger eines Erwachse-
Ausführbarkeit genau aussehen, wird in den nen ist rund 16-20 mm [Saf08]
folgenden Abschnitten diskutiert. _die Fingerkuppe eines Erwachsenen misst
ca. 10-14 mm [Saf08], ist also gröber als ein
Anatomische und motorische Aspekte. Mauscursor!
Das „Eingabegerät“ für den Multitouch-Screen _Erwachsene können die langen Finger rund
ist das menschliche Hand-Paar. Die für die 15 cm weit spreizen (einzeln ca. 5 cm ausein-
Toucheingabe relevanten anatomischen und ander)
motorischen Gegebenheiten sind: _Erwachsene können den Daumen ungefähr
_2 Hände (rechte und linke Hand) 15 cm vom Zeigefinger abspreizen
118 _je 5 Finger, genauer gesagt 1 Daumen und 4 _die Muskeln der langen Finger sind so mitein-
lange Finger ander verbunden, dass die Finger nicht völlig
_potentielle Berührungsflächen sind Finger- unabhängig voneinander bewegt werden Handskizzen auf dieser Seite aus }}} [Hog01] |||
kuppen, Fingerspitzen, Fingerinnenseiten, können
Handballen, Handkanten, Fingerknöchel _meist ist der kleine Finger feinmotorisch
_linke Hand Daumen rechts, rechte Hand unbegabt
Daumen links _die Hände sind nicht durchsichtig – verdecken
_die 4 langen Fingerspitzen beschreiben einen also immer den Teil des Screens, der darunter
Bogen, der Mittelfinger ist am längsten, der bzw. dahinter liegt, auch die angetippte Stelle
Kleine Finger ist am kürzesten, Zeige- und wird verdeckt
Ringfinger sind ungefähr gleich lang
_der Daumen liegt näher zum Handgelenk als
die langen Finger

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die Daumenrotation: Der Daumen kann durch eine Rotation
an die Hand angelegt und von ihr abgespreizt werden. Die
größte Entfernung zwischen Daumenspitze und Zeigefinger-
kuppe beträgt bei Erwachsenen ca. 15 cm.

Das Spreizen der langen Finger: Die langen Finger können


aneinander gelegt oder gleichmäßig gespreizt werden. Das Knicken der langen Finger: Die langen Finger können
Das Abspreizen einzelner Finger oder Fingergruppen fällt gestreckt und gebeugt werden. Das ermöglicht eine verti- 119
vielen Menschen schwer – abgesehen vom Zeigefinger. kale Bewegung der Fingerspitzen. Diese Bewegung ist aber
Der Abstand zwischen Zeigefingerkuppe und der Kuppe angenehmer umzusetzen durch:
des Kleinen Fingers beträgt bei maximaler Spreizung bei
Erwachsenen ca. 15 cm. Das Schieben der langen Finger: Dieses Schieben wird im
Grunde durch eine Bewegung der gesamten Hand und des
Arms verursacht.

Die Rotation der langen Finger: Durch eine Drehung im


Handgelenk gelingt eine Rotation der langen Finger bei fes-
ter Daumenposition. Diese Bewegung ist aber bei extremer
Ausübung belastend.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Koordinative Aspekte. Manuelles Agieren Der Mensch führt in seiner physischen Um-
lässt sich in drei Kategorien einteilen: Unima- gebung sehr oft zweihändige kontinuierliche
nuelle (einhändige), symmetrische bimanuelle Bewegungen aus: Einen Pkw lenken und
und asymmetrische bimanuelle Bewegungen. schalten, Essen mit Messer und Gabel usw.
Der Mensch ist ohne weiteres in der Lage, Bereits 1986 fragten sich Buxton et al.,  Im CAD-Experiment sollten die Probanden ein
all diese Handlungen auszuführen. In der warum diese Bewegungen im HCI-Bereich so grafisches Objekt positionieren und skalieren, wobei
beide Teilaufgaben auf zwei Eingabegeräte – zwei Hände
physischen Welt fallen viele Handlungen in die selten zum Einsatz kommen und untersuchten
– verteilt wurden. Beide Teilaufgaben wurden getrennt
komplexeste Kategorie der asymmetrischen bi- anhand zweier Experimente die zweihändige
– einhändig – erläutert und trainiert. Die Probanden ent-
manuellen Bewegungen, bei denen mit beiden Kommunikation von Menschen mit Compu- wickelten jedoch selbständig Strategien, um die beiden
Händen agiert wird, wobei die Hände unter- tern. Sie stellten den Probanden Aufgaben Teilaufgaben parallel auszuführen.
schiedliche Bewegungen ausführen. Nicht alle aus den Bereichen CAD und Textverarbeitung. Beim Text-Experiment sollten die Probanden in einem Text
solche theoretisch möglichen Bewegungen Die Ergebnisse der Studie zeigten, dass die ein Wort in einer bestimmten Zeile finden und selektieren.
Eine Gruppe nutzte dazu eine einhändige Schnittstelle
können gut koordiniert werden. Welche Probanden keine Schwierigkeiten hatten, Auf-
– Software-Scrollbalken und Scrollpfeile zur Navigation
Aspekte bei solchen asymmetrischen zweihän- gaben ohne Aufforderung parallel umzusetzen und Pointer-Device (Puck) zur Selektierung – eine andere
digen Bewegungen erfüllt sein müssen, damit und damit auch zeitlich effektiver waren, als eine Schnittstelle für beide Hände – ein touchsensitives
120 sie zu koordinieren sind, wird weiter unten Probanden, die ihre Aufgaben sequentiell erle- Scroll-Device für die nicht-dominante Hand und das
erläutert. Bei symmetrischen Handlungen digten. Zweihändige Bewegungen sind zudem Pointer-Device für die dominante Hand. Die Probanden
am 2-Hand-Interface waren alle schneller als die der an-
führen die beiden Hände zeitgleich oder auch bei sequentieller Ausführung effizienter
deren Gruppe und die Differenz der Geschwindigkeit zur
zeitlich versetzt gleiche Bewegungen aus – im als einhändige, da sich die Hände jeweils Erfüllung der Aufgabe zwischen Experten und Neulingen
Raum verschoben oder gespiegelt (z. B. beim schon optimal positionieren können. in der Mausnutzung war in der 2-Hand-Gruppe geringer.
Fahrrad Lenken oder beim Stangenklettern). Außerdem waren die Mausexperten in der 1-Hand-Grup-
Bei unimanuellen Handlungen ist nur eine pe nur unbedeutend schneller als die Maus-Neulinge in
Hand involviert – dann meist die dominante (z. der 2-Hand-Gruppe.
}}} Buxton et al.: „A Study in Two-Handed Input“, 1986.
B. beim Zähne Putzen).
[Bux86] |||
Stricken ist ein Beispiel für eine sehr komplexe
asymmetrische bimanuelle Handlung und mit genug Übung
sehr schnell und ohne viel kognitiven Aufwand ausführbar.
Abbildung }}} http://commons.wikimedia.org |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Mit den Experimenten, in denen es darum ging, Leganchuk et al. stellten 1998 nach einer Owen et al. beschreiben ebenfalls kogni-  Owen et al. ließen in ihren Experimenten Kurven-
grafische Objekte zu manipulieren (skalieren, verschieben, experimentellen Studie zwei Vorteile der tive Aspekte der bimanuellen Interaktion manipulationen durchführen und konnten damit die
drehen) und Bounding Boxes um Objekte aufzuziehen, Hypothesen bestätigen, dass die bimanuelle Manipulati-
bimanuellen Mensch-Computer-Interaktion und kommen bei ihren Untersuchungen auf
wurde gezeigt, dass nicht nur die Bewegungsersparnis on zeitlich effizienter ist als die unimanuelle und dass die
heraus: die motorische und die kognitive. ähnliche Resultate. Die bimanuelle Interaktion
bei der bimanuellen Interaktion die Effizienz bei der Effizienzdifferenz umso stärker wird, je schwieriger die
Aufgabenbewältigung steigert, sondern auch die natür- Die motorischen Vorteile sind die zeitliche ist für bestimmte Aufgaben zeiteffizienter als Aufgabe ist.
lichere Art, die Tätigkeit in gröbere, dem mentalen Modell Effizienz, die durch die höhere Dimensionalität die unimanuelle, vor allem, wenn beide Hände }}} Owen et al.: „When It Gets More Difficult, Use Both
des Nutzers eher entsprechende Teilschritte zerlegen zu an Freiheitsgraden bei der Eingabe zustande in ein und den selben Vorgang – mentales Hands – Exploring Bimanual Curve Manipulation“, 2005.
können, indem z. B. die Überführung eines Rechtecks in kommt, wodurch mehr Informationen parallel Modell! – integriert sind und der Aufmerksam- [Owe05] |||
ein anderes in einem Schritt vollzogen werden konnte,
kommuniziert werden können. Kognitiv ist keitsfokus deshalb nicht wechseln muss. Sie
anstatt es erst zu verschieben und dann erst zu skalieren.
Je komplexer dabei eine Aufgabe ist, desto eher tritt die bimanuelle Interaktion von Vorteil, da fanden außerdem heraus, dass die zeitliche
dieser Vorteil zu Tage. Aufgaben mental in weniger Arbeitsschritte Effizienzsteigerung umso stärker ausfällt, je
}}} Leganchuk et al.: „Manual and Cognitive Benefits zerlegt werden müssen, was bei traditionellen schwieriger, also kognitiv anspruchsvoller, eine
of Two-Handed Input: An Experimental Study“, 1998. unimanuellen Interaktionstechniken zum Teil Aufgabe ist.
[Leg98] |||
auf einem unnatürlich starken Level stattfin-
det. Die Autoren betonen, dass die Zerlegung Für bimanuelle Interfaces schlagen die Autoren
einer Aufgabe in Arbeitsschritte immer dem ableitend folgende Designprinzipien vor: Die 121
mentalen Modell des Nutzers, welches sich aus Interaktionsvorgänge sollten visuelle Integrität
seinen Erfahrungen aus der physischen Umge- und konzeptionelle Integrität aufweisen. Das
bung ableitet, so nahe wie möglich kommen bedeutet, eine bimanuelle Handlung sollte
sollte. So sollte man z. B. das Konzept des keinen Wechsel des Aufmerksamkeitsfokus
Vorgangs Einen Nagel in die Wand hauen erfordern und sie sollte mental als eine einzige
mental nicht in sequentielle Arbeitsschritte Operation wahrgenommen werden.
Nagel halten und Mit dem Hammer schlagen
unterteilen müssen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Bimanuelle Koordination nach Guiard

Eine grundlegende Arbeit über die Koordi- der Beitrag der nicht-dominanten Hand zur Beispiele für bimanuelle Arbeitsteilung sind
nation bimanueller Bewegungen liefert Yves ausführenden Aktion immer früher beginnt als Schreiben (nicht-dominante Hand bewegt
 Guiards Kinematisches Kettenmodell dient auch Guiard in seinem Artikel von 1987. Dessen der der dominanten Hand, um die Handlung und fixiert Blatt Papier, damit dominante Hand
HCI-Forschern als Grundlage Grundthese ist, dass der Mensch in der Regel einzuleiten und vorzubereiten. Die dritte hochfrequente Schreibbewegungen ausführt),
}}} Guiard: „Asymmetric Division of Labor in Human
über eine dominante und eine nicht-domi- Aussage des Modells betrifft die Auflösung Zeichnen mit Lineal (nicht-dominante Hand
Skilled Bimanual Action: The Kinematic Chain as a
nante Hand verfügt und dass diese beiden der motorischen Fähigkeiten beider Hände bewegt und fixiert Lineal, bevor dominante
Model“, 1987. [Gui87] |||
Hände im Rahmen asymmetrischer bimanueller bzw. den Unterschied in der Skalierung ihrer Hand präzise zeichnet), Nähen (nicht-dominan-
Aktionen unterschiedliche aber wohl definierte Bewegungen. Die nicht-dominante Referenz- te Hand hält und bewegt Stoff, den dominante
Rollen einnehmen, um sich gegenseitig zu hand nimmt ein größeres Ausmaß in Raum Hand bearbeitet), Kartoffeln Schälen (nicht-do-
ergänzen. Guiards Modell besagt, dass bei und Zeit ein: Ihre Bewegungen sind niederfre- minante Hand hält und dreht von dominanter
jeder bimanuellen Handlung die nicht-domi- quenter (längere Zeitperioden) und spielen sich Hand zu schälende Kartoffel) oder Gitarre
nante Hand einen Referenzrahmen für die in größeren räumlichen Amplituden ab. Die Spielen (nicht-dominante Hand greift Akkord,
dominante Hand setzt und diesen während dominante Hand agiert dagegen in feinerer bevor dominante Hand Saiten anschlägt)
der Handlung immer wieder dynamisch räumlicher und zeitlicher Auflösung. Guiard
justiert. Die dominante Hand findet also ihre bezeichnet die dominante Hand daher auch als
122 räumliche Referenz immer im Ergebnis der mikrometrisch und die nicht-dominante Hand
Bewegung der nicht-dominanten Hand. Aus als makrometrisch. Auf diese Weise ergänzen
dieser Arbeitsaufteilung folgt zugleich, dass sich die beiden Hände in ihren Fähigkeiten.

Bei asymmetrischen bimanuellen Handlungen bewegen sich


die beiden Hände nicht völlig unabhängig voneinander, sondern
nehmen feste Rollen ein und kooperieren miteinander.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Schlussfolgerungen

In klassischen Software-Anwendungen wer- Aufmerksamkeit des Menschen nur auf einen sen Interaktionsbereichen wechseln. [Bux86] Bei der Arbeitsaufteilung der Hände ist außer-
den bei der digitalen Manipulation die hoch Punkt fokussiert. Wenn zwei Hände agieren, haben gezeigt, dass in solchen Situationen dem darauf zu achten, dass die Handlungs-
entwickelten koordinativen Fähigkeiten des dann tun sie das auf ein gemeinsames Ziel ge- eine zweihändige – wenn auch sequentiell Aspekte, derer sie sich annehmen, als eine
Menschen kaum gefordert. In Multitouch-An- richtet, sie handeln also zusammen in ein und ausgeführte Interaktion – effektiver ist als eine einzige Operation wahrgenommen werden.
wendungen kann man von diesen Fähigkeiten demselben Kontext. Dies sollte man auch bei einhändige. Dennoch sollte es im Allgemei- Der Nutzer sollte also nicht denken:
endlich auch im digitalen Bereich profitieren. der Entwicklung von digitalen Nutzerschnitt- nen vermieden werden, den Nutzer zu häufig Ich mache mit der einen Hand dies und mit
Der parallele Einsatz zweier Hände ermöglicht stellen beachten. Gerade bei Multitouch- zum Umherspringen der Aufmerksamkeit zu der anderen Hand das,
die Eingabe von mehr Information und eine Screens gibt es bei der Berührung kein taktiles zwingen. sondern:
flüssigere Interaktion, die weniger umständlich Feedback darüber, wo sich die Finger auf dem Ich mache mit meinen Händen dies.
und gewandter von statten geht – wenn das Screen befinden. Beide Hände sollten also,
Software-Interface entsprechend gestaltet ist wenn es darauf ankommt, wo die Finger den
und die Applikation angemessen reagiert. Screen berühren, während der Interaktion im Bimanuelle Interaktion bringt eine Effizienzstei-
Blickfeld sein. Ebenso sollte sich das Ergebnis
Das deskriptives Modell nach [Gui87], das der Manipulation, die gerade stattfindet, in gerung bei visueller und konzeptioneller Inte-
koordinative Fähigkeiten und die Arbeitsauftei- diesem Blickfeld befinden, um die visuelle
lung der beiden Hände bei bimanuellen Akti- Integrität zu wahren. grität. Ersteres bezieht sich auf den Fokus, dem 123
onen beschreibt, ist nützlich für die Gestaltung
von Interfaces, bei denen der Nutzer beide Dennoch kann die Multitouch-Interakti- sich beide Hände und die Aufmerksamkeit des
Hände einsetzen soll. Bei der Entwicklung on einen profunden Vorteil bringen, wenn
ist darauf zu achten, dass die vorgesehenen Arbeitsschritte ausgeführt werden sollen, bei Nutzers zuwenden. Letzteres bezieht sich auf die
Interaktionen den koordinativen Fähigkeiten denen weit voneinander entfernte Bereiche
des Nutzers entsprechen. auf dem Screen angesteuert werden müssen. Aufgabe, die als Operation dem mentalen Modell
Solche Schritte können sequentiell ausgeführt
Trotz der stark herausgebildeten Fähigkeit, die auf beide Hände verteilt werden. Der Aufmerk- des Nutzers entspricht. Zusätzlich muss die Inter-
beiden Hände zeitgleich zu verwenden, ist die samkeitsfokus kann dann schnell zwischen die-
aktion den koordinativen Fähigkeiten des Nutzers
gerecht werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Charakteristika der Toucheingabe

An dieser Stelle werden einige Aspekte So kann der Cursor die Form einer zeigenden men mit Toucheingabe auf die klassischen
diskutiert, die die Toucheingabe von anderen Hand annehmen, um darauf aufmerksam antizipatorischen Hinweise mittels Cursordar-
Interaktionstechniken wie der Maus- oder der zu machen, dass an der jeweiligen Stelle stellung und Roll-over-Effekte für Interface-
Styluseingabe unterscheidet, und die bei der eine Interaktion möglich ist. Die Form eines Elemente verzichtet werden muss. Über diese
Konzeption von Touch-Interfaces zu beachten Doppelpfeils gibt sowohl an, dass hier etwas Mechanismen kann also dem Nutzer nicht
sind. verschoben werden kann, als auch, in welche mitgeteilt werden, mit welchen Elementen er
Richtung. Darüber hinaus kann das Pikto- interagieren kann, auf welche Weise er das
Für die Eingabe mit der Maus haben sich gramm eines Werkzeugs, dass im Moment kann oder was passieren wird, wenn er ein
einige Mechanismen durchgesetzt, die die ausgewählt ist, angezeigt werden, um dem Element berührt. Es wäre nützlich, für diese
Nutzerfreundlichkeit des Interface erhöhen, in- Nutzer vor Augen zu halten, was ein Klick Techniken geeignete Alternativen zu finden. So
dem sie dem Nutzer Hinweise zu Interaktions- gleich bewirken würde. Die Form des Cursors ist es denkbar, während der Finger ein Widget
möglichkeiten liefern oder Zusammenhänge kann auch als Instrument dienen: Ein Zielkreuz berührt, direkt darüber ein Icon einzublenden,
verdeutlichen und so Arbeitsabläufe verständli- ermöglicht z. B. die genauere Positionierung das analog zu alternativen Cursordarstellungen
cher machen. Dazu gehören Roll-over-Effekte, des Cursors, als der Default-Pfeil. So kann der dem Nutzer Hinweise zur möglichen Interak-
damit der Nutzer weiß: „Hier kann ich etwas Cursor den Nutzer also sogar in seiner Arbeit tion mit dem Widget und zu dessen Funktion
124 tun“. Auch die sich ändernde Darstellung des unterstützen. zu geben.
Cursors, der die Mausposition repräsentiert,
gibt dem Nutzer wichtige Informationen Verzicht auf antizipierende Hinweise wie Fehlende Präzision. Ein weiterer Unterschied
darüber, was man über bestimmten Widgets Cursordarstellung und Hover-Effekte. der Toucheingabe gegenüber der Eingabe über
bewirken kann und in welcher Weise. Bei der Toucheingabe entfällt der Cursor, Maus oder Stylus ist die Tatsache, dass Finger-
denn der Finger berührt den Screen direkt. spitzen vergleichsweise unpräzise sind. Mit den
Somit braucht es keine zwischengeschaltete groben Fingern fällt es schwerer, ein kleines
Repräsentanz für die Eingabeposition. Davon Widget zu treffen, besonders, wenn in dessen
abgesehen werden Handbewegungen ohne direkter Umgebung noch andere interaktive
Displaykontakt vom System nicht wahrgenom- Elemente liegen. Das Problem wird bei klein-
men, wodurch die Darstellung eines Cursors, formatigen Software-Tastaturen und Toolbars
der sich mit der Hand bewegt, nicht einmal oder in Situationen, bei denen eine genaue
möglich wäre. Daraus folgt, dass bei Syste- Positionierung, Größenanpassung oder Selekti-

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


on ausgeführt werden soll, offensichtlich. Hier z. B. bei der Platzierung der Einfügemarke erscheinen. So sind für die Maus-Interaktion
muss ein Touch-Interface entsprechend opti- in Textbereichen helfen. Weitere Techniken bewährte Drop-Down-Menüs bei der Touch-
miert sein und den Nutzer bei seiner Eingabe zur präzisen Ansteuerung von sehr kleinen eingabe zu vermeiden.
unterstützen. Dafür gibt es bereits einige Me- Zielen beschreiben Benko et al.. Sie nutzen  Die Autoren beschreiben verschiedene Techniken zur
chanismen. Zum einen können virtuelle Kräfte ebenfalls die Einblendung von Instrumenten Große Entfernungen. Besonders bei der präzisen Selektion für die Multitouch-Interaktion.
}}} Benko et al.: „Precise Selection Techniques for Multi-
eine Anziehung zu Targets oder bestimmten wie einer interaktiven Lupe oder eines Cursors, Toucheingabe über große Displays sollte das
Touch Screens“, 2006. [Ben06] |||
Positionen bewirken. So ein „Snapping“ kann dessen Bewegung verlangsamt werden kann, Interface so gestaltet sein, dass der Nutzer
den Nutzer dabei unterstützen, Positionen auf um gröbere Fingerbewegungen auf kleinere nicht ständig große Wege mit den Händen
dem Display präzise anzusteuern. Zum anderen Wege abzubilden. Durch das Finger-Cursor- und Armen zurücklegen muss, um Ermüdungs-
sollten Widgets bzw. ihr möglicherweise Offset geht dabei jedoch das Erlebnis der erscheinungen vorzubeugen. Es ist angenehm,
größerer Targetbereich – „Iceberg tips“ – nicht direkten Manipulation ein Stück weit verlo- Menüs und andere Widgets direkt in Handnä-
kleiner sein als ca. 1 cm. Bei kleinformatigen ren. Beim iPhone wird für die Spezifizierung he erscheinen zu lassen. Zudem sollte die An-
Geräten kann das problematisch werden, da von Orten in einem Stadtplan eine Nadel als ordnung und die Form der einzelnen Widgets
hier weniger Platz zur Verfügung steht und Werkzeug über der Fingerspitze eingeblendet, auf die Anatomie der Hand optimiert sein.
sich benachbarte Targetbereiche nicht über- um einen Punkt genau anzusteuern. Dort
schneiden können. Das iPhone realisiert für die wird das Offset geschickt durch Schatten und Das Klick-Paradigma ablegen. Für die 125
integrierte Software-Tastatur einen cleveren Animation der Nadel überspielt und fällt kaum Toucheingabe sollten die üblichen Paradigmen, strapaziert“ werden. Ein Klick zur Aktivierung
Mechanismus mit adaptiven Targetbereichen: störend auf. die für die Interaktion mit der Maus üblich von Objekten oder Widgets kann auf ein Tap
Während des Tippens antizipiert das System sind, nicht einfach übernommen werden. abgebildet werden. Alternativ kann auch eine
die Wahrscheinlichkeiten der folgenden mög- Verdeckung. Eine weitere Eigenschaft, die Die Grundelemente der Interaktion bestehen Berührung mit der Fingerspitze mit nachfol-
lichen Zeicheneingabe und vergrößert dyna- bei der Toucheingabe problematisch sein kann, hier nicht mehr aus Klick, Doppelklick und gendem Niederdrücken des Endfingerglieds
misch die Targetbereiche der entsprechenden ist die Verdeckung von Interface-Bereichen Rechtsklick. Um eine geschmeidige Eingabe einen Mausklick simulieren. Dieses „SimPress“
Widgets. Eine weitere Möglichkeit, den Nutzer durch die Hand und die Finger selbst. Die zu ermöglichen, sollten vornehmlich Taps wird von [Ben06] beschrieben. Das Konzept
bei präzisen Positionierungen zu unterstützen, Fingerspitze verdeckt genau das Target, das sie (kurze Berührung), Holds (lange Berührung) des Rechtsklicks zum Einblenden von Menüs ist
ist die Einblendung von Instrumenten wie z. selektiert. Aus diesem Grund kann ein visuelles und Drags (bewegte Berührung) unterstützt zwar auf die Toucheingabe abbildbar, jedoch
B. einer Lupe direkt oberhalb der Fingerbe- Feedback nicht genau dort stattfinden. Re- werden. Doppel-Taps sind zwar auch möglich, sollten Techniken zur direkten Manipulation
rührung, die vergrößert das darstellt, was sich levante Widgets sollten aufgrund der Verde- unterlaufen jedoch die Idee einer fließenden von Objekten der Auswahl aus Befehlslisten
direkt unter der Fingerspitze abspielt. Das kann ckung auch nicht unterhalb der Berührung Interaktion. Deshalb sollten sie nicht „über- vorgezogen werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Gesten

Gestenerkennung, Gestendifferenzierung, Konflikte

Hier folgen noch ein paar wichtige Hinweise ist, ein Drag right up auszuführen, erkennt das erkennung schon während der Ausführung
bezüglich der Gestenerkennung, die vor allem System am Anfang der Ausführung bereits ein nicht verzichten, da dies ein „Live-Feedback“
bei der Implementierung und deshalb auch bei Drag right und die entsprechende Funktion liefert, was die Interaktion sehr viel nutzer-
der Konzeption einer Anwendung von Belang wird aktiviert, obwohl das gar nicht die Intenti- freundlicher macht. Niemand würde bei der
sind. on des Nutzers war. Mausinteraktion mit dem Computer gern
darauf verzichten, eine Selektion live ange-
Es gibt zwei Möglichkeiten, zu welchem Das selbe Problem liegt vor, wenn in einem zeigt zu bekommen oder noch während eines
Zeitpunkt die Gestenerkennung stattfindet: System z. B. ein einfaches Drag während der Drag-Vorgangs eine sich stetig aktualisierende
Noch während die Geste ausgeführt wird, also Ausführung die Verschiebung der Ansicht Voransicht zu erhalten, wo das gedraggte Ele-
bevor der Finger das Display verlässt, oder erst bewirken soll, bestimmte Drags jedoch mit an- ment beim Drop landen wird. Zur Vermeidung
nach Abschluss einer Geste, also nachdem der deren Funktionen belegt sind. Will der Nutzer der oben genannten Konflikte kann man aber
Finger die Touchfläche losgelassen hat. Beide ein solches spezielles Drag ausführen, so wird bestimmte Mechanismen anwenden.
Alternativen haben ihren Nutzen. Will man automatisch währenddessen unerwünschter
jedoch beide in ein und dem selben Kontext Weise die Ansicht verschoben. Andersherum Eine Möglichkeit liegt darin, feine Kontext-
anwenden, müssen Mechanismen gefunden kann es leicht passieren, dass der Nutzer wäh- unterschiede zu beachten. So ein Kontext-
126 werden, damit es nicht zu Konflikten kommt. rend der Verschiebung der Ansicht aus Ver- unterschied kann z. B. sein, ob der Text an der
sehen eine bestimmte Funktionsgeste ausführt. Stelle, an der eine Geste beginnt, markiert ist
Konflikte treten auf, wenn z. B. ein Drag right oder nicht. So bewirkt in Microsoft Word die
etwas bestimmtes bewirkt und ein Drag right Es wäre einfach, solche Konflikte komplett zu Mausgeste down-drag über unmarkiertem
up etwas ganz anderes und die Gestenerken- vermeiden, indem das System Touchgesten Text gestartet die Markierung des Textab-
nung schon während der Ausführung stattfin- generell erst nach Beendigung der Ausführung schnitts von der Startposition aus bis zur
den soll. Wenn nämlich der Nutzer im Begriff auswertet. Dennoch will man auf die Gesten- aktuellen Mauscursorposition. Die selbe Geste

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


über markiertem Text gestartet bewirkt hinge- nicht statt. Der Nachteil hierbei ist, dass der Durch Multitouch werden Gesten zwangsläu-
gen die Verschiebung des markierten Textaus- Nutzer die speziellen Funktionsgesten nicht fig komplexer. Deshalb ist darauf zu achten,
schnitts an die Stelle, an der das mouse-up sofort ausführen kann, weil er jedes Mal den dass die Nutzerfreundlichkeit nicht unter zu
erfolgt. So feine Kontextunterschiede können Aktivierungsmoment abwarten muss. Auch komplizierten Gesten leidet, die zu schwierig
allerdings bei schneller Ausführung der Gesten kann es vorkommen, dass ein Nutzer, wäh- auszuführen oder zu schwer zu merken sind.
auch zu unerwünschten Resultaten führen, vor rend er die Ansicht verschiebt, aus anderen Das kann erreicht werden, indem Gesten
allem wenn während das Drags die aktuelle Gründen verharrt und dadurch unwillentlich sinnfälligen Funktionen zugeordnet werden,
Funktionsweise der Geste nicht offensichtlich die Funktionsgestenerkennung aktiviert. Dieses die leicht zu assoziieren sind, und indem man
genug visualisiert wird, um dem Nutzer ein Problem kann eingedämmt werden, indem Gesten implementiert, die „genüsslich“ sind.
augenscheinliches Feedback auf seine gegen- diese Aktivierung z. B. ausschließlich durch Damit ist gemeint, dass es Freude bereitet,
wärtige Handlung zu geben. ein Hold zu Beginn eines Berührungsvorgangs bestimmte Gesten anzuwenden, weil sie
erfolgen kann. durch das direkte Feedback des Systems eine
Eine weitere Möglichkeit zur Vermeidung sinnliche Erfahrung darstellen: ein Gefühl,
von Konflikten ist die Aktivierung bestimmter Noch eine Möglichkeit, Konflikte in der Ges- digitale Daten mit den Fingern direkt physisch
Gesten erst nach einer gewissen Wartezeit. tenerkennung zu verhindern, ist die Nutzung zu manipulieren, statt mit der Maus – einem
So kann z. B. ein Drag ohne anfängliches von Berührungen als Modusumschalter. zwischengeschalteten Eingabegerät – schlicht 127
Verharren der Fingerspitze an einer Stelle die Ähnlich wie die Shift-Taste einer Tastatur kann auf einen Button – eine zusätzliche Schnitt-
Verschiebung der Ansicht bewirken. Wird ein zusätzliches Hold neben der Gestenausfüh- stelle zwischen Nutzer und Daten – zu klicken.
jedoch der Finger eine Weile an einer Stel- rung darüber entscheiden, welche Funktion Dieses Gefühl kann auch als Immersion
le gehalten und erst dann gedraggt, ist die ausgeführt werden soll. Diese Alternative wird bezeichnet werden: Der Nutzer taucht in das
Erkennung spezieller Funktionsgesten aktiv erst durch Multitouch ermöglicht. System ein und kann direkt etwas bewirken.
und die Ansichtverschiebung findet demnach

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen

4.2 Um aus dem Repertoire von Gesten ein


Vokabular zu entwickeln, müssen ihnen
Bedeutungen zugeordnet werden. Wie solche
darüber hinaus zueinander komplementären
Gesten zugeordnet werden (z. B. Öffnen &
Schließen zu 2-Finger-Drag auseinander &
Zuordnungen aussehen können, wird hier 2-Finger-Drag zusammen), um die Konsistenz
untersucht. des Interface zu wahren. Wenn Mappings
unpassend gewählt wurden, dann führen sie
Das Multitouch-Repertoire bietet einen sehr zu schlechter Nutzbarkeit und Verwirrung beim
großen Gestaltungsraum und unzählige Nutzer.
Eingabemöglichkeiten. Um den Nutzer nicht
zu überfordern ist es daher wichtig, sinnfällige Gesten sollten gut voneinander unterscheidbar
und gut nutzbare Mappings – also Abbil- sein, damit der Nutzer einerseits ihre Bedeu-
dungen von Gesten auf Bedeutungen – zu tungen nicht miteinander verwechselt und an-
finden. Es gibt einige Grundregeln, die man dererseits, damit sie nicht „ineinander fließen“.
dabei beachten sollte: Das kann passieren, weil der Nutzer mit seinen
Fingern eine Geste nie genau so ausführen
128 _Die Gesten und deren Bedeutung sollten wird, wie sie im System definiert ist. Es wird
einfach zu merken sein. immer Variationen etwa im Bewegungspfad
_Die Gesten innerhalb eines Kontextes bzw. oder im Abstand zwischen den Fingerkuppen
einer Anwendung sollten gut voneinander geben. Das System ordnet die Eingabe des
unterscheidbar sein. Nutzers derjenigen Geste im System zu, die Die Abbildung zeigt, wie sich die Variationsräume von im
_Gesten sollten in ihrer Bewegung semantisch ihr am ähnlichsten ist. Das stellt überhaupt System definierten Gesten „überschneiden“ können, wenn
sie morphologisch zu nah beieinander liegen – also zu
sinnfällig zugeordnet werden. kein Problem dar, solange alle Gesten gut für
ähnlich sind. Der Nutzer ist dann nicht mehr in der Lage,
den Nutzer differenzierbar sind. Ähneln sich
eindeutig zu gestikulieren: Er führt eine Geste aus und da-
Der Einsatz nicht zu komplexer Gesten und aber zwei Gesten sehr stark, dann kann die bei kann es passieren, dass seine Artikulation einer anderen
eine semantisch passende Zuordnung einer Ausführung des Nutzers mit größerer Wahr- als der geplanten Geste am ähnlichsten sieht. Dadurch wird
Bedeutung zu einer Geste hilft, dass sich der scheinlichkeit einer falschen Geste zugeordnet seine Eingabe anders interpretiert, als er es vorgesehen hat-
Nutzer diese Vokabeln besser merken kann. werden und das System reagiert nicht so, wie te und das Programm reagiert nicht so, wie er es erwartet.

Zueinander komplementäre Befehle sollten es der Nutzer in dem Fall erwartet.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


[Mos07] merkt an, dass es für das Mapping [Mos07] betont weiterhin, dass die Steuer-
von Gesten auf Bedeutungen bzw. Befehle struktur der Aufgabe auf die Freiheitsgrade Direkte Interaktion ––––– Indirekte Interaktion
ein Kontinuum gibt. Es reicht vom konkreten der Finger und Hände abgestimmt werden
Mapping hin zum abstrakten. Das konkreteste sollten. Er untersucht dabei zwei Beziehungen konkret ––––––––––––––––––––––– abstrakt
und direkteste Mapping ist der Isomorphismus, zwischen den Freiheitsgraden von Hand und
bei dem das Feedback genau der Eingabe von Steueraufgaben: Isomorphismus –––––––––––––––––– Symbol
entspricht. Das ist z. B. der Fall, wenn ein _Die Übereinstimmung von physischer Aktion
grafisches Objekt mit dem Finger berührt und und visuellem Feedback. Selektion ––––––– Tool ––––––– Befehlsgeste
verschoben wird, indem man den Finger auf _Die Übereinstimmung der Freiheitsgrade der
dem Screen bewegt. Das Objekt bleibt immer Steuerung und der wahrgenommenen Struktur Gesten-Mapping-Kontinuum nach }}} [Mos07] |||
genau unter dem Finger und verhält sich wie der Aufgabe.
ein physisches Objekt, das man mit dem Finger
umherschiebt. In diesem Fall entspricht der Die erstgenannte Beziehung ist augenschein- der y-Position einer Fingerkuppe um integrale [Mos07] führte zur Untersuchung dieser Bezie-
Displayraum – Feedback – genau dem Steuer- lich: Wenn der Nutzer bspw. mit einer Dragbe- Dimensionen, da es dem Nutzer schwer fallen hungen Studien durch und erhielt Ergebnisse
raum – Eingabe. Direkter kann eine Interaktion wegung einen Wert erhöhen will, dann sollte dürfte, bei einer Änderung der einen Dimen- darüber, mit welchen Mappings 1-Hand- und
kaum sein. Das Kontinuum erstreckt sich zum dieser Vorgang auf eine Dragbewegung nach sion (x) die andere (y) nicht zu beeinflussen. 2-Hand-Gesten korrelieren. So wird eine 2-Fin- 129
symbolhaften abstrakten Mapping. Hierunter oben gemappt werden. Diese Beziehung wird X- und y-Position des Fingers sollten also auch ger-Geste ausgeführt mit je einem Finger der
fallen alle Gesten, die semantisch ein absolutes auch als Stimulus-Response-Kompatibilität auf integrale Parameter gemappt werden und beiden Hände – trennbar – mit der Steuerung
Zeichen darstellen und einen Befehl auslösen. bezeichnet. nicht auf welche, die unabhängig voneinander zweier unabhängiger Positionen assoziiert,
Diese Interaktion ist indirekt und erfordert sind. Ein Beispiel für trennbare Eingabedimen- die gleiche Geste ausgeführt mit 2 Fingern
einen höheren kognitiven Aufwand. [Mos07] Bei der zweiten Beziehung geht es um die Ab- sionen einer Geste sind die Handposition und einer Hand – integral – eignet sich eher zur
schlägt vor, Operationen wie Selektion oder hängigkeiten der manipulierbaren Parameter die Entfernung zwischen Daumen- und Zeige- Steuerung von Position, Orientierung oder
geometrische Transformation direkt / isomorph während einer Aktion. Es gibt dabei vonein- fingerkuppe, da diese beiden Parameter von Skalierung eines einzigen Objekts.
zu mappen und Befehle über symbolhafte ander abhängige – integrale – und vonein- unterschiedlichen Muskelgruppen gesteuert
Gesten. In den „Graubereich“ können übrige ander unabhängige – trennbare – Parameter. werden.
Aktionen wie Tools oder Parameteränderungen Integrale Dimensionen sollten auf integrale
eingeordnet werden. Werte gemappt werden und trennbare auf
trennbare. Z.B handelt es sich bei der x- und

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen

Eindeutiges, Mehrdeutiges oder Eineindeutiges Mapping?

Beim Mapping handelt es sich um eine Besteht das Vokabular nur aus eineindeutigen
Abbildung. Abbildungen können eindeutig, Mappings, so wächst der Gestenumfang linear
mehrdeutig oder eineindeutig sein. Bei einem mit dem Funktionsumfang eines Systems, da
eineindeutigen Mapping würde immer genau genau eine Geste einer Funktion entspricht.
eine Geste für genau eine Bedeutung stehen. Für eine einfache Anwendung ist so ein Eineindeutige Abbildung von einer Geste auf eine Aktion.
Umgekehrt würde also jede Bedeutung durch Mapping geeignet, für ein komplexes System „One-to-One-Mapping“
genau eine Geste umgesetzt werden kön- jedoch könnte die hohe Anzahl der Eingabe-
nen. Ist das Mapping lediglich eindeutig, hat gesten den Nutzer überfordern.
zwar auch jede Geste genau eine Bedeutung,
jedoch kann eine Bedeutung durch mehrere In einem System mit einem lediglich ein- – z. B. Kopieren, Speichern, Datei Öffnen – je
verschiedene Gesten dargestellt werden. Bei deutigen Vokabular gibt es Funktionen, die nach Kontext anders umgesetzt werden muss.
einem mehrdeutigen Mapping schließlich kann durch mehrere verschiedene Gesten artikuliert Das ist allerdings in den meisten Fällen eher
eine Geste mehrere Bedeutungen haben. werden können. Entweder existieren diese ungünstig für die Usibility, da dieser Umstand
Möglichkeiten parallel – wodurch der Nutzer Verwirrung beim Nutzer schafft.
In einem abgeschlossenen System – eine selbst wählen kann, welche Geste ihm am
130 Anwendung, ein Betriebssystem, ein Gerät etc. angenehmsten ist – oder sie sind kontextab-
– ist jede der drei beschriebenen Abbildungen hängig. Das bedeutet, dass eine Funktion,
möglich. Jeder Mappingtyp hat dabei seine die an verschiedenen Stellen auftreten kann
Vor- und Nachteile.

Eindeutige Abbildung mehrerer Gesten auf eine Aktion.


„Many-to-One-Mapping“
Links: Mehrere Gesten bedeuten innerhalb eines Kontextes
das gleiche.
Rechts: Verschiedene Gesten lösen in unterschiedlichen
Kontexten die gleiche Aktion aus.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Ein System mit einem mehrdeutigen Mapping Diese Kontextabhängigkeit der Bedeutung ei-
– also wenn eine Geste mehrere Bedeutungen ner Geste findet ihr Pendant in der physischen
haben kann – ist möglich, indem die Bedeu- Welt: Etwa mit dem Zeigefinger auf etwas
tung der Geste kontextabhängig ist. Eine Geste zu tippen bewirkt unterschiedliche Dinge, je
kann z. B. unterschiedliche Dinge bewirken, je nachdem, was das ETWAS ist. Das Tippen auf
nachdem, über welchem Objekt sie ausgeführt einen Klingelknopf lässt eine Klingel ertönen,
wird, in welchem Zustand sich das Objekt das Tippen in eine Knetfigur hinterlässt eine
befindet oder in welcher Applikation inner- Delle, das Tippen auf jemandes Schulter erregt
halb des System der Nutzer agiert. So kann seine Aufmerksamkeit, das Tippen auf ein
ein einfaches Drag in einem CAD-Programm Detail in einem Bild weist auf etwas hin usw.
über einem grafischen Objekt gestartet dieses Sind die Kontextunterschiede in einem digi-
Objekt verschieben und auf dem Hintergrund talen System dem Nutzer klar, wird er intuitiv
gestartet ein Selektionsrechteck aufziehen. Mehrdeutige Abbildung einer Geste auf unterschiedliche mit der Mehrfachbelegung einer Geste zurecht
Oder ein Drag kann in einem Malprogramm Aktionen – je nach Kontext. kommen.
„One-to-Many-Mapping“
eine Farbspur erzeugen, in einem CAD-Pro-
gramm ein grafisches Objekt verschieben und Innerhalb eines Systems kann es natürlich alle 131
in einem Textprogramm Text selektieren. hier aufgeführten Mapping-Typen geben: Es
können neben eineindeutigen Gesten-Bedeu-
tungs-Abbildungen auch kontextabhängige
existieren.

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen
a

Assoziationsvielfalt

Für ein intuitives Multitouch-Interface ist Da es oft vorkommt, dass viele Operationen
es wichtig, dass Gesten auf Bedeutungen innerhalb eines Systems mit einem Gestentyp b
gemappt werden, die semantisch passend – hier Finger auseinander bewegen – korre-
sind. So assoziiert man mit einer Operationen lieren, braucht man Strategien, um sie alle mit
wie Vergrößern ein Auseinanderbewegen der verwandten Gesten abzudecken. Im Folgenden
Finger. (Der Abstand zwischen den Fingern werden verschiedene Ansätze zur Auflösung
stellt eine Größe dar, die durch die Bewegung dieser Assoziationsvielfalt beschrieben. (Natür-
verändert – vergrößert – wird.) Es gibt aber lich ist immer auch eine Kombination dieser
noch andere Befehle, die mit einer solchen Ansätze möglich.) c
Bewegung assoziiert werden können:
_Vergrößern (Objekt, Ansicht etc.) Disjunkte Gesten. Eine Möglichkeit ist,
_Öffnen die Vokabeln in einem System disjunkt zu
_Neues Objekt erzeugen gestalten, also ein eindeutiges Gestenmap-
_Parameter erhöhen (lauter, heller, dicker) ping vorzunehmen. So existiert z. B. für den
Wie man schon in der Liste sieht, gibt es Gestentyp Finger auseinander bewegen eine
132 nicht nur unterschiedliche Operationen, die Vielzahl verwandter disjunkter Gesten, die als d
semantisch zu einer Geste passen, sondern Eingabezeichen für die Operationen Objekt
auch mehrere mögliche Argumente für eine vergrößern, Objekt öffnen, Objekt erzeugen
Operation. Führt man bspw. die Bewegung oder Parameter erhöhen zum Einsatz kom-
über einem Text aus, könnte damit versucht men können. Um differenzierbare verwandte
werden: Gesten von diesem Typ zu finden, kann man
_die Schriftgröße zu erhöhen auf Gestenparameter zurückgreifen und diese e
_die Laufweite zu vergrößern dann variieren. Nebenstehend findet sich eine
_die Schrift fetter zu machen o. ä. Übersicht von möglichen Ausprägungen des
Gestentyps Finger auseinander bewegen.

Den Gestentyp »Finger auseinander bewegen« kann man differenzieren durch a) die Ausrichtung der Bewegung, b) die
Entfernung zwischen den Fingern, c) die Anzahl der Finger, d) wie viele Finger draggen, e) ob zu Beginn der Geste gewartet
wird usw. Weitere Variationen sind z. B. durch Veränderungen in Geschwindigkeit, Beschleunigung oder Druck denkbar.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Vorteile dieser Strategie sind, dass sich der Zusätzliche Abfrage. Eine Möglichkeit der objektabhängig zu mappen, da es passieren diese als Auswahlbuttons für Werkzeuge
Nutzer nicht darum kümmern muss, in wel- mehrdeutigen Abbildung, die eher umständ- kann, das gerade das dafür nötige Objekt – in in einem Malprogramm wie Pinsel, Kreide,
chem Kontext er sich gerade aufhält, also an lich in der Benutzung ist, ist das Einblenden diesem Fall wäre der Hintergrund das „Objekt“ Radierer usw. (Toolbar). Abgesehen davon
welcher Stelle auf dem Screen (über welchem einer Auswahlmöglichkeit nach Vollendung – sich außerhalb des Screens befindet oder sollte man aber bei einem Multitouch-Interface
Objekt) die Geste ausgeführt wird oder in der Ausführung einer Geste. Vor allem für vollständig verdeckt ist und in diesem Fall eine möglichst auf solche Widgets verzichten, da
welchem Status sich Objekte im Moment einfache Operationen ist es unpraktikabel, den Navigation nicht mehr möglich wäre. sie das Interaktionsparadigma – der physischen
befinden. Nachteilig können aber der zustande Nutzer nach seiner Eingabe zu fragen, was er Interaktion möglichst nahe zu kommen, direkt
kommende große Gestenumfang und die zum eigentlich vom System will. Zudem ist mit solch Statusabhängigkeit. Bei dieser Art des zu interagieren, flüssige Gesten einzusetzen
Teil sehr komplex werdenden Gesten sein, die einem Interaktionsablauf auch kein Live-Feed- mehrdeutigen Mappings hängt die Bedeutung und Genüsslichkeit zu zelebrieren – untergra-
schwieriger zu merken oder auszuführen sind. back während der Gesteneingabe möglich. einer Geste davon ab, in welchem Status ben. Es handelt sich nämlich um Vehikel, die
Eineindeutige und somit theoretisch ortsunab- Andererseits kann diese Art der Interaktion sich ein Objekt befindet, auf dem die Geste einen den Arbeitsfluss unterbrechenden Mo-
hängige Vokabeln eignen sich besonders für dem Nutzer beim Erlernen des Gestensystems ausgeführt wird. Z. B. könnte ein Drag über duswechsel bewirken, indem man sie schlicht
globale Operationen wie Dokument speichern, helfen, indem er zunächst über diese klassische einem nicht selektierten (inaktiven) Objekt antippt oder gedrückt hält.
Neues Dokument oder Programm verlassen, Menüauswahl agiert, bevor er sämtliche Einga- etwas anderes bewirken als über einem
die sich nicht auf ein bestimmtes Objekt oder begesten gelernt hat, um über direktere Wege selektierten (aktiven) Objekt. Diese Strategie Auf der folgenden Seite erfolgt eine zusam-
einen Aspekt eines Objekts beziehen. zum Ziel zu gelangen. bringt allerdings ein paar Nachteile mit sich. So menfassende Übersicht und Wertung der hier 133
kann es etwa notwendig sein, ein Objekt erst beschriebenen Strategien für das Gestenmap-
Die folgenden Strategien nutzen alle das mehr- Objektabhängigkeit. Eine weitere Möglich- in einen anderen Status zu versetzen, um eine ping.
deutige Mapping. Eine Geste wird also abhän- keit einer Gestenmehrfachbelegung stellt die bestimmte Aktion auszuführen. Außerdem
gig vom Kontext auf unterschiedliche Aktionen Differenzierung der Eingabe über das Objekt kann für den Nutzer ein Objektstatus mitunter
abgebildet. So gelingt es mit einem kleineren dar, auf dem die Geste ausgeführt wird. So zu subtil sein und somit schwer zu erschließen  Everitt et al. schlagen ein ortsabhängiges Mapping
Gestenumfang unter Verzicht zu komplizierter kann eine Auseinander-Bewegen-Geste über sein, warum eine Geste auf einem Objekt mal über „Modal Spaces“ vor: Um ein Objekt wie gewünscht
zu manipulieren, muss es erst in den entsprechenden
Gesten genauso viele Funktionen abzudecken, einem grafischen Objekt dazu führen, es zu dies und mal das bewirkt.
Screenbereich gedraggt werden. Das erscheint jedoch
wie bei einem eineindeutigen Mapping, was skalieren, über dem Hintergrund aber, die An-
höchst umständlich.
vor allem für komplexere Anwendungen von sicht zu vergrößern, also heranzuzoomen. Al- Widgets. Eine letzte hier aufgeführte Mög- }}} Everitt et al.: „Modal Spaces: Spatial Multiplexing
Vorteil sein kann. lerdings sollte es in bestimmten Anwendungen lichkeit, Gesten für unterschiedliche Funkti- to Mediate Direct-Touch Input on Large Displays“, 2005.
vermieden werden, Navigationsfunktionen onen einzusetzen sind Widgets – eingeblen- [Eve05] |||
(Ansicht verschieben, Raus- bzw. Reinzoomen) dete Interface-Elemente. Nahe liegend wären

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen
Zusammenfassung
Mapping Beschreibung Vorteile Nachteile

Eineindeutiges Mapping Die Geste löst genau eine Aktion aus und die keine Modi, Kontexte oder Zustände, die der bei komplexen Anwendungen führen zu viele
Aktion kann nur mittels dieser Geste artikuliert Nutzer beachten müsste – er merkt sich ein- solcher Mappings zu einem großen Zeichen-
werden. fach die eine Bedeutung zur Geste satz mit komplizierten Gesten

Eindeutiges Mapping mit Gestenal- Die Geste löst genau eine Aktion aus, aber die mehrere Möglichkeiten, eine Aktion zu artiku- siehe oben
ternativen Aktion kann hier und jetzt auch mittels anderer lieren
Gesten artikuliert werden.

Eindeutiges kontextabhängiges Die Geste löst genau eine Aktion aus, aber die - siehe oben,
Mapping Aktion wird in einem anderen Kontext mittels Pflicht, eine Aktion in verschiedenen Kontexten
einer anderen Geste artikuliert. unterschiedlich zu artikulieren, verwirrend

Mehrdeutiges Mapping mit Die Geste kann verschiedene Aktionen auslö- kann mehr Funktionen abdecken, umständlich,
zusätzlicher Abfrage sen, je nachdem welche nach Ausführung aus Beschränkung auf einfachere Gesten möglich kein Live-Feedback möglich
einer Auswahl gewählt wird. unterbricht Arbeitsfluss

Mehrdeutiges objektabhängiges Die Geste kann je nachdem, auf welchem siehe oben nicht uneingeschränkt für Navigationsoperati-
134 Mapping Objekt sie ausgeführt wird, verschiedene Akti- onen nutzbar
onen auslösen.

Mehrdeutiges statusabhängiges Die Geste kann je nachdem, in welchem Status siehe oben kann, wenn zu subtil implementiert verwirrend
Mapping sich das Objekt befindet, auf dem sie ausge- wirken
führt wird, verschiedene Aktionen auslösen.

Mehrdeutiges Mapping Die Geste kann je nachdem, welcher Modus siehe oben untergräbt Paradigma der Multitouch-Inter-
über Widgets über ein Widget spezifiziert wurde, verschie- aktion: Natürlichkeit, Genüsslichkeit, direkte
dene Aktionen auslösen. Manipulation

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Geeignet für Bei der Interfacegestaltung sollte beachtet werden, dass sich für verschie-
Anwendungen mit kleinem Funktionsumfang, dene Interaktionen bestimmte Mappings mehr oder weniger gut eignen.
symbolischer Charakter,
für globale Operationen
In den letzten Abschnitten wurden verschie-
siehe oben dene Möglichkeiten diskutiert, um Gesten auf
Aktionen abzubilden. Dabei konnte eine Sys-
tematisierung erarbeitet werden, die nicht nur
verschiedene Mappings kategorisiert, sondern
siehe oben auch deren Vorteile, Nachteile und Eignungen
beschreibt. Diese Klassifizierung kann bei
der Konzeption einer konkreten Multitouch-
Anwendung helfen, das Interface möglichst
ungeeigneter als andere Möglichkeiten, nutzerfreundlich zu gestalten und eine Balance
klassischer Menücharakter, zwischen Intuitivität, Effektivität und Genüss-
als Unterstützung zum Erlernen des Systems Eindeutiges Mapping – Was bedeutet diese symbolische Mapping mit nachträglicher Auswahlmöglichkeit – Wofür lichkeit zu finden.
Geste? entscheide ich mich?
direkte Objektmanipulation, da auf bestimmte
Objekte optimierbar 135

direkte Manipulation von Objekten, die viele


Eigenschaften haben oder an denen man viele
Parameter verändern kann

ungeeigneter als andere Möglichkeiten,


Toolbars

Objektabhängiges Mapping – Wo agiere ich? Statusabhängiges Mapping – In welchem Zustand befindet Mapping über Widgets – In welchem Modus befinde ich
sich das Objekt? mich?

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen

Funktion Geste
Konkrete Mappings
Objekt / Ansicht verschieben Drag (1 Finger oder mehrere parallel) – Ver-
schiebung erfolgt entlang des Dragpfades
Sieht man sich die Arbeiten und Projekte im Objekt / Ansicht drehen I 2 Finger gegeneinander bewegen – Rotation
Bereich Multitouch-Interaktion an, so stellt erfolgt um den Mittelpunkt zwischen den
man fest, dass sich für bestimmte Funktionen Berührungspunkten
bereits Gestenabbildungen etabliert haben. Objekt / Ansicht drehen II 1-Finger-Hold & 1-Finger-Drag um den ande-
Schon die in Abschnitt 3.2 dieser Arbeit vor- ren – Rotation erfolgt um die Hold-Position
gestellten Beispiele verschaffen einen Eindruck Objekt / Ansicht vergrößern (Reinzoomen) I mehrere Finger bewegen sich auseinander
davon. An dieser Stelle folgt ein Überblick über – Vergrößerung erfolgt linear zur Abstands-
etablierte Gesten-Funktions-Paare, die in vielen veränderung, Zentrum ist Mittelpunkt der
Anwendungen so verwendet werden – und in Berührungspositionen
den Augen der Autorin auch sinnfällig sind. Objekt / Ansicht vergrößern (Reinzoomen) II 1-Finger-Hold & 1-Finger-Drag vom anderen
weg – Vergrößerung erfolgt linear zur Ab-
Bei diesen Funktionen handelt es sich um standsveränderung, Zentrum ist Holdposition
grafische Manipulationen und Navigationso- Objekt / Ansicht verkleinern (Rauszoomen) I mehrere Finger bewegen sich zueinander
perationen, da es für diese am einfachsten ist, – Verkleinerung erfolgt linear zur Abstands-
passende Gesten zu finden, die eine möglichst veränderung
136 direkte und intuitive Interaktion ermöglichen. Objekt / Ansicht verkleinern (Rauszoomen) II 1-Finger-Hold & 1-Finger-Drag zum anderen
Die Ähnlichkeit zur Interaktion mit physischen hin – Verkleinerung erfolgt linear zur Ab-
Objekten ist augenscheinlich. standsveränderung, Zentrum ist Holdposition
Objekt aktivieren / Button drücken Tap auf das Objekt
Wichtig ist die Suche nach Gesten für andere
Funktionen, da die hier aufgeführten lange Malen 1-Finger-Drag – Farbspur folgt dem Drag-
nicht ausreichen, um alle Interaktionen in pfad
einem komplexen System abzudecken. Nütz- Rechteck erzeugen 2-Finger-Tap – Berührungspunkte entspre-
lich wären auch Mappings für universelle Funk- chen 2 diagonal gegenüberliegenden Ecken
tionen, die in vielen Anwendungen vorkom- (Selektions-) Rechteck aufziehen 2-Finger-Drag – 2 diagonal gegenüberlie-
men, wie Öffnen, Sichern, Senden, Drucken, gende Ecken passen sich den Berührungspo-
Schließen, Verlassen, Kopieren, Einfügen usw. sitionen an

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Apples MacBooks bieten Multitouch-Pads und Apples Als Vorreiter der Kommerzialisierung von Interaktionen jenseits der links genannten Aus diesem Grund werden an dieser Stelle
iPhone und iPod Touch sind mit einem Multitouch-Screen Multitouch-fähigen Geräten für Endverbrau- Funktionen gemacht haben. Da Apple im Mappings aufgeführt, die von Apple bereits
ausgestattet.
cher darf Apple nicht ungenannt bleiben. Es Multitouch-Segment bereits sehr erfolgreich in Geräte integriert oder in Patenten publiziert
}}} http://www.apple.com/ |||
versteht sich von selbst, dass sich die Entwick- ist, ist anzunehmen, dass der Konzern auf worden sind.
ler weiter gehende Gedanken um Multitouch- diesem Gebiet Standards etablieren wird.

Geste Aktion

Tap Ein Steuerelements oder einen Link drücken oder selektieren (analog zum einfachen Mausklick)

Double Tap In einen Inhaltsbereich oder ein Bild hineinzoomen und zentrieren
Herauszoomen (wenn schon herangezoomt war)

Flick („Schnippen“, schnelle Drag-Bewegung) Schnell scrollen oder schnell schwenken

Drag Sichtbereich bewegen oder schwenken


137
Swipe (Finger nach rechts ziehen) In einer Listenansicht den Delete-Button einblenden

Pinch open (2-Finger-Drag auseinander) Graduell reinzoomen

Pinch close (2-Finger-Drag zueinander) Graduell rauszoomen

Touch & Hold Info-Blase einblenden oder


Inhalt unter dem Finger vergrößern

Übersicht über die Gesten für die 2-Finger Scroll (2-Finger-Drag hoch oder In einem Textfenster, einem Inline-Frame oder einem Element mit Overflow hoch- oder runter-
Interaktion mit dem iPhone. runter) scrollen
}}} [App08] |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Multitouch-Zeichen

An dieser Stelle folgt eine Aufstellung von


Gesten, die bei der Interaktion mit dem Multi-
touch-Pad, das im MacBook Air und im Mac-
Book Pro integriert ist, zum Einsatz kommen.
Teilweise wurden bereits etablierte Gesten
übernommen, wie das Tap für einen Mausklick
oder das 2-Finger-Drag, um zu scrollen.

Geste Aktion

2-Finger-Drag parallel Umherscrollen, Ansichtsverschiebung ent-


spricht dem Pfad
3-Finger-Flick nach links oder rechts Zwischen Bildern o. ä. hin und her wechseln

2-Finger-Drag zusammen / auseinander Graduell raus- / reinzoomen


138
2-Finger-Drag gegeneinander Bild o. ä. drehen
Das MacBook Air verfügt über ein extra-großes
multitouch-fähiges Touchpad. Ctrl-Taste & Drag hoch / runter Graduell rein- / rauszoomen
}}} http://www.apple.com |||

Tap wie Mausklick an der Cursorposition

Tap & danach gleich Drag Fenster umherbewegen

Tap & Padtastenklick bzw. Mausklick wie Klick mit rechter Maustaste I
Übersicht über die Gesten für die
Interaktion mit dem Touchpad des MacBook Air. 2-Finger-Tap wie Klick mit rechter Maustaste II
}}} http://www.apple.com |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


 Mappings für abstraktere universelle Operationen Apple beschreibt auch Multitouch-Gesten für Dass es sich bei diesen Zuordnungen lediglich ebenfalls in [Wes07] beschrieben werden.
finden sich in den Patenten:. abstraktere Operationen – vor allem für univer- um mögliche Ideen zu handeln scheint und Dafür spricht auch, dass der Fokus beider
}}} Elias et al.: „Multi-Touch Gesture Dictionary“, 2007.
selle, also solche, die in vielen Anwendungen nicht um schon festgelegte Planungen, zeigt Publikationen nicht auf den Mappings selbst
[Eli07] |||
vorkommen. In der Tabelle unten sind einige die Tabelle auf der nächsten Seite: Dort sind liegt. Dennoch ist es interessant zu sehen, was
}}} Westerman et al.: „Gesturing With A Multipoint
Sensing Device“, 2007. [Wes07] ||| aus [Eli07] und [Wes07] aufgeführt. zum Teil andere Mappings eingetragen, die man sich bei Apple so denkt.

Gesten-Bewegung Funktionen

Gesten-Akkord Daumen & 1 Finger Daumen & 2 Finger Daumen & 3 Finger Daumen & 3 Fi. gespreizt

Drag gerade nach oben Undo Drag nach oben Parent Directory Fenster maximieren

Drag gerade nach unten Redo Drag nach unten Reload Fenster minimieren

Drag gerade nach links Back TAB Drag nach links Back Vorherige Applikation
139
Drag gerade nach rechts TAB Drag nach rechts Forward Nächste Applikation

Tap Copy Rechtsklick - -

Drag kreisförmig gegen UZS Cancel Ungroup Open Desktop zeigen

Drag kreisförmig mit UZS Select Group Close Exit

Expansion (Drag auseinander) Paste Replace New Print

Kontraktion (Drag zueinander) Cut Find Save Save

Die aufgeführten Mappings stammen aus }}} [Eli07] ||| und }}} [Wes07] |||

Masterarbeit „Multitouch Input“ | Grit Schuster


Gesten-Bewegung Funktionen

Gesten-Akkord 3 lange Finger 4 lange Finger Daumen & 1 Finger Daumen & 2 Finger Daumen & 3 Finger
für Klick- & Point-Fktn. für Expose & Dashboard für File-Operationen für Bearbeiten-Op. für Web-Browser-Fktn.

Drag gerade nach oben Drag nach oben Zeige alle - Undo Stop

Drag gerade nach unten Drag nach unten Zeige Dashboard - Redo Refresh

Drag gerade nach links Drag nach links Zeige Applikationen - Back TAB Back

Drag gerade nach rechts Drag nach rechts Zeige Desktop - TAB Forward

Drag nach diagonal links oben Drag nach links oben - - - Home

Drag nach diagonal rechts oben Drag nach rechts oben - - - Spot light

Drag nach diagonal links unten Drag nach links unten - - - Find
140
Drag nach diagonal rechts unten Drag nach rechts unten - - - Bookmark

Tap Mausklick - - Copy Cmd

Drag kreisförmig gegen UZS - - Open Cancel -

Drag kreisförmig mit UZS - - Close Select all -

Expansion (Drag auseinander) - - New Paste -

Kontraktion (Drag zueinander) - - Save Cut -

Die aufgeführten Mappings stammen aus }}} [Wes07] |||

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Auswertung men oft verwendet. Deshalb wäre es für Multi- Finger kann eine völlig andere Aktion auslösen! zu verbreitern, könnte es von Nutzen sein,
touch-Systeme und Multitouch-Anwendungen Wenige verschiedene Chord-Sets kann man mehr Augenmerk auf die Gestenbewegungen
nützlich, auch für diese Operationen Vokabeln bestimmt gut lernen, aber je mehr es werden, und den Anwendungskontext zu legen. Das
In den letzten Abschnitten wurden Gesten- zur Verfügung zu haben. desto höher ist die Gefahr, durcheinander zu in dieser Arbeit entwickelte Gesten-Repertoire
Funktions-Mappings für Multitouch-Gesten kommen. Die Praxis muss in dem Fall zeigen, ist voll von Beispielen, in denen Anordnungen,
aufgelistet, die sich entweder bereits etabliert Es ist jedoch nicht trivial, für abstrakte Funkti- ob vielleicht das motorische Gedächtnis dem etwas komplexere Pfade und Berührungs-
haben oder von Entwicklern publiziert wurden, onen passende natürlich anmutende Gesten Erlernen eines solchen Vokabulars behilflich typenkombinationen die Gesten lebendiger
die womöglich bald einen gewissen Einfluss zu finden, da es in der physischen Welt an sein kann. gestalten und mehr Potential für Assoziati-
darauf haben werden, welche Vokabeln stan- Entsprechungen mangelt. Man kann entweder onen bieten. Die Verwendung solcher Gesten
dardmäßig in (Apple-) Multitouch-Systemen einen völlig neuen Zeichensatz entwickeln – so Vermutlich kann man dem Problem der sehr könnte helfen, die Multitouch-Interaktion
eingesetzt werden. wie es Apple im Moment zu versuchen scheint abstrakt gehaltenen Chord-Gesten ein Stück weniger kryptisch zu gestalten, damit eine
– oder sich auf Symboliken berufen, die die weit begegnen, indem man bildhafte Elemente fließende und genüssliche Kommunikation mit
Bei denjenigen Mappings, die sich bereits in potentiellen Nutzer bereits durch ihre Erfah- integriert. Die hier aufgelisteten Mapping- dem System stattfinden kann. Im folgenden
der Praxis bewährt haben, handelt es sich rung mit klassischen Interaktionstechniken mit tabellen lassen figürliche oder symbolhafte Kapitel gilt es, diese These durch die Entwick-
ausschließlich um Abbildungen auf Funktionen jenen abstrakten Operationen assoziieren. Bewegungen weitgehend vermissen. Statt das lung eines runden Konzepts für eine Multi-
zur grafischen Manipulierung, zur Navigation Vokabular mit abstrakten Fingerkombinationen touch-Anwendung zu untermauern.
oder um Ersatzgesten für Mausklicks (linke Die in [Eli07] und [Wes07] beschriebenen
bzw. rechte Maustaste) – welche ebenfalls Gestensets – ein Set ist die Menge der Gesten-
ausschließlich im Kontext eines grafischen bewegungen, die einem Akkord zugeordnet Es sollte vermieden werden, Multitouch-Gesten 141
User-Interface vorkommen. werden – sind jedes für sich stimmig: Ein Set
fällt immer in eine Funktionsgruppe, komple- zu abstrakt zu gestalten und das Repertoire mit
Für abstrakte Operationen (für die übrigens mentäre Funktionen werden durch komple-
oft Tastaturkürzel existieren) werden zuweilen mentäre Gesten artikuliert und Richtungen schwer nachvollziehbaren Fingerkombinationen
von verschiedenen Autoren unterschiedliche werden semantisch richtig zugeordnet.
Gesten vorgeschlagen (Siehe die letzten beiden Dennoch bleibt es fraglich, ob sich die Gesten- zu verbreitern. Vielmehr sollte der Fokus auf bild-
Tabellen und Kapitel 3 dieser Arbeit). Jedoch Akkorde in der vorgeschlagenen Weise bewäh-
haben sich in diesem Bereich noch keine Stan- ren. Die Akkorde sind an sich ebenfalls sehr haften und lebendigen Bewegungen liegen, die
dards herauskristallisiert. abstrakt und es wird für den Nutzer schwierig
sein, eine mentale Brücke zu den abstrakten leichter zu merken sind und deren Ausführung
Aber gerade solche abstrakten und univer- Operationen zu bauen. Zudem sind sich die
sellen Funktionen werden in Computersyste- Gesten teilweise sehr ähnlich – ein falscher Freude bereitet.

Masterarbeit „Multitouch Input“ | Grit Schuster


5 Applikation
Zielsetzung

Inhaltliche Ziele

5.1 In diesem Kapitel wird die Entwicklung einer


konkreten Multitouch-Anwendung vorgestellt,
die im Rahmen dieser Arbeit entstanden ist. Es
Bei der zu entwickelnden Anwendung handelt
es sich um ein Layoutprogramm, das den Um-
gang mit Text und Bild erlaubt. Es sollen Seiten
Daraus lassen sich folgende Ziele herauskristal-
lisieren:

handelt sich um ein Konzept für ein Layout- erzeugt und ihr Format angepasst werden kön- Basisfunktionen & Skalierbarkeit. Das
programm, das auf den gebauten Multitouch- nen. Weiterhin soll es Frameobjekte geben, die zu entwickelnde Layoutprogramm soll einen
Tisch optimiert ist (25“ Screen, horizontal, sowohl Text als auch Bilder enthalten können. grundlegenden Funktionsumfang besitzen, um
Benutzung stehend & bimanuell) und prototy- Die Frames selbst sollen frei platziert, mani- ansprechende Dokumente mit Text und Grafik
pisch umgesetzt wurde. Das Layoutprogramm puliert und in ihren grafischen Eigenschaften zu erzeugen. Der Fokus dieser Arbeit liegt
beinhaltet sowohl Interaktionen zur geomet- verändert werden können. Es soll möglich sein, allerdings nicht auf der Abdeckung möglichst
rischen Transformation grafischer Objekte als Texte zu erzeugen, zu editieren und zu for- vieler Funktionen – nicht das WAS – sondern
auch Interaktionstechniken für Textbearbeitung matieren. Zudem soll es erlaubt sein, Objekte in der Art und Weise, wie der Nutzer zum Ziel
und -formatierung. zu importieren und Dokumente zu sichern, zu gelangt – also das WIE. Dennoch sollen die
öffnen und zu schließen. ausgearbeiteten Konzepte durchaus skalierbar
Ich gliedere die Ziele, die ich in der Appli- sein.
kation umsetzen will, in zwei Gruppen: In Das Programm soll es sowohl ermöglichen,
die inhaltlichen und die Nutzungsziele. Die Seiten frei „nach Gefühl“ zu gestalten, als Expressivität & Präzision. Das zu entwi-
inhaltlichen Ziele beschreiben die Funktionen auch strukturierte Textdokumente mit festen ckelnde Layoutprogramm soll bei der Benut-
der Applikation, also wozu das Programm Formatvorlagen zu erzeugen. Bei dem erst- zung sowohl die Expressivität des Nutzers
dient und was damit umgesetzt werden kann. genannten Ansatz liegt der Fokus auf einem unterstützen als auch exaktes Arbeiten ermög-
Die Nutzungsziele betreffen das Erlebnis des expressiven, kreativen Vorgang, bei dem lichen. Ziel ist die Ausarbeitung eines Interface,
Nutzers, während er mit dem Programm inter- Elemente direkt, schnell und impulsiv angeord- das beide Aspekte vereint.
Applikation agiert, also wie sich diese Interaktion anfühlt. net werden. Diese Expressivität soll sich in den
144 Die inhaltlichen Ziele sind spezifisch für diese Interaktionsmöglichkeiten widerspiegeln. Bei
Beispielanwendung, während die Nutzungs- dem zweiten Ansatz geht es um genaue Ein-
ziele generell für die Mensch-Computer-Inter- gaben, die exakt umgesetzt werden müssen.
aktion gelten – und in diesem Fall möglichst Das Programm soll den Nutzer auch in solchen
für Multitouch-Interfaces im Allgemeinen. Prozessen unterstützen und ein korrektes und
konsistentes Resultat liefern.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Nutzungsziele

Bei den Nutzungszielen geht es darum, was den Vorgang unterstützt. Weiterhin sollen die halb sollte bei der Entwicklung des Interface Dies sind die Schlagworte, die bei der Konzeption
der Nutzer während der Interaktion mit der zu entwickelnden Interaktionsmöglichkeiten darauf geachtet werden, dass die Eingabeges- und Ausarbeitung der Anwendung im Auge behalten
werden sollten, um die genannten Ziele zu erreichen:
Applikation empfindet. Dies beinhaltet sowohl auf die Anatomie, Motorik und Koordination ten einerseits nicht zu komplex ausfallen, aber
Ziele, die bei allen interaktiven Produkten an- der menschlichen Hände optimiert werden, sich andererseits nicht auf simples Antippen Direktheit
gestrebt werden (sollten), als auch solche, die damit eine dem Nutzer ergonomisch günsti- von Widgets beschränken, weil dies auf Live-Feedback
speziell für die Multitouch-Eingabe gelten und ge und damit angenehme Eingabe möglich Kosten des Gefühls der „Echtheit“ (Direktheit, Sinnfälliges Mapping
die in dieser Arbeit einen besonders hohen ist. Das bedeutet, dass – zugunsten einer Sinnlichkeit) gehen würde. Ergonomische Bewegungen
Stellenwert einnehmen. Die Ziele werden im Interaktionsform, die den Fingern schmeichelt Fließende Gesten – Genüsslichkeit
Folgenden aufgezählt. – von herkömmlichen Interaktionsparadigmen, „Don‘t Feel Stupid“. Auch für Novizen soll Balance der Gesten-Komplexität
die auf die Maus optimiert sind, Abstand das Programm benutzbar sein, ohne dass eine Exploration
Freude, Immersion, Genüsslichkeit. Da die genommen werden muss. Konkret heißt das, zeitraubende Lernphase im Vorfeld nötig ist. Expressivität & Präzision
Interaktion an einem Touchscreen ausge- fließende, kontinuierliche Bewegungen zu un- Deshalb sollte das Interface erlernbar gestaltet Skalierbarkeit
führt wird, gewinnt der Nutzer bei adäquat terstützen, um eine genüssliche Handhabung werden. Grundfunktionalitäten sollten dem
umgesetztem Software-Interface den Eindruck, zu realisieren. Anfänger sofort zur Verfügung stehen (einer
direkt mit den Objekten zu interagieren, statt kurzen Einführung spricht nichts entgegen),
indirekt über die Eingabe abstrakter Daten Selbstsicherheit, Kompetenz. Genüss- das gesamte Repertoire sollte er aber nach und
gewünschte Manipulationen zu veranlassen. liche, fließende Gesten können zuweilen an nach selbst herausfinden können. Dies kann
Die zu bearbeitenden grafischen Objekte Effektivität einbüßen, vor allem im Vergleich zu mit Hilfe von visuellen Hinweisen, Tooltipps
befinden sich unmittelbar unter den Fingerspit- binären Buttonklicks. Dafür rufen sie aber beim und dem Anbieten von Aktionsalternativen
zen des Nutzers und verhalten sich in direkter Nutzer Freude hervor, weil sie sich angenehm (evtl. klassischen Prinzipien) realisiert werden.
Reaktion auf seine Bewegungen. Durch den anfühlen und die Sinne ansprechen. Dennoch Die Natur der Gesten unterstützt darüber
gleichzeitigen Einsatz mehrerer Finger wird die- können zu komplexe Gesten den Nutzer hinaus den spielerischen Umgang mit dem
ser Eindruck noch verstärkt. Dieser Effekt des überfordern, wenn sie schwierig zu merken, System und motiviert dadurch zur Explorati- 145
erhöhten Gefühls von Direktheit und Realismus kaum zu koordinieren oder umständlich in der on. Um das Interface intuitiv zu gestalten, ist
in der Manipulation soll bei der Ausarbeitung Ausführung sind. Diese würden den Nutzer in zudem ein geeignetes Live-Feedback auf die
der Beispielanwendung umgesetzt werden, da seinem Arbeitsprozess behindern, Fehlhand- Nutzereingaben unerlässlich. Nicht zuletzt ist
die empfundene Natürlichkeit Freude bei der lungen provozieren und bei ihm Unmut und ein sinnfälliges Mapping von Eingabegesten
Interaktion und ein spielerisches Eintauchen in ein Gefühl von Inkompetenz hervorrufen. Des- auf Funktionalitäten wichtig.

Masterarbeit „Multitouch Input“ | Grit Schuster


Zielsetzung

Das Multitouch-Potential nutzen!

Die oben beschriebenen Nutzungsziele werden Dennoch kann ein befriedigendes Ergebnis Das Potential der Multitouch-Technologie
durch die Natur des Eingabemediums selbst nicht erreicht werden, wenn das Software- nutzen heißt außerdem, von den Vorteilen der
unterstützt. Ein Multitouch-Screen fordert eine Interface die positiven Eigenschaften, die die erhöhten Dimensionalität der Eingabe gegen-
genüssliche Interaktion geradezu heraus: Hardware-Schnittstelle mit sich bringt, nicht über klassischen Eingabegeräten profitieren.
ausnutzt oder diese gar untergräbt. Es steht Zehn Finger bieten augenscheinlich mehr
_Ein Touchscreen ermöglicht die direkte Mani- fest, dass die Hardware allein der Welt keine Freiheitsgrade als eine Maus, ein Stylus oder
pulation digitaler Objekte, welche unmittelbar genüsslichen, intuitiven und in der Interaktion nur ein Finger. Diese zehn Finger können zwar
unter der Fingerspitze des Nutzers liegen. Der natürlich anmutenden Anwendungen schenkt! begrenzt unabhängig voneinander, jedoch
Nutzer „berührt“ diese Objekte und gewinnt parallel eingesetzt werden. Die große Frage
dadurch den Eindruck einer physischen Deshalb gilt es, die oben beschriebenen lautet, in welchen Kontexten diese Möglichkeit
Interaktion. Die Multitouchfähigkeit hebt das Mechanismen anzuwenden, um das Potential einen echten Mehrwert bietet und auf welche
Unbehagen auf, die Interaktion nur auf einen der Multitouch-Technologie voll auszunutzen. Weise.
Finger beschränken zu müssen: Die Benutzung Dabei ist besonderes Augenmerk auf die inte-
mehrerer oder aller Finger ist eine natürlichere grierten Gesten und die Abbildung dieser auf Etablierte Anwendungen für die Multitouch-
Bewegung. Funktionen innerhalb der Applikation zu rich- Eingabe umfassen die Interaktion mit digitalen,
ten. Sind die Gesten ästhetisch und funktional auf dem Screen verstreuten Bildern (Verschie-
_Die Ausführung von Gesten zur Interaktion angenehm, macht die Interaktion besonders bung mehrerer Bilder, Verschiebung des Unter-
stellt ein sinnliches Erlebnis dar. Der Mensch viel Spaß. Mögliche Defizite, vielleicht in einer grundes bei Festhalten eines Bildes, Skalierung
ist seit jeher darauf gepolt, seine Hände langsamen Reaktionszeit des Systems oder von Bildern mit 2 Fingern, Rotation von Bildern
und Finger zu benutzen und kontinuierliche eine irrtümlich ausgelöste Funktion – die aller- mit 2 Fingern), das Malen mit mehreren
Bewegungen auszuführen, um mit seiner Um- dings wieder rückgängig zu machen sein muss Fingern, die Navigation in einer Landkarte,
gebung zu interagieren – sowohl im manipu- – werden dann sogar eher verziehen. einer 3D-Landschaft oder auf einem Globus
146 lativen als auch im ertastenden Sinn. Gesten, (Verschieben, Zoomen) oder das Bespielen
die etwas Positives – geplant oder ungeplant einer virtuellen Klaviatur. Abgesehen von zahl-
– auslösen, rufen Befriedigung oder freudige reichen Variationen oder der Einbettung dieser
Überraschung hervor. Interaktionsformen in andere Kontexte sind
weitere Interaktionsvorschläge noch rar gesät
oder nicht adäquat umgesetzt.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Motivation: Multitouch & Layout

Der Entschluss, im Rahmen dieser Arbeit ein Seitenlayout ein Gebilde, mit dem komplexe
Multitouch-Layoutprogramm zu entwickeln, ist und vielseitige Interaktionen möglich sind. Das
»In a wide variety of tasks, continuous graphical aus der Idee geboren, die Multitouch-Eingabe Layout bietet dabei sowohl die Möglichkeit zur
in einen sehr verbreiteten und oft genutzten impulsiven Interaktion, nach der die Multi-
interaction using several fingers allows to com- Kontext zu stellen – die Textverarbeitung. Im touch-Eingabe förmlich „schreit“, fordert aber
ersten Augenblick erscheint die Verbindung auch exakte Werteingaben, die für die Touch-
municate faster and more fluently than single- etwas befremdlich, auf den zweiten stellt sie Interaktion eine Herausforderung darstellen.
jedoch ein interessantes Untersuchungsfeld Wenn die Multitouch-Eingabe als Eingabetech-
point graphical interaction techniques.« [Mos07] dar: Texte lassen sich in hierarchische Objekte nik diesen Test besteht und sich im Kontext
aufteilen (Absätze, Sätze, Wörter, Buchstaben), eines Layoutprogramms mit all den oben
weisen unzählige Parameter auf (Font, Schnitt, beschriebenen Zielen bewährt, so wird damit
Ausrichtung, Schriftgröße, Schriftfarbe, Zeilen- gezeigt, dass diese Art der Interaktion mehr
Um herauszufinden, für welche Interaktionen Flüssigkeit, Gewandtheit: zwischenräume, Buchstabenlaufweite usw.) zu bieten hat, als dazu zu dienen „Bildchen
die Multitouch-Eingabe außer in den genann- _Ermöglicht schnellere Ausführung von und bilden in Kombination mit Grafiken und umherzuschieben“.
ten Beispielen einen Mehrwert bietet, sollte Aktionen durch Einsatz von Gesten „an Ort
darüber nachgedacht werden, welche Vorteile und Stelle“, anstatt mit nur einem Finger öfter Digitale Textverarbeitung mit physischer Anmutung?
sie ganz allgemein mit sich bringt: Bereiche zu wechseln.

Parallelität: _Kontinuierliche Interaktionen ermöglichen die


_Ermöglicht parallele Manipulation mehrerer Ausführungen von Arbeitsschritten „im Fluss“,
Parameter eines Objektes in einer fließenden was der physischen Interaktion eher entspricht.
Bewegung, anstatt die Operationen klassisch
linear nacheinander auszuführen. _Bietet sehr breites Gesten-Repertoire, das ein 147
kompliziertes und den Bildschirm füllendes UI
_Ermöglicht parallele Manipulation mehrerer stark reduzieren kann, zumal UI-Widgets oft
Objekte gleichzeitig, anstatt sie klassisch nach- nur Vehikel für die indirekte Manipulation von
einander zu bearbeiten. Objekten darstellen, die in der physischen Welt
kein Pendant finden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Zielsetzung

Variationen in Screengröße, Orientierung und Format


implizieren verschiedene Interaktionsformen.
Abgrenzung von verwandten Arbeiten

Neben den oben beschriebenen Zielen, die zung von Programmen, die gleichzeitig von
mit der Umsetzung der Multitouch-Layout- mehreren Nutzern bedient werden können.
Anwendung verfolgt werden, ist es wichtig Diesbezüglich muss man sich Gedanken über
herauszustellen, welche Aspekte der Multi- Nutzeranordnung, Orientierung des Displays,
touch-Eingabe diese Arbeit nicht untersucht, Displayaufteilung, Kollaboration, Rechtevertei-
da sie ihren ohnehin schon breiten Rahmen lung, Eingabezuordnung oder Eingabekonflikte
sprengen würden. machen. Dies alles wird hier nicht untersucht.

Großer horizontaler Screen. Das Kon- Screen vs. Pad. Das Konzept bezieht sich
zept für die Layout-Anwendung ist auf einen auf ein Multitouch-Display und ist nicht direkt
großformatigen (25“ Bilddiagonale) horizon- auf Interaktionen über ein Multitouch-Pad
talen Screen optimiert. Konzepte für andere übertragbar. Ein Unterschied zwischen diesen
Hardware-Schnittstellen, etwa vertikale beiden Eingabegeräten ist, dass über ein Dis-
Displays, kleine mobile Screens oder alterna- play grafische Objekte direkt angefasst werden
tive Formate, würden sicher anders ausfallen. können, über ein Pad muss der Nutzer die
Das liegt nicht nur an Parametern wie einer Position des Objektes aber erst „suchen“.
geringeren Bildschirmauflösung, sondern auch
an Variationen in der Hand- und Armhaltung Kontakt. Manche in dieser Arbeit beschrie-
bei der Interaktion und daran, ob beide oder benen Technologien ermöglichen die Gesten-
nur eine Hand und welche Finger zum Einsatz eingabe ohne Fingerkontakt. Solche Interakti-
kommen. Darüber hinaus sollte beachtet wer- onen in der Luft zählen zwar im engeren Sinne
den, dass es bei der Interaktion über vertikale nicht zur Multi-„Touch“-Eingabe, zeigen aber
148 Screens schneller zu Ermüdungserscheinungen viele Parallelen. Sie eröffnen darüber hinaus
in den Armen des Nutzers kommen kann. andere Interaktionstechniken, als die Eingabe
mittels Fingerberührung. Diese werden hier
Single-User. Es wird von einem Programm jedoch nicht näher beleuchtet.
für genau einen Nutzer ausgegangen. Die
Multitouch-Eingabe ermöglicht die Umset-

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Formale Einordnung

MS Sphere
kugelförmiges Display Die entwickelte Single-User-Anwendung ist auf
einen horizontalen Screen mit einer Bildschirm-
Orientierung

diagonalen von 25“ und einer Auflösung von


1024 x 768 Pixeln optimiert. Es wird stehend
und mit beiden Händen interagiert.
JazzMutant Dexter / Lemur
MS Surface
MS PlayAnywhere iO Sensitive.Table
horizontal

Dell Latitude XT 180 ART+COM floating.numbers


Merl DiamondTouch
n-Trig DuoSense NOR_/D Cubit
Sony SmartSkin

MS ThinSight
NOR_/D TouchKit
schräg

Merl / MS LucidTouch
Lumin Tabletop
Apple iPhone

MS / EON TouchLight
149
HoloWall
vertikal

iO Sensitive.Wall

klein / mobil mittel / Desktop groß / stationär Größe

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

5.2 An dieser Stelle wird zunächst der geplante


Funktionsumfang der Layout-Anwendung
aufgestellt, bevor auf die einzelnen Konzepte
im Detail eingegangen wird.

Die Funktionen unterteilen sich in globale


Funktionen (Datei-Gruppe), andere universelle
Funktionen (Bearbeiten-Gruppe, Navigations-
Gruppe) sowie Funktionen, die der Manipu-
lation der Dokumenteigenschaften und der
Frames (Text- und Bildobjekte) dienen.

Der Funktionsumfang beschränkt sich auf


grundlegende Funktionen, die es ermöglichen,
ansprechende Dokumente zu erstellen. Ziel
dieser Arbeit ist es nicht, möglichst viele Funk-
tionen zu integrieren, sondern einen Basisum-
fang so zu realisieren, dass die oben beschrie-
benen Ziele erreicht werden. Ist das geschafft,
kann man die Anwendung im Rahmen eines
Folgeprojektes noch erweitern und den Funkti-
onsumfang nach oben skalieren.
150

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Geplanter Funktionsumfang

Universelle Funktionen. Manipulations-Funktionen. Bild-Gruppe (Frame-Inhalt):


_Bild skalieren (vergrößern, verkleinern)
Datei-Gruppe: Dokumenteigenschaften-Gruppe: _Bild verschieben
_Neues Dokument _Seitengröße ändern (Breite, Höhe) _Bild drehen
_Dokument öffnen _Randbreite ändern (links, rechts, oben, unten) _Bild spiegeln (horizontal, vertikal)
_Dokument schließen _Neue Seite erzeugen
_Dokument speichern _Seite entfernen Text-Gruppe (Frame-Inhalt):
_Dokument speichern unter _Hintergrundfarbe ändern _Text schreiben / editieren
_Programm verlassen _Textabschnitt selektieren
Frame-Gruppe: _Textabschnitt verschieben
Bearbeiten-Gruppe: _Frame erzeugen _Textabschnitt duplizieren
_Rückgängig (Undo) _Frame ausschneiden _Textabschnitt ausschneiden
_Wieder herstellen (Redo) _Frame kopieren _Textabschnitt kopieren
_Selektion ausschneiden _Frame einfügen _Textabschnitt einfügen
_Selektion kopieren _Frame duplizieren _Textabschnitt löschen
_Zwischenablage einfügen _Frame löschen _Font ändern
_Selektion löschen _Frame verschieben _Schriftgröße ändern
_Importieren (Bilddatei, Textdatei) _Frame drehen _Zeilenabstand ändern
_Framegröße ändern (Breite, Höhe) _Laufweite ändern
Navigations-Gruppe: _Rahmenbreite ändern _Schriftfarbe ändern
_Scrollen (Ansicht verschieben) _Rahmenfarbe ändern _Textauszeichnung ändern (fett, kursiv etc.)
_Rauszoomen (Ansicht verkleinern) _Füllfarbe ändern _Groß- / Kleinschreibung ändern (Majuskeln,
_Reinzoomen (Ansicht vergrößern) _Transparenz ändern Minuskeln, Kapitälchen, normal) 151
_Reihenfolge ändern (vor, zurück, nach vorn, _Ausrichtung ändern (linksbündig, rechtsbün-
nach hinten, vor [Objekt], hinter [Objekt]) dig, mittig, Blocksatz)
_Inhalt importieren (Bilddatei, Textdatei) _Stichpunkte (keine, Zeichen, Nummerierung)
_Einzug ändern (links, rechts, 1.Absatzzeile)
_Absatzzwischenraum ändern

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Navigation

Zur Navigation gehören das Verschieben der Geste Aktion


Ansicht und das Heraus- und Hineinzoomen,
also die Verkleinerung bzw. Vergrößerung 5-Drag synchron:
der Ansicht. Diese Aktionen sind verglichen Ansicht verschieben (Scrollen).
mit der Manipulation einzelner Objekte grobe
Handlungen und betreffen im Gegensatz
zu feineren punktuellen Bearbeitungen den
gesamten Screenbereich. Deshalb werden die
Navigationsfunktionen auf grobe, weniger 5-Drag zusammen:
präzise Gesten gemappt: auf alle 5 Finger einer Ansicht verkleinern (Rauszoomen).
Hand.

Das Scrollen, also das Verschieben der Ansicht,


erfolgt durch eine gleichmäßige Translation 5-Drag auseinander:
der Hand bei Berührung mit allen 5 Fingern. Ansicht vergrößern (Reinzoomen).
Die Ansicht „rutscht“ mit der Hand mit, was
bedeutet, dass ein Verschieben der Hand nach
oben ein Scrollen nach unten verursacht und
umgekehrt (rechts und links analog).

Gezoomt wird, indem sich die 5 Finger ausein-


ander oder zueinander bewegen. Ersteres be- Die vergleichsweise grobmotorische Navigation
152 wirkt eine Vergrößerung der Ansicht, letzteres
eine Verkleinerung. wird auf 5-Finger-Gesten abgebildet, damit prä-
zisere Gesten für feinere, punktuelle Manipulati-
onen reserviert werden können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Das grafische Interface

Beim Interface wird komplett auf statische Das System gibt dem Nutzer immer ein Live-
Widgets, wie sie bei Schnittstellen für die Mau- Feedback zu seinen Eingaben. Das fängt damit
sinteraktion etabliert sind, verzichtet. Es gibt an, dass die Fingerberührungen selbst grafisch
also keine auf dem Screen fest integrierten dargestellt werden, damit der Nutzer weiß,
Buttons, Toolbars oder Scrollbalken. Statt- dass das System seine Berührungen erkennt.
dessen sollen alle Funktionen durch direkte Weiterhin werden bei Berührungen an be-
Objektmanipulation oder symbolische Gesten stimmten Positionen Anzeigen eingeblendet,
umgesetzt werden können. Das schafft mehr die dem Nutzer Hinweise dafür geben, was
Raum für die Anzeige des eigentlichen Doku- er im Begriff ist zu manipulieren und was die
ments, das der Nutzer erstellen und bearbeiten Manipulation bewirkt. Auf Details dazu wird
möchte. weiter unten eingegangen.

Widgets tauchen bei bestimmten Interaktionen Die einzelnen grafischen Objekte können
dynamisch immer genau da auf, wo die Inter- direkt angefasst und mit den Fingern bearbei-
aktion gerade stattfindet, und immer genau tet werden. Da die Finger aber verglichen mit
dann, wenn sie gebraucht werden. Unter einem Mauscursor ziemlich grob sind, braucht
solche Interaktionen fallen etwa Auswahlen der Nutzer Unterstützung vom System, um
aus einer Liste (Font) oder aus Wertebereichen präzise Eingaben zu tätigen. Das wird mit Hilfe
(Farbe). von intelligenten Snap-Funktionen realisiert,
die später näher erläutert werden.
Das Interface beinhaltet keine statischen Widgets. Zu sehen
Auf statische Widgets wird zugunsten dynamischer Elemente verzichtet, ist das Dokument selbst, dynamische Lineale, von denen
die Maße der Dokumentseiten abgelesen werden können,
153
die genau dort bzw. dann eingeblendet werden, wo bzw. wann sie ge- sowie die Anzeige der aktuellen Zoomstufe. Ein Finger be-
rührt im Moment ein Frame. Dieses aktivierte Frame wurde
an die eingestellten Randabstände gesnappt.
braucht werden. Präzise Eingaben werden durch Einblendung von nume-
rischen Werten und Snap-Funktionen ermöglicht.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Globale, universelle Funktionen

Die Anwendung integriert sowohl globale als Geste Aktion


auch lokale Funktionen. Globale Funktionen
sind solche, die sich nicht auf ein Element 2-Drag auseinander (Ausrichtung egal):
innerhalb des Dokumentes beziehen, sondern Dokument öffnen.
auf das Dokument als Ganzes. Darunter fallen
Befehle wie Dokument speichern, Dokument 2-Drag zusammen (Ausrichtung egal):
öffnen, oder Dokument schließen. Für diese Dokument schließen.
Funktionen existieren etablierte Tastenkürzel,
weil sie universell einsetzbar sind. Wie in der 3-Drag auseinander (Ausrichtung egal):
Analyse (siehe Abschnitt 4.2 dieser Arbeit) Neues Dokument.
beschrieben, eignet sich für solche Befehle
besonders ein eindeutiges Mapping mit
symbolhaften Gesten. Diese Gesten können
überall auf dem Interface ausgeführt werden 3-Drag zusammen (Ausrichtung egal):
und werden in der Regel nach Vollendung Programm verlassen.
– also nachdem die Finger das Display wieder
verlassen haben – ausgewertet.

Die nebenstehende Übersicht illustriert die 1-Drag Hakenform:


Gestenzuordnung für die globalen Funktionen Dokument speichern.
der Layout-Applikation. Dabei wird darauf (kann in anderem Kontext Bestätigen
geachtet, dass die Bewegungen mit der bedeuten)
154 jeweiligen Funktion assoziiert werden können
(Haken – bestätigen) und dass komplemen- 2-Drag Hakenform (Duplikat):
täre Funktionen zu komplementären Gesten Dokument speichern unter.
gehören (auseinander – öffnen, zusammen
– schließen), damit das Vokabular semantisch
schlüssig ist.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die Zwischenablage wird greifbar
Geste Aktion
Die Zwischenablage wird visualisiert, wenn mit 2 Fingern ausgeführt wird – „Duplikat“.
1-Drag Halbkreis nach li. (gegen Leserichtung): 2 Finger in gewissem Abstand den Screen Einfügen funktioniert analog, indem der Inhalt
Undo. etwas länger berühren (2-Hold). Der Bereich der Zwischenablage herausgedraggt wird. Die
zwischen diesen beiden Fingern stellt den Visualisierung der Zwischenablage macht sie
1-Drag Halbkreis nach rechts (Leserichtung): Zwischenspeicher wie ein Behältnis dar, in dem für den Nutzer greifbar und ermöglicht einen
Redo. etwas abgelegt werden kann. Es wird auch intuitiven Umgang mit dem Konzept.
grafisch dargestellt, ob sich momentan etwas
1-Drag Zickzackform (Ausrichtung egal): in der Zwischenablage befindet, und wenn ja,
Selektion löschen. ob es sich um Text oder ein Bild handelt.
(kann in anderem Kontext Abbrechen
bedeuten) Ein Objekt kann ausgeschnitten werden, indem
es in die Zwischenablage gedraggt wird – also
2-Hold & 1-Drag hinein (Ausrichtung egal, ein 2-Hold blendet die Zwischenablage ein und
Mindestabstand): ein 1-Drag schiebt ein Objekt dort hinein. Ein
Selektion ausschneiden. Objekt kann kopiert werden, indem das Drag Visualisierung des Inhalts der Zwischenablage.

2-Hold & 2-Drag hinein (Duplikat,


Ausrichtung egal, Mindestabstand):
Selektion kopieren.

2-Hold & 1-Drag heraus (Ausrichtung egal,


Mindestabstand): 155
Zwischenablage einfügen.

1-Hold Kreisform (Richtung egal):


Importieren.

Der Nutzer kann Objekte sprichwörtlich


im Clipboard ablegen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Dokumenteigenschaften

Zu den manipulierbaren Dokumenteigen-


schaften gehören das Seitenformat (Breite und
Höhe) und die Breite der Ränder (links, rechts,
oben und unten). Darüber hinaus ist es denk-
bar, die Hintergrundfarbe des Dokuments zu
ändern. Weiterhin ist es wichtig, neue Seiten
einfügen zu können bzw. Seiten auch wieder
entfernen zu können.

Das Seitenformat wird direkt an einer ein-


geblendeten Seite des Dokuments angepasst,
indem der Nutzer mit dem Finger eine Seiten-
kante oder -ecke berührt und dann verschiebt.
Bei der Berührung der Kante oder Ecke wird
diese nach einer Wartezeit grafisch hervor-
gehoben und die Höhe bzw. Breite der Seite
wird über dem Berührungspunkt eingeblendet.
So erhält der Nutzer ein Feedback darüber,
welchen Wert der Parameter hat, den er jetzt Durch Anfassen einer Kante oder einer Ecke kann das
durch eine Drag-Bewegung ändern kann. Seitenformat angepasst werden. Die Multitouch-Interaktion
ermöglicht es, mehrere Kanten bzw. Ecken gleichzeitig zu
verschieben.
Die kurze Wartezeit vor der Dragbewegung ist Dokument zu speichern, das Seitenformat
156 nötig, damit diese Manipulation nicht mit den ändert, wenn die Speichern-Geste zufällig
oben beschriebenen symbolhaften globalen genau auf der Seitenkante gestartet wurde.
Gesten in Konflikt gerät. Würde ein sofortiges Dieses vorangestellte Hold zur Aktivierung von
Drag an der Seitenkante zu einer Dokument- Elementen wird auch – wie weiter unten be-
bearbeitung führen, so könnte es dem Nutzer schrieben – bei anderen Objektmanipulationen
passieren, dass er z. B. beim Versuch, ein angewandt.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Fasst der Nutzer eine Kante mit zwei Fingern
an, so folgt die Kante dem Finger, der den
Screen als zuletzt berührt hat.

Die Multitouch-Eingabe macht es möglich,


gleichzeitig zwei Kanten anzufassen und zu
verschieben.

157
Lässt der zweite Finger den Screen los, wäh-
rend der erste Finger noch in Kontakt ist, so
schnipst die Seitenkante wieder zum ersten
Finger zurück.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Das System hilft dem Nutzer durch eine


Snap-Funktion („magnetische“ Anziehung),
Standardformate einzustellen. Im Fall dieses
Layoutprogramms wirkt das Snapping für
die DIN-A-Maße sowohl im Längs-, als auch
im Querformat. Zusätzlich erhält der Nutzer
eine Rückmeldung über das Erreichen eines
Standardformats durch die Einblendung eines
DIN-A-Rasters.

158

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Eine neue Seite wird in ein Dokument einge- Eine Seite kann gelöscht werden, indem eine
fügt, indem auf dem Hintergrund eine Vier- Zickzack-Geste auf dem Hintergrund startend
eck-Geste mit zwei Fingern ausgeführt wird. über das jeweilige Blatt hinweg ausgeführt
Findet die Eingabe rechts neben einer bereits wird. Die Geste kann auch weniger weiträu-
existierenden Seite statt, so wird die neue Seite mig artikuliert werden und auf dem Blatt
nach dieser eingefügt. Findet die Eingabe links enden.
neben einer Dokumentseite statt, so wird die
neue Seite vor dieser eingefügt.

Die Ränder des Dokuments werden über die


Lineale eingestellt, die sich immer am Rand des
Screens dynamisch mit den Dokumentseiten
mitbewegen. An jedem Lineal befinden sich
zwei Anfasser für die jeweils beiden Ränder.
Die Ränder stellen ein Hilfsmittel für den
Nutzer dar, da sie bei der Positionierung von
Frames als Snap-Magneten fungieren.

Die Hintergrundfarbe des Dokuments kann


geändert werden, indem das Farbmenü 159
aufgerufen wird, während kein Frame aktiviert
ist. Details dazu finden sich weiter unten
unter Farbauswahl. Es wird dabei immer die
Hintergrundfarbe des gesamten Dokuments
geändert.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Frame-Manipulation

4-Tap in Rechteckanordnung: Frames sind Rahmen-Objekte, die Text und Bild Mit einem 4-Tap kann ein Frame erzeugt werden.
Frame erzeugen. enthalten können. In dem hier entwickelten
Layout-Programm wird initial nicht zwischen
Bild- und Textframes unterschieden: Jedes Fra- Snap-Mechanismen werden aktiv, wenn sich
me kann mit Bild oder Text gefüllt werden. die Kante des Frames dem Seitenrand, dem
spezifizierten Dokumentrand oder der vertika-
Ein Frame, das immer eine viereckige Form len oder horizontalen Position eines anderen
aufweist, wird durch die gleichzeitige Be- Frames auf der Seite nähert. Beim Snapping
rührung mit 4 Fingern, die annähernd in Stelle liegt, an der die Berührung ausgeführt wird dabei die Kante grafisch hervorgeho-
Rechteckform angeordnet sind, erzeugt. Das wird. Das System blendet bei der Translation ben, die die Magnetfunktion in dem Moment
Frame erscheint dort, wo der Nutzer die Geste des Frames dieses 9er-Raster ein, damit der ausgelöst hat. Dadurch kann der Nutzer das
ausgeführt hat, und passt sich in Größe und Nutzer weiß, worauf sich die Positionsangabe Frame leicht an der Dokumentseite oder an
Format der Fingeranordnung an. bezieht. anderen grafischen Elementen ausrichten.

Ein Frame kann verschoben werden, indem


es durch eine einfache Fingerberührung (Hold
im Innern der Framefläche) aktiviert und dann
durch eine Drag-Bewegung über den Screen
geschoben wird. Zur Orientierung blendet
das Programm die Position dieses Frames ein.
Abhängig davon, wo der Nutzer das Frame
berührt, wird die Position der linken oberen
160 Ecke, der Mitte, der rechten unteren Ecke usw.
eingeblendet. Das System unterscheidet dabei
9 Bereiche (die Kombinationen aus links, Mitte,
rechts mit oben, Mitte, unten). Es wird davon
ausgegangen, dass den Nutzer genau diese
relative Position interessiert, die nah an der

Die Positionsanzeige bezieht sich auf die Region, an der der Frame berührt wird.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Ein Frame kann skaliert werden, indem eine Ein Frame kann gedreht werden, indem ein
seiner Kanten oder Ecken durch Berührung Finger das Frame aktiviert und ein zweiter eine
aktiviert und dann verschoben wird. Dieser Dragbewegung um diese erste Position aus-
Mechanismus funktioniert analog zum oben führt. Die Rotation findet dann um den ersten
beschriebenen Verändern der Dokument- Berührungspunkt statt. Das Snapping wird bei
seitengröße. Wenn jedoch zwei Finger ein Winkel-Vielfachen von 45° aktiv. Der zweite
und die selbe Kante berühren und asynchron Finger kann die Bewegung innerhalb oder
draggen, so kann die Rahmenbreite des außerhalb des Frames starten. Wird die Dreh-
Frames verändert werden. Die manipulierte bewegung außerhalb des Frames ausgeführt,
Breite wird dabei dynamisch über den Fingern Oben: Die Manipulation der Rahmenbreite mit 2 Fingern. so dreht sich das Frame. Wird die Drehbewe-
eingeblendet. Unten: Die Skalierung eines Frames mit mehreren Fingern. gung jedoch innerhalb des Frames ausgeführt,
so dreht sich das Bild innerhalb des Frames
– so eines enthalten ist. Auf diese Weise kann
das Bild innerhalb des Frames übrigens auch
skaliert werden, indem der Abstand zwischen
den beiden Fingern verändert wird. Eine Ver-
schiebung dieses Bildes findet statt, sobald der
erste Finger seine Position verändert. Gesnappt
wird, wenn eine Bildkante auf eine Framekante
trifft bzw. wenn die Originalgröße des Bildes Oben: Das ganze Frame wird gedreht, indem der zweite
wieder erreicht wird (Skalierung 100%). Finger außerhalb das Frames agiert.
Unten: Der Inhalt des Frames wird gedreht, indem der
zweite Finger innerhalb des Frames agiert.
161

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Das Bild in einem Frame kann gespiegelt Um ein Frame zu löschen, kann der Nutzer ein
werden, indem zwei Finger an sich gegenüber aktives Frame mit der Zickzack-Geste entfer-
liegenden Seiten außerhalb des aktivierten Fra- nen. Dabei muss die Zickzack-Geste außerhalb
mes ansetzen und sich durch das Frame hin- des Frames starten, da die Geste sonst mit an-
durch aneinander vorbei bewegen. Wird diese deren Funktionen – vor allem bei der Textmani-
Bewegung horizontal ausgeführt, so wird das pulation – konkurriert. Eine andere Möglichkeit
Bild an der vertikalen Achse gespiegelt. Eine besteht darin, ein inaktives Frame anzufassen,
vertikale Bewegung bewirkt eine Spiegelung es damit zu aktivieren und es ohne den Finger
an der horizontalen Achse. vom Screen zu lösen mit der Zickzack-Geste
„wegzuschütteln“.
Ein Frame kann dupliziert werden, indem ein
enges 2-Finger-Hold auf dem Frame ausge- Mit einem 2-Finger-Drag kann ein Frame dupliziert werden.
führt wird, bis dieses aktiviert wird. Ein darauf
folgendes 2-Finger-Drag „hängt“ ein Duplikat
an die Finger, und beim Loslassen der Finger
„fällt“ dieses an der jeweiligen Position in das
Dokument. Dieses 2-Finger-Hold differenziert
das System aufgrund der kurzen Entfernung
zwischen den beiden Fingern (Einsatz zweier
benachbarter langer Finger einer Hand) von
dem 2-Finger-Hold für die Einblendung der
Zwischenablage (Einsatz des Daumens und
162 des Zeigefingers einer Hand). Letztere kann
genutzt werden, um Frames zu kopieren, aus-
zuschneiden bzw. wieder einzufügen.
Ein Frame kann mittels
Das Bild in einem Frame kann der Zickzack-Geste
horizontal und vertikal gespiegelt werden. gelöscht werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die Frames liegen in dem Dokument in einer durchgeführt. Dazu wird nahe einer Ecke des
bestimmten Reihenfolge: Frames, die jüngst hinteren Frames – innerhalb eines sensitiven
erzeugt wurden, liegen vor den älteren Frames Bereichs – das Display berührt. Daraufhin
und umgekehrt. Dadurch kann es bei sich „knickt“ diese Frame-Ecke nach vorn um. Der
schneidenden Frames zu Überlappungen kom- Finger gleitet nun auf diese umgeknickte Ecke,
men. Deshalb ist es wichtig, dass der Nutzer um sie zu fixieren. Das vordere Frame wird nun
die Framereihenfolge nach seinen Wünschen mit einem anderen Finger (der anderen Hand)
ändern kann. Dafür gibt es mehrere Mechanis- zu dem hinteren Frame gedraggt und sobald
men. Der eine Mechanismus kann mit einem es in dessen Bereich hinein kommt, rutscht es
Finger ausgeführt werden und ist dazu geeig- hinter dieses. Ein Frame kann mittels des Knick-Ecken-Mechanismus
net, ein Frame vor ein anderes zu schieben: hinter ein anderes geschoben werden.
Der Nutzer aktiviert das hintere Frame und
schiebt es zu dem weiter vorn liegenden. So- Dieses Konzept, ein Frame vor oder hinter ein
bald der Berührungspunkt, an dem das hintere anderes zu schieben (objektorientiert), anstatt
Frame „klebt“, in den Bereich des vorderen es – wie in vielen Grafik- und Layoutprogram-
Frames eintritt, rutscht das erstere automatisch men üblich – einen Schritt vor oder hinter
vor das letztere. Solange die Berührung auf- bzw. ganz nach vorn oder hinten zu schieben
recht erhalten wird, kann diese Änderung in (funktionsorientiert), kommt der Denkweise
der Reihenfolge wieder aufgehoben werden, – dem mentalen Modell – des Nutzers bei der
indem das Frame einfach wieder ein Stück zu- Manipulation der Reihenfolge sehr viel näher.
rück gedraggt wird, bis der Finger den Bereich Ein Nutzer will ein Element nicht primär „an
des letzteren Frames wieder verlässt. So kann zweitvorderster Stelle“ haben, sondern „vor
sich der Nutzer noch während der Dragbe- diesem Element“ oder „hinter jenem Element“. 163
wegung entscheiden, ob das verschobene Dadurch erscheint das hier vorgestellte Para-
Frame hinter dem anderen bleiben oder davor digma der Änderung der Frame-Reihenfolge
rutschen soll. Der zweite Mechanismus wird sehr viel intuitiver als die klassischen Modelle.
verwendet, um ein Frame hinter ein anderes Durch ein einfaches Drag kann ein Frame vor ein anderes
zu schieben, und wird mit mehreren Fingern geschoben werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

In diesem Konzept impliziert übrigens die Der Inhalt eines Frames kann aus einer exter-
Frame-Reihenfolge die Flusseigenschaften von nen Datei stammen. Diese – ein Bild oder Text
Textframes: Sobald sich ein Textframe hinter – kann importiert werden, indem das Frame
einem Bildframe befindet, umfließt der Text zunächst durch eine Berührung aktiviert wird.
das Bild, weil es in den meisten Fällen keinen Nach dem Loslassen erfolgt die Kreisgeste
Sinn ergibt, das Bild den Text verdecken zu (siehe weiter oben) innerhalb des Frames. Aus
lassen. Befindet sich das Textframe vor dem einem Datei-Browser-Widget kann nun die
Bild, wird es nicht umflossen. Dieser Mecha- gewünschte Datei ausgewählt werden. (Dieses
nismus mag die Umsetzung des seltenen Falls, Widget wird in dieser Arbeit nicht weiter
dass ein Text hinter ein Bild fließt, unmöglich ausgearbeitet, was in zukünftigen Projekten er-
machen, jedoch ermöglicht er die Manipula- folgen kann – Es wird hier zunächst von einem
tion von Flusseigenschaften auf sehr einfache klassischen Systemfenster ausgegangen.)
Weise und genügt in den allermeisten Fällen.

Um den Inhalt eines Frames zu manipulieren,


wird es zunächst durch eine Berührung akti-
viert. Nach dem Loslassen können – solange es
noch aktiv ist – innerhalb das Frames Gesten
ausgeführt werden, um dessen Inhalt zu mani- Flusseigenschaften werden nicht explizit spezifiziert,
pulieren. Auf die diesbezüglichen Details wird sondern ergeben sich aus der Reihenfolge der Frames:
Liegt ein Text vor einem Bild, so fließt er einfach darüber
weiter unten eingegangen.
hinweg. Wird ein Textframe jedoch teilweise von einem Bild
verdeckt, so fließt der Text um das Bild herum, damit er auf
Ein Frame wird vom System automatisch jeden Fall lesbar bleibt.
164 deaktiviert, wenn es eine gewisse Weile keine
Interaktion vom Nutzer mehr erfahren hat.
Der Nutzer kann das Frame aber auch manuell
deaktivieren, indem er entweder ein anderes
Frame aktiviert oder ein einfaches Tap auf dem Mit der Kreis-Geste können
Dokumenthintergrund ausführt. Bilder oder Texte importiert werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die Farbe eines Frames kann über das Farbme- Um die Transparenz eines Frames zu ändern,
nü geändert werden. Dazu wird ein 3-Finger- wird – während das Farbmenü eingeblendet
Drag nach unten ausgeführt, während das ist – auf dem Frame ein einfaches Drag nach
Frame aktiviert ist. Wird die Geste innerhalb oben oder unten ausgeführt. Durch ein ein-
des Frames ausgeführt, bezieht sich die faches Hold auf dem Frame wird der momen-
folgende Farbauswahl auf dessen Füllfarbe, tane Transparenzwert eingeblendet.
wird sie (teilweise) außerhalb artikuliert, so
wird die Rahmenfarbe angepasst. Zwischen
diesen beiden Modi kann aber während der
Farbauswahl noch gewechselt werden, indem
der Nutzer in das Frame tippt – Wechsel auf
Füllfarbe – oder auf dessen Rahmen tippt
– Wechsel auf Rahmenfarbe. Darüber hinaus
kann durch Tippen auf das Widget, das diesen
Färbemodus visualisiert, zwischen Füllfarbe
und Rahmenfarbe gewechselt werden. Ist in
dem Frame Text enthalten, so ist ein zusätz-
licher Wechsel zur Textfarbe möglich. Wird auf
ein anderes Frame getippt, so wechselt der Über das Farbmenü kann die Füllfarbe oder die Rahmen- Während das Farbmenü eingeblendet ist, kann auch die
Farbwahlfokus auf dieses Frame. Bei einem farbe eines Frames verändert werden. Ein Widget am Frame Transparenz eines Frames manipuliert werden.
(im Bild oben links) zeigt an, welcher Färbemodus aktiv ist.
Tap auf den Hintergrund wird das Farbmenü
Der Nutzer kann zwischen diesen Modi beliebig wechseln,
wieder ausgeblendet.
indem er das Innere des Frames, eine Framekante oder
dieses Widget antippt. 165

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Texteingabe

10-Tap nebeneinander: Über eine 10-Finger-Tap-Geste wird die Bei einer herkömmlichen physischen Tastatur
Tastatur einblenden. Software-Tastatur dynamisch in dem Berüh- können aus Platzgründen nicht alle Sonder-
rungsbereich eingeblendet. Diese kann wie zeichen aufgedruckt werden, und bei einer
eine physische Tastatur genutzt werden: Durch Software-Tastatur mit Single-Touch-Eingabe
Taps auf die einzelnen Tasten wird getippt. Ist muss der Nutzer zwischen unterschiedlichen
während des Tippens ein Frame aktiv, so wird Modi hin- und herschalten, bevor er z. B. ein
als dessen Inhalt ein Text erzeugt bzw. der Zeichen findet, das mit einer Kombination aus
schon darin befindliche editiert. Ist während Alt und Shift erzeugt wird.
des Tippens kein Frame aktiv, so wird ein neu-
es Frame oberhalb der Tastatur erzeugt und in
dieses Text eingefügt. Bei Nichtbenutzung ver-
schwindet die Tastatur automatisch. Sie kann
aber auch vom Nutzer aktiv durch ein Tap auf
den Dokumenthintergrund aktiv ausgeblendet
werden. Ein Tap auf ein anderes Frame bewirkt
eine Fokusänderung für die Texteingabe.

Durch die Multitouch-Fähigkeit können bei Die Software-Tastatur kann genauso wie eine physische
der Software-Tastatur die Modifier-Tasten Tastatur auf parallele Mehrtasteneingabe reagieren. Durch
Berührung der Modifier-Tasten werden zudem die Zweit-,
wie gewohnt genutzt werden: Solange z.B.
Dritt- und Viert-Belegungen der einzelnden Tasten sichtbar.
die Shift-Taste gedrückt wird (Hold), kann
ein anderer Finger Großbuchstaben tippen.
166 Nützlich ist, dass durch einfachen Druck auf
eine oder mehrere Modifier-Tasten sofort alle
Sonderzeichen auf den jeweiligen Tasten ein-
geblendet werden können – auch solche, die
selten genutzt, aber wenn mal gebraucht, in
diesem Fall schnell gefunden werden können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Geste Aktion

1-Drag nach links, rechts, oben oder unten:


Einfügemarke um eine Position nach
links oder rechts bzw.
um eine Zeile nach oben oder unten.

Die Software-Tastatur eröffnet noch weitere In- 1-Drag nach unten und dann nach links:
teraktionsmöglichkeiten: Auf ihr können Drag- Return.
Gesten ausgeführt werden, die nicht mit den Auf der Software-Tastatur können Drag-Gesten ausgeführt
Tap- bzw. Hold-Gesten zum Tippen kollidieren. werden, um zusätzliche Funktionen zur Texteditierung
aufzurufen.
Ein einfaches Drag nach rechts, links, oben 2-Drag nach oben bzw. nach unten:
oder unten bewirkt bspw. die Bewegung der Shift für ein folgendes Zeichen bzw.
Einfügemarke in die entsprechende Richtung. Shift wieder abstellen.
Diese Funktionen liegen bei einer physischen
Tastatur auf den Pfeiltasten – welche hier des- 3-Drag nach oben bzw. unten:
halb nicht benötigt werden. Weitere Drag-Ges- Caps Lock aktivieren bzw. deaktivieren.
ten, die auf der Software-Tastatur ausgeführt
werden können, sind in der nebenstehenden
Tabelle aufgelistet. Darunter fallen sowohl 2-Drag nach rechts:
Funktionen, die alternativ durch Tastendruck Textbereich rechtsbündig ausrichten.
verfügbar sind, als auch solche, die bei klas-
sischen Interfaces als Widgets von der Maus 2-Drag nach links:
angesteuert werden müssen. Hier können sie Textbereich linksbündig ausrichten.
direkt auf der Software-Tastatur ausgeführt
werden, ohne den Schreibfluss des Nutzers zu 2 x 2-Drag horizontal zueinander:
unterbrechen. Textbereich mittig ausrichten.

2 x 2-Drag horizontal auseinander:


Textbereich als Blocksatz ausrichten. 167

3-Drag nach rechts bzw. links:


Stichpunkte an & Typ-Toggle bzw.
Stichpunkte aus.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Die Bewegung der Einfügemarke über die Tas-


tatur-Drag-Gesten ist besonders praktisch, weil
einerseits die Hand nicht den Ort wechseln
muss, um die Marke per Tap in dem Frame
zu versetzen. Andererseits kann es bei nicht
besonders großen Zoomstufen schwierig sein,
die Marke mit dem Finger präzise zwischen
zwei Buchstaben zu positionieren. Hier ist des-
halb noch ein Hilfsmechanismus nötig, um den
Nutzer bei diesem Vorgang zu unterstützen.
Verharrt der Finger über einem Textabschnitt,
wird darüber eine Lupe eingeblendet, die die Die Lupenfunktion ermöglicht die präzise Positionierung der
Positionierung erleichtert. Einfügemarke.

Die Software-Tastatur bietet im Gegensatz zu


einem physischen Eingabegerät beim Tippen
kein haptisches Feedback. Für Nutzer, die es
sich angewöhnt haben, beim Tippen nicht auf
die Tasten zu schauen und sich anhand ihres
Tastsinns orientieren, könnte diese Tastatur
gewöhnungsbedürftig sein. Zu untersuchen
wäre, ob eine an die Anatomie der Finger an-
168 gepasste Tastenanordnung – z. B. zwei Bögen
beschreibend – die Gefahr verringern kann,
von den Tastenreihen „abzukommen“. Dies
ist jedoch nicht Bestandteil dieser Arbeit und
Verbessert eine bogenartige Anordnung der Soft-Tasten die bleibt ein offener Gegenstand für folgende
Interaktion bei der Texteingabe? Untersuchungen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


169

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte
Der Tap-Mechanismus zur
sukzessiven Selektierung eines Textes.

Textformatierung

Wie weiter oben beschrieben können einige Formatierungen wirken sich immer auf einen
Funktionen zur Textformatierung (Textausrich- selektierten Textbereich aus. Das bedeutet,
tung, Stichpunkte) über Drag-Gesten auf der dass Formatierungsgesten nur wirken, wenn
Software-Tastatur ausgeführt werden. Diese gerade eine Textselektion vorliegt. Damit wird
und alle übrigen können auch direkt auf dem die Gefahr einer ungewollten Formatierung
Textbereich ausgeführt werden, der formatiert verringert und gleichzeitig ermöglicht, dass
werden soll. die Geste nicht ganz genau auf der jeweiligen
Zeile stattfinden muss, was sich bei einer ge-
ringen Zoomstufe und einer Mehrfinger-Drag-
Geste schwierig gestalten kann.

Zur Selektierung von Text sind mehrere Me-


chanismen verfügbar. Der Tap-Mechanismus
ermöglicht das sukzessive Selektieren eines
Wortes, einer Zeile, eines Absatzes und des
gesamten Frame-Inhalts durch die Ausführung
eines Doppel-, Dreifach, Vierfach- bzw. Fünf-
fach-Taps. Eine weitere Möglichkeit besteht
darin, eine Stelle im Textbereich zu berühren
und durch eine Drag-Bewegung den gesamten
Inhalt zwischen Start- und Endposition zu mar-
kieren. Bei einem Hold über einer Position wird
170 die oben beschriebene Lupe eingeblendet, um
den Nutzer bei einer präzisen Positionierung
zu unterstützen. Der dritte Mechanismus zur
Textselektierung wird mit zwei Fingern ausge-
führt. Die beiden Finger werden im Textbe-
reich an unterschiedlichen Stellen positioniert

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


und spezifizieren damit den Anfangs- und Ein Text wird wieder deselektiert, indem kurz in det, die weitere Formatanpassungen ermög-
den Endpunkt der Selektion. Der Textbereich den Textbereich getappt oder das gesamte Fra- lichen. Durch Berührung und Verschieben
zwischen den Fingern wird sofort bei Berüh- me durch ein Tap außerhalb deaktiviert wird. dieser Anfasser können Einzüge und Absatz-
rung markiert und kann durch unabhängige abstände (Einzug gesamter Absatz links und
Drag-Bewegungen der beiden Finger noch Ist ein Textbereich selektiert, so können Gesten rechts, Einzug 1. Absatzzeile links, Abstand
variiert werden. Ein Hold eines Fingers aktiviert ausgeführt werden, die dessen Formatierung zum nächsten Absatz) verändert werden.
wieder die Lupe. beeinflussen. Z. B. blendet ein einfaches Hold Wieder wird zur Orientierung jeweils über dem
die Schriftgröße über der Berührung ein, manipulierenden Finger der Wert des anzupas-
welche durch eine Drag-Bewegung nach oben senden Parameters eingeblendet.
oder unten verändert werden kann. Weitere
Formatierungsgesten über selektiertem Text
sind in der Tabelle auf der folgenden Seite
aufgelistet.

Wenn ein Textbereich selektiert wurde, werden


außerdem verschiedene Anfasser eingeblen-
Der einfache Drag-Mechanismus zur Selektierung von Text.

Über selektiertem Text können verschiedene Gesten zur Die Anfasser können verschoben werden, um Einzüge und
Formatierung ausgeführt werden. Die Abbildung zeigt die Abstände zu ändern. Die untere Abbildung zeigt einen 171
Änderung der Schriftgröße durch ein einfaches Drag nach Absatz, bei dem die Einzüge verändert worden sind.
oben oder unten.

Der 2-Finger-Mechanismus zur Selektierung von Text.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Diese Tabellen zeigen Gesten, die über selek-


tiertem Text ausgeführt werden können, um
Formatierungsänderungen vorzunehmen.

Geste Aktion Geste Aktion

1-Hold: 2-Drag nach rechts:


Einblenden der Schriftgröße. Textbereich rechtsbündig ausrichten.

1-Drag nach oben bzw. unten: 2-Drag nach links:


Schrift vergrößern bzw. verkleinern. Textbereich linksbündig ausrichten.

2 x 2-Drag horizontal zueinander:


2-Hold übereinander: Textbereich mittig ausrichten.
Einblenden des Zeilenabstands.
2 x 2-Drag horizontal auseinander:
2-Drag vertikal auseinander bzw. zueinander: Textbereich als Blocksatz ausrichten.
Zeilenabstand vergrößern bzw.
verkleinern. 1-Drag nach rechts bzw. links: *)
Stichpunkte an & Typ-Toggle bzw.
Stichpunkte aus.

2-Hold nebeneinander: 3-Drag nach unten:


Einblenden der Laufweite. Farbmenü einblenden,
um die Schriftfarbe zu ändern.
172 2-Drag horizontal aus- bzw. zueinander:
Laufweite vergrößern bzw. verkleinern.
*) Wird das einfache Drag nach rechts wie- Nummerierung, Buchstaben etc. Durch ein
1-Drag Zickzackform (Ausrichtung egal): derholt ausgeführt, kann zwischen Stich- Drag nach links wird die Stichpunktformatie-
Selektion löschen. punkttypen gewechselt werden: Stichpunkte rung wieder aufgehoben.
mit Kreissymbol, Strichsymbol, ohne Symbol,

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Geste Aktion

3-Hold nebeneinander:
Fontmenü einblenden.

Durch die Ausführung eines 3-Holds neben-


einander über selektiertem Text wird das
Fontmenü eingeblendet – eine kleine Auswahl
bestehend aus drei Widgets: Für die Fontaus- Der Nutzer kann ein Widget auswählen, indem
wahl, für die Groß- / Kleinschreibung (Majus- er mit einem beliebigen Finger zu dem ent-
keln, Minuskeln, Kapitälchen, normal) und für sprechenden Element gleitet oder es antippt.
die Textauszeichnung (fett, kursiv, unterstri- Sobald ein Finger auf einem der Widgets liegt,
chen, ohne). Die drei Widgets erscheinen über wird das entsprechende Untermenü eingeblen-
den Fingern. Wird eines davon angetippt, so det.
kann in der jeweiligen Kategorie sofort eine
Auswahl getroffen werden.

Das System vermutet anhand der Position


der Gestenausführung, mit welcher Hand
das Menü aufgerufen wurde (rechter Inter-
facebereich für die rechte Hand und umge- Das Fontmenü wird wird durch ein 3-Hold eingeblendet. 173
kehrt). Da dieser Mechanismus nicht 100%ig Es ermöglicht die Manipulation der Schriftart, der Textaus-
zeichnung und der Groß- / Kleinschreibung. Das Widget
zuverlässig ist, kann der Nutzer, während das
für die Schriftart befindet sich optimaler Weise über dem
Menü eingeblendet ist, durch ein Tap mit dem
Zeigefinger – wenn dem nicht so ist, kann ein Daumen-Tap
Daumen die Ausrichtung des Menüs horizontal die Widget-Anordnung horizontal spiegeln.
umdrehen.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Der Nutzer kann ein Widget auswählen, indem Über die anderen beiden Widgets können
er mit einem beliebigen Finger zu dem ent- Textauszeichnung und Groß- / Kleinschreibung
sprechenden Element gleitet oder es antippt. spezifiziert werden. Die Textauszeichnungs-
Sobald ein Finger auf einem der Widgets liegt, formen fett, kursiv und unterstrichen kann der
wird das entsprechende Untermenü eingeblen- Nutzer durch Antippen beliebig an- und aus-
det. schalten. Für die Groß- und Kleinschreibung
kann zwischen normal, Majuskeln, Minuskeln
Zur Fontauswahl wird der Zeigefinger auf das und Kapitälchen gewählt werden. Durch ein
Font-Widget gelegt. Daraufhin wird eine Liste Tap außerhalb des Menüs, wird es wieder
aller Schriftarten eingeblendet, die im System ausgeblendet und die letzte Auswahl wird für
vorliegen. Diese Liste, deren Einträge vertikal den selektierten Text übernommen
angeordnet sind, erscheint auf der Daumen-
seite der Hand neben dem Zeigefinger. Es ist
genau derjenige Eintrag aktiv, der sich auf
Zeigefingerhöhe befindet. Mit dem Mittelfin-
ger oder einem Finger der anderen Hand kann
durch vertikale Drag-Bewegungen in der Liste
hoch und runter gescrollt werden. Zusätz-
lich kann sich der Zeigefinger auf- und ab Die Auswahl der Schriftart erfolgt über eine vertikale Liste.
bewegen, um einen anderen Listeneintrag zu Ein zusätzlicher Finger kann durch Drag-Bewegungen durch
die Liste scrollen und der Zeigefinger kann – ebenfalls
aktivieren. Verlässt der Zeigefinger den Screen,
durch Drag-Bewegungen – einen Eintrag auswählen.
so wurde die Schriftart ausgewählt, die zuletzt
174 aktiviert war.

Die Auswahl von Textauszeichnung und


Groß- / Kleinschreibung wird über Auswahl-Widgets
realisiert, die angetippt werden können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Selektierter Text kann wie weiter oben be-
schrieben über die Zwischenablage-Geste ko-
piert, ausgeschnitten oder eingefügt werden.
Er kann aber auch verschoben oder dupliziert
werden. Bei diesen beiden Aktionen handelt es
sich um Schnellausführungen von Ausschnei-
den – Einfügen bzw. Kopieren – Einfügen
ohne den Umweg über die Zwischenablage.
Sie werden allerdings durch die Zwischenabla-
ge-Geste eingeleitet, also durch ein 2-Hold von
Daumen und Zeigefinger. In diesem Modus
kann der selektierte Text mit einem oder
zwei Fingern der anderen Hand berührt und
gedraggt werden, wodurch ein Repräsentant
des Textes selbst oder der seines Duplikats am
Finger „klebt“. Dieser Repräsentant kann nun
wahlweise in die Zwischenablage geschoben Der Ablauf beim Duplizieren eines Textabschnitts:
oder woanders abgelegt werden – was einem Bei selektiertem Text leitet die Zwischenablage-Geste
den Vorgang ein. Mittels eines 2-Finger-Drag wird ein
Verschieben bzw. Duplizieren des Textab-
Repräsentant des Textabschnitts erzeugt und an die Finger
schnitts gleich kommt. Dabei darf während
„geheftet“. Das Duplikat kann nun an einer anderen Stelle
des Draggens die Zwischenablage-Hand den eingefügt werden. Eine Textverschiebung läuft analog
Screen verlassen. Um den Text präzise zu plat- mittels 1-Finger-Drag ab.
zieren, kann wieder das Lupenwerkzeug zum 175
Einsatz kommen, indem der Nutzer an einer
Position verweilt.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Sobald in einem Frame mehr Text enthalten ist, Wird ein Verbindungskästchen berührt, so
als hinein passt, wird an der unteren Kante ein wird die Verbindung zwischen den jeweiligen
Kästchen mit einem Plus eingeblendet. Dieses Frames angezeigt. Diese kann mit einer Drag-
kann angetippt werden. Solange es gedrückt bewegung eines anderen Fingers durch diese
wird, kann der Nutzer mit einem anderen Fin- Verbindungslinie hindurch wieder gekappt
ger entweder auf ein weiteres Frame tippen, werden.
um diese zu verbinden, oder auf den Doku-
menthintergrund, um so ein neues Frame zu
erzeugen, in dem der Text weiter läuft.

Wenn überlaufende Frames verbunden sind,


so wird dies mit Dreiecken in den Kästchen
visualisiert.

176

Die Abbildungen zeigen die Mechanismen und Viualisie-


rungen zur Verbindung und Trennung von Flow-Frames.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


177

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte
Das Kontextmenü kann als Lernwerkzeug für die
verfügbaren Gesten dienen, da diese dort animiert
dargestellt werden. Die Abbildung zeigt das Beispiel
Dokument öffnen.

Das Kontextmenü

3-Hold, wobei sich der linke oder der rechte Die beschriebenen Funktionen können auch Funktionen der Frame-Gruppe enthält. Wenn
Berührungspunkt am weitesten unten über das Kontextmenü ausgeführt werden. Es ein Textbereich selektiert ist, so wird das Text-
befindet: bietet darüber hinaus Funktionalitäten an, für Menü eingeblendet, über das Funktionen der
Kontextmenü für rechte bzw. linke die keine Gesten existieren. Das Kontextmenü Text-Gruppe erreicht werden können, und ist
Hand einblenden. fällt deshalb vergleichsweise komplex aus. ein Bild selektiert, so erscheint das Bild-Menü,
in dem Funktionen der Bild-Gruppe zu finden
Das Kontextmenü wird über die Ausführung sind.
eines 3-Hold eingeblendet, wobei entweder
der linke oder der rechte Berührungspunkt Über das Kontextmenü kann der Nutzer nicht
am weitesten unten liegen muss. Durch die nur Funktionen ausführen, sondern auch die
Anordnung der Finger erkennt das System, mit entsprechenden Gesten dazu lernen. Das wird
welcher Hand das Menü aufgerufen wird, und durch Animationen ermöglicht, die eingeblen-
passt die Lage der Widgets dementsprechend det werden, wenn ein Finger auf einem Menü-
an. Die Untermenügruppen erscheinen indivi- eintrag verweilt.
duell in der Nähe der Finger, so dass sie vom
Nutzer gut angesteuert werden können. Das Kontextmenü ist ein dynamisches Widget,
das immer genau dann und immer dort ein-
Es existieren vier verschiedene Menüs. In geblendet wird, wann bzw. wo es gebraucht
Abhängigkeit davon, was momentan selek- wird. Im Gegensatz zum Tastatur-Widget ver-
tiert ist, erscheint durch die Ausführung der schwindet das Menü nach kurzer Zeit wieder,
Menü-Geste eines davon. Ist nichts selektiert, nachdem die drei Finger den Screen verlassen.
so wird das Globale Menü eingeblendet, über Solange noch mindestens einer der drei Finger
178 das Funktionen der Datei-Gruppe, der Bear- in Screenkontakt steht, bleibt es jedoch sicht-
beiten-Gruppe, der Navigations-Gruppe und bar. Das Menü wird bedient, indem die einzel-
der Dokumenteigenschaften-Gruppe (siehe nen Finger zum gewünschten Eintrag gleiten
weiter oben bei „Geplanter Funktionsumfang“) oder die entsprechende Stelle antippen. Das System erkennt, mit welcher
erreichbar sind. Wenn ein Frame aktiviert ist, Hand das Kontextmenü aufgerufen wird
und ordnet die Widgets entsprechend an.
so erscheint das Frame-Menü, das zusätzlich

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Menü-Hierarchien sollten möglichst flach gestal-
tet sein, aber auch tiefere Strukturen sind auf den
hier vorgestellten Mechanismus abbildbar.

Das Daumenmenü, das radial angeordnet ist, Die Anordnung der Menüeinträge wird so Bei höheren Hierarchien wird vorgesehen,
kann auch durch „Zielen“ bedient werden: gewählt, dass der Nutzer sie ergonomisch an- dass die erste Stufe – beim Daumen – immer
Der Daumen muss nicht bis zu den Widgets genehm erreichen kann. Dabei ist zu beachten, sichtbar bleibt, während etwa die dritte Stufe
geschoben werden, sondern braucht nur seine dass die Bewegungsmöglichkeiten der langen an der zweiten statt bei den langen Fingern
Zeigerichtung ändern. Finger nur bis zu einem gewissen Grad vonein- eingeblendet wird. Der Daumen kann so jeder
ander unabhängig sind und dass es nicht allen Zeit die Hauptauswahl wieder wechseln.
Menschen leicht fällt, den kleinen Finger zu
kontrollieren. Deshalb sollten Menu-Einträge Im Allgemeinen ist es anzuraten, die Menü-
möglichst nicht so angeordnet werden, dass Hierarchien möglichst flach zu gestalten, damit
der kleine Finger Auswahlen treffen muss oder der Nutzer den gesuchten Eintrag besser findet
dass sich die langen Finger in extrem asyn- und schneller erreichen kann.
chroner Weise strecken, beugen und spreizen
müssen.

Der Daumen spielt eine besondere Rolle, da


seine Bewegungen ziemlich unabhängig von
denen der anderen Finger stattfinden können.
Deshalb ist es günstig, den Daumen und die
4 langen Finger als zwei Funktions-Einheiten
zu betrachten. Bei einem Menü mit zwei
Der Daumen trifft die Menüauswahl durch Zielen. Hierarchiestufen wird die erste Stufe dem Dau-
men zugeordnet und die zweite den langen 179
Fingern: Erst wählt der Daumen eine Haupt-
kategorie aus, woraufhin das entsprechende
Untermenü über den langen Fingern erscheint,
welche dann dort die gewünschte Unteraus-
wahl treffen können. Beispielhafter Ablauf der Menüauswahl für
Dokument speichern.

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Farbauswahl

3-Drag nach unten: An dieser Stelle wird ein vertiefender Blick auf Parameter, ist jedoch für den Menschen und die Sättigung zum Kern hin abnimmt.)
Farbmenü einblenden. die Farbauswahl geworfen, da es sich hier um relativ unintuitiv, da der Nutzer wissen muss, Eine Vereinfachung dieses Zylinders stellt ein
eine Funktion handelt, die in unterschiedlichen welche Farbanteile einen bestimmten Farbton Farbring dar, wie ihn Microsoft für eine seiner
Kontexten benötigt wird – in diesem Pro- ergeben, sich die Sättigung implizit aus dem Surface-Anwendungen vorschlägt. Hier wird
gramm für die Dokument-Hintergrundfarbe, Werteverhältnis ergibt und die Farbhelligkeit das Farbspektrum nicht vollständig abgebil-
für den Frame-Rahmen, für die Frame-Füllung von allen drei Werten abhängt. Das CMYK- det, aber die Auswahl kann dafür intuitiv und
und für die Schriftfarbe. Modell verhält sich ähnlich. Hier müssen aber schnell erfolgen.
gleich vier Parameter spezifiziert werden, was
Das Farbmenü kann mittels einer 3-Drag-Be- die Farbauswahl noch komplexer macht. In diesem Konzept wird ein Farbauswahlme-
wegung nach unten eingeblendet werden. Es chanismus vorgestellt, der auf dem HSB-Mo-
erscheint dort, wo die Geste ausgeführt wurde Eins der intuitivsten Farbmodelle für die dell beruht, eine einfache Auswahl ermöglicht
und kann mittels eines Taps an eine andere Farbauswahl ist das HSB-Modell, bei dem eine und dem Nutzer passende Farbabstufungen
Stelle wieder ausgeblendet werden. Farbe durch den Farbton, die Sättigung und präsentiert. Zusätzlich wird eine diskrete Farb-
die Helligkeit spezifiziert wird. Es entspricht feld-Bibliothek integriert, in der automatisch
Es existieren verschiedene Farbmodelle, die dem mentalen Modell des Nutzers eher, da alle Farben gesammelt werden, die der Nutzer
in digitalen Anwendungen zur Farbauswahl er im Allgemeinen eine Farbe nicht in seine in seinem Dokument verwendet.
eingesetzt werden. Darunter fallen z. B. das Farbanteile zerlegt, sondern sie gut über den
RGB- (red, green, blue), das CMYK- (cyan, ma- Ton, die Helligkeit und die Sättigung beschrei- Das Farbmenü besteht je nach Ansicht aus
genta, yellow, key) und das HSB-Modell (hue, ben kann. Vor allem der Farbton muss nicht einem Ring oder einem Halbring, in dem ein
saturation, brightness). Dies sind kontinuier- erst „im Kopf gemischt“, sondern kann einfach kontinuierlicher Farbverlauf dargestellt wird.
liche Farbräume, aus denen über verschiedene aus einer Skala, die alle Tonwerte enthält, Der Nutzer kann direkt mit dem Finger in dem
Slider oder einen Color-Picker ein Farbwert ausgesucht werden. Ring gleiten, um eine Farbe auszuwählen.
180 ausgesucht werden kann. Alternativ können Die aktuell ausgewählte Farbe wird in einem
auch diskrete Farbfelder zur Farbauswahl Der HSB-Farbraum kann unterschiedlich dar- Feld innerhalb des Rings dargestellt – und in
angeboten werden. gestellt werden. (Apple verwendet in Keynote Echtzeit auch in dem Element, das der Nutzer
z. B. einen Farbzylinder, bei dem sich die gerade umfärbt. Um den Ring sind diskrete
Die Farbauswahl im RGB-Raum erfolgt im Farbtöne horizontal um den Mantel verteilen, Farbabstufungen in Feldern angeordnet, die
Allgemeinen über drei Slider für die drei die Helligkeit auf die Höhe gemappt wird ebenfalls ausgewählt werden können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Der Nutzer kann über drei Auswahl-Widgets
wählen, ob der Farbring alle Abstufungen des
Farbtonspektrums (0°-360°), des Helligkeits-
umfangs (0%-100%) oder der Sättigungsstu-
fen (0%-100%) darstellen soll. (Der Farbring
ist hier zwar weiß abgebildet, enthält aber
ein kontinuierliches Farbspektrum.) Während
jeweils die beiden anderen Parameter fest
stehen (die jeweiligen Werte werden immer
eingeblendet), kann der Nutzer eine Farbe aus
dem Kontinuum oder aus den um den Ring
angeordneten Farbfeldern wählen.

181

Masterarbeit „Multitouch Input“ | Grit Schuster


Konzepte

Alternativ zur Farbauswahl über den Ring Die Parameterwerte der drei Farbdimensionen können
können auch die eingeblendeten Werte der direkt per Drag nach oben oder unten manipuliert werden.
So ist auch eine präzise Werteingabe möglich.
drei Parameter über eine Dragbewegung nach
oben oder unten angepasst werden. Diese An-
passung kann unabhängig von der Ringansicht
erfolgen, was dem Nutzer die Möglichkeit
gibt, sich einen Eindruck von dem Farbspekt-
rum zu verschaffen, das bestimmte Werte in
Kombination mit den anderen Dimensionen
hergeben.

Ein ausgewählter Farbwert, der in dem Feld in


der Mitte angezeigt wird, kann in die Farbfeld-
Bibliothek gedraggt werden. Das gleiche ist
auch mit den Farbfeldern möglich, die sich um
den Ring anordnen. Darüber hinaus werden
alle Farben, die in dem momentan geöffneten
Dokument verwendet werden, automatisch
vom System in der Farbfeld-Bibliothek abge-
legt.

Es ist außerdem möglich den aktuellen Farbton


182 auf andere Objekte im Dokument zu draggen.
Auf diese Weise kann man leicht mehrere
Objekte in einem Arbeitsgang einfärben.
Der ausgewählte Farbton und auch die eingeblendeten Auf die Farb-Bibliothek hat der Nutzer über das Bibliotheks-
Farbabstufungen können manuell in der Farb-Bibliothek Widget Zugriff.
abgelegt werden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Zusammenfassung

Die hier vorgestellten Konzepte decken alle Löst der Nutzer aus Versehen eine ungewollte Die beschriebenen Konzepte werden im
oben aufgelisteten Funktionalitäten ab. Die Funktion aus, so kann diese in jedem Fall durch folgenden Abschnitt in Anwendungskontexte
meisten Funktionen werden auf Fingergesten ein Undo wieder rückgängig gemacht werden. eingebettet, um ihre Anwendbarkeit zu prü-
abgebildet, die direkt auf dem zu manipu- fen. Darüber hinaus tragen sie zum besseren
lierenden Objekt ausgeführt werden können. Verständnis der Einsatzmöglichkeiten bei.

Globale Gesten dürfen überall auf dem Display


artikuliert werden. Das gleiche gilt auch für
Gesten für die Navigation, die stets mit allen
fünf Fingern einer Hand umgesetzt werden.

Zur Objektmanipulation muss das entspre-


chende Element erst aktiviert werden. Das
beugt versehentlichen Veränderungen vor und
ermöglicht die Mehrfachbelegung von Finger-
bewegungen.

Kennt der Nutzer die Geste zum Einblenden


des Kontextmenüs, so kann er die meisten
weiteren Gesten über dieses lernen, da die
dort integrierten auswählbaren Funktiona-
litäten von Animationen begleitet werden,
die die entsprechende Gestenausführung 183
visualisieren.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

2 Szenarios Szenario 1: Die Erstellung eines Flyers

5.3 Die oben beschriebenen Konzepte werden


nun anhand zweier Szenarios im Anwendungs-
kontext verifiziert. In beiden Fällen soll mit
Dieses Szenario steht für die Erstellung eines
Dokuments, bei dem es nicht auf präzise Posi-
tionierungen und Formatierungen ankommt.
Arbeitsablauf.
_Neues Dokument erstellen
_Papierformat anpassen
Hilfe des hier beschriebenen Programms ein Die eher expressive Vorgehensweise wird _Überschrift und Untertitel erstellen: Frame
Dokument erstellt werden. durch kontinuierliche Eingabemöglichkeiten erzeugen, Text eingeben und formatieren
unterstützt. _Hintergrundbild erstellen: Bild importieren
Die beiden Szenarios unterscheiden sich in der _Hintergrund nach hinten stellen, positionie-
Aufgabenstellung, die in ihnen beschrieben Aufgabenstellung. Es soll ein Flyer im Quer- ren, Transparenz ändern
wird. Die Beispiele wurden so gewählt, dass format erstellt werden. Der Flyer enthält eine _Bild erstellen: Bild importieren, skalieren, posi-
geprüft werden kann, ob die oben beschrie- Überschrift, einen Untertitel, eine Terminanga- tionieren
benen Ziele Expressivität und Präzision adäquat be, eine Hintergrundgrafik sowie ein Bild. _Terminangabe erstellen: Frame erzeugen,
umgesetzt werden können. Text eingeben und formatieren, Füllfarbe und
Schriftfarbe anpassen, Frame drehen.
Die Inhalte der beiliegenden CD-ROM Es wird zunächst jeweils die Aufgabenstellung
machen die Arbeitsabläufe noch besser und der Arbeitsablauf beschrieben. Danach
nachvollziehbar! wird geschildert, wie die einzelnen Arbeits-
schritte umgesetzt werden. Simulierte Screen-
shots illustrieren dabei die Vorgehensweise.

Eine noch detailliertere Beschreibung der Ar-


beitsschritte, als sie im Rahmen dieser Druck-
version möglich ist, stellen die Animationen
184 auf der beiliegenden CD-ROM dar.

So soll der Flyer aussehen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Simulation

Zu Beginn ist der Screen noch leer. Ein Doku-


ment wird mittels der 3-Drag-Auseinander-
Geste geöffnet.

Die Ansicht kann sich der Nutzer mit der 5-


Daraufhin öffnet sich ein neues Dokument, Drag-Geste zurecht schieben.
das aus einer leeren, weißen DIN-A4-Seite
besteht. Das Format wird durch anfassen und ziehen
der Seitenkanten umgesetzt. Im Bild sieht
Weiterhin sind die Lineale zu sehen, die die man die der Orientierung dienenden Einblen-
Größe der Seite angeben. Dort befinden dung des Standardformats DIN A6.
sich auch Anfasser, um die Randbreite zu
spezifizieren.

Oben links wird die Zoomstufe angezeigt,


die hier 100 % beträgt. 185

Zum Heranzoomen wird die


5-Drag-Auseinander-Geste genutzt.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Mit der rechteckigen 4-Tap-Geste


wird ein neues Frame erzeugt.

Durch die 10-Tap-Geste wird die Tastatur Auf dem markierten Textbereich wird mittels
eingeblendet, mit der der gewünschte Text der 3-Hold-Geste das Fontmenü eingeblendet,
eingegeben wird. über das der Nutzer die Fontauswahlliste auf-
rufen kann. Mit dem Zeigefinger der anderen
Im Bild sind die Einzugs-Anfasser für den Text- Hand navigiert er in den Einträgen, um die
bereich zu erkennen. passende Schriftart auszuwählen.

Mittels eines Drags nach oben über der selek-


tierten Überschrift kann die Schrift vergrößert
werden. Der Parameterwert wird immer über
dem Finger eingeblendet.
186

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Der selektierte Untertitel kann durch eine 2- Wenn kein Frame aktiviert ist, kann die Kreis- Die Auswahl der zu importierenden Datei er-
Drag-Geste nach rechts rechtsbündig ausge- Geste direkt auf dem Dokumenthintergrund folgt über ein nicht näher spezifiziertes Brow-
richtet werden. genutzt werden, um ein neues Frame mit dem ser-Fenster – im Zweifelsfall ein klassisches
importierten Inhalt zu erzeugen. Systemfenster.

Indem das Frame erneut aktiviert wird, kann


es positioniert werden. Die Abbildung zeigt
die Einblendung der Frameposition: Sie bezieht 187
sich auf die Mitte der unteren Kante, da der
Nutzer das Frame im entsprechenden Bereich
berührt hat.
Das importierte Bild ist größer als das Doku- Durch das Bildframe hindurch sind aber die
ment und verdeckt die Seite teilweise. Dokumentgrenzen sichtbar.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Das große Bild kann mittels einfachem Drag


aus dem Weg geschoben werden, um es dann
über den Knick-Ecken-Mechanismus hinter die
Überschrift zu schieben. Daraufhin kann es
nach Wunsch positioniert werden.

188 Über die 3-Drag-Abwärts-Geste wird das Farb-


menü aufgerufen…

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


…um die Transparenz des Hintergrundbildes Eine zweite Illustration wird integriert, indem
zu ändern. Genau genommen wird die Deck- wie oben bereits beschrieben zunächst mit der
kraft durch eine Abwärtsbewegung herunter- 4-Tab-Geste ein neues Frame erzeugt wird, auf
gesetzt. dem dann die Kreis-Geste ausgeführt wird, um
ein Bild zu importieren.

Der Termin kann noch mit 2 Fingern gedreht


werden: Der erste Finger aktiviert das Frame
Für die Terminangabe wird ein weiteres Frame durch ein Hold und der zweite draggt außen
erzeugt, das wie oben beschrieben mit Text herum, um den Drehwinkel zu bestimmen.
gefüllt wird. Schriftfarbe und Hintergrund- Würde der zweite Finger innen anfassen, wür- 189
farbe können durch Ausführung der 3-Drag- de sich nur der Inhalt des Frames drehen.
Abwärts-Geste über das Farbmenü variiert
werden. Zwischen Schriftfarbe und Hinter- Der fertige Flyer kann über die Speichern-Ges-
grundfarbe kann dabei während der Farbwahl te gesichert werden.
gewechselt werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Szenario 2: Die Anfertigung eines Papers

Dieses Szenario steht für die Erstellung eines Arbeitsablauf.


Dokuments, bei dem genaue Formatvorlagen _Neues Dokument erstellen
befolgt werden müssen. Darüber hinaus ist _Papierformat und Ränder anpassen
dieses Projekt eher textlastig. Hier liegt der _Die Textframes erzeugen und positionieren,
Fokus also auf präzisen Manipulationen und Texte eingeben oder importieren, Formatie-
der Texterzeugung und -bearbeitung. rungen vornehmen
_Abbildungen einfügen: Bild-Frames erzeugen,
Aufgabenstellung. Es soll ein Paper im DIN- Bilder importieren, skalieren, positionieren.
A4-Format erstellt werden. Die Schriftgröße
beträgt genau 12 pt und der Zeilenabstand
18 pt. Die Ränder betragen an den Seiten 2
cm, oben 3 cm und unten 5 cm. Das Paper
enthält typischer Weise eine Überschrift, einen
Verfasser, einen Textkörper und Abbildungen.
(Auf Feinheiten wie Quellenangaben wird hier
nicht eingegangen.)

190

So soll das Paper aussehen.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Simulation

Genau wie im ersten Szenario beschrieben


kann ein neues Dokument mit der 3-Drag-Aus-
einander-Geste geöffnet und mit den 5-Finger-
Gesten die Ansicht beliebig angepasst werden.

Das Seitenformat ist bereits in DIN-A4 ange-


legt. Die Ränder können über die Anfasser der
Seitenlineale verändert werden. Beim Ver-
schieben werden Randbreite und eine Linie zur
Orientierung eingeblendet.

Text-Frames werden wie in Szenario 1 Die Positionsangabe bezieht sich hier auf die 191
beschrieben erzeugt und formatiert. In der linke obere Ecke des Frames, da dar Nutzer es
Abbildung ist zu sehen, wie die Positionierung im oberen linken Bereich angefasst hat.
der Überschrift durch den Snap-Mechanismus
an den spezifizierten Rändern unterstützt wird.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Die Ausrichtung der Überschrift kann auf


mittig geändert werden, indem über dem
selektierten Text zwei waagerechte 2-Drags
zueinander ausgeführt werden.

Die übrigen Text-Frames werden wie oben


schon beschrieben erzeugt und mit Text
gefüllt – über die Software-Tastatur oder durch Wenn der Nutzer eine neue Seite erzeugen
Textimport mittels der Kreis-Geste. will, so artikuliert er mit 2 Fingern die Vierecks-
Geste. Die neue Seite wird nach der ersten
Der Zeilenabstand kann über die vertikale 2- Seite eingefügt, weil die Geste rechts davon
Drag-Auseinander-Geste angepasst werden. ausgeführt wurde.

192

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Die rechte Abbildung zeigt das Paper, nach-
dem der Text vervollständigt wurde.

Zu guter letzt können Bilder eingefügt werden:


Die Erzeugung der Frames und der Import der
Bilder erfolgt wie weiter oben bereits beschrie-
ben.

Die Abbildung links zeigt das Plus-Symbol an Da die später erzeugten Bilder vor dem Text
der unteren Frame-Kante, welches visualisiert, liegen, fließt dieser automatisch um sie herum.
dass der Text nicht vollständig in das Frame
passt. Während man dieses Symbol berührt, Genau wie die Text-Frames werden auch die
kann mit einem anderen Finger per Tap ein Bild-Frames an die Ränder gesnappt und kön-
weiteres Frame erzeugt werden, in dem der nen auch aneinander ausgerichtet werden. 193
Text fortgesetzt wird. Alle Formatierungen
des ersten Frames werden dabei automatisch Das fertige Paper kann über die Speichern-
übernommen. Geste gesichert werden.

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Auswertung

In diesem Kapitel wurde gezeigt, wie die Multi- Paradigmen über statische Interface-Elemente Ein erweiterter Funktionsumfang ist jedoch
touch-Interaktion im Kontext eines Layout-Pro- zurückgreifen zu müssen. Interaktions-Widgets denkbar. So wurden z. B. Funktionen zur Inte-
gramms aussehen kann. Die beiden Szenarios werden bei Bedarf dynamisch dort eingeblen- grierung von Seitenzahlen, zur Spezifizierung
haben untermauert, dass es mit dem hier det, wo sie benötigt werden, und sind an die von Master-Seiten oder zur Aufteilung einer
entwickelten Konzept möglich ist, einfache Anatomie der Hände angepasst. Seite in mehrere Spalten nicht ausgearbeitet.
Dokumente mit Text und Bild zu erstellen. Diese und mehr könnten in Zukunft noch
Dabei können Elemente durch kontinuierliche Die entwickelte Anwendung ist auf die 2D-Ma- erarbeitet werden.
Mehrfinger-Eingaben positioniert, skaliert, nipulation grafischer Elemente mit mehreren
gedreht sowie Text bearbeitet und formatiert Fingern optimiert und unterstützt zudem Hier ging es jedoch um den Versuch, die Mul-
werden. Darüber hinaus unterstützt das Sys- Texteingabe. Die Erstellung umfangreicher titouch-Eingabe überhaupt anhand einer kon-
tem den Nutzer hinreichend durch Parameter- Textdokumente ist zwar möglich, jedoch sollte kreten Anwendung auf ihre Nutzbarkeit hin zu
anzeigen und Snap-Mechanismen, um präzise noch untersucht werden, wie gut sich die überprüfen. In der vorliegenden Arbeit konnte
Eingaben zu tätigen. Software-Tastatur für die Eingabe langer Texte bereits ein beträchtlicher Funktionsumfang
eignet. durch eine Mehrfinger-Gesteneingabe realisiert
Das Konzept unterstützt den Einsatz fließender werden, mit dem Dokumente mit verschie-
Gesten (Drag-Bewegungen), die der Eingabe Das integrierte Gestenrepertoire deckt viele denen Anforderungen erstellt werden können.
mit den Fingern besonders schmeicheln. Die grundsätzliche Funktionen ab, die bei der Da es sich bei Textformatierung und Manipula-
integrierten Gesten sind leicht ausführbar und Textbearbeitung, der Formatierung und dem tion grafischer Objekte um Aufgaben handelt,
semantisch schlüssig. Viele Funktionen werden Layout gebraucht werden. Alle zu Beginn die in unterschiedlichsten Anwendungskon-
dabei mit mehreren Fingern artikuliert. Die dieses Kapitels aufgezählten Funktionen texten gestellt werden, ist anzunehmen, dass
damit erhöhten Freiheitsgrade bei der Eingabe konnten in das Konzept integriert werden. die hier entwickelten Interaktionsmechanismen
erlauben vielfältigere Manipulationsmöglich- Die meisten von ihnen können direkt am zu auf viele andere Bereiche übertragen werden
194 keiten, ohne übermäßig auf klassische Klick- manipulierenden Objekt angewandt werden. können.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


195

Masterarbeit „Multitouch Input“ | Grit Schuster


Ausarbeitung

Die Umsetzung

Das beschriebene Layout-Programm wurde Für die Gestenerkennung habe ich die bereits
 Squeak ist eine open source Entwicklungsumgebung prototypisch in Squeak umgesetzt. Als Fra- verfügbare Squeakerweiterung Genie ge-  Die Genie-Bibliothek für Squeak findet sich unter:
und kann heruntergeladen werden unter: mework wurde Sophie genutzt, weil dieses nutzt, die mit Singletouch-Gesten – klassischer }}} http://squeak.joyful.com/Genie |||
}}} http://www.squeak.org ||| }}} http://www.iam.unibe.ch/~schaerli/smalltalk/#genie
Autorenwerkzeug für die Erstellung und An- Weise Stylus- oder Mausgesten – umgehen
|||
 Sophie ist ein Multimedia-Autorenwerkzeug und zeige von digitalen Multimedia-Books bereits kann. Die dort implementierte Gestenerken-
frei verfügbar: eine große Menge an Funktionalitäten bereit nungskomponente habe ich in meinen Event-
}}} http://www.sophieproject.org |||
hält, die ich für meine Beispielanwendung Manager integriert, der zusammengehörende
nutzen konnte. Darunter fallen viele Manipu- Singletouch-Gesten dann zu Multitouch-Ges-
lationsmöglichkeiten für Frames und Bilder, ten zusammensetzt. Die in Genie enthaltene
Editierungs- und Formatierungsfunktionen Schnittstelle zum Anlegen von eigenen Ges-
von Text sowie der Umgang mit mehrseitigen ten-Dictionaries konnte ich so, wie sie war, für
Dokumenten und Dokumenteigenschaften. meine Zwecke verwenden.

 Die freie Bibliothek Touchlib ist zu finden unter: Als Schnittstelle zwischen Applikation und Viel näher möchte ich an dieser Stelle nicht Source-Code, Animationen und Screen-
}}} http://touchlib.com ||| Nutzereingabe habe ich Touchlib eingesetzt, auf meine Implementierung eingehen. Auf shots sind auf der beiliegenden CD-ROM
}}} http://code.google.com/p/touchlib |||
um die Berührungen über ein OSC-Protokoll an der beiliegenden CD-ROM findet sich der enthalten!
mein Layoutprogramm weiterzureichen. gesamte Source-Code, die Animationen der
beiden vorgestellten Nutzungsszenarios zur
 OSC für Squeak ist frei verfügbar unter: Für Squeak existiert eine OSC-Schnittstelle, Veranschaulichung der Funktionsweise und der
}}} http://map.squeak.org/package/61f807be-83a3- die für meine Anwendung nochmals über- Interaktionsprinzipien sowie Screenshots des
4944-bfa1-686ddac7153c |||
arbeitet wurde. Über einen lokalen Port Prototypen in Aktion.
können die Touch-Events in Squeak eingelesen
196 werden. Um diese Events zu verwalten und
auszuwerten habe ich einen Event-Manager
implementiert, der der Layout-Anwendung si-
gnalisiert, welche Nutzereingaben stattfinden.

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Links oben: Multitouch in der Squeak-Umgebung – farbige
Kreise geben Feedback über die Berührungspunkte der
Fingerspitzen.
Rechts oben: Die Sophie-Oberfläche.
Rechts unten: Die Beispielanwendung in einem sehr frühen
prototypischen Stadium – zu sehen ist eine Seite mit einem
Textframe, die Manipulation der Seitenhöhe und die Anzei-
ge des Kontextmenü-Dummys.

197
Das Genie-Interface für die Anzeige und Erstellung von
Gesten aus einem Gesten-Dictionary.

Masterarbeit „Multitouch Input“ | Grit Schuster


6 Zusammenfassung
Zusammenfassung

6.1 Diese Arbeit beschäftigte sich mit der Multi-


touch-Eingabe – den Technologien, den An-
wendungen, den verfügbaren Gesten und ihre
In dieser Arbeit wurden verschiedene Techno-
logien vorgestellt, die über die Zeit entwickelt
worden sind. Es wurde ein eigenes funktions-
Aufbauend auf den Recherchen und Untersu-
chungen wurde ein Konzept für eine kon-
krete Multitouch-Anwendung entwickelt und
Abbildung auf Funktionalitäten sowie ihren fähiges Tabletop-System umgesetzt, an dem teilweise prototypisch umgesetzt. Es deckt ein
Möglichkeiten und Potentialen. Obwohl die zwei Technologien erprobt wurden – FTIR breites Spektrum an Funktionalitäten mittels
Multitouch-Eingabe bereits seit einem Viertel- und DRI – wobei letztendlich aufgrund von fließender, semantisch sinnfälliger und einfach
jahrhundert möglich ist, steckt die Forschung spezifischen Gegebenheiten das DRI-Setup einsetzbarer Multitouch-Gesten-Eingabe ab.
zu geeigneten Anwendungen noch in den favorisiert wurde. Das Konzept wurde in zwei verschiedenen
Kinderschuhen. In jüngster Zeit sind verschie- Szenarios unter die Lupe genommen, um
dene multitouch-fähige Produkte marktreif Es wurden verschiedene Multitouch-Anwen- zu sehen, ob es sich bezüglich der verschie-
geworden, womit der Bedarf an sinnfälligen dungen und andere für diese Interaktions- denen Anforderungen bewährt. In beiden
Applikationen steigt, die über Malprogramme technik relevante Applikationen untersucht. Kontexten konnten die Aufgabenstellungen
und Navigation in Karten oder in digitalen Ein allgemeines Gesten-Repertoire wurde erfüllt werden. Sie haben belegt, dass sich die
Bilddateien hinaus gehen. Es ist wichtig, aufgestellt, das in seiner Detailliertheit Taxo- entwickelte Anwendung für die Erstellung an-
geeignete Interaktionsparadigmen zu finden nomien anderer Autoren übertrifft. Außerdem sprechender Dokumente eignet, jedoch steht
und konkrete Anwendungsfelder zu erkunden, wurden Mapping-Strategien analysiert und auf eine Evaluierung zur Usibility noch aus.
damit der Nutzer von den neuen technischen ihre Eignung für verschiedene Funktionstypen
Möglichkeiten auch profitieren kann. geprüft.

Zusammenfassung
200

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


Ausblick

6.2 Diese Arbeit kann mit dem entwickelten Mul-


titouch-Repertoire und den dargelegten Un-
tersuchungen von Möglichkeiten, Gesten auf
Ausarbeitung eines Basissatzes an Befehlen
außen vor gelassen wurden (Integrierung von
Seitenzahlen, Automatisierungen für mehrspal-
Displayformate (kleine Screens bei mobilen
Geräten) und andere Display-Orientierungen
(vertikaler Screen) gelegt werden. Da die
Funktionen zu mappen, als Grundlage für die tiges Layout, Master-Seiten, etc.), können das Multitouch-Eingabe sehr gut für Multi-User-
Ausarbeitung sinnfälliger Anwendungen in die- Konzept noch bereichern. Interaktion geeignet ist, sollten Überlegungen
sem Bereich dienen. Das entwickelte Konzept auch dahingehend stattfinden.
für ein Multitouch-Layoutprogramm belegt, Die prototypische Umsetzung der Anwendung
dass die Multitouch-Interaktion als sinnfällige kann in Zukunft für Usability-Studien heran- Das Hardware-Setup betreffend könnten noch
und angenehme Eingabetechnik für komplexe gezogen werden. Die Implementierung von Optimierungen vorgenommen werden. So
Applikationen dienen kann. Der Mehrwert der Interaktionsalternativen ist sicher hilfreich, sollte unbedingt noch ein aktiver Lüfter ein-
direkten Interaktion mit digitalen Objekten und um unterschiedliche Eingabemechanismen gebaut werden, um die Innentemperatur der
der höheren Freiheitsgrade bei einer genüss- zu vergleichen und ihre Anwendbarkeit zu Tischbox niedrig zu halten. Der Einsatz einer
lichen, fließenden und intuitiven Eingabe tritt analysieren. Auch die Software-Tastatur, die ein Firewire-Kamera könnte eine Verbesserung der
auch bei der Beispielanwendung zutage. Das taktiles Feedback missen lässt, sollte auf ihre Performance bei besserer Bildauflösung mit
lässt auf die Entwicklung weiterer spannender Nutzbarkeit überprüft werden. Zukünftige Ent- sich bringen. Eine optimalere Ausleuchtung
Applikationen im Multitouch-Bereich hoffen. wicklungen können von solchen Erfahrungen der Box könnte die Berührungserkennung
profitieren. noch stabiler machen. Die Umsetzung der
Das umgesetzte Anwendungskonzept kann in DRI-Technik erlaubt außerdem den Einsatz von
Folgeprojekten noch detaillierter ausgearbei- Darüber hinaus kann untersucht werden, wie Fiducials – Markern, mit denen das System
tet werden. Einer Skalierung des Funktions- die Übertragung des entwickelten Konzepts physische Objekte erkennt, die Kontakt zum
umfangs steht nichts im Wege. Zusätzliche auf andere Schnittstellen aussehen kann. Display haben. Dies kann weitere Interaktions-
Funktionalitäten, die hier zugunsten der Dabei sollte das Augenmerk auf alternative möglichkeiten eröffnen.

201

Masterarbeit „Multitouch Input“ | Grit Schuster


7 Quellen
Papers, Artikel, Publikationen

[Aga06a] Anand Agarawala und Ravin Balakrishnan. Keepin’ It Real: Pushing the Desktop [Eli07] John Greer Elias, Wayne Carl Westerman und Myra Mary Haggerty. Multi-Touch
Metaphor with Physics, Piles and the Pen. CHI 2006 Proceedings, Montréal, Québec, Gesture Dictionary. Patent Application Publication No.: US 2007/0177803 A1,
Canada, 22.-27. April 2006. Eingereicht von Apple Computer, Inc., USA, 2. August 2007.

[Aga06b] Anand Agarawala. Enriching the Desktop Metaphor with Physics, Piles and the Pen. [Eve05] Katherine Everitt, Chiah Shen, Kathy Ryall und Clifton Forlines. Modal Spaces: Spatial
Master Thesis, University of Toronto, 2006. Multiplexing to Mediate Direct-Touch Input on Large Displays. CHI 2005, Portland,
Oregon, USA, 2.-7. April 2005.
[App08] iPhone Human Interface Guidelines for Web Applications. Apple Inc., 11. März 2008.
[Gui87] Yves Guiard. Asymmetric Division of Labor in Human Skilled Bimanual Action: The
[Ben06] Hrvoje Benko, Andrew D. Wilson und Patrick Baudisch. Precise Selection Techniques Kinematic Chain as a Model. Journal of Motor Behavior, 19, 1987 (4), S. 486-517.
for Multi-Touch Screens. In Proceedings of CHI 2006, Montréal, Québec, Canada,
22.-27. April 2006. [Han05] Jefferson Y. Han. Low-Cost Multi-Touch Sensing through Frustrated Total Internal
Reflection. UIST‘05, Seattle, Washington, USA, 23.-27. Oktober 2005.
[Bux86] William Buxton und Brad A. Myers. A Study in Two-Handed Input. In Proceedings of
CHI‘86, 1986, S. 321-326. [Hen08] Xiangan Heng, Songyang Lao, Hyowon Lee und Alan F. Smeaton. A Touch Interaction
Model for Tabletops and PDAs. In PPD 2008: Workshop on designing multi-touch
[Bux90] William Buxton. The Natural Language of Interaction: A Perspective on Non-Verbal interaction techniques for coupled public and private displays, as part of AVI
Dialogues. In B. Laurel (Ed.). The Art of Human-Computer Interface Design. International Working Conference on Advanced Visual Interfaces, Neapel, Italien,
Addison-Wesley, 1990, S. 405-416. 31. Mai 2008, S. 9-13.

[Bux02] William Buxton, Mark Billinghurst, Yves Guiard, Abigail Sellen und Shumin Zhai. Human [Hod07] Steve Hodges, Shahram Izadi, Alex Butler, Alban Rrustemi und Bill Buxton. ThinSight:
Input to Computer Systems: Theories, Techniques and Technology. Manuscript, Versatile Multi-touch Sensing for Thin Form-factor Displays. In Proceedings of
http://www.billbuxton.com, 1994, 2002. UIST‘07, Newport, Rhode Island, USA, 7.-10. Oktober 2007.

[Die01] Paul Dietz und Darren Leigh. DiamondTouch: A Multi-User Touch Technology. [Hog01] Burne Hogarth. Burne Hogarth‘s Zeichenschule. TASCHEN GmbH, Köln, 2001.
In Proceedings of UIST‘01, 14th Annual ACM Symposium on User Interface
Software and Technology, Orlando, Florida, USA, 11.-14. November 2001, S. 219-226. [Iga05] Takeo Igarashi, Tomer Moscovich und John F. Hughes. As-Rigid-As-Possible Shape
Manipulation. ACM Transactions on Computer Graphics, Vol.24, No.3,
ACM SIGGRAPH 2005, Los Angeles, USA, 2005.

Quellen
204

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


[Jor05] Sergi Jordà, Martin Kaltenbrunner, Günter Geiger, und Ross Bencina. The reacTable. In [Kir07] Sebastian Kirschner. Wie kam das Wort zum Menschen?. GEO Wissen Nr. 40, Gruner
Proceedings of the International Computer Music Conference (ICMC2005), Barcelona, + Jahr AG & Co KG, Druck- und Verlagshaus, Hamburg, September 2007, S. 86-93.
Spain, 2005.
[Kra08] Katharina Kramer. Grammatik der Gesten. NZZ am Sonntag, 30. März 2008, S. 71 f.
[Jor07] Sergi Jordà, Günter Geiger, Marcos Alonso und Martin Kaltenbrunner. The reacTable:
Exploring the Synergy between Live Music Performance and Tabletop Tangible [Kru85] Myron W. Krueger, Thomas Gionfriddo und Katrin Hinrichsen. Videoplace – An
Interfaces. In Proceedings of the first international conference on „Tangible and Artificial Reality. Proceedings of the ACM Conference on Human Factors in Computing
Embedded Interaction“ (TEI07), Baton Rouge, Louisiana, 2007. Systems (CHI‘85), April 1985, S. 35-40.

[Kal05] Martin Kaltenbrunner, Till Bovermann, Ross Bencina und Enrico Constanza. TUIO: A [Kur97] Gordon Kurtenbach, George Fitzmaurice, Thomas Baudel und William Buxton. The
Protocol for Table-Top Tangible User Interfaces. In Proceedings of the 6th International Design of a GUI Paradigm based on Tablets, Two-Hands, and Transparency. In
Workshop on Gesture in Human-Computer Interaction and Simulation (GW 2005), Proceedings of the 1997 ACM Conference on Human Factors in Computing Systems,
Vannes, Frankreich, 2005. CHI 1997, S. 35-42.

[Kal06] Martin Kaltenbrunner, Segi Jordà, Günter Geiger und Marcos Alonso. The reacTable: A [Lee85] S.K. Lee, William Buxton und K.C. Smith. A Multi-Touch Three Dimensional Touch-
Collaborative Musical Instrument. In Proceedings of the Workshop on „Tangible Sensitive Tablet. In Proceedings of CHI 1985, S. 21-27.
Interaction in Collaborative Environments“ (TICE), at the 15th International IEEE
Workshops on Enabling Technologies (WETICE 2006), Manchester, Großbritannien, [Leg98] Andrea Leganchuk, Shumin Zhai und William Buxton. Manual and Cognitive Benefits
2006. of Two-Handed Input: An Experimental Study. ACM Transactions on
Computer-Human Interaction, Vol. 5, No.4, Dezember 1998, S. 326-359.
[Kal07] Martin Kaltenbrunner und Ross Bencina. reacTIVision: A Computer-Vision Framework
for Table-Based Tangible Interaction. In Proceedings of the first international [Man98] Jennifer Mankoff und Gregory D. Abowd. Cirrin: a word-level unistroke keyboard for
conference on „Tangible and Embedded Interaction“ (TEI07), Baton Rouge, Louisiana, pen input. In Proceedings of the 11th Annual ACM Symposium on User Interface
2007. Software and Technology UIST‘98, San Francisco, Kalifornien, USA,
1.-4. November 1998, S. 213-214.
[Ken88] Adam Kendon. How Gestures Can Become Like Words. In F. Poyatos (Ed.).
Crosscultural Perspectives in Nonverbal Communication. C. J. Hogrefe, Publishers, [Mat97] Nobuyuki Matsushita und Jun Rekimoto. HoloWall: Designing a Finger, Hand, Body,
Toronto, 1988, S. 131-141. and Object Sensitive Wall. In Proceedings of UIST 1997, Oktober 1997.

205

Masterarbeit „Multitouch Input“ | Grit Schuster


Papers, Artikel, Publikationen

[Meh82] Nimish Mehta. A Flexible Machine Interface. M.A.Sc. Thesis, Department of Electrical [Saf08] Dan Saffer. Interactive Gestures: Designing Gestural Interfaces. O‘Reilly Media, Inc.,
Engineering, University of Toronto, supervised by Professor K.C. Smith, 1987. Sebastopol, Kalifornien, USA, 2008.

[Mos07] Tomer Moscovich. Principles and Applications of Multi-touch Interaction. [War00] David J. Ward, Alan F. Blackwell und David J. C. MacKay. Dasher – a Data Entry
Ph.D. Dissertation, Brown University, Providence, Rhode Island, Mai 2007. Interface Using Continuous Gestures and Language Models. In: UIST‘00, 2000,
S. 129-137.
[Mul96] Axel Mulder. Hand Gestures for HCI. Hand Centered Studies of Human Movement
Project, Technical Report 96-1, School of Kinesiology, Simon Fraser University, [Wel91] Pierre Wellner. The DigitalDesk Calculator: Tactile Manipulation on a Desk Top
Februar 1996. Display. In Proceedings of the Fourth Annual Symposium on User Interface Software
and Technology (UIST‘91), 11.-13. November 1991, S. 27-33.
[Owe05] Russell Owen, Gordon Kurtenbach, George Fitzmaurice, Thomas Baudel und William
Buxton. When It Gets More Difficult, Use Both Hands – Exploring Bimanual Curve [Wes99] Wayne Westerman. Hand Tracking, Finger Identification, and Chordic Manipulation
Manipulation. Proceedings of Graphics Interface 2005. on a Multi-Touch Surface. Ph.D. Dissertation, University of Delaware, Newark, USA,
1999.
[Per98] Ken Perlin. Quikwriting: Continuous Stylus-based Text Entry. In Proceedings of the
ACM Symposium on User Interface Software and Technology UIST‘98, New York, USA, [Wes07] Wayne Westerman, Steve P. Hotelling und Myra Haggerty. Gesturing With A Multipoint
S. 215-216. Sensing Device. Patent Cooperation Treaty (PCT), World International Property
Organization, International Publication Number WO 2007/089766 A2, Eingereicht von
[Rek02] Jun Rekimoto. SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Apple Computer, Inc., 9. August 2007.
Surfaces. SIGCHI Conference on Human Factors in Computing Systems, Minneapolis,
Minnesota, USA, 20.-25. April 2002. [Wes08] Wayne Carl Westerman. Gesture Learning. Patent Application Publication No.:
US 2008/0163130 A1, Eingereicht von Apple Computer, Inc., USA, 3. Juli 2008.
[Rin01] Meredith Ringel, Henry Berg, Yuhui Jin und Terry Winograd. Barehands: Implement-
Free Interaction with a Wall-Mounted Display. In CHI 2001 summary, 2001, [Wig07] Daniel Wigdor, Clifton Forlines, Patrick Baudisch, John Barnwell und Chia Shen.
S. 367-368. LucidTouch: A See-Through Mobile Device. UIST 2007, Newport, Rhode Island, USA,
7.-10. Oktober 2007.
[Rol07] Marion Rollin. Das stille Wunder. GEO Wissen Nr. 40, Gruner + Jahr AG & Co KG,
Druck- und Verlagshaus, Hamburg, September 2007, S. 102-111. [Wil04] Andrew D. Wilson. TouchLight: An Imaging Touch Screen and Display for Gesture-
Based Interaction. In Proceedings of the International Conference on Multimodal
Interfaces, 13.-15. Oktober 2004.

206

Hochschule Magdeburg-Stendal | FB IWID | Institut für Industrial Design | MA Interaction Design


[Wil05a] Andrew D. Wilson. PlayAnywhere: A Compact Interactive Tabletop Projection-Vision
System. In Proceedings of UIST 2005, Seattle, Washington, USA, 23.-27. Oktober 2005.

[Wil05b] John Williamson und Roderick Murray-Smith. Hex: Dynamics and Probabilistic Text
Entry. Lecture Notes in Computer Science 3355, University of Glasgow, Großbritannien,
2005, S. 333-342.

[Wri03] Matthew Wright, Adrian Freed und Ali Momemi. OpenSound Control: State of the Art
2003. Proceedings of the 3rd Conference on New Interfaces for Musical Expression
(NIME-03), Montreal, Kanada, 2003.

Wu03] Mike Wu und Ravin Balakrishnan. Multi-Finger and Whole Hand Gestural Interaction
Techniques for Multi-User Tabletop Displays. In Proceedings of UIST 2003, Vancouver,
BC, Kanada, 2003.

207

Masterarbeit „Multitouch Input“ | Grit Schuster


Webseiten
Firmen, Produkte, Forschung, Projekte

180 _ http://www.timroth.de/180 Lumin Multitouch _ http://www.lumin.de/multitouch


Apple Inc. _ http://www.apple.com Moto Labs Multi-Touch Table _ http://labs.moto.com/multi-touch/home
ART+COM _ http://artcom.de Mouse Site _ http://sloan.stanford.edu/MouseSite
As-Rigid-As-Possible Shape Manipulation MTmini _ http://ssandler.wordpress.com/MTmini
_ http://www-ui.is.s.u-tokyo.ac.jp/%7Etakeo/research/rigid/index.html Cornelia Müller _ http://www.cmhmueller.de
AudioPad _ http://www.jamespatten.com/audiopad