March 2, 2020

1057 words 5 mins read

Design using eye-tracking

Design using eye-tracking

⚠️ The Problem

I wanted to design a book cover and wanted it to be the best that it could be. But what does it mean for a design to be the best?

Well, of course, you shouldn’t judge a book by its cover, but you do! Everyone does. Not just books, but apps, groceries and even people by their design, packaging or clothing.

Based on that I wanted a book cover to be as eye-catching as possible. I think I’ve hinted my point enough, let’s just get to it.

💡 The Idea

There should be a way to go through a bunch of examples of the thing you want to design and take note of the things that catch your eyes. Luckily, there is.
Let me introduce you to the world of eye-tracking.

👁 eye-tracking

Showing webpage with eye tracaking heatmap

eye-tracking example measuringu.com

How our Eyes Work

We make these rapid eye movements called saccades. The word comes from a French word for jerk (a type of movement). What that means is that we don’t make smooth, continuous eye movements when reading or when scrolling a website. We fixate on one point at a time and rapidly switch between them.

Fixation points in a sentence 'What one needs for fluent reading this text'

Fixations when reading a sentence

Designs with a lot of fixation points are difficult to follow. That was a problem with a lot of websites in the early stages of web design. However, with the inclusion of more designers every day, websites are getting cleaner and easier to follow. Even Reddit was cleaned up recently!

Other than the amazing search algorithm, Google homepage’s simplicity was a big reason for its success. It was as simple as it could get. I’ve read somewhere that they didn’t know HTML when developing initial Google’s homepage so the simple design was the best they could do at the time. Whatever the reason for the design, it was successful and just the site the World needed.

Use it to Your Advantage

Contrast

Be it a color contrast or a size contrast, contrasting elements are the biggest fixation points.
That is why iOS uses red badges for app notifications, and why the subscribe button is the biggest button on any YouTube page.

Muscle Memory

Completing the same movements again and again leads to muscle memory. This is a known fact and it is also true for your eyes.

Years of looking through webpages made us remember certain movements and patterns. We expect some elements to be at certain places in the design.

F Shape Pattern

Users often read Web pages using an F-shaped pattern: two horizontal stripes followed by a vertical one.
This most probably comes from Google’s search page design (most important at the top left), and our left-to-right reading habits.

F-shape heatmap on a Google search page

F-shape pattern example


❓ What to Look at

Think of what you’re designing for. How will the customers be purchasing the thing you’re designing?

If it’s a book, go through a bunch of books on Amazon e-Books store, or any other website that offers books.

If you’re designing an app, go through Google Play Store, or App Store and look at a bunch of apps.

Whatever it is, there is a place online where you can look through a bunch of examples—worst-case scenario, it’s Google Images.

🧲 Hooked? Here’s a How To

The idea is to somehow follow your eyes and map where on the screen you look at the most. This is usually done with expensive hardware peripherals, but for our purposes, your laptop webcam or your selfie camera should do the job.

There are a lot of products out there that offer eye-tracking. However, if you just want to get started the simplest solution is gazerecorder.
It works on a phone and your web browser. Here is a demo:

For best results be in a well-lit room. It does work with glasses, but best leave them off if possible.

What you have to do is

  1. Open the app
  2. Type in the URL of the page you want to look at
  3. Calibrate the app by looking at the red dot
  4. Scroll Away!

In the end, you’ll be able to look at your heatmap.

📙 My Results

What I learned from this experience is that when it comes to book cover design, I’m attracted to

  • Big, bold typography
  • Saturated colors—bright reds, oranges, and even yellows.

These, of course, are my results. However, since my eye movements are mostly involuntary, I expect other people would get similar results.

🧪 Testing Your Designs

If you are, for example, designing an app for a specific audience like children, seniors, visually impaired, etc. You should find a person from that group and ask them to look through a bunch of apps.

When your design is complete, do the eye-tracking test again. See if your focus and the focus of your test subjects is where you want it to be.

If you’re able to, try to simulate an app store or book store page by injecting your design there. If you have ever created a website, this shouldn’t be a problem.

🖼 The Big Picture

This is just one small portion of the eye-tracking world. If you found this interesting, I suggest you read up more.

  • Here you can check out an interesting article about eye-tracking in UX design.
  • Here you can read up more on general design and eye-tracking.
  • Here are also more thoughts on eye-tracking in general
  • Here is a great article on general scannability of websites. It goes more into patterns we do with our eyes.

The principles discussed here can be used for anything involving design. You could look through a wall of YouTube thumbnails before designing one. You could also go through a bunch of landing pages before settling on a layout.

You’re probably already looking through a bunch of designs for inspiration before starting any project. Adding eye-tracking to your toolset should give you even more insight on what and how to design. Also, when a client tells you to design something eye-catching (🤢), you’ll be one step ahead!

However the design evolves through the years, our eyes will always follow these basic principles.

In the end, I encourage you to just try this and see if it’s useful for your process. Feel free to link to your projects in the comments below and tell me how the eye-tracking helped you with the design.