ian reeves. homepage design google’s golden triangle

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

Horizontal v Vertical navigation

News design resources

Eyetrack’s main web design findings: http://www.poynterextra.org/eyetrack2004/main.htm

Eyetracking points the way to effective news design: Online Journalism Review 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.php Nielsen’s F-shaped reading

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/

The case for vertical navigationhttp://astheria.com/design/in-defense-of-vertical-navigation