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?


User Context Factors

Distractions Movement Lighting Reduced screen space Bandwidth and memory restrictions Input constraints Two hands or one hand or no hand


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


Design Decision FactorsTasks Browsing Reading Finding Re-finding Comparison

Input Input data and/or manipulate data


General Approach

Elide Transform

Syntactic

Semantic

Outlining

Remove content

Linearize

Text summarization

Retain

Full Layout

Text/Tables/Forms

Bickmore-Schilit Matrix


Designing for the Small Screen

I. Usability Factors for Small Screens

II. Design Decision Examples

III. Transformation of Web Pages


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


II. Design Decisions

Menus Text Lists Images Forms Option Layout Tables Input


Menus

Shallow Hierarchy for performance

Length Ellipses for long

items Personalization Feedback


Text

Page vs scroll Keep clear context Reading

Chunk text to logical units

Eliminate sideways scroll

Finding Add search Columns

Font size


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


Forms on Small Screens

Logic units Reconnect sections at server Avoid text boxes Avoid horizontal scroll


Forms Partitions

1

2

3

4


90% effective over 100 random sites with forms


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


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)


Tables of Data


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


Search (3 sizes:full/4x6/3x4)

Search & Context

No context & search

Context


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


Changing the TABLE model


Alternate Views

Default View (NetFront v3.0 and ThunderHawk )

Linear View (OceanLake’s mScope and AvantGo ) Overview


Task Complexity


User Study (9 participants)

Overview is significantly more stable as task complexity increases


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:


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


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


Overview Approach

•Whole page shown with zoom capability

Advantages• Keep context & layoutDisadvantages• Font size is reduced• Zoom disorientation may occur


The Gateway

Select Left HandMenu


Relationship to Task

Reading Skimming/Scanning Finding Refinding Comparing


Source Web Page


Transformation Models

Gateway Linear Direct MigrationMacKay, Watters & Duffy, 2003


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


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.


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


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


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


Thank you!


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!

ia and the small screen carolyn watters & bonnie mackay web information filtering lab dalhousie...

Documents

small devicesdoes

small screen usability

contextuse screen space

contextual information

performance reseil shneiderman

search functionchange

watters03screen size

listno effect