Predicting User Eye Movements

screenshot

Establishing a conscious and intentional visual hierarchy is something that I’m constantly discussing on Design Shack. Being able to structure a page so that the user receives information how you want them to is a huge key to being a successful graphic designer.

Every time you create something, you should be constantly analyzing where and how you’re directing the user’s attention. If you neglect this step, the result could be that a typical user takes a rather undesirable path that you’ve unintentionally set up. For instance, something in your site footer could grab a user’s attention above all else and then lead it off the page, causing the person to lose attention and move on rather quickly.

The more you make conscious decisions to consider visual hierarchy, the better you will become at wielding this principle. You’ll learn to instinctively make decisions that maximize the message you’re trying to convey and encourage action where necessary.

Ultimately however, intuition is a tricky thing. Simply “feeling it out” is not always the safest bet, especially if this concept is new to you. So how can you be sure that your design is being viewed the way you intend?

Tip: You’re an Unreliable Source

The first step in the process of considering how a user might read your design is to analyze how you yourself read it. An exercise that I typically engage in is to stare outside of my monitor for a few seconds to clear my mind then to look back at the design and let my eyes wander where they will. Carefully think about what in the design is grabbing your attention and why. This will give you a decent idea of which elements people will tend to gravitate towards.

Despite the fact that I think you should perform this task repeatedly throughout the design process for every page layout project you embark on, the unsurprising truth is that this experiment is heavily compromised by you the designer.

When I Paint a Room, I Only See Mistakes

screenshot

When you view something that you personally created, you have almost no chance of actually looking at it the way everyone else does. This is never more evident to me than when I paint a room in my house.

After I’m finished with the room, I step back and look around to survey my work. Inevitably, this is the moment when I become very discouraged. My eyes don’t see a nicely painted room but instead jump from place to place, targeting in on the places where I know that I made the tiniest of mistakes: that point where the wall paint bled slightly over to the ceiling or where the trim has a slight drip.

It’s not actually the case that I’m a horrible painter, I’m just more prone to see the small mistakes because I know they’re there. When anyone else walks into the room, they see a nicely painted room and would have to search tirelessly to find the mistakes that I can’t ignore.

Fast forward a few weeks and I’ve become used to the painted room. When I walk in I don’t look around and spot the mistakes, in fact, I barely regard the quality of the work or even the color of the paint. Instead, there’s simply a subtle change in the mood or feel as I walk into the room. This is of course the ultimate goal of the project, I was merely unable to experience it properly until I had become detached from the work.

Back to Web Design

Fear not, there’s actually a point to that longwinded story. Just like me with the painted room, you are unable to honestly view and analyze a design as you create it. Even if you’re proud of the work and don’t find any fault with it, your eyes will still tend to look at your favorite components: that logo that you spent hours perfecting, the texture that you’re so proud to have created from scratch or the headline that you carefully crafted with pixel perfect kerning.

Your personal involvement makes you a lousy example of how a user will read a design. So what’s the alternative then?

Testing Methods

screenshot

The best way then to se how a typical user will view a design is to get some people in front of it. If you work in an office, you’ll be tempted to ask the people around you, but designers in general tend to look at a design differently so unless that’s your audience, you still need an outside opinion.

Obviously, the best way to go about something like this is to build a focus group, set up some eye tracking software/hardware, and run as many tests as you can to see how people respond to the design. Then you collect the data, average it out, create some heatmaps and bam, you have a perfect picture of how someone will read your design.

You Want Me to Do What!?

I can already see what you’re thinking. This is a bit ridiculous isn’t it? Unless you’re designing a new homepage for a multi-million dollar company, there’s no way you have the time, budget or resources to follow the advice above on every project. The mere suggestion to do so is entirely laughable!

The good news is that you can achieve similar results without all the hassle. Because people tend to focus on certain items, we can use software to predict with a fair degree of accuracy how a person might read the design. So basically, some smart people teach an application how to view a page like a human and then you show your design to the application to receive feedback.

Meet Feng-Gui

I’ve been looking for a decent solution for simulated eye tracking for a while without success. Then I heard Paul Boag mention a product that really seemed to be what I was looking for: Feng-Gui.

screenshot

Feng-Gui allows has an impressive series of tools that is aimed at helping you analyze your design from a perfectly objective viewpoint. If thus far you’ve been slightly intimidated by this entire discussion, don’t worry, these tools are so easy anyone can use them.

Analyzing a Design

To see an example of the type of information you can glean from products like Feng-Gui, let’s take a look at the Apple home page. After all, if anyone gets this stuff right, it should be the amazing Apple design team. Here’s the page in its current sate:

screenshot

Once we have a screenshot, we can upload the file to the Feng-Gui dashboard shown below. There are a few basic controls for adjusting the parameters and a tool to select certain portions of the image and designate them as unique “areas.” The shot below is all ready to go, we need only to hit the “Analyze” button.

screenshot

The Heatmap

Once you hit the Analyze button, Feng-Gui takes off and does its thing. In just a minute or two you have a few extremely helpful resources at your disposal. The first and certainly one of the most helpful is a good old heatmap. This makes it immediately apparent which portions of your design are catching the most attention.

screenshot

One look at our sample project above and we can immediately draw some valuable conclusions. First of all, the headline announcing the iPhone 4S is definitely winning the attention battle. This makes perfect sense as we’ve all learned to instinctively gravitate towards large headlines as an important source of information.

Another major contender is an area on the right of the hero shot of the three iPhones. This holds a very valuable piece of insight. The area that is highlighted is not so much the iPhone itself but the picture on the phone: the face of a little girl. Always remember that faces are magic when it comes to grabbing the user’s attention. We simply can’t help it, when there’s a face on a page, our eyes are drawn right to it.

Notice how the hierarchy seems to be taking shape. We see that the majority of our attention is being directed toward the headline, this is then moved down a little to the hero product shot and is pulled down further by a colorful picture of an iPod Touch in the footer. This page really seems to be reading well from top to bottom.

We can see this same information in a different way by clicking on the Opacity tab. Here everything has been blacked out and faded back in according to the heatmap values. This view really gives you a perfect picture of what a user might absorb after a quick look at the page (which is typically all you get).

screenshot

The Gaze Plot

As I’ve hinted at several times already, it’s not just important to know what the user sees but what order they see that information in. This helps you construct the page in a way that maximizes understanding and retention of important elements.

Feng-Gui provides for this need in the form of a Gaze Plot. This shows the software’s best guess at how a user might read the page. The result looks fairly crazy, which is good, because our eye movements do tend to be quite sporadic when reading a page.

screenshot

It’s important to note that your natural inclination is to read a page in a “z” pattern: left to right, top to bottom. However, as designers we can break this natural inclination. Notice how in the example above, the first focus point is at the top right of the page. There is definitely a noticeable back and forth pattern though as your eyes try to revert to what’s natural. According to Feng-Gui, each point of focus on this image lasts “for around 200 ms during the reading of linguistic text, and 350 ms during the viewing of a scene.” So even though it may seem like all this eye activity would take a while, in reality it happens in the span of a few seconds!

Thinking about these results we can once again tell that the Apple page is fairing pretty well. We start with the headline, jump to the product heroes, look down at the footer, and then begin to read the finer print on the page. This is a perfectly logical progression, which indicates that Feng-Gui is performing pretty solidly.

Does This Really Help?

To many designers, this is all going to seem like a pointless exercise. After years of being a professional designer, many of us could’ve reached similar conclusions on our own. However, I urge you not to discount the value of products like this one.

For starters, not all designers are built to think like this. Working eye-tracking simulators into your standard workflow will help you remember to critically analyze a design to see if it’s meeting your goals. Further, even if you have the theory down, it’s really nice to see an objective viewpoint. Software will never be as good as a focus group of fifty users, but it is definitely a nice alternative for those short on time and money.

Finally, regardless of whether or not you need a tool to help you see what a user sees, you can bet that your client isn’t as highly trained (otherwise, why would they need you?). This makes heatmaps, gaze plots and the like incredibly useful tools for building client reports that justify your design decisions. Armed with these you’ll look infinitely more professional in a presentation! You could even bundle such a report as an optional premium add-on to help boost your profits.

Conclusion

To sum up, page layout is much more involved than merely arranging the elements in a way that looks pretty. It’s about willfully structuring a message and user experience that meets a set of established goals. Too often designers stick elements in wherever they seem to fit with zero thought as to how it might disrupt the flow of information on the page.

Tools like Feng-Gui are a huge help in your quest to learn to structure your designs in a logical and effective way. Have you tried some other similar service? How does it compare? Let us know in the comments!

Image Credits: Micky, karpacious, City University Interaction Lab