Kat Fenton

It’s a concept that my teachers briefly discussed in college, something that was more to be considered rather than implemented. But now I’m finding eye flow to be something that strengthens my email design. I’m using it more and more in my process, sooner and sooner. And it’s something that I think every designer could use when creating, especially in email design.

What Is Eye Flow?

Eye flow is the path your eyes naturally take through content. Visual hierarchy heavily influences this, along with natural tendencies. Some design firms use eye tracking as a way to measure the success of certain projects. Designers can use eye flow to influence email design too. However, since it uses relatively new technology, you won’t find a ton of information about it. Many designers use the golden rule to influence the flow of their designs. But I’m here to talk about using your users natural eye movements to create a composition that conveys your message without straining their eyes.

For online content, there’s 2 main types of eye flow. The ‘Z’ and the ‘F’. The Z eye flow is generally used for hierarchy of low-text content. Your eyes follow a Z like path, so place your most important content along this path. The F eye flow is used in much more text heavy content. Generally, a user will start to read, but then look for visual cues as to the subject of the content and eventually return to reading. Thus forming an F shape. Here’s an example from IDF.

You can see from the design example and the heat map where your a users eyes are more likely to go. So use this to amplify your designs! You will not only help your user, but you’ll also help yourself. By practicing this eye flow in your email designs, you’re giving yourself a new approach to the layout. Here’s a quick example of 2 email layout designs I’ve done based off a ‘Z’ and an ‘F’ eye flow.

In the F design, I’m putting my most important information on the left most vertical column and then using a block (could be an image or quote) on the right to naturally draw the users eyes along the path they would already be following. I’m using a similar strategy in my Z design. I put my most important information along the path and even better, the most important, near the corners of the Z.

Why are your email designs in black and white?

If you’re wondering why I didn’t use any imagery or color in the design, that’s because I’m a firm believer that all designs should work without color, imagery, or patterns first. Those design elements are extra. There are exceptions such as in spreads where the text is placed on top of the image, relevant to the content of the image. But even then, it’s good to double check that everything works in black and white (your designs will be more ADA compliant and readable in the long run, so give it a go).

If you’d like to learn more on how to improve your email design and copywriting, here’s a few resources:

• A User-centered Approach to Transactional Email Design: UX Case Study
• Best Practices for Email Design
• A Gallery of Really Good Emails