September 28th, 2012.
“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organising information in a way that’s usable, accessible, and logical to the everyday site visitor.”
Brandon Jones on Sep 28th 2011 www.webdesign.tutsplus.com
The basis of design is communication – relaying a message or inducing a reaction, calls or click. With basic media advertising designers were fixated with the 3-second rule, whereby the advert has 3 seconds to get its message across above other adverts on the page.
The 3-second rule dictates that media adverts should incorporate bold, simple and clear messages and images. When implemented, this often led to aggressive layouts that were not pushing the envelope of design and could actually be classed as de-evolution of design. The finished result was an advert that was not necessarily aesthetically pleasing, but does bring into focus the importance of design hierarchy.
What does the user need to see in order?
- Sector / Product / Service – Industrial and Commercial Flooring (heading and image).
- Key information usually displayed as bullet points for ease of reading.
- Area(s) the company covers or is based in (Loughborough).
- Local Contact Number (01509 000000).
What do you want them to do?
- Recognise the sector, service or product being supplied by the company.
- Gain reassurance that the company is local and supplies what they are looking for.
- Call the telephone number
This hierarchy principle continues today and forms the basis of all media advertising.
Similar time frames have been mentioned when viewing websites but you very rarely get multiple websites shown side-by-side, advertising the same sector.
Website design has increasingly required multiple messages or multiple design prompts which navigate people around a site to a desired location or outcome, meaning hierarchy has become an even more vital part of design.
Once a website is opened it competes against itself, with its own messages and design prompts. A site will succeed or fail according to how well the design functions for the user. This is also dependent on what the user requires from the site. Getting relevant traffic to your site overrides all visual stimuli, but that’s a whole new subject that I won’t get into now.
Good hierarchy in web design should dictate what you want the user to read, in what order and where you want them to go. Destination or conclusion depends on the requirements and reasons of the user and most websites will contain information for multiple products or services including required action for each, such as call, click or renewed confidence with the company for example.
“The human brain has innate organizing tendencies that “structure individual elements, shapes or forms into a coherent, organized whole.”
Jackson, Ian. “Gestalt—A Learning Theory for Graphic Design Education.” International Journal of Art and Design Education. Volume 27. Issue 1 (2008): 63-69. Digital.
The human brain does not view individual items on their own merit and will instead organise them against the items around them. Items are instantly judged and ordered and size, shapes and colours inform us that the items may have more dominance than others. Understanding these principles allows us to form hierarchy within designs and use this to control the users pathway through the design.
Brad Jones explains 5 steps to analyse hierarchy in his post on www.webdesign.tutsplus.com:
Take a website you want to analyse and follow these 5 steps:
- List the key information points that visitors are likely seeking.
- Assign values (1-10) according to their importance to the average visitor.
- Now, look at the actual design again.
- Assign values (1-10) according to the actual visual importance as you see it in the live design.
- Consider: Does the expected importance match up with the actual designed importance?
In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read.
Brandon Jones on Sep 28th 2011www.webdesign.tutsplus.com
The designer’s role is to take the required information and break it down into visually relevant and easily digestible portions. This has to be done while taking into account the goals and messages of the design. It is not enough to just layout the information, it has to work.
In general, service or product sites tend to work around USPs (unique selling points) and CTAs (call to actions). 2 or 3 USPs encourage the user to have confidence in the design and the 1 or 2 CTAs encourage goal conversions. These have to be displayed around a main message USP to allow the user to be reassured that the site they are using holds the information or product they are looking for.
Unfortunately, design input rarely comes from one direction. In an ideal world sites would be carved from pure creativity while using god-like functionality and subconscious triggers all based around the hierarchy mentioned earlier. In reality, the client will always want the logo bigger and will always ask “can you just make these 12 things all stand out more?”
The struggle continues…
“This post was written by James O’Flaherty on behalf of Adtrak”
I’m about half way through The Elements of Typographic Style and thoroughly enjoying it. I really wish there was a way you could read a book and ride a bicycle so I could get more reading time in while commuting, but I’ll just have to take my time reading it instead!
Some thoughts so far…
“With type as with philosophy, music and food, it is better to have a little of the best than to be swamped with the derivative, the careless, the routine.” (Page 117)
I think this is true of all design. In a time where you can get free website templates anywhere or make a website yourself so easily, the designs that have a lot of thought, care and expertise behind them really stand out from the crowd.
Shaping the page
Although the book focuses on print, the principles found in the chapter Shaping the Page can be applied to web design also. It is a great reminder to me of design school, especially the theories of the Golden Section and Fibonacci series. Using ratios based around π are useful for arriving at a design that is easy on the eye and feels comfortable to use.
What you read opens your eyes to things around you; I have been noticing nicely designed type everywhere! Recently we spent a weekend in Zürich – I love it how clean, thoughtful design surrounds you in that beautiful country.
Thank you to Steff for passing on this lovely graphic illustrating the differences between Helvetica and Arial.
It’s no secret – I hate computers.Â Outside of work I avoid them as much as I can.Â I mean they are very very useful things, but i hate being tied to and dependant on a machine.
I think the root of my dislike is the way they diminish your creative output.Â Many others have written about how going straight to a computer with a design can limit the effectiveness of the outcome.Â Mindy from Vidget wrote late last year how she’s found her creativity drop significantly the more she looks at gallery websites around the internet.Â This oversaturation of information is exactly how I feel.
When I go to my sketchbook rather than my computer, I can often come up with much better results, and much more quickly.Â So my New Years resolution is to use my Moleskin to its fullest, filling it with sketches and drawings, before touching the keyboard & mouse.
October 21st, 2008.
Please excuse the following rant but I’m increasingly frustrated, bored, let down, despairing, incredulous that there are still “graphic designers” out there who have no concept of how to design for the web, but who insist on designing websites for their clients
It’s fine if they stick to Quark and what they are good at, and all credit to them, butÂ for some reason they think they have carteÂ blanche to roam into areas which are not their concern.
For example, let’s say that you wanted to design a new boat.Â Who would you go to first?Â Would you go to a designer of aeroplanes?Â No, you would seek out people who have experience in boat design, because what you want is a boat,Â and you need someone whoÂ understands nautical things like waves, water, ballast,Â the pros and cons of different hull shapes,Â propellars, and the like.Â Would you really want to go to sea in a craft designed by a designer ofÂ aeroplanes? I think not.
Do you work for a web design agency?Â Does this happen to you that clients get their so called “brand” guardian to do the web designÂ or the guy who did their brochureÂ and aks you to implement it as a web site.
And is it just us or do you receive a complete load of tosh thatÂ disobeys practically every law of web accessibility, search engine friendliness, usability, extensibility and future proofing, font usage and image sizing hell?
What planet to these people live on?Â Why don’t they put up their hands to their clients and say we can give guidance on the design but we are graphic designers for print and you need a professional web designer who can take into account the requirements of the web.Â Because they work in the web every day they will know what is the right way and what is the wrong way to do things.Â Do web designers try to do design brochures?
I won’t get started on programmers who think that they are web designers as I’m far too angry.Â Just for the record, in case you are a print designer and you are still wondering where you went wrong here are few tips:
- Decide the width of your design and what happens to the site when viewed on different size monitors
- Think about usability and consider tried and tested conventions.Â No need to think of your own “unique” style of navigation.Â There’s a reason for some of the conventions.
- Think about search engine friendliness.Â Not enough space here to explain but be aware that 60-80% of traffic and sales on most e-comms might come from search engines.
- A little flash can be nice, it can look good. A whole site built solely is flash is pointless – just drop it.Â Nobody is interested in seeing your logo sliding in and out.
- Think what happens in the future.Â What happens if more menu items, or product lines are added.
- Think about who will administer the site and how many image sizes you really need.Â It’s a pain creating 4 different size images for each new product, (although yes there are ways round this programmatically).
- Splash pages – why? What are they there for? Why do you feel the need to make people click an extra time to get to where they are going?
- Consider the online audience – they do not know your company probably so help them help you by giving as much information about yourself and don’t try to be so cool that they have to be Sherlock Holmes to find out what you do.
Thanks for reading, I feel better now