Scrolling Behavior Analysis: Single vs. Multi-column Layouts in User Navigation

1. 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!