Was zeichnet moderne Computeranwendungen aus?

Transkript

1 Was zeichnet moderne Computeranwendungen aus? Natürlich(e) effektive Mensch-Computer-Interaktion! Vorlesung Forschungslinie 17. Juni 2013 Prof. Dr.-Ing. Raimund Dachselt INTERACTIVE MEDIA LAB DRESDEN, Germany

2 Wolfgang Büschel, Ulrike Kister, Ricardo Langner, Martin Spindler, Sophie Stellmach, André Viergutz, Ulrich von Zadow TU Dresden Faculty of Computer Science Professorship Multimedia-Technology Prof. Dr. R. Dachselt, Dr. A. Mitschick, Dr. M. Frisch, Dr. A. Berndt, Paymahn Moghadasian Ramona Behling, Udo Wähner

3 User Interface Lab

4 Modern Human Computer Interaction Interactive Information Visualization Semantic Web Technologies Music Informatics 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)

5 Metaphorical Gestures Zoomable UIs Tilt gestures Tangibles Multitouch Foot Input Exploration of and Interaction with Rich Media & Information Spaces Tangible Windows Gaze control Magic Lenses Freehand gestures Pen Input

6 Mensch Computer - Interaktion

7 Evolution 7

8 Gerätevielfalt Ausgabe Displays 8

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

10 Gerätevielfalt Eingabe Interaktionsgeräte und -stile 10

11 Gerätevielfalt Eingabe Interaktionsgeräte und -stile 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

12 Frühe und einflussreiche Arbeiten Memex (1945), Sketchpad (1963) VIDEOPLACE An Artificial Reality Krueger, Gionfriddo, Hinrichsen Direct manipulation interfaces Hutchins, Hollan & Norman The DigitalDesk calculator: tangible manipulation on a desk top display Pierre Wellner The computer for the 21st century Mark Weiser

13 Neue Generation von Interaktionsstilen 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

14 Post-WIMP oder Reality-based Interaction [Jacob et al. CHI 08] 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 14

15 2. Multitouch 4. Gestensteuerung Neuartige Interfacekonzepte 1. Stiftinteraktion 3. Multitouch & Stifteingabe 5. Tangible Magic Lenses

16 1. Stiftinteraktion

17 Anoto Technologie 17

18 Interaktion mit Digitalen Stiften & Papier Natürliche Interaktion mit ubiquitärem Stift & Papier Malen, Zeichnen, Skizzieren, Schreiben Nutzung von digitalem Papier und digitalen Stiften (Anoto-Technologie) 18

19 Multi-User/Multi-Pen Malanwendung 19

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

21 Anwendung: Digital Paper Prototyping Digital Paper Prototyping [Masterarbeit Hallstein, 2010] 21

22 Anwendung: Interaktion mit Virtuellen Welten 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 Aussparungen Gummibandaufhängung 22

23

24 2. Multitouch-Interaktion

25 SimMed [von Zadow et al. CHI 2013] 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

26 Graphische Layouts mit Grids & Guides Grids & Guides [Frisch et al. CHI 2011] Layoutunterstützung für Grafikeditoren Präzise festlegbare interaktive Gitter Multitouch-Guides zur flexiblen Objektpositionierung 26

27 Graphische Layouts mit Grids & Guides Interactive Guides Objektgruppierungshilfslinien (Linien, Kreise, Kurven ) Anordnen & Skalieren von Objekten 27

28 Graphische Layouts mit Grids & Guides Ausrichtung von Objekten Stellvertreterkonzept 28

29 Graphische Layouts mit Grids & Guides Pixelpräzise bimanuale Objektpositionierung entlang der Guides 29

30 Graphische Layouts mit Grids & Guides 30

31 3. Multitouch & Stifteingabe

32 Motivation Node-Link-Diagramme 32

33 Motivation Node-Link-Diagramme 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

34 Editieren von Node-Link-Diagrammen [Frisch et al. Diagrams 2010] Kombination aus Multitouch- und Stiftgesten auf interaktiven Displays zum Editieren von Diagrammen 34

35 Methode: Von Nutzern vorgeschlagene Gesten [Wobbrock et al. 09] Anfangssituation Zielsituation 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

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

37 Resultate Erste Wahl bei der Interaktionsmodalität Einhändige Interaktion: 141 Fälle (59%) Stift/Hand-Interaktion: 68 Fälle (29%) Bimanuale Interaktion: 28 Fälle (12%) 37

38 Resultate 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

39 Resultate 39

40 Resultate Die Gestensammlung (46 Gesten) Create node Create undirected edge Create directed edge Create two directed edges Change type of edge Copy sub-graph Select node(s) Move node(s) Scaling & Zooming Delete nodes & edges

41 Das final implementierte Gestenset Creating nodes: Tapping, Sketching and Copying Creating edges: Sketching, Tapping and Dragging Selecting & moving nodes: Tapping, encircling, dragging 41

42 Das final implementierte Gestenset 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

43 Beispielanwendung UML-Diagramme [Frisch et al. ITS 2009] [Frisch et al. Diagrams 2010] [Heydekorn et al. CHI 2010] 43

44 Architektur zur Gestenerkennung (Multitouch, Stifte, Gesten) [Heydekorn et al. M&C 2010] 44

45 4. Gestensteuerung

46 Gestensteuerung mit mobilen Endgeräten 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

47 Gestensteuerung mit mobilen Endgeräten

48 5. Tangible Magic Lenses

49 Tangible Magic Lenses 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

50 Das Konzept 50

51 Related Work Chameleon [Fitzmaurice 1993] metadesk [Ullmer & Ishii 1997] 51

52 Related Work: Spatially Aware Tangible Displays Foldable Interactive Displays [Lee, Hudson, Tse 2008] Paper Windows [Holman et al. CHI2005] SecondLight [Izadi et al. UIST2008]

53 Klassifikation von Informationsräumen [Spindler et al. M&C '09] Geschichtet Zoombar Zeitabhängig Volumetrisch 53

54 Geschichteter Informationsraum 54

55 Zoombarer Informationsraum 55

56 Zeitabhängiger Informationsraum 56

57 Volumetrischer Informationsraum 57

58 Erweiterung um Annotationstechniken

59 Annotation und Navigation [Spindler & Dachselt ITS '09] Annotationen Thumbnails Höhenindikator 59

60 Interaktionsvokabular [Spindler et al. ITS '10] Translation Einfrieren Rotation Gesten Direktes Zeigen Werkzeugkasten Metapher Visuelles Feedback Multiple Views 60

61 Anwendungsbeispiel Informationsvisualisierung [Spindler et al. InfoVis 2010] [Spindler et al. ITS 2010] 61

62 Technischer Ansatz 62

63 Technische Umsetzung 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

64 Technische Umsetzung 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

65 Tangible User Interface Palettes [Spindler, Hauschild & Dachselt ITS '10] 65

66 Application for 3D Interaction [Spindler et al. ITS 2012] How can 3D interaction benefit from tangible displays with head input? 66

67 Design Space: 3D Scene Visible Part on Tabletop Global 3D Scene 67

68 Concept of Tangible Windows

69 Tangible Windows [Spindler et al. ITS 2012] 69

70 Tangible Windows [Spindler et al. ITS 2012] 70

71 Tangible Magic Lens Interaction Demonstrationen 71

72 Ausblick

73 Vielfältige Interaktionsmodalitäten 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

74 Herausforderungen 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 74

75 Herausforderungen und Ziele 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

76 Entwicklungsprozess User Interface Engineering Idea & Sketching Phase Ideas, Sketches, Mockups Play around, Explore, Discover Sketches, Storyboards, Low-fidelity Prototypes Can be alternative to, is part of Domain Knowledge Analysis Phase Requirements Usage, Tasks, Context Usability Goals Design & Test Phase Design Prototyping High-fidelity Prototypes Development Phase Detailed UI-Design Implementation Product Evaluation Field studies Evaluation of Mockups & Models Design Reviews Evaluation of Requirements Usability Tests All activities and phases: - iterative - user-centered - participatory - evaluated/tested Deployment / Integration Phase 76

77 DANKE