1. IA and the Small Screen Carolyn Watters & Bonnie MacKay Web Information Filtering Lab Dalhousie University

2. IASummit05Watters/MacKay2 The Problem How to display information on small screens so that it can be understood in its context?

3. IASummit05Watters/MacKay3 User Context Factors Distractions Movement Lighting Reduced screen space Bandwidth and memory restrictions Input constraints Two hands or one hand or no hand

4. IASummit05Watters/MacKay4 Trade-offs Content vs context  space needed to include contextual information reduces amount of content Full set vs full content  Remove images or some data items Completeness vs readable  Reduce font size so that everything is there but cannot be read Replication vs representative  Exact information or summary

5. IASummit05Watters/MacKay5 Design Decision Factors Tasks Browsing Reading Finding Re-finding Comparison Input Input data and/or manipulate data

6. IASummit05Watters/MacKay6 General Approach ElideTransform Syntactic Semantic Outlining Remove content Linearize Text summarization Retain Full Layout Text/Tables/Forms Bickmore-Schilit Matrix

7. IASummit05Watters/MacKay7 Designing for the Small Screen I. Usability Factors for Small Screens II. Design Decision Examples III. Transformation of Web Pages

8. IASummit05Watters/MacKay8 I.Usability Factors Scrolling  Vertical scrolling Skimming/scanning  Horizontal scrolling Reading/comparison problems Size and Reading  speed  comprehension Target Size and accuracy (Fitt’s law) Error rates for input  Mistakes  Slips  Feedback

9. IASummit05Watters/MacKay9 II. Design Decisions Menus Text Lists Images Forms Option Layout Tables Input

10. IASummit05Watters/MacKay10 Menus Shallow Hierarchy for performance Length Ellipses for long items Personalization Feedback

11. IASummit05Watters/MacKay11 Text Page vs scroll Keep clear context Reading  Chunk text to logical units  Eliminate sideways scroll Finding  Add search  Columns Font size

12. IASummit05Watters/MacKay12 Lists Breaking up the list  No effect on performance (Reseil & Shneiderman, 87)  Perform is affected (Duchnicky & Kolers, 83) Search option useful (Jones et al, 1999) Ellipsis … Keep context

13. IASummit05Watters/MacKay13 Forms on Small Screens Logic units Reconnect sections at server Avoid text boxes Avoid horizontal scroll

14. IASummit05Watters/MacKay14 Forms Partitions 1 2 3 4

15. IASummit05Watters/MacKay15 90% effective over 100 random sites with forms

16. IASummit05Watters/MacKay16 Grid vs. Hierarchy SPORT TOOL VEHICLEWEATHER BaseballDrillBicycleRain FootballHammerBoatSnow GolfSanderCarriageTornado HockeySawTrainWind Baseball Football Golf Hockey

17. IASummit05Watters/MacKay17 Results (Christie,Klein,Watters/03) screen size significantly influences performance in finding targets Consistently more efficient at finding targets using the grid layout  increasing from 16 to 25 items had no effect on performance once learned. users did not always prefer grid even when performance was better For performance, this suggests that grids work when  interface is static  buttons are large enough to read and use.  the number of potential options can fit on the screen (or device, if hard wired)

18. IASummit05Watters/MacKay18 Tables of Data

19. IASummit05Watters/MacKay19 Tables on Small Screens Using large tables on small devices Does it help to: O Use screen space for headings and context O Use screen space for a search function O Change the navigation model For: O Simple look up tasks O More complicated tasks

20. IASummit05Watters/MacKay20 Search (3 sizes:full/4x6/3x4) Search & Context No context & search Context

21. IASummit05Watters/MacKay21 Results Adding search affected complex task negatively  Got to the wrong place faster  May not always be worth the space (optional) For complex task  no further effect by size, once small had problems Adding context to smaller screen had sig impact both simple & complex tasks  i.e. worth the space

22. IASummit05Watters/MacKay22 Changing the TABLE model

23. IASummit05Watters/MacKay23 Alternate Views Default View (NetFront v3.0 and ThunderHawk ) Linear View ( OceanLake’s mScope and AvantGo ) Overview

24. IASummit05Watters/MacKay24 Task Complexity

25. IASummit05Watters/MacKay25 User Study (9 participants) Overview is significantly more stable as task complexity increases

26. IASummit05Watters/MacKay26 Input Choices Reducing Input Errors  Spell ahead  Big Targets  Feedback  Take-backs  Reduce direct input Menus/dropdowns  One handed options? Voice RFID Gesture/tilt Thumb buttons/touch

27. Web Pages on Small Screens Bonnie MacKay O Maintain the integrity of the information O Minimize transformation volatility when users switch between devices The Goal:

28. IASummit05Watters/MacKay28 Direct Migration Little or no transformation Advantages Little or no processing Access to most web pages Legible font size Disadvantages Vertical and horizontal scrolling Disorientation ? www.cbc.ca

29. IASummit05Watters/MacKay29 Linear Approach Layout changed to a linear or hierarchical structure (e.g. a list of items) Advantages No horizontal scrolling Legible font size Disadvantages Change in layout & order Increase in vertical scrolling www.wired.com

30. IASummit05Watters/MacKay30 Overview Approach Whole page shown with zoom capability Advantages Keep context & layout Disadvantages Font size is reduced Zoom disorientation may occur

31. IASummit05Watters/MacKay31 The Gateway Select Left Hand Menu

32. IASummit05Watters/MacKay32 Relationship to Task Reading Skimming/Scanning Finding Refinding Comparing

33. IASummit05Watters/MacKay33 Source Web Page

34. IASummit05Watters/MacKay34 Transformation Models Gateway LinearDirect Migration MacKay, Watters & Duffy, 2003

35. IASummit05Watters/MacKay35 User Study Results User Performance by Task User Preference/Opinion Finding a new story Gateway (1 st ), Linear (2 nd ) - close Re-finding a story Gateway (1 st ), Direct (2 nd ) Complex comparison Gateway (1 st ) (Linear, Direct - poor) Reading a story Gateway (1 st ), Linear (1 st ) - same General Browsing Gateway (1 st ) MacKay, Watters & Duffy, 2003

36. IASummit05Watters/MacKay36 Working Hypothesis “Maintaining the consistency of the layout and presentation of web pages improves efficiency and effectiveness of task performance when users switch between devices with different sized screens” Minimize transformation volatility.

37. IASummit05Watters/MacKay37 Transformation Volatility Factors Layout  location of items, colour, white space, # of words, model, images Navigation  orientation, movement, selection, # of steps, completeness Comprehension  content, font size, graphics

38. IASummit05Watters/MacKay38 So... Design Considerations

39. IASummit05Watters/MacKay39 So…Gaining Evidence User Testing  Lab vs. field testing?  Desktop simulation vs. handheld device?  How to capture user actions? Others...  We need to revisit the evidence developed in 80’s & 90’s

40. IASummit05Watters/MacKay40 Thank you!

41. IASummit05Watters/MacKay41 Pilot Study(1) Users (10) first viewed and used a web page on the large screen (Efficiency & Effectiveness) User Performance by task Preferance/Opinion Finding a new story Gateway and Linear Refinding a story Gateway and Direct Complex fact comparison Gateway Reading a story Gateway and Linear NOT linear!! NOT default!