Was zeichnet moderne Computeranwendungen aus? · Wolfgang Büschel, Ulrike Kister, Ricardo Langner, Martin Spindler, Sophie Stellmach, André Viergutz, Ulrich von Zadow . Prof. Dr

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/

http://mt.inf.tu-dresden.de/mitarbeiter/waehner/

http://mt.inf.tu-dresden.de/mitarbeiter/mitschick/

http://mt.inf.tu-dresden.de/mitarbeiter/bueschel/

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

http://www.trendhunter.com/trends/my-day-electronic-paper-umbrella

http://www.pranavmistry.com/projects/sixthsense/


10

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

Gerätevielfalt Eingabe – Interaktionsgeräte und -stile

http://www.mg.co.za/articlepage.aspx?area=/breaking_news/breaking_news__international_news/&articleid=265991


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


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


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


Anoto Technologie

17


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


19

Multi-User/Multi-Pen Malanwendung


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


Digital Paper Prototyping – [Masterarbeit Hallstein, 2010]

21

Anwendung: Digital Paper Prototyping


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


– 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]


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


Interactive Guides – Objektgruppierungshilfslinien

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

27



– Ausrichtung von Objekten – Stellvertreterkonzept

28



– Pixelpräzise bimanuale Objektpositionierung entlang der Guides

29




3. Multitouch & Stifteingabe


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

Motivation Node-Link-Diagramme


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

34

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


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


36

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


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


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


Resultate


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


Creating nodes: Tapping , Sketching and Copying

Creating edges: Sketching, Tapping and Dragging

Selecting & moving nodes: Tapping, encircling, dragging

41

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

Das final implementierte Gestenset


Beispielanwendung UML-Diagramme

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


[Heydekorn et al. M&C 2010]

44

Architektur zur Gestenerkennung (Multitouch, Stifte, Gesten)

4. Gestensteuerung


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


Gestensteuerung mit mobilen Endgeräten

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

Tangible Magic Lenses


Das Konzept

50


Related Work

51

Chameleon [Fitzmaurice 1993]

metaDESK [Ullmer & Ishii 1997]


Related Work: Spatially Aware Tangible Displays

Foldable Interactive Displays [Lee, Hudson, Tse 2008]

SecondLight [Izadi et al. UIST2008]

Paper Windows [Holman et al. CHI2005]


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

Volumetrisch Geschichtet Zoombar Zeitabhängig


Geschichteter Informationsraum


Zoombarer Informationsraum


Zeitabhängiger Informationsraum


57

Volumetrischer Informationsraum


Erweiterung um Annotationstechniken


Annotationen Thumbnails Höhenindikator

Annotation und Navigation [Spindler & Dachselt ITS '09]

59


Interaktionsvokabular [Spindler et al. ITS '10]

Translation Rotation Einfrieren Gesten

Direktes Zeigen Werkzeugkasten Metapher

Visuelles Feedback

Multiple Views


Anwendungsbeispiel Informationsvisualisierung

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


62

Technischer Ansatz


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


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


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


Design Space: 3D Scene

67

Global 3D Scene

Visible Part on Tabletop


Concept of Tangible Windows


Tangible Windows [Spindler et al. ITS 2012]

69


Tangible Windows [Spindler et al. ITS 2012]

70


Tangible Magic Lens Interaction – Demonstrationen

Ausblick


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


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


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


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

http://www.pranavmistry.com/projects/sixthsense/

Documents

Was zeichnet moderne Computeranwendungen aus? · Wolfgang Büschel, Ulrike Kister, Ricardo Langner, Martin Spindler, Sophie Stellmach, André Viergutz, Ulrich von Zadow . Prof. Dr