1. Ian Reeves

2. Homepage design  Google’s Golden Triangle

3. F-Shaped reading

4. Homepage design  Eye movement

5. Eyetrack findings  Smaller type encourages focused viewing behavior (that is, reading the words), while larger type promotes lighter scanning  when people look at blurbs under headlines on news homepages, they often only look at the left one-third of the blurb.  On average, a headline has less than a second of a site visitor's attention.

6. Eyetrack findings  Hotspot of blurb

7. Story structure  Shorter paragraphs performed better in Eyetrack III research than longer ones. Data revealed that stories with short paragraphs received twice as many overall eye fixations as those with longer paragraphs. The longer paragraph format seems to discourage viewing.

8. Story layout  the standard one-column format for a story performed better in terms of number of eye fixations than two- or three-column stories

9. Eyetrack findings  Online users most likely to read to end of story once they’ve started  Two types of reader – methodical and scanners. 50/50 split between types online.  Text very important for online readers  Readers tend to focus on headlines first, often almost ignoring pictures  Navigation touchpoints read first - navigation bars, teasers and story lists that get primary attention  Focus on top left corner is decreasing  Scrolling no longer a no-no  “Voice of the reader” items – comments, polls etc - important

10. Eyetrack findings  In both the print and online, readers who retained most information about a story had read the version with the most ‘alternative’ structure – i.e not using traditional narrative.

11. Simplify for better retention  Readers of the revised version retained 12 per cent more information than the original, even though they spend less time reading it.

12. Irrelevant pictures ignored

13. Men v women

14. Horizontal v vertical nagivation  Horizontal navigation, where key menu elements are ranged across the top of the page, has generally replaced vertical navigation, where key menu elements are in a left-hand column.  But some vertical elements still are important – e.g the Daily Mail’s ‘sidebar of shame’.

15. Vertical navigation □Daily Express from 2011

16. Horizontal navigation □Daily Express from 2013

17. Vertical navigation

18. Horizontal navigation

19. Horizontal v Vertical navigation

20. News design resources  Eyetracking points the way to effective news design: Online Journalism Review http://www.ojr.org/ojr/stories/070312ruel/http://www.ojr.org/ojr/stories/070312ruel/  Poynter’s Eyetrack study http://poynter.org/eyetrack  Enquiro’s Golden Triangle http://www.enquiro.com/enquiro-develops- googles-golden-triangle.phphttp://www.enquiro.com/enquiro-develops- googles-golden-triangle.php  Nielsen’s F-shaped reading http://www.useit.com/alertbox/reading_pattern.html http://www.useit.com/alertbox/reading_pattern.html  The case against vertical navigation http://www.smashingmagazine.com/2010/01/11/the-case-against- vertical-navigation/ http://www.smashingmagazine.com/2010/01/11/the-case-against- vertical-navigation/  The case for vertical navigation http://astheria.com/design/in-defense-of-vertical-navigation http://astheria.com/design/in-defense-of-vertical-navigation  Eyetracking heatmaps: http://www.businessinsider.com/eye-tracking-heatmaps-2012-5?op=1 http://www.businessinsider.com/eye-tracking-heatmaps-2012-5?op=1