Michael Wybrow, 23 rd 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 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!