Following on from “Psychology in Web Design Part 1″ i’ll conclude by looking at other tools in a web psychologists armourey namely: Layout, Eye Patterns, Use of Branding and Colour Theory.

Layout
The anatomy of a web page can be broken down into a variety of elements which all need to work in unison.. By producing an aesthetically pleasing final composition  we can effect the emotions of our user in a positive way.

You should also look to apply basic principles of artistry like the golden ratio which will help lend a balance and symmetry to your designs. The golden ratio is based upon a mathematical equation which is underpinned by the number 1.62. The basic principle goes that you can divide elements by 1.62 so they work in perfect unison with one another. For instance if your header is 960 pixels wide you can divide it by 1.62 which leaves you with the number 592. So we can allow this equation to dictate the size of our main content container i.e. It will be 592 pixels wide. We can also use the ratio to establish the height of elements by applying the same formula. I’ve found that when using this method in conjunction with grids I can invariably produce a perfectly balanced page .The purpose of the grid is to align layout elements and scale things proportionally. The grid I use breaks down my page into 16 different columns which I can then use to align elements in their own right or in relation to one another.

Eye Patterns
As I said earlier humans are predictable; creatures of habit. Because of this they have certain expectations of where things should be positioned and by adhering to these preconceptions you automatically make your user feel comfortable, like when you go into the lounge of a good old friend you haven’t seen for a while…. to be greeted by a roaring fire and crumpet. This sort of familiarity puts the user at ease and is more likely to do what you want them to do!

By studying human behaviours we can begin to see patterns emerge and we as designers can use these to our advantage. The most obvious and significant of these is the movements of the eye across the screen. This is known as eye tracking and helps us understand the order in which the user will view the pages content. When viewing a screen, humans tend to start in the top left of the page and scan down towards the bottom right of the page. This is why it is popular to put your logo in the top left of the page; essentially it is the first thing the user will see.

Brand / Logo
Obviously the brand is important but in terms of hierarchy it is nowhere near the most important thing; the product or service you are promoting and CTA’s are far more important. A great website starts with a great brand and I stand by the idea that the brand should be the cornerstone for your website. Another common client mistake is “Please can you make the logo bigger Mr. / Mrs. designer”. I know I keep touching on client mistakes but for any of this design psychology to work you will need a cooperative clients (now techniques to make your client more cooperative that is a one for a future article.) As I stated earlier people may buy into a brand but the reason behind why they buy into the brand and in some instances become emotionally attached is because of the product or person behind the brand not the logo itself. It is the content and the brands ideals that should be highlighted not the logo. If however the client keeps pushing a compromise could be to use my old friend Mr. White space. Add more whitespace around the logo as this will place emphasis on it in a more stylish manner. Client preferences need to take a back seat to proven design principles.

Colour Theory
The brand will also often determine colours within your site, but it need not dictate the entire colour palette (unless of course you are working under strict brand guidelines.). Colour has a huge effect on your customer’s wellbeing and is something we need to remind ourselves of so we can make educated choices on colour rather than choices which are based on personal preference. As I’ve said before personal preference with no reasoning behind it (from the designer or the client) is something which needs to take a backseat to proven design principles. Colour Impression accounts for 60% of acceptance or rejection of a website, so I think this highlights the importance of choosing the right colour combination. Here is a little breakdown of the implications of colours:

Yellow: Is a lively colour which grabs attention. It is also a high energy colour, use it to create buzz around your site.

Orange: This is an enthusiastic, cheerful colour which is also associated with stimulation and affordability which could make it a great choice for a cta on an ecommerce site.

Red: is a powerful and colour associated with excitement and boldness. Be careful though as it also has negative connotations i.e. traffic lights alarms, blood.

Pink: Associated with romance but can also be calming. Beware though too much pink can lead to agitation!

Purple: A royal colour associated with power and nobleness. A complex colour also associated with wisdom and mystery!

Blue: The most popular colour on the web and a colour which is also associated with professionalism, reliability and trust .A good choice.

Green: The colour of nature associated with safety, optimism, calming and reliability. I give the green light for this colour!

Conclusion
So in preparation for the design of your next website,do a little research into web psychology. Remember to be a pioneering designer we need to explore new routes and I believe the area of psychology is key to this, especially with media like video becoming more prominent within websites. Web psychology also has many similarities to User Experience which is another hot topic at the moment. I’ll leave you with a little analogy which I heard and liked:

User experience can be compared to conversations. Good ones make you feel affirmed, confident happy to express yourself…be yourself. The opposite of this are forceful conversations where you are constantly interrupted and not listened to. Design from outside in rather than inside out.

 |    |