rd April 2009 Scrolling Behaviour with Single and Multicolumn Layout Collaborative work with Cameron Braganza Kim Marriott Peter Moulder and Tim Dwyer Monash University Australia ID: 583930
Download Presentation The PPT/PDF document "Michael Wybrow, 23" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Michael Wybrow, 23rd April 2009
Scrolling
Behaviour
with Single- and Multi-column LayoutSlide2
Collaborative work with:Cameron Braganza, Kim Marriott,
Peter
Moulder
, and Tim Dwyer
Monash University, AustraliaSlide3
Talk overviewMotivation
Related work
Multi-column browser design
The experiment
Discussion of results
ConclusionsSlide4
Motivation – How do people read onlineHow do people read documents online?
How do they navigate?
Scrolling mechanisms used
Scrolling strategies used
Consider both vertical and horizontal
scroll layoutSlide5
Motivation – Scroll layoutsVertical 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 horizontallySlide6
Motivation – Horizontal scroll layoutSlide7
A word on paged layoutDesigned for print media
Allows multiple columns
Layout chosen at time of creation
rather than display time
Not well suited to viewing on different electronic devicesSlide8
Related work – Reading researchDyson &
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 linesSlide9
Related work – Reading researchDyson & 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-columnSlide10
Related work - ApplicationsTimes Reader
Tofu Slide11
Multi-column browsing toolOur 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 Slide12
Multi-column browsing toolSlide13
Browser design – Document overviewProvide 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 Slide14
Browser design – Scrolling mechanismsGrab-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 snapSlide15
The experimentParticipants 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-trackingSlide16
The experiment - ExpectationsHorizontal 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 scrollingSlide17
The experiment - Participants24 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 discardedSlide18
The experiment - DesignFour counterbalanced versions
Short pre- and post-test questionnaires
Pre: Reading experience, preferences
Post: Preferred layout + explanation, improvements, and any other commentsSlide19
Results – Reading and Q&A performanceReading and question answering performance similar in both layouts
No statistical significanceSlide20
Results – User preferences8 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?Slide21
Results – Preferred scrolling mechanismApparent 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)Slide22
Results – Scrolling actions and durationBoth 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 interestingSlide23
Results – Scrolling strategiesSlide24
Results – Scrolling strategiesVertical13% Paging
46% Continuous
31% Fixed region
Horizontal
50% exhibited paging
64% read and scroll by subset
(typically two leftmost columns)Slide25
Results – Gaze locationSlide26
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 horizontalSlide27
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!Slide28
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 referenceSlide29
Questions?
Thank you for your attention!