Web Design

The basics of web design

Website design encompasses information architecture (how visitors move around the site), usability (how easy the site is to use), credibility (how professional the 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 your site is to your target market).

But before all that you need to know who you’re selling to and what you’re selling.

Who are you selling to?

You need to know your customers – not just their age, their gender, their income and where they live etc. but what goes on in their heads, what their desires are, what their needs are, and whether or not you can meet those needs in the way that they want.

What are you selling?

Reliability, status, sex appeal, hope, cleanliness, neatness, time … what your customers really want are the emotions underlying these desires, emotions that make them feel good, that make them feel wanted, that make them feel proud, that give them a sense of identity etc. etc. etc.

You also need an identity …

Your domain name 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.

and a strategy …

You have to work out 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…

Will your website 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 YOU time by getting customers to do most of the work in solving their own problems?

and a way to make money …

Will your products be sold directly from your site? Will your site offer an after-sales service for people who’ve bought from your offline store? Will you have an affiliate programme? Will you have user-generated content that will enhance the perceived value of your products? Will you be offering a service that a bricks and mortar store can’t?

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.

Let the information architecture begin ..

Websites should be designed using basic principles of information architecture.

At its simplest, information architecture 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 that can be predicted), aesthetics, usability, navigation and construction and maintenance costs.

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 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.

and now for 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.

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.

The basics of usability include:

• Headlines should 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, displaying 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.

going off on a riff here …

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 – hello, talk about us!’) they don’t work so well in online Pull Marketing (‘I want a Pink Elephant and I want it now!’).

and now on to credibility …

Credibility means the look of the site  (the color scheme, the graphics ), the content (well-informed, up-to-date, in fashion etc.) and accreditation.

Usually the only people interested in the site’s 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.

and finally, SEO …

Where do we begin? SEO is getting more complex by the minute.SeoBook is my favourite starting point whilst Search Engine Land is for the diehards.

Find out more by contacting me!