We've all heard using eye flow for printed material, but what about content online?
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 designs. 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.
Eye flow is the path your eyes naturally take through content. This is heavily influenced by visual hierarchy, but also through natural tendencies. Some design firms use eye tracking as a way to measure the success of certain projects. It can also be used to influence designs. 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. It's especially effective when you feel like you're stuck in a rut. 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.
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 should be used as icing on the cake in most cases. 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).
Let me know how you use eye flow to enhance your designs in the comments or by emailing me at fentonke@mail.uc.edu. If you're enjoying this content, sign up for my mailing list while you're here! You'll get updates whenever I post a new article (which isn't too often so you don't have to worry about spam). I might also send out the occasional happy holiday card too, just for you ;)