A Case Study of Interaction Design

1. A Case Study of Interaction Design

3. “Most people think it is a ludicrous idea to view Web pages on mobile phones because of the small screen and slow connection. We partly agree.”

4. But lots of browsing happens • Recent study showed the importance of mobile browsing • 63% of packet data usage • Participants were early adopters • Indicates good success for mobile browsing Distribution of Packet Data Usage by Services Source: Feller 2005

5. Example user groups • Need-it-now consumers (Accessed when they need some service or information) • Killing-time users (Waiting for the train and use time to find information they need in future or just use entertainment services) • Want everywhere access (Trading from summer cottage etc.)

7. Primary problems • Small screen size • Connection speed • Lack of a pointing tool

8. What we know already • Need both focus view and context view • Example: Yahoo! Maps • Views can be visible at the same time • Different locations • Whole or partial overlap • Fisheye view is another option • Can use a “view mode” approach • Currently infeasible options: • Fisheye (modeless) • Zoom (moded)

9. Currently • Vast majority of commercial web browsers on mobile phones use a moded approach: • Original layout view • Narrow layout view

11. Primary drawbacks • Content that should remain wide (e.g., maps, tables) are often impossible to read • The user cannot navigate by location of content • Hard to determine when a new page has loaded • Increasingly common dynamic web content

12. Usability requirements • Fit more content to screen • Eliminate need for horizontal scrolling • Provide enough context information to: • Give an idea of page structure • Communicate the current location on a page • Provide all basic functionality in a 5 way control • Retain original page layout • Interaction should be modeless

17. How? • Same layout is used • All content is scaled • Text paragraphs forced to screen width • Images reduced in size, but not forced to screen width • Eliminates much of the empty space • More of the image fits on the screen, but fine details (such as text) are still readable

18. Original layout view on a phone browser Page view after layout scaling has been applied

20. + Page Overview

22. Usability testing • Laboratory study • Field study

23. Lab study • 8 participants • Learned a “best” strategy for displaying the page overview.

25. Field study • 20 subjects • 12 male • 8 female • Ages 15-20 years (mean of 30) • Divided into two groups of 10 each

26. Procedure • Group 1 used Minimap browser first; switched to narrow/original browser after 8 days • Group 2 used browser in opposite order • Little instruction provided to users • Used a Nokia 6600 phone • Screen: 176x208 (Most laptops 1024x768) • Joystick • Two soft keys: options & back

28. Procedure (2) • Sent one or two tasks to participants by text message every morning • With the message users received 2-4 multiple choice questions

29. Example

30. Tasks • 12 goal-oriented tasks • Required access to variety of pages: • Textual and graphical • Simple and crowded • With and without data tables • Small and large images • Images containing detailed info (e.g., text) • Different numbers of columns • Different layouts

31. Data collection • Users were asked to keep a diary of their experiences • Minimap browser logged user activity • At the end of each 8 day period users and researchers met for a two our session to discuss the experience • Users then completed a rating questionnaire

33. Visualization preference

34. Interpretation • 18/20 participants preferred Minimap • 12/20 used extreme preference rating • Previous browsing experience did not affect rating • Order of testing did…the first browser used got the user’s preference more easily • Still 8/10 in group 2 preferred Minimap

35. Overall ratings

36. Task-based ratings

37. Interpretation • Text reading easy in both* • Images much easier to read in Minimap • Example: • Read Dilbert strip of the day • Need to switch from narrow to original mode in standard browser • 10/20 users could not figure out how to do this • Table data much easier in Minimap • Multiple links on a row

39. Page overview intuitive? • 14/20 users found the page overview during the first browsing session • The rest found it the first day • Feedback was that it was slightly annoying but that pros outweigh cons • Expert users want a button for it

40. Add on • Latest study tests this interaction style • Most tasks executed without checking the page overview • 18/20 participants preferred Minimap

41. Demo