Übung zur vorlesung informationsvisualisierungklausur . termin: 05.02.2015, 16:00- 18:00 uhr frist...
Post on 21-Feb-2021
1 Views
Preview:
TRANSCRIPT
-
Übung zur Vorlesung
Informationsvisualisierung
Emanuel von Zezschwitz
Ludwig-Maximilians-Universität München Wintersemester 2014/2015
-
Presentation
-
Presentation Problem
-
Zoomable User Interfaces
-
Zoomable User Interfaces • “Pad, the first multiscale interface”
Perlin and Fox, 1993 [2]
-
ChronoZoom [6]
http://www.chronozoom.com
-
ZUIs – Advantages [4, 5] • Highly intuitive (direct manipulation) • Unlimited information space • Allows for spatial ordering of data
• E.g. logical arrangements • Adapt information depending on the zooming factor
(semantic zoom)
-
Zoomable User Interfaces • They’re already here!
Safari mobile
Google Maps
Photoshop
-
ZUIs on Touchscreens
Pinch gesture
-
ZUIs on Touchscreens • What if there is no multi touch? • Zoom buttons
• Problem: • Small screens with limited size • Occupy screen real estate • Cover information • Have to be big (fat finger problem)
• Double tap • Problem:
• Only one step zoom
-
ZUIs - Interaction • Rubbing and Tapping [3] • Problem:
• How to differentiate it from panning?
[3]
-
ZUIs - Interaction • Circular touch, Nokia browser
-
ZUIs - Circular Touch
-
ZUIs - Problems • Getting lost (too far in)
What is this?
-
ZUIs - Problems • Getting lost (too far out)
-
ZUIs - Problems • Navigation
You are here!!
Your data is here!
-
ZUIs - Problems • Navigation
-
ZUIs – Some Solutions Search
Limit zoom factor and pan
-
ZUIs – Some Solutions • Overview plus Detail (see later)
-
Overview + Detail Interfaces
-
Overview plus Details • Show details of an information space together with
an overview
Google Maps Nokia Browser © pocketnow.com
-
Overview plus Details
SeeSoft, Eick et al. ,1992 [1]
North & Shneiderman 1997
-
Overview plus Details • Who invented it?
Dune 2, 1992 Source: Paranoid/Wikipedia
Remember that SeeSoft [1] is from 1992 as well!!
Super Mario Kart, 1992 Source: Wikipedia
-
Overview plus Details • Some more years back…
Populous, 1989 Source: MobyGames/Juan Ramirez
-
Overview plus Details • Some more years back…
Populous, 1989 Source: MobyGames/Juan Ramirez
-
Overview plus Details
Google Maps Super Mario Kart, 1992 Source: Wikipedia
-
Innovations • It is not always clear where a specific approach
comes from • Innovation is often driven by commercial issues • Game development is:
• very competitive • always on the edge of what is possible • Highly innovative
-
Distortion (Focus + Context)
-
Why Distortion? • Show a huge amount of information with limited amount
of space • Focus plus context: provide context to support
navigation tasks • No zooming and no scrolling required
-
Distortion
Original (undistorted) presentation/view
Some transformation function
Transformed (distorted) presentation/view
-
Distortion
Example: Transfer function for a bifocal display
Distance in original view
Distance in distorted view
-
Fisheye Menu • Example: Fisheye Menu by Bederson
et al. [1] • Font-size reduced with distance from
the cursor • Demo
Fisheye Menu [1]
Fixation area to solve the overshoot problem
http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml
-
Fisheye Menu • Degree of interest function
Fisheye Menu [1]
[1]
-
Fisheye Menu • Transfer function for the
fisheye menu [1]
Fisheye Menu [1]
-
Magnifying Glass
• Magnifying glass is not a focus plus context technique • Why not?
Context close to the detail gets completely lost!
I am just an example. Do not read me since that would be a waste of your precious time. If you already did read me … too bad for you.
I am just an example. Do not read me since that would be a waste of your precious time. If you already did read me … too bad for you.
your
-
Magnifying Glass
-
Klausur Termin: 05.02.2015, 16:00-18:00 Uhr
Frist zur Anmeldung: 01.02.2015, 23:59 Uhr Frist zur Abmeldung: 03.02.2015, 23:59 Uhr
Ort: Schellingstr. 3/4, Raum H 030, Raum S 001
Wichtig:
• Closed book Klausur: Wörterbuch ist erlaubt. Alle anderen Materialien (Bücher, Skript, Mitschriften, etc.) sind verboten.
• Mobiltelefone, Computer und alle anderen Kommunikationstechnologien sind strengstens verboten. Am besten gleich daheim lassen.
• Taschenrechner mitnehmen • Lineal mitnehmen • Studentenausweis mitnehmen • Echten (!!) Lichtbildausweis mitnehmen (z.B. Personalausweis oder
Reisepass)
-
References 1. Stephen G. Eick, Joseph L. Steffen, and Eric E. Sumner Jr. SeeSoft - A tool for
visualizing line oriented software statistics. IEEE Transactions on Software Engineering, 18(11):957--968, November 1992.
2. Perlin, K. and D. Fox. Pad: An Alternative Approach to the Computer Interface. Computer Graphics (Proc. SIGGRAPH’93), 57-72.
3. Alex Olwal, Steven Feiner, and Susanna Heyman. 2008. Rubbing and tapping for precise and rapid selection on touch-screen displays. In Proceedings of the twenty-sixth annual SIGCHI conference on Human factors in computing systems (CHI '08).
4. BEDERSON, Benjamin B. The promise of zoomable user interfaces. Behaviour & Information Technology, 2011, 30. Jg., Nr. 6, S. 853-866.
5. Gary Anthes. 2012. Zoom in, zoom out. Commun. ACM 55, 12 (December 2012), 18-19.
6. Robert L. Walter, Sergey Berezin, and Ankur Teredesai. 2013. ChronoZoom: travel through time for education, exploration, and information technology research. In Proceedings of the 2nd annual conference on Research in information technology (RIIT '13). ACM, New York, NY, USA, 31-36
Slide Number 1Slide Number 2Slide Number 3Slide Number 4Slide Number 5Slide Number 6Slide Number 7Slide Number 8Slide Number 9Slide Number 10Slide Number 11Slide Number 12Slide Number 13Slide Number 14Slide Number 15Slide Number 16Slide Number 17Slide Number 18Slide Number 19Slide Number 20Slide Number 21Slide Number 22Slide Number 23Slide Number 24Slide Number 25Slide Number 26Slide Number 27Slide Number 28Slide Number 29Slide Number 30Slide Number 31Slide Number 32Slide Number 33Slide Number 34Slide Number 35Slide Number 36Slide Number 37Slide Number 38Slide Number 39Slide Number 40Slide Number 41Slide Number 42Slide Number 43Slide Number 44Slide Number 45Slide Number 46Slide Number 47Slide Number 48Slide Number 49Slide Number 50Slide Number 51Slide Number 52Slide Number 53Slide Number 54Slide Number 55References
top related