1 / 41

A Case Study of Interaction Design

A Case Study of Interaction Design. “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.”. But lots of browsing happens. Recent study showed the importance of mobile browsing 63% of packet data usage

fruiz
Download Presentation

A Case Study of Interaction Design

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. A Case Study of Interaction Design

  2. “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.”

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

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

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

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

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

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

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

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

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

  12. + Page Overview

  13. Usability testing • Laboratory study • Field study

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

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

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

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

  18. Example

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

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

  21. Visualization preference

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

  23. Overall ratings

  24. Task-based ratings

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

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

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

  28. Demo

More Related