9 Touch- und Gesteninterfaces

66
Dipl. Inform. Marc Turnwald Informations- und Technikmanagement Institut für Arbeitswissenschaft, Ruhr-Universität Bochum www.imtm-iaw.rub.de Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 Touch und Gesten – 23.01.2011 Hard- und Software-Ergonomie 9 Touch- und Gesteninterfaces 9

description

9. 9 Touch- und Gesteninterfaces. 9. 7 Touch und Gesten - Inhalt. 7.1Geschichte und Definitionen 7.2Technik 7.3Eigenschaften 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): - PowerPoint PPT Presentation

Transcript of 9 Touch- und Gesteninterfaces

Dipl. Inform. Marc TurnwaldInformations- und TechnikmanagementInstitut für Arbeitswissenschaft, Ruhr-Universität Bochumwww.imtm-iaw.rub.de

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 1

Touch und Gesten – 23.01.2011

Hard- und Software-Ergonomie

9 Touch- und Gesteninterfaces

9

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 2

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 4

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.

9.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 5

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)

9.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 6

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”)

9.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 7

Andere populäre Beispiele9.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 8

Andere populäre Beispiele9.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 9

Entwicklung von Touch Interfaces9.1

1971: Elograph ,Erste Touchtechnologie, Samuel C. Hurst

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 10

Entwicklung von Touch Interfaces9.1

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 11

Entwicklung von Touch Interfaces9.1

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)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 12

Entwicklung von Touch Interfaces9.1

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 13

HP 1509.1

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 14

Entwicklung von Touch Interfaces9.1

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 15

Entwicklung von Touch Interfaces9.1

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)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 16

Entwicklung von Touch Interfaces9.1

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 17

Weniger bekannte Entwicklungen9.1

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)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 18

Warum sind einige Geräte erfolgreich und andere nicht?

9.1

Unterschiede in der Sensorik / Darstellung Unterschiede im allgemeinen BedienkonzeptUnterschiede bei der Auswahl von zum gewählten

Bedienkonzept passenden Anwendungen und Funktionen. (und umgekehrt)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 19

Warum sind einige Geräte erfolgreich und andere nicht?

9.1

Später mehr...

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 20

Technik9.2

Basic components of any gestural system:

Sensor Comparator Actuator

Environment

Input Output

Feedback

Disturbances

Measured by alerts drives

affects

affect

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 21

Sensoren9.2

Was Sensoren messen können:

1. Druck: Etwas wird gedrückt oder „drauf gestellt“

2. Licht: Kamera, Photodetektor, Infrarot-Muster

3. Abstand/Anwesenheit: Ist ein Objekt da? Z.B. Infrarot

4. Geräusche: Mikrophon

5. Raumlage: Winkel im Vergleich zu einem virtuellen Horizont/Koordinate, Lagesensoren

6. Bewegung: Microwellen, Ultraschall (Bewegung und Geschwindigkeit), Infrarot-Muster

7. Position und Richtung: GPS, Kamera, Triangulation der Abstände

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 22

Touchevents9.2

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 23

Resistive Touchscreens9.2

In der Regel aufgrund der Geometrie nur Single Touch.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 24

Kapazitive Touchscreens9.2

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 25

Kapazitive Touchscreens9.2

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 26

Modlab: Optical sensory9.2

Je nach Anzahl der eingesetzten Kameras Single oder Multi-Touch Erkennung möglich.2 Kameras SingleTouch

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 27

Diffused Illumination9.2

- Multitouch Erkennung

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 28

Frustrated Total Internal Reflection9.2

- Multitouch Erkennung

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 29

Andere Sensorik:9.2

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 30

Andere Sensorik:9.2

Kinect:

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 31

9.3 Eigenschaften von Gesten9.3

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 32

Pro und contra Gesten basierte Interfaces9.3

+ 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 33

Generelle Attribute von Gesten9.3

1. Vorhandensein (Präsenz)

2. Dauer

3. Position

4. Bewegung

5. Druck

6. Größe der Geste

7. Richtung

8. Verwendete/Vorhandene Objekte

9. Anzahl der Touches / Kombination der Touches

10.Sequenzen

11.Anzahl der Teilnehmer

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 34

Eigenschaften von „guten“ gesten-basierten Interfaces

1. Discoverable

2. Trustworthy

3. Responsive

4. Appropriate (Situation, Kultur, Kontext)

5. Meaningful (Geste hat eine Bedeutung für die Person)

6. Smart/Clever

7. Playful

8. Pleasureable (Feedback sollte den Sinnen gefallen)

9.3

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 35

Eigenschaften von „guten“ gesten-basierten Interfaces

Beispielvideo: Bergbaumuseum Bochum

9.3

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 36

Eigenschaften von „guten“ gesten-basierten Interfaces

BTW: Bergbaumuseum Bochum

9.3

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 37

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 38

Cursor9.3

• 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 39

Cursor-Offset9.3

Beispiel:Fixes Offset

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 40

Hover und mouse-over events9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 41

Double-Click9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 42

Rechtsklick9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 43

Cut and Paste9.3

• 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)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 44

Multi-Selektion9.3

• 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 45

Default Buttons9.3

• Kein Return.• Wie mache ich den Defaultbutton kenntlich?• Wie löse ich ihn alternativ aus? Nintendo Wii.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 46

Undo9.3

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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 48

Angemessene Gesten anbieten9.3

Wie findet man die richtigen Gesten?

Regel: Die Komplexität der durchzuführende Geste sollte der durchzuführenden Arbeitsaufgabe entsprechen.

1. Möglichkeit (bei einfachen Tasks): Aufgabe analysieren Angemessene Geste auswählen.

2. Möglichkeit: Aufgabe beschreiben. Leute fragen, welche Geste sie dazu ausführen würden.

3. Möglichkeit: Geste anbieten, Leute fragen, welche Aufgabe /Funktion sie mit der Geste assoziieren würden.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 49

Design von Touch und Gesten Interfaces9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 50

Design: Finger und Hände9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 51

Design: Größe von Touchzielen9.3

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 52

Design: Überdeckung durch die Hand9.3

Die eigene Hand verdeckt Teile des Bildschirms bei Touchinterfaces.

Niemals wichtige Informationen wie Feedback, Anweisungen, Bezeichnungen, Untermenüs unterhalb eines Touchziels platzieren!

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 53

Design: Größe von Touchzielen9.3

• 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 54

Tables und Walls9.4

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 55

Probeme bei Touch Tables9.4

• 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 56

Vorteile bei Touch Tables9.4

• 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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 57

Tangibles: Slap Widgets9.4

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 58

Probleme bei Interactive Walls9.4

• Man steht vor der WandJe 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.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 59

Vorteile bei Interactive Walls9.4

• Man steht vor der WandEs gibt eine gemeinsame Ausrichtung der Objekte für

alle TeilnehmerTeilnehmeranzahl kann größer sein als bei TablesDer direkte Interaktionsbereich ist größer als bei Tables.

Alle Objekte können erlaufen werden.

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 60

Multiuser Interfaces9.5

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 61

Multiuser Interfaces9.5

• 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)

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 62

Multiuser Interfaces9.5

• 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?

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 63

Diamond Touch 9.5

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 64

Diamond Touch9.5

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 65

Multiuser Interfaces9.5

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

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 66

Multiuser Interfaces9.5

• Prototyp:

Koppelung der Kinect-Benutzerunterscheidung mit der feineren Berührungssensorik der Wand

• <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-Sensor: Kinect Live-Bild

Vorlesung Hard- und Software-Ergonomie, WS 2011/2012 67

Touch und Gesten Interfaces

• Vielen Dank...

9