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.
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in March of 2011.
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:
- You start at the top left as the usual default location
- Moving along the default path you encounter the first image looking outwards, so your vision automatically moves outside of the page
- Your eyes start to look back towards the center of the page
- You encounter another image looking outwards making you vision again move outside of the page
- 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Ahmed Hussam
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Yet another great article Ahmed (we’ve come to expect nothing less lately!) – I especially like the reminder that images on the web exist inside the context of the rest of the layout… it’s such a simple thing, but so many websites select images without regard for how they read within the actual layout.
Thanks for the great read!
Thanks Brandon although these words make my mission tougher for future articles :)
What a great article! As often as I’m tasked with finding vivid images to compliment my designs, I’ve never considered their contents as a potential director of the user’s focus. It’s original and insightful pieces such as this that’ll keep me coming back for more. Thanks, Ahmed!
Glad you enjoyed it Ben. Thanks!
I agree with Brandon, great job on this one. I didn’t think about the form labels and text fields being side by side instead of on top of each other. Thanks!
Thanks for reading Conner :)
such a good and pertinent reminder. I really enjoyed this one. Thanks !
Glad you enjoyed it :) thanks!
Thanks for the article, it is very informative and inspiring to someone new to web design.
This was a very nice reading, I want more about composition!
Very informative article. Proper choice of color also helps.
I’ll be doing an article about color later on down the line
I told my gramndotehr how you helped. She said, “bake them a cake!”
Wow, really awesome article. I really enjoyed reading through it!
Very cool thx!
This is taught in the elementary classes of any design course. Glad you wrote about it here on webdesigntuts.
People must also be careful about flipping images with caution while trying to lead the eye into a design.
Great post on an overlooked subject. Great read.
Very nice article, it’s hard to find quality articles about design theory on the web. Luckily we have you guys at tutsplus <3
Very nice article, it’s hard to find quality articles about design theory on the web. Luckily we have you guys at tutsplus <3
Thanks Ahmed,
I didn´t know about the forms stuff, will apply it from now on.
Great article :)
Thanks Cesar, Glad you liked it
Wow, this was a really good article. Yeesh, man. I think you just made me a better designer, both in print and web.
Glad you found it useful – Design is all about experience and psychology :)
This is really a great post. There is so much to learn from. I would like to see more tuts about composition. This series based upon theoty is really interesting.
Thanks :) I’ll try to cover every detail and step of the design process in my articles – and as you said this whole series is just great
Oh my god, your article makes me feel I’m still stupid.. lol. Great post!
LOL! :)
I never considered what direction people are facing before. The difference in the BBC/CNN examples is astounding!
Thank you for refreshing my mind on these techniques they seem to get lost sometimes and you need something to jolt them back into your designs
you put out some nice stuff, it great to know how images and stuff can change the focus off content
I guess I could say that this doesn’t only work for english language because you could lead viewers eyes with images even when using right to left languages such as arabic.
Correct, it doesn’t matter at all what direction your language is – you will always have control over the direction with your carefully selected images
Correct, it doesn’t matter at all what direction your language is – you will always have control over the direction with your carefully selected images
Good to follow the right directions! :-D
Thanks for writing in : )
Thanks for this great article Ahmed.
I think your use of BBC/CNN as examples is a poor choice, and doesn’t take into account that news sites’ pages are static from a layout perspective, and it’s the content that changes (frequently). A page cannot be redesigned b/c someone’s eyes in the pic currently featured (for probably a day, at most) look offscreen. A more compelling, journalistically-strong image takes precedence over the direction a viewer’s eye moves. Because ultimately, while a viewer’s eye may be encouraged–not forced–to look away from the content, a viewer’s brain is going to encourage far more strongly that the viewer’s eye moved back to where the content is. Especially on a news site page, which is content-heavy. I would have used different examples where the imagery was not so dynamic. Designing for static when dynamic is intended is a far more egregious error.
Thanks Beth for your comment, actually in such cases as in news sites, the editor who chooses the photos should have some say and have some minor editing done to images in some cases such as flipping them horizontally or moving them to the left or right of the content based on the image direction… the problem is usually they just add the image without really understanding how it could impact the article or news page design.
I do understand (and agree) that in some cases that may not be feasable, however in the specific BBC example above, the photo could easily have been flipped to give a stronger impact and coherence to the page design – if you want a good user experience you can’t just separate design and content and treat them as non-related pieces of the puzzle – they need to fit together perfectly to complete the image.
Awesome article … :)
I went through your blog which nicely cover the topic of Visual Direction in Web Design. Ever picture and concept are really visualization and clear.
Regards,
web design company India
:d :D :D… congrats, i liked it!
Excellent article about setting the mood by choosing the direction of your design. I think that keeping the user in mind is key. Especially when you look at the detail of how they will see each page. It’s very important to step back from the web design files for a moment and reflect on that.
Web Design Utah Valley/a>
Great work and great thoughts on considering the way we look at a web design
Web Design Salt Lake City
Thank you, this article was a eye opener for me. Hence forth i will adhere to these tips.
Love the article.
Have to agree with the forms in terms of ease of use. However as a designer I prefer them side by side….. Guess its the arguement about style over practicality.
I have to disagree with flipping a photograph for News sites. Sure it is probably okay for fashion, cars, stock photos, etc… but for News sites such as CNN and BBC you are taking the photographers story telling and completely changing it. To me it is like taking someones logo and flipping it. You shouldn’t do it. I used to work at a newspaper and I was onced yelled at from a photographer who’s photo I altered to make the design better. He was right in doing so.
What if CNN had an overhead picture of a Nascar race. The cars turn to the left only. But if you flip the photo and have the cars turning right that would be a huge mistake. You have to be VERY careful with News sites. News sites are so dynamic and change every minute. Unless you have 100% creative control dont flip the picture. 100% creative control meaning your own blog, your company site, but for a news corporation it is a big no no.
This was a great article – very helpful! I’m going to check out the rest in the series now, thanks :)
Nothing but simply awesome tutorials.
thanks … i liked it lool :D