The Basics of Web Design

Website design encompasses Information Architecture (how visitors move around the site), Usability (how easy a site is to use), Credibility (how professional a site looks), SEO (how likely it is to rank well), Conversion Paths (what routes your customers are likely to take before buying your product or service) and Emotional Resonance (how appealing it is to your target market).

What are you selling?

You’re selling emotions!

Look at car ads on T.V. and see how they sell reliability, status, sex appeal or hope.

Walk into your local supermarket to buy an apple and see how clean and bright the environment is, how the apples are selected to appeal to the eye, and how neatly displayed the apples are

Who are you selling to?

Mr. Bloggs, who has no time and three screaming kids biting at his ankles?

Josephine Smith, who will only give her credit card details over the phone because she doesn’t trust the internet?

Pamela, who spends all her time dreaming about holidays and who wants to revel in that dream before making a purchase?

Dave, who needs part number XYZ1886ab for his vacuum cleaner right NOW!?

Steve, who’s researching his next car purchase and needs hard facts to persuade his other half to let him buy it?

You Need a Brand

In an age of technological commoditisation your brand will become one of your greatest assets. Make sure that you own the .com and country code top level (e.g. co.uk) domain extensions of your brand name. The foundation of your internet business is your domain name .

You Need a Strategy

No matter how good your product is or how well your product makes an emotional connection with customers you still need a strategy.

You have to work out who you’re selling to, how you’re going to present yourself and your product, what your business model is (how to extract value from your product – money, relationships, time, status etc.), how you anticipate the product cycle developing, how you might adapt to changing markets, what backup plans you have, who you’re going to employ – well, the list is endless.

Think of it as having the mindset to cope with all eventualities. And your website needs to support your strategy.

Who’s your website designed to appeal to? How will it help you extract value – will it offer freebies to build up relationships with customers, will it have reviews to help them in the research phase of the buying cycle, will it save time by getting customers to do most of the work in solving their own problems? As your products mature will you leave them stuck on a page to slowly die, or will you shift them to another part of your site or promote them in a different way? As your market changes will you show more videos, change your layout, start a newsletter, promote regular offline conferences, allow reviews? If everything goes pear-shaped and you need to use a backup plan can you add a new section seamlessly to your site or promote another range of products in a completely different way?

Do you want your site to make money? Of course you do, but it’s not enough – you need to know HOW your site is going to make money.

Will your products be sold directly from your site?

Will your site be promoting an affiliate programme?

Will you be promoting an e-mail newsletter in order to foster a long-term  relationship with potential customers?

Will you be encouraging user-generated content   (Amazon, E-bay) that will enhance the value of the products you’re selling?

Will your site be information-rich for customers to browse through in the research phase of the buying cycle?

Will you be providing a service that a bricks and mortar store cannot?

Will you be offering a reassuring after-sales service for people who’ve bought from your offline store?

There are many ways to create conversions (sales, leads, sign-ups, participation, mind share). When you know who you’re selling to and how you’re going to do it then the actual design process begins.

Information Architecture

Websites should be designed using the principles of Information Architecture.

At its simplest, Information Arhitecture describes how pages are connected together in such a way that the site makes sense to its users, the search engines and the website owner.

Information Architecture requires clarity about the purpose of the site (the needs of the customers and the needs of the business), how the site fits in with its environment (customers who have visited similar sites will have certain expectations), visitor flow around the site (as much as can be predicted), aesthetics, usability, navigation and construction and maintenance costs.

From a SEO point of view a website should also have a hierarchical, tree-like structure (to help the search engines figure out what the site’s all about), internal links pointing to important pages – for example, my expertise is in WordPress – links pointing out to authority sites (emphasising the site’s place in the topical network i.e. where it fits into the web), no duplicate content and category keywords for the main navigation.

Usability

Website design also has to incorporate ‘usability’ , famously expressed in Steve Krug’s book ‘Don’t make me think!’

Usability means being easy to use, in essence putting the customers first and making everything effortless for them. Which means happy customers.

Because they have so much information available to them on the internet (and so much of it is badly presented) users have learnt to be ruthless in assessing websites. You have to meet their requirements within a few seconds or they’re OFF.

This follows the theory of ‘information foraging’ where a surplus of information means visitors snack on bite-sized chunks, following what they hope is an information scent to their goal. If there’s no information ‘scent’ then they quickly leave.

Headlines should also be big.

Related items such as navigation buttons should be grouped together.

Navigation should be easy to understand and page headings should reflect the words used in the navigation.

Links should look like links, and it should be clear where the links lead to.

There should be plenty of ‘white space’ on the page so that the user is not distracted by the ‘noise’ of too many competing demands for attention.

Text is best presented as black text on a white background in easy-to-digest chunks.

The Home page has a lot of tasks to do – it has to give the site an identity, say clearly what the purpose of the site is, establish trust and credibility and tempt visitors further into the site.

Inner pages also have tasks. Each inner page will have a primary task (for example selling, informing, reassuring, establishing credibility, providing linkbait) and should be focussed on that task. Secondary tasks include clear navigation to other pages, cross-selling other products, comments and reviews, the reinforcement of a theme etc. Inner pages should also stick with a consistent navigation so that users get their bearings quickly and are confident that they’re still in the site.

Scanning, Skimming and Heat Maps

Generally speaking users will scan the page picking up on its general ‘feel’, which indicates whether or not the site is credible. Literate users will then skim through headlines and bolded words, trying to figure out if the site contains anything of interest to them. Less literate users are likely to struggle through the text word by word, getting only partially down the page (research).

Eye-tracking heat maps show that literate Western users start in the top left corner of the page and read in an F-shaped pattern. Therefore in these areas use information-carrying headings in the horizontal sweeps, and bullet points with information-rich words in the vertical sweep.

You can view a video of users eye movements here.

And here’s a heat-map of an advert in which the model looks straight at you in one image, and at the product in another image. The difference in the model’s gaze is almost imperceptible but users pick up on it straight away, showing the power of subtle changes in website design.

According to this eye-tracking research graphics can act like barriers to the movement of the eye over a page, rather like boulders impeding the flow of water in a stream.

Hiding your conversion trigger (‘Click here!’) in the middle of an image (a ‘boulder’) might not always be a Good Thing (as the stream of people rushes past, ignoring it). And whilst graphics can stimulate discussion in offline Push Marketing (‘We’ve got a product and some Gorgeous Graphics here – hello, talk about us!’) they don’t work so well in online Pull Marketing (‘I want a Pink Elephant and I want it Now, No I don’t care who Sells it to me!’).

Credibility

Usually the only people interested in the site’s gorgeous graphics are the website owner and the graphics designer. There are lots of highly successful sites out there with minimal graphics such as E-Bay, Amazon and Google. A fantastic looking site will not be successful simply because it looks great.

However, graphics and rich media can contribute to a site’s overall professionalism, which in itself is a very important indication of a site’s credibility to the lay user.