9 Touch- und Gesteninterfaces

7 Touch und Gesten - Inhalt 9 7 Touch und Gesten - Inhalt 7.1 Geschichte und Definitionen 7.2 Technik 7.3 Eigenschaften und Design Regeln von Touch und Gesten Interfaces 7.4 Tables and Wallsize-Displays 7.5 Multiuser Interfaces

9.1 Minority Report Minority Report (2002): Ein Mann der spezielle Handschuhe trägt steht vor einem großen, durchscheinenden Bildschirm. Er schwingt seine Arme vor dem Bildschirm und die Objekte auf dem Schirm bewegen sich analog zu seinen Gesten.

9.1 Jeff Han Jeff Han (2006) auf der TED Konferenz: Ein Mann steht vor einem Publikum und und bewegt seine Finger über einen Touchscreen. Die Objekte bewegen sich, analog zu seinen Gesten.

Prinzipielle Unterschiede: 9.1 Prinzipielle Unterschiede: Generell lassen sich heute zwei Arten von Gesten Interfaces unterscheiden: Touchscreen und free-form. Touch User Interfaces (TUIs), setzen voraus, dass der Benutzer den Screen direkt berührt. Free-form gestural Interfaces erlauben ein weiteres Spektrum an Gesten, benötigen aber häufig zusätzliche Eingabegeräte (z.B. Gloves)

Natural User Interfaces (NUIs) 9.1 Natural User Interfaces (NUIs) Die Benutzung des ganzen Körpers kann als als natürlichere Eingabe- oder Interaktionsform angesehen werden als das klassische Interaktionskonzept mit Maus und Tastatur. Daher werden Gesten Interfaces auch häufig als NUIs bezeichnet. (Bild: “How the computer sees us”)

Andere populäre Beispiele 9.1 Andere populäre Beispiele

Andere populäre Beispiele 9.1 Andere populäre Beispiele

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 1971: Elograph ,Erste Touchtechnologie, Samuel C. Hurst Gerät zur Digitalisierung graphischer Daten

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 1974: Elographics entwickelt die five-wire resistive Technologie. Diese ist heute noch weit verbreitet und wird erst momentan von den aktuellen kapazitiven Technologien abgelöst. 1977: Elographics entwickelt unterstützt von Siemens Accutouch das erste echte Touchscreen Gerät. Gebogenes Glas wegen CRT-Monitoren

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 1982: Nimisch Mehta entwicklelt an der Universität von Toronto für seine Masterarbeit das erste multitouch fähige System überhaupt. Multitouch: Es können mehrere Kontaktpunkte gleichzeitig erkannt werden. In den 80ern: Außerhalb der akademischen Welt halten Touchscreens im industriellen und kommerziellen Bereich Einzug. (POS touchscreens) Casio 900

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 1983: Hewlett-Packard 150 Hatte keinen traditionellen Touchscreen, aber der Schirm war von horizontalen und vertikalen Infrarotstrahlen überdeckt. Wurden diese unterbrochen wurde der Cursor an die gewünschte Stelle (oder in ihre Nähe) gesetzt.

9.1 HP 150 War auch einer der ersten Computer die ein 3 ½ „ Diskettenlaufwerk, Ethernetanschluss und HPs ersten Laserjet-Drucker betreiben konnten.

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces Anfang der 1990er: Pierre Wellner bei Rank EuroPARC entwickelt den Digital Desk. Der Digital Desk benutzt Videokameras und einen Projektor um eine digitale Oberfläche auf einen Schreibtisch zu projezieren. Erstes Vorkommen deren neu entstehenden Pattern für interaktive Gesten: Pinch to shrink

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 2001: Lionhead bringt mit „Black and White“ ein vollständig über Gesten steuerbares Spiel heraus. (Steuerung über den Essential Reality P5 Glove, alternativ auch per Maus)

Entwicklung von Touch Interfaces 9.1 Entwicklung von Touch Interfaces 2003: EyeToy für PS2 (EyeToy Play) Mitte 2000: Sind Touch und Gesten Interfaces auf dem Massenmarkt angekommen. 2006: Nintendo Wii 2007: IPhone und IPod Touch 2008: LG, Sony Ericsson, Nokia ziehen mit Touch Mobiltelefonen nach, Microsoft startet Microsoft Surface 2010: IPad, Interaktive Touchscreens halten Einzug in der Sportberichterstattung, Mircosoft startet Kinect für Xbox

Weniger bekannte Entwicklungen 9.1 Weniger bekannte Entwicklungen 1992: Simon von IBM und Bell, erstes Touchhandy, konnte z.B. die Alphanumerische Tastatur nicht auf einmal darstellen. („eine Dekade zu früh“) 1993: Apple Newton Message Pad (eingestellt 1998) 1996: Palm Pilot 1000  relativ großer Erfolg 2001: MS Tablett PC , Win XP Tablett Edition 2006: Microsoft und Intel entwickeln den Ultramobile PC (relativ großer Flop) Simon, Apple Newton, Palm pilot, HP TC 1000, Samsung-Q1-Ultra

Warum sind einige Geräte erfolgreich und andere nicht? 9.1 Warum sind einige Geräte erfolgreich und andere nicht? Unterschiede in der Sensorik / Darstellung Unterschiede im allgemeinen Bedienkonzept Unterschiede bei der Auswahl von zum gewählten Bedienkonzept passenden Anwendungen und Funktionen. (und umgekehrt) Technik Bedienkonzept Anwendung? Technik beeinflusst Bedienkonzept, beeinflusst Anwendung D.H. Man sucht für eine Technik eine geeignete Anwendung Sinniger wäre es andersherum: Anwendung  Bedienkonzept  Technik Anwendung Bedienkonzept Technik

Warum sind einige Geräte erfolgreich und andere nicht? 9.1 Warum sind einige Geräte erfolgreich und andere nicht? Später mehr... Technik beeinflusst Bedienkonzept, beeinflusst Anwendung D.H. Man sucht für eine Technik eine geeignete Anwendung Sinniger wäre es andersherum: Anwendung  Bedienkonzept  Technik

Technik Basic components of any gestural system: 9.2 Input Output alerts drives Measured by Sensor Comparator Actuator Feedback Störungen affects Environment Disturbances affect

Sensoren Was Sensoren messen können: 9.2 Sensoren Was Sensoren messen können: Druck: Etwas wird gedrückt oder „drauf gestellt“ Licht: Kamera, Photodetektor, Infrarot-Muster Abstand/Anwesenheit: Ist ein Objekt da? Z.B. Infrarot Geräusche: Mikrophon Raumlage: Winkel im Vergleich zu einem virtuellen Horizont/Koordinate, Lagesensoren Bewegung: Microwellen, Ultraschall (Bewegung und Geschwindigkeit), Infrarot-Muster Position und Richtung: GPS, Kamera, Triangulation der Abstände

9.2 Touchevents Ein Touchevent tritt auf, wenn ein Benutzer eine Oberfläche berührt. Verschiedene Touchevents entstehen aus einer Kombination von Sensorevents und Comparator Mustern. Die wesentlichen Unterschiede resultieren aus der Technologie, die eingesetzt wird um Berührungen festzustellen. Häufig eingesetzte Varianten sind: Resistiv, Kapazitiv, Diffused Illumination (DI), FTIR (Frustrated total internal reflection) Je nach eingesetztem Verfahren sind Single- oder Multitouch-Events möglich.

Resistive Touchscreens 9.2 Resistive Touchscreens In der Regel aufgrund der Geometrie nur Single Touch.

Kapazitive Touchscreens 9.2 Kapazitive Touchscreens

Kapazitive Touchscreens 9.2 Kapazitive Touchscreens

Modlab: Optical sensory 9.2 Modlab: Optical sensory Je nach Anzahl der eingesetzten Kameras Single oder Multi-Touch Erkennung möglich. 2 Kameras  SingleTouch

Diffused Illumination 9.2 Diffused Illumination - Multitouch Erkennung

Frustrated Total Internal Reflection 9.2 Frustrated Total Internal Reflection - Multitouch Erkennung

9.2 Andere Sensorik: Nintendo Wii: In der Wii-mote ist eine Infrarotkamera eingebaut. Diese kann das am Bildschirm positionierte Infrarotsignal erkennen. Zusätzlich sind in der Wii-mote mehrere Lage-Sensoren integriert. Die Verbindung der Wii-mote zur Wii erfolgt über Bluetooth. Kinect: Die Basisstation (Sensorleiste) sendet ein Infrarotmuster (vgl. Anoto-Muster) in den Raum. Dieses Muster wird von der ebenfalls in die Sensorleiste integrierten Kamera empfangen. Damit kann ein 3D-Bild des beleuchteten Raums erstellt werden. Ein Comparator erfasst dann Veränderungen.

9.2 Andere Sensorik: Kinect:

9.3 Eigenschaften von Gesten Gesten Interfaces eigen sich mehr oder weniger gut in bestimmten Situationen oder zu bestimmten Zwecken. Daher ist es gut wenn man die generellen Attribute von Gesten kennt um zu prüfen, ob sie den Anforderungen angemessen sind.

Pro und contra Gesten basierte Interfaces 9.3 Pro und contra Gesten basierte Interfaces + Mehr Natürlichkeit bei der Interaktion + Weniger störende /sichtbare Hardware + Nuanciertere Interaktionen werden möglich (Mimik) + Mehr Spaß - Schwierigere Eingabe von Daten - Problem durch Abstützung auf der Visualisierung - Problem durch Abstützung auf physikalischer Interaktion - Unangemessenheit in bestimmten Kontexten

Generelle Attribute von Gesten 9.3 Generelle Attribute von Gesten Vorhandensein (Präsenz) Dauer Position Bewegung Druck Größe der Geste Richtung Verwendete/Vorhandene Objekte Anzahl der Touches / Kombination der Touches Sequenzen Anzahl der Teilnehmer

Eigenschaften von „guten“ gesten-basierten Interfaces 9.3 Eigenschaften von „guten“ gesten-basierten Interfaces Discoverable Trustworthy Responsive Appropriate (Situation, Kultur, Kontext) Meaningful (Geste hat eine Bedeutung für die Person) Smart/Clever Playful Pleasureable (Feedback sollte den Sinnen gefallen)

Eigenschaften von „guten“ gesten-basierten Interfaces 9.3 Eigenschaften von „guten“ gesten-basierten Interfaces Beispielvideo: Bergbaumuseum Bochum

Eigenschaften von „guten“ gesten-basierten Interfaces 9.3 Eigenschaften von „guten“ gesten-basierten Interfaces BTW: Bergbaumuseum Bochum

Touch/Gesten Interfaces vs. klassische Interface Konventionen 9.3 Touch/Gesten Interfaces vs. klassische Interface Konventionen Viele der traditionelle Interface Konventionen funktionieren gut bei Touch und Gesten-basierten Interfaces. (Selecting, drag-and-drop, scrolling) Es gibt jedoch einige wichtige Ausnahmen!

9.3 Cursor Direct Touch: Interaktion findet dort statt, wo die Berührung erfolgt  Cursor wird nicht mehr benötigt. Indirect Touch: Abbildung der Touch Events auf eine Cursorposition. Z.B. bei großen Bildschirmen / Tables Problem: Mapping von Events und Cursor. Offset- Problem

9.3 Cursor-Offset Beispiel:Fixes Offset

Hover und mouse-over events 9.3 Hover und mouse-over events Hover und Mouse-over sind in der Regel nicht möglich.  Was getroffen wird wird direkt selektiert (geklickt). Point and Click-Paradigma nicht verwendbar. Drop-Down Menus verhalten sich anders, bzw. funktionieren nicht.

Double-Click Double Clicks sind in der Regel schwierig. 9.3 Double-Click Double Clicks sind in der Regel schwierig. Problem die gleiche Stelle 2 mal zu treffen.  Geht am einfachsten, wenn der Selections Mechanismus „target aware“ ist. (target aware: Mechanismus kennt die zu treffenden Objekte)  Genauigkeit hängt von der Größe der Objekte ab. Keine Pixelgenauigkeit.

Rechtsklick Es gibt keine Maus, also auch keine rechte Taste 9.3 Rechtsklick Es gibt keine Maus, also auch keine rechte Taste Bei Touchinterfaces öffnet man Kontextmenus i.d.R. bei der Selektion direkt mit. Smart Buttons Bei Multi-Touch sind Mehr-Finger-Klicks möglich um einen Rechtsklick zu emulieren. Z.B. Tap mit zwei Fingern  auch Problem bei Drop-down Menüs (vgl. Hovering)

Cut and Paste Selten implementiert Tastenkombinationen entfallen 9.3 Cut and Paste Selten implementiert Tastenkombinationen entfallen Problem bei 2-dimensionalen Objekten: Wo erwarte ich das Objekt beim Einfügen? (z.B. SeeMe) Bei Texten mittlerweile vorhanden (Iphone)

Multi-Selektion Keine Ctrl-Taste. 9.3 Multi-Selektion Keine Ctrl-Taste. Wie markiere ich mehrere beliebige Elemente? Problem: alles was ich selektiere bleibt selektiert Multiselektion als spezielle Funktionen  Modus Alternative: Objekte einkreisen per Zeichenfunktion

Default Buttons Kein Return. 9.3 Default Buttons Kein Return. Wie mache ich den Defaultbutton kenntlich? Wie löse ich ihn alternativ aus?  Nintendo Wii.

9.3 Undo Es ist schwierig eine Geste / Direkte Manipulation rückgängig zu machen, wenn sie einmal ausgeführt wurde. Undo Button anbieten? Undo Geste anbieten?  Undo ist häufig nur für den letzten Ausführungsschritt implementiert. Vorbereitungsschritte (z.B. Multiselektion) gehen verloren.

States and Modes Gestenbasierte Interfaces sind in der Regel modeless. 9.3 States and Modes Gestenbasierte Interfaces sind in der Regel modeless. Problem: Modi müssen erkennbar sein. Cursor fehlt! Modi müssen gewechselt werden können. Welche Geste gilt in welchem Modus?

Angemessene Gesten anbieten 9.3 Angemessene Gesten anbieten Wie findet man die richtigen Gesten? Regel: Die Komplexität der durchzuführende Geste sollte der durchzuführenden Arbeitsaufgabe entsprechen. Möglichkeit (bei einfachen Tasks): Aufgabe analysieren  Angemessene Geste auswählen. Möglichkeit: Aufgabe beschreiben. Leute fragen, welche Geste sie dazu ausführen würden. Möglichkeit: Geste anbieten, Leute fragen, welche Aufgabe /Funktion sie mit der Geste assoziieren würden.

Design von Touch und Gesten Interfaces 9.3 Design von Touch und Gesten Interfaces Regeln für ergonomische Bewegung: Äußere Positionen vermeiden: keine Überstreckung / Dehnung Ständige Wiederholungen vermeiden Muskeln Gelegenheit geben sich zu entspannen Entspannte Haltung ermöglichen Statische Haltungen vermeiden Externe oder interne Krafteinwirkung auf Gelenke vermeiden

Design: Finger und Hände 9.3 Design: Finger und Hände Fingerdurchmesser: 16 – 20 mm Fingerspitzen: 8-10 mm Gewöhnlich wird die Fingerfläche benutzt: 10-14 mm Ziele sollten dem angemessen sein Lange oder künstliche Fingernägel sind ein Problem für die meisten Touchscreens 7-10% der Erwachsenen Bevölkerung sind Linkshänder

Design: Größe von Touchzielen 9.3 Design: Größe von Touchzielen Touch Targets sollten nicht kleiner als 1 cm im Durchmesser sein. (1cm*1cm bei rechteckigen Zielen) Berechnung der Zielgröße in Pixeln: Target = targetbreite in cm * screenbreite in pxls / screenbreite in cm

Design: Überdeckung durch die Hand 9.3 Design: Überdeckung durch die Hand Die eigene Hand verdeckt Teile des Bildschirms bei Touchinterfaces.  Niemals wichtige Informationen wie Feedback, Anweisungen, Bezeichnungen, Untermenüs unterhalb eines Touchziels platzieren!

Design: Größe von Touchzielen 9.3 Design: Größe von Touchzielen Target aware pointing: Das System verwendet Informationen über den Kontext der berührten Stelle, der Aufgabe und des aktuellen Zustands um zu berechnen, was der Benutzer treffen wollte.  z.B.Smart Pointing Iceberg tip: Die Visualisierung ist kleiner das Touch Ziel  der Benutzer zielt genauer

9.4 Tables und Walls

Probeme bei Touch Tables 9.4 Probeme bei Touch Tables Man sitzt um den Tisch verteilt.  Es gibt keine gemeinsame Richtung aus der man auf die Artefakte blickt. Lösung : Interface muss es erlauben Objekte in beliebige Richtungen drehen zu können.  Die Reichweite für direkte Interaktion mit den Objekten beschränkt sich auf den eigenen Greifraum.  Man benötigt zusätzlichen Platz für die Ablage und Benutzung weiterer Eingabegeräte: Tastatur, Maus

Vorteile bei Touch Tables 9.4 Vorteile bei Touch Tables Man sitzt um den Tisch verteilt.  Kommunikation mit anderen ist einfacher (Sichtkontakt)  Man kann Dinge auf dem Tisch abstellen  Interaktive Erweiterungen, sog. „Tangibles“ benutzen Z.B. Slap Widgets

Tangibles: Slap Widgets 9.4 Tangibles: Slap Widgets

Probleme bei Interactive Walls 9.4 Probleme bei Interactive Walls Man steht vor der Wand Je nach Entfernung sieht man nur Teile des Interfaces In Interaktionsreichweite ist der Sichtbereich begrenzt: Feedback oder Meldungen erscheinen dann häufig außerhalb des wahrgenommenen Bereichs Man benötigt Platz/Ort für die Ablage zusätzlicher Eingabegeräte Bei längerer Interaktion ermüdet man schneller als am Table Statische Toolbars müssen jedes mal erlaufen werden.

Vorteile bei Interactive Walls 9.4 Vorteile bei Interactive Walls Man steht vor der Wand Es gibt eine gemeinsame Ausrichtung der Objekte für alle Teilnehmer Teilnehmeranzahl kann größer sein als bei Tables Der direkte Interaktionsbereich ist größer als bei Tables. Alle Objekte können erlaufen werden.

Multiuser Interfaces Single Display Groupware: SGD 9.5 Multiuser Interfaces Single Display Groupware: SGD Mehrere Benutzer teilen sich das Display um gemeinsam daran zu Arbeiten. Jeder Benutzer hat einen eigenen Eingabekanal (Maus und Keyboard). Das Interface kann verschiedene Kanäle gleichzeitig verarbeiten.

9.5 Multiuser Interfaces Problem: Ein Touch Interface ist im Prinzip nur ein einziger Kanal. Sollen mehrer Benutzer damit arbeiten, müssen diese unterschieden werden können oder können nur nacheinander Arbeiten (social protocol). Social Protocol: Man unterbricht den anderen nicht absichtlich, sondern schaut, wann man problemlos Arbeiten kann. (Bei großen Wänden schwierig)

9.5 Multiuser Interfaces Benutzer zu unterscheiden ermöglicht es Interaktionsprozesse in kleinere Interaktionstasks zu zerlegen und dem richtigen Prozess zuzuordnen.  Diamond Touch: Unterschiedliche Benutzer haben erzeugen unterscheidlichen kapazitiven Wiederstand Andere Idee: Kamera erkennt Fingerandrücke. Momentan Handformen  RFIDs? Farbige Handschuhe?

9.5 Diamond Touch

9.5 Diamond Touch

9.5 Multiuser Interfaces Benutzerunterscheidung durch Biometrische Analyse von Touches  ausprobiert: eher schlechte Ergebnisse ohne Tiefeninfo (z-koordinate) Benutzer sind unterschiedlich groß (Eintauchwinkel), Touchen unterschiedlich schnell . Touchprofil wird erlernt und wiedererkannt.  Anderer Ansatz: Das Interface bietet die Möglichkeit zur Zerlegung von Touchprozessen in einzelne Tasks. Jeder Prozess wird mit einer ID versehen und dem Benutzer angezeigt.  Ermöglicht die Verteilung eines Interaktionsprozesses auf verschiedene Benutzer.

Multiuser Interfaces Prototyp: 9.5 Multiuser Interfaces Prototyp: Koppelung der Kinect-Benutzerunterscheidung mit der feineren Berührungssensorik der Wand Kinect Live-Bild Touch-Sensor: <Log ID="805" Type="Action"> <Title>Preview of Move-Action (164)</Title> <Timestamp>1312286224142</Timestamp> <Categories> <Category>Preview</Category> … <Position> <X>5152.0</X> <Y>5744.0</Y> </Position> <Action> <Actiontype>Move</Actiontype> <Identifier>164</Identifier> <Step>Preview</Step> </Action> <User> <UserID>2</UserID> </User> </Log>

Touch und Gesten Interfaces 9 Touch und Gesten Interfaces Vielen Dank...