5 Rules for Commercial Web Design
7 October 2010
Posted by: justin
A company has a multimillion pound brand, created over years of creative hard work and advertising expenditure specifically designed to communicate effectively with their target market and to give them the user experience they have tailored. Everything is under control. And then they go on to the web and undo it all.
The website is now the first touch point (the first quantitative experience a customer has of a brand). Therefore it would seem obvious that companies with so much invested in their brand communications would invest some money and effort into their websites? This unfortunately is not always the case. Even the biggest brands in the world still have websites that are designed using the original BCN (banner-content-navigation) design model invented around 1996. Some of the design templates used to communicate the qualities and relevance of these multimillion pound brands are now nearly 15 years old!
A website is now the experience of the brand before the High Street shop is. Therefore it must in some way remodel and repeat the brand experience online as it is offline if the brand isn’t to become generic and lose market share to lesser brands with equal or better websites. This does not mean using flash and running videos on the home page. What it means is meeting the customer’s brand expectations (brand expectations built up offline) immediately from the home page down to the contact details page. This is also true the other way round – if a brand has been created online and moves offline (for example – how would Amazon keep their brand intact if they appear on the High Street?).
The BCN Model
The original web design templates were based on print magazines and brochures, generally because initial websites (due to low connection speeds) were very non-visual, and because no one knew how to restructure a company offer in more visual and interactive terms. The BCN model allows for a front image/banner (magazine cover) along the top, an introductory bit of text (prologue), a nav bar (index), a footer (publication info) and the rest stuck in a long selection of pages (some up to 4 clicks away).
‘We Make Lovely Shoes’
A real world commercial example of a BCN web design would be the equivalent of walking into a shoe shop where a man standing in an empty room with no shoes in it explains what the company does – ‘We make shoes of very good quality and we have been doing this for…….’ Once the prospective client has listened to this intro he is shown a list of the type of shoes they have from which (without seeing any of the shoes) he must pick one. He is then taken through a door where the chosen shoes are laid out. If he wants to see another type of shoe he must leave the room, go back to the list and pick another type and then go through another door. This type of shopping experience obviously does not lead to many sales.
Adapting Current Design Patterns
The failure of design to initially understand the web has some parallel in the evolution of electronic music (from electronic instruments used only to mimick ‘real’ instruments to then becoming instruments in their own right) and is a consequence of trying to adapt current design patterns to new technologies (a great current example of this is the horrible ‘turning the page’ technology used by online magazines and the iPad).
A website is a visual entity. Reading on the net is laborious and because of backlit screens straining on the eyes. Therefore any website that wants to tell its customers what it does instead of showing them has not understood the platform. As in films, novels and any other experience generating art form (into which I would place branding) the most basic rule of all is:
Show, don’t tell.
The 5 basic rules of commercial web design could be :
1. Show your customer where you come from (your industry through the look & feel)
2. Show your customer what you sell (by bringing the products up to the front)
3. Show your customer what you want them to do (using well sign posted action paths)
4. Show your customer why they should trust you (through the quality of the website)
5. Show your customer what you want them to feel about you (through the user experience)