How knowing about the eye’s Foveal viewport may change the way you look at your next campaign.
At Emma, we’re always thinking about audiences and the important role design plays in communicating your message. We also do a lot of thinking about the concepts behind the why. Why is one campaign more effective than another? Why do some links get clicked more?
We often talk about reasons like headlines and timeliness, but here’s another concept you might want to be consider: the Foveal viewport. The fovea is the part of the eye that makes it possible for us to have 100-percent visual acuity. So what the heck does that mean? Well, when we look at something, we see only a small area of it in complete focus. We may think we see the whole picture clearly, but we don’t. Leonardo da Vinci was actually the first person to discover this issue with sight lines. Elements that fall outside this area get blurry – they get blurry quite fast, actually. As our eyes move, or to use a fancier term saccade, this area of complete focus moves as well. This area of complete focus is called the Foveal viewport.
For example, when we look at this web page, we may think we see the whole page in focus:
But here’s our reality, with only the Foveal viewport in complete focus:
Another way to see the size of this is to hold your thumbs up next to each other — the area of your two thumbnails is roughly the same size as the Foveal viewport.
So how can you apply this to email design?
+ You can place your most important content where your audience is most likely to see it when they first open your campaign.
+ You can place pieces of related content in close proximity to each other.
+ Since the Foveal viewport moves as a person looks at something (and our eyes look for things that stand out), you can place any calls to action as close as you can to the related content.
Let’s say you’re creating a campaign with an announcement about your new deli lunch menu.
Not bad. Appealing photo along with hunger- and thirst-inducing copy. (Excuse me while I go grab a pop.) Ah. Now, let’s take a look at the Foveal viewport.
Your first thought might be that the viewport will move, so no worries (that’s what I thought too). But it’s been shown that people often don’t even see items that fall outside the viewport. So what if you shortened the copy a bit to get that button closer?
Much better. Besides the copy being easier to scan, the button you want people to click on now falls within the same Foveal viewport. Pretty cool.
It’s also worth noting that too much focusing between saccades can cause fatigue. This refocusing happens hundreds of times every minute without us even knowing it, but the effort adds up, so you might want to avoid making your audience work so hard when they’re reading. Because let’s face it – do you really want your audience to feel tired after they read your emails?
Here’s what you can do:
+ You can minimize the amount of content you’re asking people to look at.
+ You can minimize the amount of content you’re asking people to decide between.
+ You can be sure your email templates aren’t too wide.
Knowing what Leonardo da Vinci knew about how eyeballs work just might change the way you look at your next campaign. With a few tweaks to your designs, you can help your audience see things the way you want them to see them.
Editor’s note: This post launches a new series from Emma’s UX team – they’ll be sharing ideas, tips and expertise about email usability (and perhaps occasionally mentioning medieval geniuses).
« A fresh approach to custom design June design showcase: Studio Design edition »
Emma is a member of the Email Sender & Provider Coalition and the Messaging Anti-Abuse Working Group.
Copyright © 2003 - 2012 Emma. All rights reserved.
Emma team, I heart you. This is a perfect example why.
Thanks!
Cool Idea! I guess this links in with other points – like the fact we naturally read left to right – top to bottom (making top left a hotspot) – so coupling these theories will make your email way more digestible!
Those are great concepts too, Jay. Thanks for mentioning them. I like to think of all these concepts as tools I can use when designing. I don’t use every tool every time I create something, but I can definitely use more than one to achieve my desired goal. Given the short attention span of folks these days, we’re competing with a lot of stuff out there, so anything we can do to get our message across, the better.
A great book that adds to this discussion is _The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice_ by Robin Williams. She gives some simple guidelines (Proximity, Alignment, Repetition, and Contrast) and examples that really helped me understand what happens when eye falls on print (or web, email, etc.), and how good visual design can enhance your reader’s comprehension of your message.
This is really interesting Geoff. Thanks for the cool read, I’m going to try to put this into practice.