Was zeichnet moderne Computeranwendungen aus? · Wolfgang Büschel, Ulrike Kister, Ricardo Langner,...

INTERACTIVE MEDIA LAB DRESDEN, Germany

Prof. Dr.-Ing. Raimund Dachselt

Was zeichnet moderne Computeranwendungen aus?

Vorlesung Forschungslinie 17. Juni 2013

Natürlich(e) effektive Mensch-Computer-Interaktion!

Wolfgang Büschel, Ulrike Kister, Ricardo Langner, Martin Spindler, Sophie Stellmach, André Viergutz, Ulrich von Zadow

Prof. Dr. R. Dachselt, Dr. A. Mitschick, Dr. M. Frisch, Dr. A. Berndt, Paymahn Moghadasian Ramona Behling, Udo Wähner

TU Dresden – Faculty of Computer Science

Professorship Multimedia-Technology http://www.imld.de/

User Interface Lab

Design, create, build and evaluate Natural User Interfaces Concepts for the future of natural and seamless interaction

– with rich information spaces from several application domains – in environments with multiple displays and combined input modalities

– with a focus on interactive surfaces (tabletops, tablets, walls)

Modern Human Computer Interaction Interactive Information Visualization

Semantic Web Technologies Music Informatics

Freehand gestures Pen Input

Magic Lenses

Tangible Windows

Tangibles

Gaze control

Multitouch

Tilt gestures

Metaphorical Gestures Zoomable UIs

Exploration of and Interaction with Rich Media & Information

Spaces Foot Input

Mensch

Computer - Interaktion

7

Evolution

© 2013, Raimund Dachselt, TU Dresden

8

Gerätevielfalt Ausgabe – Displays

© 2013, Raimund Dachselt, TU Dresden 9

Gerätevielfalt Ausgabe – Displays

Kleine (mobile) Geräte große (öffentliche) Displays Displaylösungen everywhere, every size

© 2013, Raimund Dachselt, TU Dresden

10

Gerätevielfalt Eingabe – Interaktionsgeräte und -stile

© 2013, Raimund Dachselt, TU Dresden

Interaktion mit/über – Tastatur, Maus, Joystick – Click-Wheel, Jog Dials, NaviPads… – Passive/Aktive Stifte und Zeigegeräte – Touch Pads, (Multi-)Touchscreens – 3D-Eingabegeräte – Bewegte oder beschleunigte Objekte (Wiimote…) – Vibrotaktile Interaktion, Haptik, Kraftrückkopplung – Gesten und Körperbewegung (Hände, Füße) – Muskeln, Tangibles – Sprache – Augensteuerung – Denken (Brain Computing)

11

Gerätevielfalt Eingabe – Interaktionsgeräte und -stile

© 2013, Raimund Dachselt, TU Dresden

Memex (1945), Sketchpad (1963)… VIDEOPLACE – An Artificial Reality

Krueger, Gionfriddo, Hinrichsen. 1985

Direct manipulation interfaces Hutchins, Hollan & Norman. 1987

The DigitalDesk calculator: tangible manipulation on a desk top display Pierre Wellner. 1991

The computer for the 21st century Mark Weiser. 1999

12

Frühe und einflussreiche Arbeiten

© 2013, Raimund Dachselt, TU Dresden

Post-WIMP User Interfaces – Multimodale Benutzungsschnittstellen – 3D User Interfaces (Virtual, Augmented, Mixed Reality) – Wearable User Interfaces [Mann 1998] – Tangible User Interfaces

[Fitzmaurice et al. 1995, Ishii & Ullmer 1997] – Natural User Interfaces – Organic User Interfaces [Vertegaal & Poupyrev 2008] – Reality-based Interaction [Jacob et al. CHI 08] – …

13

Neue Generation von Interaktionsstilen

© 2013, Raimund Dachselt, TU Dresden

Aspekte unserer realen Welt – Naïve Physics

Menschen besitzen gutes Basiswissen über physikalische Welt

– Body Awareness and Skills Menschen sind sich ihres Körpers bewusst und besitzen Fähigkeiten zu dessen Kontrolle und Koordination

– Environment Awareness and Skills Menschen nehmen ihre Umgebung wahr und besitzen Fähigkeiten zum Verhandeln, Manipulieren und Navigieren

– Social Awareness and Skills Menschen nehmen Mitmenschen in ihrer Umgebung wahr (meistens) und besitzen Fähigkeiten zur Interaktion mit ihnen

Post-WIMP oder Reality-based Interaction [Jacob et al. CHI 08]

14

1. Stiftinteraktion

2. Multitouch

3. Multitouch & Stifteingabe

4. Gestensteuerung

5. Tangible Magic Lenses

Neuartige Interfacekonzepte

1. Stiftinteraktion

© 2013, Raimund Dachselt, TU Dresden

Anoto Technologie

17

© 2013, Raimund Dachselt, TU Dresden

Natürliche Interaktion mit ubiquitärem Stift & Papier – Malen, Zeichnen, Skizzieren, Schreiben… – Nutzung von digitalem Papier und digitalen Stiften

(Anoto-Technologie)

18

Interaktion mit Digitalen Stiften & Papier

© 2013, Raimund Dachselt, TU Dresden

19

Multi-User/Multi-Pen Malanwendung

© 2013, Raimund Dachselt, TU Dresden 20

Pictable – Fotoverwaltung [Teamprojekt Klum, Thurm & Hu, 2008]

© 2013, Raimund Dachselt, TU Dresden

Digital Paper Prototyping – [Masterarbeit Hallstein, 2010]

21

Anwendung: Digital Paper Prototyping

© 2013, Raimund Dachselt, TU Dresden

Digitale Stift- und Papierinteraktion in VR-Umgebungen – [Stellmach et al. M&C 2010] – Navigation und Interaktion, GUI auf Papier gedruckt – Reduzierung von GUIs in der 3D-Welt

22

Anwendung: Interaktion mit Virtuellen Welten

Aussparungen Gummiband-aufhängung

2. Multitouch-Interaktion

© 2013, Raimund Dachselt, TU Dresden

– SimMed adresses significant gap in medical education – Hybrid 2D/VR system – Study suggests significant learning effect – Results support hypothesis: Full realism isn’t necessary

25

SimMed [von Zadow et al. CHI 2013]

© 2013, Raimund Dachselt, TU Dresden

Grids & Guides – [Frisch et al. CHI 2011] – Layoutunterstützung für

Grafikeditoren – Präzise festlegbare

interaktive Gitter – Multitouch-Guides zur

flexiblen Objektpositionierung

26

Graphische Layouts mit Grids & Guides

© 2013, Raimund Dachselt, TU Dresden

Interactive Guides – Objektgruppierungshilfslinien

(Linien, Kreise, Kurven…) – Anordnen & Skalieren von Objekten

27

Graphische Layouts mit Grids & Guides

© 2013, Raimund Dachselt, TU Dresden

– Ausrichtung von Objekten – Stellvertreterkonzept

28

Graphische Layouts mit Grids & Guides

© 2013, Raimund Dachselt, TU Dresden

– Pixelpräzise bimanuale Objektpositionierung entlang der Guides

29

Graphische Layouts mit Grids & Guides

© 2013, Raimund Dachselt, TU Dresden 30

Graphische Layouts mit Grids & Guides

3. Multitouch & Stifteingabe

© 2013, Raimund Dachselt, TU Dresden 32

Motivation Node-Link-Diagramme

© 2013, Raimund Dachselt, TU Dresden

Strukturelle Diagramm-Editoren

Oft unflexibel und einschränkend [Damm et al. 2000], [Grundy et al. 2007]

Skizzieren von Diagrammen

Digitale Remodellierung der Inhalte nötig [Chen et al. 2003]

33

Motivation Node-Link-Diagramme

© 2013, Raimund Dachselt, TU Dresden

Kombination aus Multitouch- und Stiftgesten auf interaktiven Displays zum Editieren von Diagrammen

34

Editieren von Node-Link-Diagrammen [Frisch et al. Diagrams 2010]

© 2013, Raimund Dachselt, TU Dresden

Studienteilnehmer (17) führten Gesten aus – Unabhängige Variable: Einhändig | Zweihändig | Stift (Handunterstützung optional)

– Am Anfang freie Wahl der Interaktionstechnik – 14 Diagramm-Editieraufgaben – Fragebögen, Videobeobachtung, Logging

35

Methode: Von Nutzern vorgeschlagene Gesten [Wobbrock et al. 09]

Anfangssituation

Zielsituation

© 2013, Raimund Dachselt, TU Dresden

36

Resultate – Analyse der 658 Gesten [Frisch et al. ITS 2009]

© 2013, Raimund Dachselt, TU Dresden

Einhändige Interaktion: 141 Fälle (59%) Stift/Hand-Interaktion: 68 Fälle (29%) Bimanuale Interaktion: 28 Fälle (12%)

Resultate – Erste Wahl bei der Interaktionsmodalität

37

© 2013, Raimund Dachselt, TU Dresden

Vorrangig einhändige und Stiftbedienung Bimanuale Interaktion für Zoomen, Skalieren, Kopieren

Skizzieren und strukturelles Editieren gleichermaßen Ungewöhnliche Gesten (nicht erkennbar) Dominanz der Desktop-Metaphor

– Teilnehmer fragten nach Buttons und Menüs – Hand auf Hintergrund gelegt zum Moduswechsel (Taste Strg)

38

Resultate

© 2013, Raimund Dachselt, TU Dresden 39

Resultate

© 2013, Raimund Dachselt, TU Dresden

Resultate – Die Gestensammlung (46 Gesten)

Create node Create undirected edge Create directed edge

Create two directed edges Select node(s)

Move node(s) Scaling & Zooming

Copy sub-graph Change type of edge

Delete nodes & edges

© 2013, Raimund Dachselt, TU Dresden

Creating nodes: Tapping , Sketching and Copying

Creating edges: Sketching, Tapping and Dragging

Selecting & moving nodes: Tapping, encircling, dragging

41

Das final implementierte Gestenset

© 2013, Raimund Dachselt, TU Dresden

Deleting diagram elements: Wiping, dragging to off-screen

Changing the type of an edge: “Rake” gesture, sequential crossing

Scaling, zooming and panning : Pinching, multi-finger dragging

42

Das final implementierte Gestenset

© 2013, Raimund Dachselt, TU Dresden 43

Beispielanwendung UML-Diagramme

[Frisch et al. ITS 2009] [Frisch et al. Diagrams 2010] [Heydekorn et al. CHI 2010]

© 2013, Raimund Dachselt, TU Dresden

[Heydekorn et al. M&C 2010]

44

Architektur zur Gestenerkennung (Multitouch, Stifte, Gesten)

4. Gestensteuerung

© 2013, Raimund Dachselt, TU Dresden

Throw & Tilt & Touch – Kopplung: Smartphones & große Displays – [Dachselt & Buchholz, MEIS 2008 & CHI 2009]

Kombination von Interaktionsformen – Wurfgesten zum Transfer von Medien – Diskrete und kontinuierliche Neigegesten

zur Navigation – Zonen-Multitouchbedienung auf Handy

(ohne Sichtkontakt)

46

Gestensteuerung mit mobilen Endgeräten

© 2013, Raimund Dachselt, TU Dresden

Gestensteuerung mit mobilen Endgeräten

5. Tangible Magic Lenses

© 2013, Raimund Dachselt, TU Dresden

Lagebewusste magische Linsen für Tabletopumgebungen – Tangible Interaction [Ishii & Ullmer 97] – Nutzung multipler Displays und der dritten Dimension – Magische Linsen [Bier et al. 1993]

als Fenster für virtuelle 2D/3D Informationsräume – [Spindler et al. M&C '09], [Spindler et al. ITS'09], [Spindler & Dachselt CHI'10]

49

Tangible Magic Lenses

© 2013, Raimund Dachselt, TU Dresden

Das Konzept

50

© 2013, Raimund Dachselt, TU Dresden

Related Work

51

Chameleon [Fitzmaurice 1993]

metaDESK [Ullmer & Ishii 1997]

© 2013, Raimund Dachselt, TU Dresden

Related Work: Spatially Aware Tangible Displays

Foldable Interactive Displays [Lee, Hudson, Tse 2008]

SecondLight [Izadi et al. UIST2008]

Paper Windows [Holman et al. CHI2005]

© 2013, Raimund Dachselt, TU Dresden 53

Klassifikation von Informationsräumen [Spindler et al. M&C '09]

Volumetrisch Geschichtet Zoombar Zeitabhängig

© 2013, Raimund Dachselt, TU Dresden 54

Geschichteter Informationsraum

© 2013, Raimund Dachselt, TU Dresden 55

Zoombarer Informationsraum

© 2013, Raimund Dachselt, TU Dresden 56

Zeitabhängiger Informationsraum

© 2013, Raimund Dachselt, TU Dresden

57

Volumetrischer Informationsraum

© 2013, Raimund Dachselt, TU Dresden

Erweiterung um Annotationstechniken

© 2013, Raimund Dachselt, TU Dresden

Annotationen Thumbnails Höhenindikator

Annotation und Navigation [Spindler & Dachselt ITS '09]

59

© 2013, Raimund Dachselt, TU Dresden 60

Interaktionsvokabular [Spindler et al. ITS '10]

Translation Rotation Einfrieren Gesten

Direktes Zeigen Werkzeugkasten Metapher

Visuelles Feedback

Multiple Views

© 2013, Raimund Dachselt, TU Dresden 61

Anwendungsbeispiel Informationsvisualisierung

[Spindler et al. InfoVis 2010] [Spindler et al. ITS 2010]

© 2013, Raimund Dachselt, TU Dresden

62

Technischer Ansatz

© 2013, Raimund Dachselt, TU Dresden

Tracking Tools 2.0: Rigid Body Tracking System – Position/Orientierung in hoher Präzision – Linsen IDs Multiple Linsen (Views)

Linsen Design – Papier, Pressspanplatte oder Plexiglas (günstig und leicht) – Beliebige Formen: Rechteck, Kreis, Quadrat, … – IR-reflektierende Marker

Perspektivkorrektur

63

Technische Umsetzung

© 2013, Raimund Dachselt, TU Dresden

Client-/ Server-Modell – VRPN (Lage/Orientierung von Linsen) – XML-RPC (Remote Procedure Calls)

Eigener Lens-Server – Tracking von Multiplen Linsen – Gesten-Erkennung – Stift-Interaktion mit Anoto – Offline-Unterstützung

(Mausemulation)

Client: – C#, C++ – OpenGL (Texturen, FBO) – Qt für GUIs

64

Technische Umsetzung

© 2013, Raimund Dachselt, TU Dresden

[Spindler, Hauschild & Dachselt ITS '10]

65

Tangible User Interface Palettes

66

Application for 3D Interaction [Spindler et al. ITS 2012]

How can 3D interaction benefit from tangible displays with head input?

© 2013, Raimund Dachselt, TU Dresden

Design Space: 3D Scene

67

Global 3D Scene

Visible Part on Tabletop

© 2013, Raimund Dachselt, TU Dresden

Concept of Tangible Windows

© 2013, Raimund Dachselt, TU Dresden

Tangible Windows [Spindler et al. ITS 2012]

69

© 2013, Raimund Dachselt, TU Dresden

Tangible Windows [Spindler et al. ITS 2012]

70

© 2013, Raimund Dachselt, TU Dresden 71

Tangible Magic Lens Interaction – Demonstrationen

Ausblick

© 2013, Raimund Dachselt, TU Dresden

Handgesten für 3D-Interaktion – [Franke et al. VR/AR'10] – Bimanuales Arbeiten – Navigation + Manipulation

Blicksteuerung in virtuellen Umgebungen – [Stellmach et al. ETRA '10, AVI '10] … – Gaze-only Interaktion – Synergistische blickbasierte Interaktion

73

Vielfältige Interaktionsmodalitäten

© 2013, Raimund Dachselt, TU Dresden

Grand Challenges – Tracking of input in environments rich of sensoric stimuli – Gesture recognition – Gesture disambiguation (from each other) – What IS an input? (start, end, meaningless gestures, Midas) – Recognition vs. recall – Combination of modalities (alternatively, adaption, synergy) – Efficiency of “natural” interaction care for magic AND efficiency – How to evaluate ubiquitous user interfaces – Appropriateness in particular situations – Social acceptance and implications – …

Herausforderungen

74

© 2013, Raimund Dachselt, TU Dresden

Nahtlose Kombination von Modalitäten – Synergistische Nutzung, kontextabhängig, Adaption

Natürliche, magische UIs mit guter User Experience – Everywhere Interaction, organisch, in Alltagswelten integriert – Neue Formen der Mensch-Computer-Mensch Interaktion

Neue Formen der Evaluation Technologieentwicklung, Tracking, Softwaretechnologien Cool benutzbar produktiv

– Grundlegende und in Studien geprüfte Interaktionstechniken – Anpassung auf Anforderungen konkreter Anwendungsfälle

Entwicklungsprozess User Interface Engineering

75

Herausforderungen und Ziele

© 2013, Raimund Dachselt, TU Dresden

Development Phase

76

Entwicklungsprozess User Interface Engineering

Analysis Phase

Deployment / Integration Phase

Requirements Usage, Tasks, Context

Implementation

Design & Test Phase

Design Prototyping

Detailed UI-Design

Field studies

Evaluation of Mockups &

Models

Design Reviews

Evaluation of Requirements

Usability Tests

Evaluation

Idea & Sketching

Phase Ideas,

Sketches, Mockups

Play around, Explore, Discover

Usability Goals

High-fidelity Prototypes

Product

Domain Knowledge

Sketches, Storyboards, Low-fidelity Prototypes

All activities and phases: - iterative - user-centered - participatory - evaluated/tested

Can be alternative to , is part of

DANKE