www.infotech.monash.edu

Michael Wybrow, 23rd April 2009

Scrolling Behaviour with Single- and Multi-column Layout

2

Collaborative work with:

• Cameron Braganza, Kim Marriott, Peter Moulder, and Tim Dwyer– Monash University, Australia

3

Talk overview

• Motivation• Related work• Multi-column browser design• The experiment• Discussion of results• Conclusions

4

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

5

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

6

Motivation – Horizontal scroll layout

7

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

8

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

9

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

10

Related work - Applications

• Times Reader

• Tofu

11

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

12

Multi-column browsing tool

13

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

14

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

15

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

16

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

17

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

18

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

19

Results – Reading and Q&A performance

• Reading and question answering performance similar in both layouts– No statistical significance

20

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?

21

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)

22

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

23

Results – Scrolling strategies

24

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)

25

Results – Gaze location

26

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

27

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!

28

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

29

Questions?

• Thank you for your attention!