910 likes | 924 Vues
Explore visualization and interaction techniques for small displays, showing content effectively, improving touch screen accuracy, and locating off-screen objects using innovative solutions and gestures. Learn about Collapse-to-Zoom, Summary Thumbnails, DateLens, Halo, and more.
E N D
Visualization and Interaction Techniques for Small DisplaysMobile and Physical Interaction, WS 2010/2011 Jörg Müller, Michael Nischt Hans-joerg.mueller@telekom.de Deutsche Telekom Laboratories, TU Berlin
Preview • Showing content on small displays • Locating off-screen objects • Behind-the-device interaction • Improving touch screen accuracy
Web Pages Don’t fit on Small Screens • Solution approaches • Device-specific authoring • Automatic re-authoring • Client-side navigation • Tap to zoom into region • Uses HTML DOM model • iPhone zooms into columns • Double tap
Overview + Detail • Show details around cursor region • But... • Detail region takes up valuable screen space • Overview region not readable • How to know what to highlight?
Browsing Web Content • Reorganize content in narrow vertical strip • Avoids horizontal scrolling • 1-D browsing • Narrow layout • Width = display width • Compact layout • Original layout destroyed • Little overview
Context in Focus Display • Nokia MiniMap • Overview is semi-transparently shown in detail view while scrolling • Content scaled but original layout preserved • Even overview does not show whole page Indication of detail area Overview Detail view
Nokia Symbian Browser • Overview embedded in detail view • Semi transparent detail view • Site-specific adaptations
Collapse-to-Zoom Baudisch, Xie, Wang, Ma: Collapse-to-zoom: Viewing web pages on small screen devices by interactively removing irrelevant content. UIST '04. • Zoom into arbitrary rectangular areas • User’s knowledge about relevance of areas relevant zoom in irrelevant collapse
expand-cell expand&zoom collapse-column collapse-cell ds an expand m com collapse main Collapse-to-Zoom Gestures • Similar to marking menus • Browser gestures
Thumbnail view: unreadably small Collapse-to-Zoom Walkthrough
User collapses “archive” column Collapse-to-Zoom Walkthrough
User collapses “menu” column Collapse-to-Zoom Walkthrough
Content area expands more and is now readable Collapse-to-Zoom Walkthrough
User can follow links directlyfrom within overview Collapse-to-Zoom Walkthrough
Expand-and-zoom gesture… Collapse-to-Zoom Walkthrough
Collapse-to-Zoom Walkthrough Leads to fully readable detail view
Collapse-to-Zoom • Placeholders for collapsed areas • Bookmarking of collapsed state Video
readable unreadable Summary Thumbnails Lam, Baudisch: Summary Thumbnails: Readable Overviews For Small Screen Web Browsers. CHI 2005. Video
original page scale font up reduce text to fit Summary Thumbnails – Process HTML • For each object on the web page • Count # of lines • Increase font size • Reduce text to preserve # of lines • Text reduction strategies • Remove words from the end • Remove most commonly occurring word (frequency dictionary)
Summary Thumbnails – Benefits • No horizontal scrolling • Preservation of original page layout • Readable text • But: Missing text • Impact? • User study hypotheses • Preserving layout is important to locate information • Readable text reduces the need to zoom • Effects of text reduction are acceptable
Summary Thumbnails – User Study • Design • Within subject • Interfaces • Thumbnail • Summary thumbnail • Single-column • Desktop • Dependent variables • Task time and accuracy • Amount of zooming • Amount of scrolling
Ready To Start Task scenario Task summary
Ready To Start Thumbnail interface
Ready To Start Summary thumbnail interface
Ready To Start Single column interface
Ready To Start Desktop interface
25 20 15 Mean task times (s) 10 5 0 Thumbnail Summary Th. Single Column Desktop Summary Thumbnails – Study Results • Task times • Summary thumbnails significantly different from single column • Number of zooming events • Significantly different
10 8 6 # of participants 4 2 0 Thumbnail Summary Single Thumbnail Column Thumbnail summary Single Column Thumbnail Summary Thumbnails – Study Results • Error rates • User preference
DateLens (Bederson et al., 2004) • Calendar with fisheye view and semantic zoom Bederson, Clamage, Czerwinski, Robertson: DateLens: A Fisheye Calendar Interface for PDAs. ACM TOCHI, 2004.
Halo (Baudisch & Rosenholtz, 2003) Baudisch, Rosenholtz: Halo: A Technique for Visualizing Off-Screen Locations. CHI 2003. Source: Patrick Baudisch
Streetlamp Metaphor • Aura visible from distance • Aura is round • Overlapping auras aggregate • Fading of aura indicates distance Source: Patrick Baudisch
Arrow-Based Techniques • Games, maps • Cinematography • Partially out of the frame halos • Requirements for “Partially out of the frame” • Mentally fill in missing parts • Convey position in space Source: Patrick Baudisch
Gestalt Laws: Perceptual Completion Shipley and Kellman 1992 Source: Patrick Baudisch
User Study: Halos vs. Arrows arc/arrow fading off same selectable size legend halo ring distance from display border Source: Patrick Baudisch
1. Locate Task click at expected location of off-screen targets Source: Patrick Baudisch
2. Closest Task click arrow/arc or off-screen location closest to car Source: Patrick Baudisch
3. Traverse Task click on all targets in order, so as to form the shortest delivery path, beginning at the car Source: Patrick Baudisch
4. Avoidance Task click on hospital farthest away from traffic jams Source: Patrick Baudisch
Task Completion Time Source: Patrick Baudisch
Error Rate • Participants underestimated distances by 26% • Participants saw ovals • To compensate: width += 35% Source: Patrick Baudisch
Subjective Preference Source: Patrick Baudisch
Limitation of Halo: Clutter • Clutter from overlapping or large number of halos • Wedge: Isosceles triangles • Legs point towards target • Rotation, aperture • No overlap • Layout algorithm adapts rotation and aperture Gustafson, Baudisch, Gutwin, Irani: Wedge: Clutter-Free Visualization of Off-Screen Locations. CHI 2008.
The Wedge • Degrees of freedom • Rotation • Intrusion • Aperture
User Study: Halos vs. Wedges • Locate • Avoid
User Study: Halos vs. Wedges • Closest • Subjective preferences