Jörg Müller, Michael Nischt H ans-joerg.mueller@telekom.de

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