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 Participants were early adopters Indicates good success for mobile browsing Source: Feller 2005 Distribution of Packet Data Usage by Services

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

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

What we know already Need both focus view and context view –Example: Yahoo! MapsYahoo! 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)

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

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

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

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

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

+ Page Overview

Usability testing Laboratory study Field study

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

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

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

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

Example

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

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

Visualization preference

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

Overall ratings

Task-based ratings

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

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

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

Demo