ian reeves. homepage design google’s golden triangle
TRANSCRIPT
![Page 1: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/1.jpg)
Ian Reeves
![Page 2: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/2.jpg)
Homepage design Google’s Golden Triangle
![Page 3: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/3.jpg)
F-Shaped reading
![Page 4: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/4.jpg)
Homepage design
Eye movement
![Page 5: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/5.jpg)
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.
![Page 6: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/6.jpg)
Eyetrack findings
Hotspot of blurb
![Page 7: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/7.jpg)
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.
![Page 8: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/8.jpg)
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
![Page 9: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/9.jpg)
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
![Page 10: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/10.jpg)
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.
![Page 11: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/11.jpg)
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.
![Page 12: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/12.jpg)
Irrelevant pictures ignored
![Page 13: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/13.jpg)
Men v women
![Page 14: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/14.jpg)
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’.
![Page 15: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/15.jpg)
Vertical navigation
□Daily Express from 2011
![Page 16: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/16.jpg)
Horizontal navigation
□Daily Express from 2013
![Page 17: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/17.jpg)
Horizontal v Vertical navigation
![Page 18: Ian Reeves. Homepage design Google’s Golden Triangle](https://reader034.vdocuments.net/reader034/viewer/2022051820/56649ecf5503460f94bdce30/html5/thumbnails/18.jpg)
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