bg design

Purposeful Design®: Using Eye-Tracking Results to Design with Purpose

Have you heard of usability? How about user experience or eye-tracking? It’s all part of what we at the Digital Lion call “Purposeful Design®

eye-tracking-web-design

Eye-tracking studies are conducted to track, you guessed it, the eye movement of users when visiting various web pages. The information gathered from these studies is used by web designers to create the very best user experience possible.

Let’s face it, if your website isn’t user friendly, you’re doomed. Since 2006, Jakob Nielsen has been studying online user behaviour, and has determined that people browse the web in a predictable pattern – in the shape of an F.

What’s the Eye-Tracking F-shape?

  • Begins in the upper left corner of the screen moving to the right
  • Users then come back to the top left corner and scan downwards
  • Then they repeat the left to right pattern while scrolling downwards

Here’s a great image that shows how Basecamp is using the F-shape design to provide the best user experience:

f-pattern-website-design

See the back and forth zig-zags? Your eyes are drawn across then down, across then down. This design places important information where users are known to look. When users get all the information they need quickly and easily by scanning the page, they’ve had a great experience. That awesome user experience is what will keep them coming back for more.

Video and images out-perform top SERP positions

Before a user even gets to your website, they’ve probably searched something in Google (or another search engine). How your site shows up in the search engine results page will determine whether or not you get the click through.

Here we have a Moz eye-tracking study that focused on what people look at on search engine results pages. In this study, we see that users are jumping straight to the first video, skipping the #1 position entirely! Hmm, who says #1 rankings in Google are the end all be all? Now that we know what users are drawn to, we can design pages with images, videos and schema mark-up for rich snippet results like these:

eye-tracking-heat-map-serp

As you can see, a lot more goes into designing a results-driven web page than pretty colours and funky fonts. Eye-tracking studies help us design your pages with purpose, naturally leading your visitors down the path to conversion.

Need some help with your new website or video? Give us a call.


About Digital Lion

Digital Lion is a design and marketing agency specializing in website development, graphic design, online marketing, branding/logo design, video animation, and print marketing design. Headquartered in Calgary, and with secondary locations in Edmonton and Ottawa, they work with clients across Canada, as well as worldwide, and are focused on being environmentally friendly and giving back to charities that they are passionate about. The company mission is to “Design a Better World®.”

  • Signup For Our Newsletter