1 / 91

Enhancing Interaction and Display on Small Devices

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.

guimond
Download Presentation

Enhancing Interaction and Display on Small Devices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Preview • Showing content on small displays • Locating off-screen objects • Behind-the-device interaction • Improving touch screen accuracy

  3. Showing Content on Small Displays

  4. Web Pages Don’t fit on Small Screens

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

  6. 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?

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

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

  9. Nokia Symbian Browser • Overview embedded in detail view • Semi transparent detail view • Site-specific adaptations

  10. Android Browser

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

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

  13. Thumbnail view: unreadably small Collapse-to-Zoom Walkthrough

  14. User collapses “archive” column Collapse-to-Zoom Walkthrough

  15. User collapses “menu” column Collapse-to-Zoom Walkthrough

  16. Content area expands more and is now readable Collapse-to-Zoom Walkthrough

  17. User can follow links directlyfrom within overview Collapse-to-Zoom Walkthrough

  18. Expand-and-zoom gesture… Collapse-to-Zoom Walkthrough

  19. Collapse-to-Zoom Walkthrough Leads to fully readable detail view

  20. Collapse-to-Zoom • Placeholders for collapsed areas • Bookmarking of collapsed state Video

  21. readable unreadable Summary Thumbnails Lam, Baudisch: Summary Thumbnails: Readable Overviews For Small Screen Web Browsers. CHI 2005. Video

  22. 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)

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

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

  25. Ready To Start Task scenario Task summary

  26. Ready To Start Thumbnail interface

  27. Ready To Start Summary thumbnail interface

  28. Ready To Start Single column interface

  29. Ready To Start Desktop interface

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

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

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

  33. Locating Off-Screen Objects

  34. Halo (Baudisch & Rosenholtz, 2003) Baudisch, Rosenholtz: Halo: A Technique for Visualizing Off-Screen Locations. CHI 2003. Source: Patrick Baudisch

  35. Streetlamp Metaphor • Aura visible from distance • Aura is round • Overlapping auras aggregate • Fading of aura indicates distance Source: Patrick Baudisch

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

  37. Gestalt Laws: Perceptual Completion Shipley and Kellman 1992 Source: Patrick Baudisch

  38. User Study: Halos vs. Arrows arc/arrow fading off same selectable size legend halo ring distance from display border Source: Patrick Baudisch

  39. 1. Locate Task click at expected location of off-screen targets Source: Patrick Baudisch

  40. 2. Closest Task click arrow/arc or off-screen location closest to car Source: Patrick Baudisch

  41. 3. Traverse Task click on all targets in order, so as to form the shortest delivery path, beginning at the car Source: Patrick Baudisch

  42. 4. Avoidance Task click on hospital farthest away from traffic jams Source: Patrick Baudisch

  43. Task Completion Time Source: Patrick Baudisch

  44. Error Rate • Participants underestimated distances by 26% • Participants saw ovals • To compensate: width += 35% Source: Patrick Baudisch

  45. Subjective Preference Source: Patrick Baudisch

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

  47. The Wedge • Degrees of freedom • Rotation • Intrusion • Aperture

  48. Avoiding Overlap

  49. User Study: Halos vs. Wedges • Locate • Avoid

  50. User Study: Halos vs. Wedges • Closest • Subjective preferences

More Related