IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

23
IEEE InfoVis 2017 • Phoenix, Arizona, USA VISTILES Coordinating and Combining Co-located Mobile Devices for Visual Data Exploration Ricardo Langner, Tom Horak, Raimund Dachselt

Transcript of IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

Page 1: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

IEEE InfoVis 2017 • Phoenix, Arizona, USA

VISTILESCoordinating and Combining Co-locatedMobile Devices for Visual Data ExplorationRicardo Langner, Tom Horak, Raimund Dachselt

Page 2: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

Visualization Workplaces

2

?

Page 3: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

3

In a Nutshell VISTILESVisualizations for mobile devices

Page 4: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

4

Why Mobile Devices?

§ Combination of multiple devices

§ Support basic collaboration

§ Ad-hoc and spontaneous use

§ Make use of spatial capabilities,physical arrangement

Everyday devices Availability Advanced Quantity

Display size

Page 5: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

5

HCI Research on Mobile Devices

HuddleLamp

Device Localization

Dynamic TilingDisplay[Li and Kobbelt,2012]

[Rädle, Jetter,Marquardt, Reiterer, andRogers, 2014]

Interactions Techniques

Cross-DeviceInteraction[Marquardt, Hinckley, and Greenberg, 2012]

Proximity Regions Around Mobile Devices[Kray, Rohs, Hook, and Kratz, 2008]

Use Cases

Pass-Them-Around[Lucero, Holopainen, and Jokela, 2011]

Dynamic Duo[Piazza, Fjeld, Ramos, Yantac, and Zhao, 2013]

Page 6: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

6

Mobile Devices for InfoVis

Multiple Mobiles

Thaddeus[Wozniak, Lischke, Schmidt, Zhao, Fjeld, 2014]

Is Two Enough?[Plank, Jetter, Rädle, Klokmose, Luger, and Reiterer, 2017]

Expanding Selection

Single Mobile Device

TouchViz[Drucker, Fisher, Sadana, Herron, and schraefel, 2013]

[Sadana and Stasko, 2016]

MCV for Tablets[Sadana and Stasko, 2016]

Mobile + 2nd Display

Tangible Views[Spindler, Tominski, Schumann, and Dachselt, 2010]

GraSp[Kister, Klamka, Tominski, and Dachselt, 2017]

Display Ecologies[Chung, Sarang, North, and Chen, 2015] VisTiles

Page 7: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

VISTILESVisualization Tiles

Visualizations that are distributed and synchronized across multiple mobile devices=

Page 8: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

What Is a Tile?

§ Two general types:

§ Single visualization per device

8

Data tile Visualizes datausing a specific visual representation

Control tile Display further elements of the UI

Page 9: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

View Distribution

Basic approach: assign views to tiles manually9

Page 10: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

Physical Workspace

§ Grouping mechanism§ Easy way to control coordinations§ Good for basic collaboration

and parallel work

10

§ User-defined arrangement§ Adapt to different situations§ Address concepts of

"intelligent use of space" and "space to think"

Page 11: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

Physical Workspace

§ Grouping mechanism§ Easy way to control coordinations§ Good for basic collaboration

and parallel work

11

§ User-defined arrangement§ Adapt to different situations§ Address concepts of

"intelligent use of space" and "space to think"

“ How we manage the spatial arrangement of itemsaround us, is not an afterthought; it is an integral partof the way we think, plan and behave ”

“Whether we are aware of it or not, we are constantlyorganizing and re-organizing our workplace toenhance performance ”

⏤ David Kirsh, 1995: The intelligent use of space.

Page 12: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

12

Use of Device Combinations

Display ExtensionExpand a visualizationacross tiles

Page 13: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

13

Use of Device Combinations

Alignment of Visualizations

Page 14: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

14

Use of Device Combinations

Rearrangement ofData Items

Page 15: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

15

Use of Device Combinations

Overview & DetailTiles of the workspaceindicate the position and sizeof viewports

Page 16: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

16

Use of Device Combinations

Dynamic Offloadingof UI Components

Page 17: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

17

Use of Device Combinations

Filter-by-viewportZooming and panning one ofthe views filters offscreen dataitems

Page 18: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

18

Use of Device Combinations

§ Spatial movement: adjust visualization parameters continuously

Page 19: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

19

Manage Adaptations and Combinations

§ Several options

§ Sidebar showsavailable options:“application suggests,users confirm”

Page 20: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

20

Prototype Implementation

Source code freely available at Github: https://github.com/imldresden/vistiles

External Tracking System

Server

Mobile Devices

§ Application Logic§ Process tracking data

§ Show D3-based visualization§ Forward input events to server

Page 21: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

21

Outlook and Open Research Questions

How do people arrange devices and make use of the space?

How many devices are needed or can be handled?

Does it help to use a physical display for each visualization?

Page 22: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

22

Conclusion

§ VisTiles allows to interact with visualizationsthat are distributed and synchronizedacross multiple mobile devices

§ New class of InfoVis interfaces based onmobile devices

§ Mobile devices offer great potential for manyvisualization applications

Page 23: IEEE InfoVis '17 Talk: VisTiles: Coordinating and ...

Contact: [email protected]

Thank you.

Ricardo Langner, Tom Horak, Raimund Dachselt

Githubhttps://github.com/imldresden/vistiles

VISTILESCoordinating and Combining Co-locatedMobile Devices for Visual Data Exploration

Project Websitehttps://imld.de/vistiles