halo a virtual periphery for small screens devices
description
Transcript of halo a virtual periphery for small screens devices
![Page 1: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/1.jpg)
haloa virtual periphery for small screens devices
patrick baudischmicrosoft research, visualization and interaction research
may 25th, AVI 2004 workshoppersonalized information access
![Page 2: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/2.jpg)
+
the problempersonalized information system that tells meabout restaurants (or attractions in theme park or…)
for timely deliveryI am using a PDAto view all options
doesn’t just tell me what to do,allows me to choose for current situation
![Page 3: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/3.jpg)
halo <demo>
![Page 4: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/4.jpg)
contents halo is not a focus plus context technique
(related work)
halo is a lamp shining onto the street(designing halo)
halo is 16-33% faster than arrow-based visualization techniques (user study)
build interactive halo applications! (conclusions, lessons learned)
![Page 5: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/5.jpg)
related work driving directions
vs. route planning aids
overview-plus-detail focus-plus-context
pointing into off-screen space
![Page 6: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/6.jpg)
halo design
![Page 7: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/7.jpg)
cinematography1. entry and exit points
2. point of viewarrow-based techniques
3. partially out of the frame halo
rings are familiar, graceful degradation
![Page 8: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/8.jpg)
streetlamps aura visible from distance aura is round overlapping auras aggregate fading of aura indicates distance
what we changed smooth transition sharp edge disks rings dark background light background
![Page 9: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/9.jpg)
intrusion border
handle
space for arcs…
and for corner arcs
reserve space for content
![Page 10: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/10.jpg)
arc length = distance
![Page 11: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/11.jpg)
handling many objects find best (restaurant): relevance cut-off
see all (dangers): merge arcs
![Page 12: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/12.jpg)
app designers can use
color texture arc thickness
![Page 13: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/13.jpg)
user study
![Page 14: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/14.jpg)
interfacesarc/arrow fading offscale 110-300m/cmmap as backdropreadability oksame selectable
size
hypothesis:halo faster
halo ring distance from display border
legend
![Page 15: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/15.jpg)
pre-study to define tasks
8 participants (6 GPS users, 2 PDA users) informal interviews 10-40 minutes
4 tasks to be used in study
![Page 16: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/16.jpg)
1. locate task
click at expected location of off-screen targets
had tosimulate on PC
![Page 17: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/17.jpg)
2. closest task
click arrow/arc or off-screen location closest to car
![Page 18: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/18.jpg)
3. traverse task
click all five targets so as to form shortest path
![Page 19: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/19.jpg)
4. avoid task
click on hospital farthest away from traffic jams
![Page 20: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/20.jpg)
procedure 12 participants within subject design, counterbalanced four training maps per interface/task,
then eight timed maps questionnaire
![Page 21: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/21.jpg)
task completion time
Task Arrow interface Halo interfaceLocate 20.1 (7.3) 16.8 (6.7)Closest 9.9 (10.1) 6.6 (5.3)Traverse 20.6 (14.1) 16.8 (8.7)Avoid 9.2 (4.7) 7.7 (5.8)
0
5
10
15
20
25
Locate Closest Traverse Avoid
Arrow interface
Halo interface
33%16%
![Page 22: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/22.jpg)
error rateTask Arrow interface Halo interfaceLocate 23.5 pixels (21.6) 28.4 pixels (33.8)Closest 22% (42%) 21% (41%)Traverse 97.4 pixels (94.7) 81.0 pixels (96.7)Avoid 15% (35%) 14% (34%)
0
5
10
15
20
25
30
Locate Closest Traverse Avoid
Arrow interface
Halo interface
participants underestimated distances by 26% participants saw ovals (gestalt laws?) we can compensate for that: width += 35%
![Page 23: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/23.jpg)
0
1
2
3
4
5
6
7
8
9
Locate Closest Traverse Avoid
Arrow interface
Halo interface
subjective preference
![Page 24: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/24.jpg)
conclusions halo 16%-33% faster than arrows
– no split attention– distortion-free space– scale independent– no need to annotate distance– perceive all rings at once
[treisman & gormican] limitation: max number or rings
future work: applications where peripheral objects move and change
![Page 25: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/25.jpg)
thanks! read more at
– www.patrickbaudisch.com
more cool stuff– stitching: we 11:00am– fishnet: thu 11:30am
thanks to– ruth rosenholtz– scott minneman– allison woodruff– the vibe gang
![Page 26: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/26.jpg)
![Page 27: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/27.jpg)
Extra
![Page 28: halo a virtual periphery for small screens devices](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816337550346895dd3c653/html5/thumbnails/28.jpg)
(a) locate (b) closest
(d) avoid(c) traverse