Ian Reeves

Homepage design  Google’s Golden Triangle

F-Shaped reading

Homepage design  Eye movement

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.

Eyetrack findings  Hotspot of blurb

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.

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

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

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.

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.

Irrelevant pictures ignored

Men v women

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’.

Vertical navigation □Daily Express from 2011

Horizontal navigation □Daily Express from 2013

Vertical navigation

Horizontal navigation

Horizontal v Vertical navigation

News design resources  Eyetracking points the way to effective news design: Online Journalism Review  Poynter’s Eyetrack study  Enquiro’s Golden Triangle googles-golden-triangle.phphttp:// googles-golden-triangle.php  Nielsen’s F-shaped reading  The case against vertical navigation vertical-navigation/ vertical-navigation/  The case for vertical navigation  Eyetracking heatmaps: