Michael Wybrow, 23rd April 2009
Scrolling Behaviour with
Single- and Multi-column
Layout
www.infotech.monash.edu
Collaborative work with:
• Cameron Braganza, Kim Marriott,
Peter Moulder, and Tim Dwyer
– Monash University, Australia
2
Talk overview
•
•
•
•
•
•
Motivation
Related work
Multi-column browser design
The experiment
Discussion of results
Conclusions
3
Motivation – How do people read online
• How do people read documents online?
• How do they navigate?
– Scrolling mechanisms used
– Scrolling strategies used
• Consider both vertical and horizontal
scroll layout
4
Motivation – Scroll layouts
• Vertical scroll layout:
– Used by web browsers
– Text in a continuous vertical scroll
– Large display area + single column =
uncomfortably long lines
• Horizontal scroll layout:
– Text arranged in fixed-width columns
– Width expands to fit document content
– Document is scrolled horizontally
5
Motivation – Horizontal scroll layout
6
A word on paged layout
• Designed for print media
• Allows multiple columns
• Layout chosen at time of creation
rather than display time
• Not well suited to viewing on different
electronic devices
7
Related work – Reading research
• Dyson & Haselgrove, 2001
– Comprehension rates better for medium
length lines (55 characters) than for long
lines (100 characters)
• Dyson, 2004
– For print media, line length of 50 characters
found to be optimal
• Dyson & Kipping, 1998
• Youngman & Scharff, 2007
– Users dislike long lines
8
Related work – Reading research
• Dyson & Kipping, 1997
– Compared single column and three column
– Under 25s faster reading single, while
no difference for older readers
• Baker, 2005
– Compared single, two and three column
– Results were inconclusive regarding speed
and comprehension
– In both cases, users preferred multi-column
9
Related work - Applications
• Times Reader
• Tofu
10
Multi-column browsing tool
• Our browsing tool supports:
– Vertical and horizontal scroll layout
– Supports a subset of HTML/CSS
> font styling, lists and paragraphs, headings,
links, embedded images and floats
> Tables and footnotes not yet implemented
– User can resize the browser window and
change font size
11
Multi-column browsing tool
12
Browser design – Document overview
• Provide overview?
• Our early prototype did not have this
• It was added to help alleviate confusion
between actions that jump by a column
or a page
13
Browser design – Scrolling mechanisms
•
•
•
•
Grab-and-drag
Scroll ball (scroll wheel)
Scrollbar
Keys
– Arrow keys
– Page up / page down / space bar
– Home / end keys
• Overview
• Snapping?
– Grab-and-drag and scrollbar do not snap
14
The experiment
• Participants read and answered
questions about two short stories laid
out with the two different layout models
– ~2,000 words each, requires 10-20 minutes
– Asked comprehension questions
> Able to refer back to text
– Investigated preference and performance
– User interaction with browser logged
– Participants gaze tracked and logged
> Using FaceLAB for eye-tracking
15
The experiment - Expectations
• Horizontal layout would be preferred for
reading large, textual documents
• Easier to navigate in horizontal layout
• Different scrolling strategies:
– Horizontal:
> Mainly column at a time scrolling
> Key based scrolling more common
> Fewer scrolling actions
– Vertical:
> Mainly region based scrolling
16
The experiment - Participants
• 24 volunteer participants:
– Monash University graduates or
under-graduates from variety of courses
– Normal or corrected-to-normal vision
– All proficient readers of English
– For 4 participants only preference data used
– Some eye-tracking data discarded
17
The experiment - Design
• Four counterbalanced versions
• Short pre- and post-test questionnaires
– Pre: Reading experience, preferences
– Post: Preferred layout + explanation,
improvements, and any other comments
18
Results – Reading and Q&A performance
• Reading and question answering
performance similar in both layouts
– No statistical significance
19
Results – User preferences
• 8 participants preferred horizontal
– Shorter line length
– Easier to keep track of position
• 16 participants preferred vertical
– “It is what I’m used to”
– “Horizontal scrolling is something new and I
wasn’t used to it”
– Disliked that horizontal forced them to move
their eyes up and down full height of screen!
> None of these resized window height!
> May be easier to move eyes horizontally?
20
Results – Preferred scrolling mechanism
• Apparent difference between models
– Though no statistical significance
• 5/6 Grab-and-drag users preferred vertical
• 5/6 Arrow key users preferred horizontal
– Preference may depend on typical scrolling
mechanism used (or available)
21
Results – Scrolling actions and duration
• Both number of scrolling actions and
scrolling duration were significantly less
for horizontal than for vertical scroll layout
– More significant for reading than questions
– More significant for # actions than duration
– Not completely unexpected, but interesting
22
Results – Scrolling strategies
23
Results – Scrolling strategies
• Vertical
– 13% Paging
– 46% Continuous
– 31% Fixed region
• Horizontal
– 50% exhibited paging
– 64% read and scroll by subset
(typically two leftmost columns)
24
Results – Gaze location
25
Conclusions
• One third of participants preferred
horizontal scroll layout
• Preference influenced by
– Familiarity
– Choice of scrolling mechanism
> Grab-and-drag users preferred vertical
> Arrow key users preferred horizontal
26
Conclusions (continued)
• Participants spent less time scrolling
and scrolled less in horizontal
• Reading and comprehension
performance not significantly affected
by layout model
• Horizontal model may be better suited to
some small portable devices
– Future work: Investigate this!
27
Conclusions (continued)
• For vertical, most read in a region and
fixation is likely at bottom of the page
• For horizontal, paging more common
and fixation likely in middle of page
• Gaze findings could direct placement of
figures
– Perhaps place before first reference
28
Questions?
• Thank you for your attention!
29