A Case Study of Interaction Design

1
A Case Study of Interaction Design
2
(No Transcript)
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
Distribution of Packet Data Usage by Services

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

6
(No Transcript)
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

10
(No Transcript)
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

13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
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
19
(No Transcript)
20
Page Overview
21
(No Transcript)
22
Usability testing

• Laboratory study
• Field study

23
Lab study

• 8 participants
• Learned a best strategy for displaying the page
  overview.

24
(No Transcript)
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

27
(No Transcript)
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

32
(No Transcript)
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 didthe first browser used got
  the users 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

38
(No Transcript)
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