Visit Our Blog
Doesn’t Graphic Design/Layout Affect Scanning Patterns?
Jakob Nielsen’s new post regarding how to optimize for online visitor’s F-patterned scanning is a must read. There’s a lot of sound advice there, many of it confirming or aligning with Future Now recommendations. Stuff like:
- Don’t waste hyperlink words on non-descriptive or generic words. Make links keyword rich and ensure that customers can predict where the link will take them. Plan and link for maximum “scent”
- Use plain language. In other words, talk to the dog in the language of the dog (about what matters to the dog).
- Front load user- and action-oriented terms. For calls to action, we’ve always recommended an imperative verb + (implied) user benefit
But one of the article’s baseline assumptions seemed off to me: do website visitors really follow the F pattern regardless of a page’s graphic design and layout? What if you’re selling lingerie? Wouldn’t you expect a different eye-plot than the standard F-pattern; something closer to this:
The whole point of a properly designed page is to direct and guide the visitor’s attention/eyes where you want them to go. That’s why visual prominence is so important to page layout and why people (rightly) spend money testing it with sophisticated eye tracking equipment in order to get these kind of results:
And for more text-heavy sites and pages, wouldn’t skim- and scan-friendly formatting that makes use of bullets, bolding, and embedded links similarly affect or change the F-pattern described by Nielsen? We know the direction of your model’s eyes can affect how people look at your page.
I’d also imagine that just as buying a new car suddenly helps its automotive twins to “magically” appear all over the road, a strongly scented link can allow the reader to notice and pick it out amidst the rest of the text on the page, despite the fact that it may or may not have been entirely front-loaded to maximize the impact of its first 11 characters.
What do you think? Do page layout and scent trump (or at least alter) F-pattern scanning?
[Editor's note: the author of this post is now blogging at jeffsextonwrites.com]
About the author
Jeff is a Persuasion Architect, Web copywriter, blogger, and instructor of FutureNow's Persuasive Online Copywriting workshop. Follow Jeff Sexton on twitter
More articles from Jeff Sexton
- Nobody wants to read your sh**!September 21st, 2009
- Redesign? Ask The Right Questions!September 18th, 2009
- Cross-post: How to Improve a Product Page, Part 1September 15th, 2009
For More, Subscribe To Grok!
- Capterra: The Conference Sept 13-15, Wash., DC
- "Recession Marketing: From Pre-click to Post-click" (webinar) Sept 16, 12pm EDT / 9am PDT
- "Securing the Sale: Turn Your Site's Browsers Into Buyers" (webinar) Sept 17, 2pm EDT / 11am PDT
- Excellence and Innovation conference Sept 28-30, Orlando
- The SEM Conference
Sept 23-24, Oslo, Norway - eConsultancy Peer Summit Oct 8, New York City
- The Bolo Conference Oct 12-14, Scotsdale, AZ
- Google GAAC/WOAC annual meetings
Oct 13-16, Googleplex California - eMetrics Marketing Optimization Summit Oct 19-23, Wash., DC
April 8th, 2009
8:07 am
Great post. I think the main thing is how different the design/layout of a site is from a typical website (website design/layout that is generally used by many, i.e. left right column structure, size of the banner, the normal location of the menu etc.) I think the F pattern only shows on these typical website, that is to say, on website where their design is not too innovative. For example, the baby model page shown above, it is more like an image, rather than a web page. Taking it to the extreme end, if a web page only shows a baby, it is most unlikely that you will see an F pattern.
Great example of how a slight change of element has influenced visitors attention!
April 8th, 2009
8:53 am
Of course. Simply put, the F-pattern should be considered descriptive, not prescriptive. Telling web designers that they have to follow it is a lot like telling copywriters that they can’t split infinitives.
April 8th, 2009
9:13 am
Great Post, in my testing, a quick cross scan of the top of the web page is inevitable and probably universal. Once user determines if site may serve their needs by this scan, the behavior is far less predictable. We know that head shots get 90% of views so their captions are key (captions are key everywhere actually) but we do our best to insure that eyes end up on the key Call to Action. We video test this by checking message retention of the call more then eye mapping.
April 8th, 2009
9:22 am
Thanks for the comments, guys.
Jay, the baby is just an example of eye-tracking principles in general. My guess was that the baby pics were part of a print ad rather than a website. Still, it’s pretty clear from the pictures that visual scanning is largely impacted by pictures, color, layout, etc.
Todd,
Isn’t it interesting how little has changed? In his book, Ogilvy repeatedly warns readers that every picture should have a caption because they’re the most read items on the page. The more things change…
- Jeff
April 8th, 2009
9:43 am
Totally. Pages that conform to the text-heavy lumping that were tested will most likely hold true to the F pattern, but I think at the core of it is that people review the “eyeholds” for context, so the images, the larger type, the beginnings of things. If that engages them, they wander to related, or seemingly related, items on the page.
That is observation based on all the eye tests I’ve seen — when the only cues are text, beginning (title) and starts of lines. When there are other cues (images, models, badges, arrows) that affects how the eye is lead.
This holds true in print design as well, and is a staple of layout.
April 8th, 2009
9:50 am
Great post, I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.
April 8th, 2009
10:03 am
Jeff, whenever I cite that suggestion about captions I always say: “Aren’t you always disappointed when you look at photo in a magazine, newspaper or book and find no caption? I always am and can’t understand why it is so often ignored still. But then we come across a site that “gets it” and all is good.
April 8th, 2009
11:31 am
Although I generally agree with you, I think one of the things about the F-shaped pattern is that it has become habitual enough to kick in before visitors really process your design/information. So, if you vary wildly from an F-shaped layout, you’ll create some cognitive disruption and possibly processing delays and frustration.
Of course, that doesn’t mean every site should look the same, and an alternate layout might still perform better, even if it strongly violates the F-shaped pattern. Even then, though, the habit is still affecting people – it’s just a matter of how well your site overcomes it.
I do think Nielsen had a study on how images and their placement can alter the F-shaped pattern a while back, but unfortunately I can’t seem to find the reference. Clearly, none of these issues are black-and-white – processing something as complex as a website (especially as quickly as we do it) is tricky business.
April 8th, 2009
7:37 pm
Great discussion. We’ve also seen that page design can definitely direct the eye and cause a deviation from the standard F-pattern. Interestingly, the screenshot in the original post shows the downside of this: a design that resulted in eyes darting back and forth all over the page. This is a great reminder of the power (both positive and negative) of page design.
April 9th, 2009
3:28 pm
What I got from the Nielson article was the F pattern was for list items only – not the page as a whole.
For instance
In a List of Links
What Nielson is saying is that
Your eye will tend to read
The first 11 characters – if your
Interest is continued
You will read the full “cross-bar”
If not you will tend to taper
Into a vertical line
Like capital letter
F
“At this point, users see only the very beginning of the items in a list.”
Again, thought it was list items mainly (specifically links in a list). I ended up doing it with the lists he had in the article; so, I at least agree. But, I do see how it is unclear if he is referring to the whole page or not. However, is specifically talking about reading – not bouncing around the page dependent on design contrast/size/etc.
April 9th, 2009
3:31 pm
ps. In the baby images above – regarding text only – you see the F pattern again. The baby facing the text does lead the viewer back to the text. However, the eye path is horizontally longer at the top than at the bottom = F pattern.
April 9th, 2009
3:39 pm
Great comments, Josh,
I’d have to agree. And Nielsen’s article does provide good reason to frontload your material in a given list item. Page layout and graphics can push the eye towards a piece of copy, but the copy has to hold the attention of the reader with the content packed into the very beginning of it. And the baby pic is an excellent example of that.
- Jeff
April 9th, 2009
3:48 pm
Thanks Jeff – concur on your frontload note.
I also apologize for the foray of comments. Forgot to mention – people do this with any body copy they are not actively engaged in. Reference the Journalistic principle of the Inverted Pyramid.
Now we could ask – which came first – people with the F Pattern or the Inverted Pyramid – but, that’s another conversation I think.
April 12th, 2009
11:59 pm
I’ve seen the eyetracking patterns of both men and women at the Victoria Secret site. The F pattern doesn’t always hold!
April 13th, 2009
9:01 am
No Susan, you are surely right there!
There are lots of ways to alter the scan pattern and that is one of the better ones.
April 13th, 2009
3:56 pm
I agree, Todd. And not only is she right, this “mathematical pattern” discussion leads to formulaic design.
Which, any student of Bernbach and VW will tell you…gets you trumped by creative thinkers every time.
April 13th, 2009
5:09 pm
The baby example blew me away – and the discussion has been very valuable too – going to follow the great Ogilvy and check my image captions now…
I guess the lesson – like all things – is, know the ‘basic’ rules when you start out during your apprenticeship, and then once you get confident enough and start monitoring / getting to really know your audience, *that’s* when you get to start breaking the rules, not before.
April 15th, 2009
9:40 am
[...] just finished writing about the impact of design on visitor eye tracking, I naturally found this to be the best part of the article. Lost of great stuff on intelligent [...]
April 18th, 2009
10:18 pm
The scan pattern is definitely a good reminder for any designer, web designer or art director. Especially true for landing pages in online marketing terms.
I remember reading about behavioral studies which reveal humans, given to many choices will eventually delay their decision. This is especially true when the user is faced with a new choice or an option that involves even a minimal risk for the user.
A thing to keep in mind. The interaction has to be motivated or plausible in relation to the layout/copy. Otherwise your ad might turn out to be pretty awkward.
May 5th, 2009
10:07 am
Great resource! I’ve always searched for a site that showed me how a person reads a page. I knew that top attention is on the top-left of the page and follows focusing on the left of the page (usually where a menu is placed) but what about a blank page with its principal content in the center. I think it’s very interesting how people focuses on strong and coloured images, so sometimes it’s better to have a light layout to have people focus on the text.
May 22nd, 2009
1:53 pm
[...] guru Jakob Nielsen recently wrote about his research about the importance of keywords in your hyperlinks. Jeff Sexton shares how to write more persuasive hyperlinks and calls to action so you don’t [...]
May 27th, 2009
8:33 pm
[...] gourou de l’usabilitÃĐ Jacob Nielsen a partagÃĐ rÃĐcemment le fruit de ses recherches sur les mots clÃĐs dans vos liens. Jeff Sexton propose des mÃĐthodes pour ÃĐditer des liens attractifs qui appellent à [...]
June 8th, 2009
5:43 pm
Using this F pattern, I rotated my navigation menu and ads. The navigation menu is on the right, and the ads are on the left where the menu would normally be. CTR is up a bit.
June 10th, 2009
7:26 am
There is a study called ‘Eye Movement Analysis of Text-Based Web Page Layouts’ at http://www.surl.org/usabilitynews/111/eyetracking.asp, which is very interesting.
June 23rd, 2009
4:42 pm
Just discovered the site! Some very interesting blog posts Jeff.
Particularly like the images with the eyetracking analysis carried out on them.
Keep up the good work.
June 29th, 2009
8:14 pm
Without a doubt, the design of a site dictates the way a user uses your site. Something new designers overlook completely
July 14th, 2009
12:55 pm
[...] How Graphic Design Layouts Affect Scanning Patterns Post a comment or leave a trackback. SHARETHIS.addEntry({ title: "Our F Shape Reading Behavior Online", url: "http://blueprintds.com/2009/07/14/our-f-shape-reading-behavior-online/" }); « What’s the Plan!? A Guide to Effective Website Navigation Leave a Comment! [...]
July 22nd, 2009
2:07 am
Most people focus on images, so sometimes itâs better to have a light layout to have people focus on the text.
July 22nd, 2009
3:32 am
Lately, most of our projects have been light on the graphics and heavy on the stuff that matters (good readable typography, colors that easily distinguish different types of content, etc) and it does seem that using color and size to distinguish important calls to action will disrupt the traditional F-pattern.
July 30th, 2009
10:05 am
I think what Nielson is pointing out is how readers follow an F shape pattern while reading articles on Web sites not while visiting an e-commerce site. Compare an article like this A Tour Through Microsoftâs West Campus Commons and Amazon.com”.
August 1st, 2009
3:27 am
The nearer to the number one position your business gets, the greater the chances that you will actually convert your visitors to sales.
August 1st, 2009
9:19 am
Dear Search,
I have to disagree with you. Assuming you mean that the nearer a Website gets to the number one listing for a given search term, that does NOT mean that they have any greater chances of converting a visitor to a sale. It only means they stand a greater chance of converting a search for that key word into a visit to their site. Whether or not the visitor then converts is something that SEO is, at that point, only tangentially related to, at best.
- Jeff
August 1st, 2009
5:16 pm
The theory behind good page design has always been of great relevance to the designer and ultimately benefits the client primarily and the design firm secondary.
Please take a moment to visit the site of Vorzie Studios and view some of our sample graphics and web design.
August 14th, 2009
3:40 pm
[...] above is from an eye-tracking study featured on “Doesnât Graphic Design/Layout Affect Scanning Patterns?” Notice how in this instance focus on the baby’s face actually deterred the viewer from [...]
August 24th, 2009
8:08 am
I am looking forward to see a “Eyetracking for home business”-tookit.
That would be great…
September 11th, 2009
9:03 am
This comment: Donât waste hyperlink words on non-descriptive or generic words. Make links keyword rich and ensure that customers can predict where the link will take them. Plan and link for maximum âscentâ Is really important. Upsetting customers by making them search further on your site for what they want is not clever marketing.
September 24th, 2009
1:00 pm
[...] Layout, F-Shaped [...]
September 30th, 2009
9:28 am
The technology used is incredible, how to they know where people’s eyes were looking? The results of this are interesting for those that use banner ads
October 7th, 2009
1:48 pm
Using this F pattern, I rotated my navigation menu and ads. The navigation menu is on the right, and the ads are on the left where the menu would normally be. CTR is up a bit.
October 7th, 2009
6:30 pm
just read the first
i link your writing
October 7th, 2009
7:10 pm
That would be greatâĶ
October 7th, 2009
7:14 pm
Great post, I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.
October 7th, 2009
7:15 pm
I always am and canât understand why it is so often ignored still.
October 7th, 2009
7:17 pm
We know that head shots get 90% of views so their captions are key (captions are key everywhere actually) but we do our best to insure that eyes end up on the key Call to Action.
October 7th, 2009
7:19 pm
I at least agree. But, I do see how it is unclear if he is referring to the whole page or not.
October 7th, 2009
8:58 pm
Great post. Bookmark it.
October 7th, 2009
10:17 pm
Great post,
I am fascinated by this stuff. Although I would argue that great design dictates how the user reads the page.
October 8th, 2009
2:49 am
a baby above is lovely
October 8th, 2009
2:59 am
Interesting subject
October 8th, 2009
1:15 pm
That is a new technique I’ve just found.
It is very good
Thank you
October 9th, 2009
1:37 am
v. good post
thanks
October 12th, 2009
1:39 pm
Great , Easy changed for better result.
October 13th, 2009
11:52 am
Good idea I will try
October 20th, 2009
2:52 am
Great , Easy changed for better result.
October 20th, 2009
10:50 am
i am looking forward to see a âEyetracking for home businessâ-tookit. thank your for your sharing.
October 20th, 2009
10:54 am
just read the first thank you very much
October 23rd, 2009
4:14 am
New knowledge has increased either. Will be taken to utilize. If anything new is introduced to a nice write I can learn so much other work to the best of me.
October 23rd, 2009
4:15 am
Great , Easy changed for better result.
October 25th, 2009
6:54 am
Great post,just read the first i link your writing
October 25th, 2009
8:43 am
That looks neat. I might haev to use it
October 25th, 2009
9:11 pm
Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.
October 26th, 2009
1:47 am
Great example, all above picture are meaningful.
October 27th, 2009
11:25 pm
Thanks for this great article.
October 28th, 2009
6:28 pm
Indeed, very useful information, thank you.
October 28th, 2009
6:44 pm
It’s nice to see scientific data on the field.
October 29th, 2009
3:05 pm
I’m sure prominent graphic elements will change the scanning pattern.
What I like to do however is to keep web pages extremely simple. I also tend to avoid column layouts.
This works well for me.
October 30th, 2009
5:04 pm
In hindsight, this stuff should be obvious. thanks.
November 1st, 2009
8:06 pm
The nearer to the number one position your business gets!
November 2nd, 2009
2:48 pm
It’s things like this that amatures can’t even comprehend.
November 3rd, 2009
3:36 pm
Usability should be considered throughout the entire design process, many people seem to lose sight of that
November 4th, 2009
2:05 pm
Great , Easy changed for better result.
November 10th, 2009
1:26 am
It certainly does affect scanning patterns it seems.
November 10th, 2009
1:07 pm
The nearer to the number one position your business gets!
November 12th, 2009
12:41 am
Thanks for this great article.
āļāđāļēāļ§āļāļĢāļ°āđāļāļĢāļ·āđāļāļ , āļāļĢāļ°āđāļāļĢāļ·āđāļāļ , āļāļ°āļāļĢāļļāļ,
November 19th, 2009
12:11 pm
Thanks for this great article.
December 9th, 2009
11:13 am
Thanks for this realy great article.
December 11th, 2009
7:14 pm
thank for your information!!
December 14th, 2009
12:38 am
Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.
December 19th, 2009
9:57 am
Thanks for this great article.
December 19th, 2009
10:02 am
Great article. Usability should be considered throughout the entire design process, many people seem to lose sight of that.
December 19th, 2009
1:44 pm
Thx for good article.
December 22nd, 2009
3:38 am
Good job! THANKS! You guys do a great blog, and have some great contents. Keep up the good work.
best regards,
December 26th, 2009
2:29 pm
Hey this is awesome post. I have been suffering this problem for a few days and now I get the solution. Thanks for your psot.
December 29th, 2009
8:33 pm
Indeed, very useful information, thank you.
January 8th, 2010
3:28 pm
i like this place!
January 8th, 2010
3:28 pm
i agree with the guys..
January 12th, 2010
2:30 am
Thanks for the comments, guys.
January 19th, 2010
4:58 am
i like this place!
February 1st, 2010
8:16 pm
Yeah, very useful for anchor text. Thanks
February 2nd, 2010
9:37 pm
very useful article.. thanks..
February 4th, 2010
1:54 am
Good job , i find it.
Thank you for share.
February 9th, 2010
2:26 pm
a very interesting article ..