IA and the Small Screen Carolyn Watters & Bonnie MacKay Web Information Filtering Lab Dalhousie...
-
Upload
willis-young -
Category
Documents
-
view
215 -
download
0
Transcript of IA and the Small Screen Carolyn Watters & Bonnie MacKay Web Information Filtering Lab Dalhousie...
IA and the Small Screen
Carolyn Watters & Bonnie MacKay
Web Information Filtering LabDalhousie University
IASummit05 Watters/MacKay 2
The Problem
How to display information on small screens so that it can be understood in its context?
IASummit05 Watters/MacKay 3
User Context Factors
Distractions Movement Lighting Reduced screen space Bandwidth and memory restrictions Input constraints Two hands or one hand or no hand
IASummit05 Watters/MacKay 4
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
IASummit05 Watters/MacKay 5
Design Decision FactorsTasks Browsing Reading Finding Re-finding Comparison
Input Input data and/or manipulate data
IASummit05 Watters/MacKay 6
General Approach
Elide Transform
Syntactic
Semantic
Outlining
Remove content
Linearize
Text summarization
Retain
Full Layout
Text/Tables/Forms
Bickmore-Schilit Matrix
IASummit05 Watters/MacKay 7
Designing for the Small Screen
I. Usability Factors for Small Screens
II. Design Decision Examples
III. Transformation of Web Pages
IASummit05 Watters/MacKay 8
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
IASummit05 Watters/MacKay 9
II. Design Decisions
Menus Text Lists Images Forms Option Layout Tables Input
IASummit05 Watters/MacKay 10
Menus
Shallow Hierarchy for performance
Length Ellipses for long
items Personalization Feedback
IASummit05 Watters/MacKay 11
Text
Page vs scroll Keep clear context Reading
Chunk text to logical units
Eliminate sideways scroll
Finding Add search Columns
Font size
IASummit05 Watters/MacKay 12
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
IASummit05 Watters/MacKay 13
Forms on Small Screens
Logic units Reconnect sections at server Avoid text boxes Avoid horizontal scroll
IASummit05 Watters/MacKay 14
Forms Partitions
1
2
3
4
IASummit05 Watters/MacKay 15
90% effective over 100 random sites with forms
IASummit05 Watters/MacKay 16
Grid vs. Hierarchy
SPORT TOOL
VEHICLE
WEATHER
Baseball Drill Bicycle Rain
Football Hammer Boat Snow
Golf Sander Carriage Tornado
Hockey Saw Train Wind
Baseball
Football
Golf
Hockey
IASummit05 Watters/MacKay 17
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)
IASummit05 Watters/MacKay 18
Tables of Data
IASummit05 Watters/MacKay 19
Tables on Small Screens
Using large tables on small devices
Does it help to:O Use screen space for headings and contextO Use screen space for a search functionO Change the navigation model
For:O Simple look up tasksO More complicated tasks
IASummit05 Watters/MacKay 20
Search (3 sizes:full/4x6/3x4)
Search & Context
No context & search
Context
IASummit05 Watters/MacKay 21
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
IASummit05 Watters/MacKay 22
Changing the TABLE model
IASummit05 Watters/MacKay 23
Alternate Views
Default View (NetFront v3.0 and ThunderHawk )
Linear View (OceanLake’s mScope and AvantGo ) Overview
IASummit05 Watters/MacKay 24
Task Complexity
IASummit05 Watters/MacKay 25
User Study (9 participants)
Overview is significantly more stable as task complexity increases
IASummit05 Watters/MacKay 26
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
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:
IASummit05 Watters/MacKay 28
Direct Migration
• Little or no transformationAdvantages • Little or no processing• Access to most web pages• Legible font sizeDisadvantages• Vertical and horizontal scrolling• Disorientation ?
www.cbc.ca
IASummit05 Watters/MacKay 29
Linear Approach•Layout changed to a linear or hierarchical structure (e.g. a list of items)Advantages• No horizontal scrolling• Legible font sizeDisadvantages• Change in layout & order• Increase in vertical scrolling
www.wired.com
IASummit05 Watters/MacKay 30
Overview Approach
•Whole page shown with zoom capability
Advantages• Keep context & layoutDisadvantages• Font size is reduced• Zoom disorientation may occur
IASummit05 Watters/MacKay 31
The Gateway
Select Left HandMenu
IASummit05 Watters/MacKay 32
Relationship to Task
Reading Skimming/Scanning Finding Refinding Comparing
IASummit05 Watters/MacKay 33
Source Web Page
IASummit05 Watters/MacKay 34
Transformation Models
Gateway Linear Direct MigrationMacKay, Watters & Duffy, 2003
IASummit05 Watters/MacKay 35
User Study Results User Performance by Task User Preference/Opinion
Finding a new story Gateway (1st), Linear (2nd) - close
Re-finding a story Gateway (1st), Direct (2nd)
Complex comparison Gateway (1st)
(Linear, Direct - poor)
Reading a story Gateway (1st), Linear (1st) - same
General Browsing Gateway (1st)
MacKay, Watters & Duffy, 2003
IASummit05 Watters/MacKay 36
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.
IASummit05 Watters/MacKay 37
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
IASummit05 Watters/MacKay 38
So... Design ConsiderationsFactor Design Feature
Task Browsing, Skimming
Overview, columns
Reading No horizontal scrolling, semantic units
Finding Search, images, context, no horizontal scrolling
Re-finding Consistency, overview Comparison No horizontal scrolling, little
vertical scrolling Input Reduced direct input, large
targets, feedback on selection, semantic groups of inputs
Navigation Minimum pages, shallow menus, personalized menus
IASummit05 Watters/MacKay 39
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
IASummit05 Watters/MacKay 40
Thank you!
IASummit05 Watters/MacKay 41
Pilot Study(1)
Users (10) first viewed and used a web page on the large screen (Efficiency & Effectiveness)
User Performance by task Preferance/OpinionFinding a new story
Gateway and Linear
Refinding a storyGateway and Direct
Complex fact comparisonGateway
Reading a storyGateway and Linear
NOT linear!!
NOT default!
NOT default!