Guiding user Eye in your Designs

An important part of effective design, and part of a site’s ability to retain users, is being able to guide the audience’s eye. Being able to guide our audience and users makes our designs more effective and less stressful to navigate. While this idea and technique is certainly a pivotal aspect in traditional artwork (drawing, painting, etc) we can apply, and you should, to our designs.

Some of the more well known designers and artists guide the users’ eye and this is a part of what makes their designs so effective; some don’t even know they are doing it! Its important to understand why we do what we do in our designs; so if you have been very happy with your designs and their rhythm (yes, rhythm) and don’t know why it has “clicked” recently, we will be taking a look at what you have or have not been doing under your nose. Understanding these philosophies will allow you to generate better, more usable, and engaging designs.

In this first look, we will be going over principles without breaking down any current designs. Lets establish the principles first using basic shapes and diagrams and in another post we will break down what sites are and aren’t doing well with our concepts.

Using Value to Create Rhythm

This is probably a bit more basic of a technique compared to size, space, or the others. Something we are more familiar with and a good starting point for our examination. Color can make or break rhythm; and depending on our purpose we will devise our colors to do just this. Sometimes we want to break rhythm for emphasis and other times we are moving our users’ eyes. The image below shows, in the most basic way, how you can use value (lightness/darkness in a color) to guide the eye.

Another example:

In the top image, right at the start your eye is attracted to the dark bar and moves down to the lighter color. We can’t help this and anything else would be considered disruptive. In the second example, despite me cheating and using perspective, our eye flows great with these same values from front to back.

Here’s an example of this guide being broken by using an extreme value, black:

In this example we find ourselves in two places: top or center. Rarely does our eye even venture to the mid-gray bar (bottom); if you force your eye to pull away from the black bar, you’re creating a conflict that I call Dynamic Visual Stress. This stress can sometimes be used by artists to create emotional points within their artwork, the conflict being “a subject”, but for most design related challenges we don’t want this Stress…so don’t stress out your eye! We do, however, sometimes want to disrupt the “eye guide” to place emphasis on a particular point like what this black bar does. Notice how, once you’ve found this gradient, your eye sits on the black bar and sometimes bounces up? Great. Toss in your call-out, logo, motto, etc, and you’re captivating the audience on what you believe is an important part on your design that you are trying to get across.

Using Color to Create Rhythm

Notice how you’re eye falls onto the red bar. You can’t help it, so don’t fight it. Where does it go afterwards? Up. You’re guided up to the white bar. All 3 of these colors have pretty high contrast and saturation but we can still guide the eye. Typically this bright Red is a color that is used to place emphasis or a call-out, now we are using it as a base to guide our eye. Lets take a look at more advanced uses of color guiding the eye.

This is a bit more of an advanced technique to guiding the eye and a more likely situation for designers. I didn’t take too much consideration in the perfect, exact placement of these objects except making sure they are all far away from each other and not in a row. What is interesting is that we could potentially start our eyes anywhere on this image. It is likely you’ll try, by say looking at the light brown square first because you don’t believe this crap; but eventually you’ll move to the red, orange, and then back to brown. The colors have been devised to move us in a triangular pattern and this movement has created possibilities to push our audience in different directions for any number of reasons the designer wants. This is a very effective technique to guiding the eye and often a difficult one to achieve in design.

Why is it important to know the value of particular colors?

In the examples above, there are important things to take notice of. The examples use objects with different colors and values. If you are using similar colors, the value of each color will ultimately decide how well it will guide the eye. The example where we featured the 3 squares spaced out, the red square clearly has the highest value and saturation while the orange and brown are only slightly different from each other; with the orange being higher in saturation and value. Brown is practically a variance of orange with a hint of neutral color added that reduces its saturation and becomes an easy choice to use as a weak guide tool.

Let it Guide your Users.

What makes these techniques powerful is being able to control how our audience interacts with our work. This is, of course, increasingly more important in good web design – how does your audience interact with your website? Guide them to your Hire Me or Contact Button. Maybe you want to push the audience from your header to the blog/news content underneath. How the audience interacts also affects their perception of the webpage, so help them out. Make your work more powerful by being more effective. This is the essence of these principles, developing our designs to be more effective in getting what we need to get across.

If the eye is scattered, it does not matter how pixel-perfect the designs are; it will be too conflicting and users will bounce right off.

How do you plan on guiding the eye in your designs now? What are some effective examples of guiding?

In the next part will continue to look at these guiding principles and will be introducing Space, Size/Shape, and Symmetry and the techniques that make these qualities effective in guiding the eye in good design.