Web Design Psychology Part One: How to Lead the Viewer’s Eye
February 3, 2015 Updated : November 6, 2017
Web Design isn’t just about creating a site that looks good. It must deal with the Psychology of a person who is viewing your Web design.
Just as important is to ensure that it is able to serve the role for which it’s intended, which is to enable the easy flow of information and to help guide the visitor through your content.
The old adage in web design is ‘don’t decorate; communicate’.
What this means is that you shouldn’t be adding features to your site because you think they look attractive – they should be there because they help to instruct the visitor on how to navigate through the page, where to look next and what’s most important.
Sure, you should make your site look good too but ultimately this is secondary to the way that it impacts on the reader and guides them through the page.
Whether or not you’ve been doing it intentionally, your web design choices thus far will have an impact on the way that your visitors navigate through your content.
The arrangement, sizes, colors and more will all help your visitor to determine what to look at first, which direction to scan the page in and how to interact with links and menus.
For the designer, this means understanding and ‘hacking’ the psychology of attention.
Read on and we’ll look at some basic techniques you should be using to guide your visitors across your content.
Understanding the Basics :
The first thing to think about when it comes to guiding your visitors’ eyes across the page, is the preconceived notions they will be arriving on your page with.
One of the main examples of this is the fact that we consume information from left to right and from the top to the bottom.
If you have a page with lots of elements then, your visitors will very often start by looking at the top left and then ‘scanning’ their way through the page.
Important things like logo design should go in the top left.
Another hot-spot for important information is the center of a page – as we will often look here early on in order to get an idea of the ‘big picture’ when it comes to what’s on the site.
This is another good starting point for the flow of information, but it leaves you with less space for filling the page.
Interestingly, if you had a big spiral of text that filled the page, viewers would probably see the middle first but they would begin reading from the top left to travel inwards.
While we will tend to start from the top left and from the middle when reading information, it’s important to note that you can use various ‘cues’ as a designer to suggest that readers start elsewhere.
For instance, we tend to look at things that are bold first and we look at things that have the most color contrast first.
No matter where you put it on the page, a big block of bold, red writing will get seen before the rest.
The idea here then is to ensure that your message remains congruent.
In other words, you want to place your important elements in the middle or top left and have them be the boldest and highest contrast – otherwise you create a conflict that leaves the viewer unsure of where to look.
This is also why the first letter of an article in a magazine will often be bold and colorful – it creates a very clear starting point (as in this article!).
This is also why minimalism is so useful, because the less you have going on on the page, the easier it is to create contrast and get something to stand out.
If you have too much color and noise, then you will only end up confusing the reader.
Moving images also tend to attract attention too, which is why banner ads are often animated.
This, as with our preference for the color red, is a result of our evolutionary history.
That is to say, that in the wild we would have been looking out for predators and prey which meant we needed to be highly sensitive to movement.
Again, you need to make sure not to over-do the movement and the color, as otherwise this will create conflict as the viewer’s attention is pulled in multiple different directions at once.
Of course you can also use visual cues that make it very clear where you need to read or click, such as arrows.
Don’t be afraid to simply point at the things you want people to click or read a we’ve been conditioned this way our entire lives so it’s a very effective technique!
In the next part of this article, we will be looking at how designers should create balance in their design and at how you might accidentally be sending unconscious cues that confuse your viewers.
Looking for building a website? Have questions about web design partnership? Let us know how we can help you.