Visual Direction in Web Design

One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works. Visual direction is controlling the eye movement of the user; this can be achieved by carefully selecting your images and by well-placed and aligned design elements.

It is greatly established that the default eye movement throughout the page (in an LTR – Left to Right – layout) is from the top left towards the bottom right as the image illustrates:

However; this can’t be further from the truth, by arranging the composition elements in a certain way, a designer can control and force the movement of the viewer’s eyes in and around the layout of the design. For example, the eye will travel along an actual path such as solid or dotted line, or it will move along more subtle paths such as from large elements to little elements, from dark elements to lighter elements, from color to non-color, from unusual shapes to usual shapes, etc. Graduation of size, and repeated shapes and size of related elements subtly leads the eye as well.

1. Controlling Directions with Images

Images can easily control how your clients view your design, below are some explicit examples of directional images that can either be used as part of your design or in the content to guide visitors around the page:

Of course it’s pretty obvious which direction these images are pointing to, however many images may not be as clear, take a look at these other examples:

2. Leading the Eye

This is one of the top mistakes designers and content editors fall into, as a rule, never make your images facing outward from your page, images (especially faces and eyes) should be looking towards the center of your design.

Take a look at these examples from both the CNN and BBC websites:

In the BBC example, the 2 top left images are both looking away from the center of the page, this leads to “not-seeing” important information along the default path as the image illustrates:

1. You start at the top left as the usual default location
2. Moving along the default path you encounter the first image looking outwards, so your vision automatically moves outside of the page
3. Your eyes start to look back towards the center of the page
4. You encounter another image looking outwards making you vision again move outside of the page
5. At last your eyes start to move towards the page center, however there is a large “blind-spot” created by the image placement and direction marked by the “?”

Now compare this next “fixed” version of the BBC homepage to the original one above:

Looking at this version you will notice that your eye does not move outside of the page, the people’s faces looking inward help you look in the same direction towards the center of the page.

3. Forms

Take a look at this example showing 2 ways to align labels with your form fields which can greatly affect how easy it is for users to fill out that form:

On the left we have top aligned labels which are faster and easier to fill out than left or right aligned labels (on the right). This is because top aligned labels require half as many eye movements than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.

Placement not only controls how the eye moves, but contributes to making a design easier to use, even if on a subconscious level.

4. Design Direction

The element of direction can have a powerful influence on the mood of a design, but making a conscience decision about the dominant direction in a design can have a noticeable effect on the atmosphere of the work.

Sometimes the image or layout will dictate the dominant direction. Sometimes it will allow you to impose a direction on it.

The clear horizontal lines in the below designs give a feeling of stillness, stability, tranquility and calmness.

In the second group below, the diagonal placement of elements reinforce the feeling of movement and action.

The third group has a dominant vertical direction which adds a static orderly influence to what might be otherwise random, also gives a feeling of alertness and formality.

The same change in character can be seen in these three photographs. The subject is the same in each, the change in directional emphasis creates a different atmosphere in each image.

The vertical emphasis in the first image gives a feeling of orderly formality the second horizontal emphasis feels calm and stable while the third diagonal emphasis feels active and animated.

Conclusion

Always keep in mind how you want your audience to feel, set the mood by choosing the direction of your design, then enforce this by choosing the correct content layout and image selection.

When it comes to forms or text based designs, understanding how your visitors will move their eyes around a design will greatly enhance the usability of your work.