“Your website’s goal is to communicate,
not to decorate the Internet”

Download PDF of this document

Most web sites have problems, even ones created by experienced and highly-paid web designers. They're either hard to navigate, confusing, cryptic, badly organized, badly written, over-designed, under-designed, or simply don't give the user what he or she want.

Web design is a complex discipline, and there is a tension between designing for beauty and designing for function. However, you can make web sites both pleasurable and functional, appealing and usable.

How real people use web pages

We move quickly because we don't like looking at the screen
We're impatient — we tend to click the first promising link, and often don't wait for pages to finish loading (Put the most important stuff at the top so it loads and is seen first.)
We scan pages for clues that "You're in the right place"
We're looking for things to help us do what we want to do
We decide in as little as 1/20 of a second whether a site is appealing or not.

Scanning

Scanning is what you almost certainly do when you look at a web page.

Instead of starting at the top and reading downwards, most people have learnt that they get better results by scanning over the page, looking for certain ‘clues.’

The specific 'clues to what' will depend on the context, and very much on the user's goals. Very often the clue might be "Am I in the right place?", or "How can I find what I'm looking for?".

When navigating around, we don't read the whole page and then make an educated, fully informed guess. What most people do is click on the first thing that appears to offer a fairly good chance of being the right thing.

How to design for scanning?
You can't make people read. If visitors are going to scan, a good designer knows how to help them find what they’re looking for on your website.

When your eye scans a page, it only settles on a few elements: the ones that seem most likely to be useful. There are ways of 'promoting' elements to help them stand out to the scanning eye.

To aid scanning, we can:

understand what features will be most relevant and important to the user.
apply visual styles and techniques to help point the eye towards those elements, and skip over the unimportant.

A good site design creates a structure that enables a clear two-way dialogue with all its users.

Your site's goals

If you already have a web site, or you have a site project in mind, what needs does it fulfill? How many different needs are there? How strong are they?

The general purpose of design is to facilitate communication of information. What is the important information that your site wants to collect or promote?

What does your site have to do?

To best figure out how to make your website work in the intended way, it can be very helpful to create scenarios how your website can benefit the visitor:

Examples of scenarios:

"The site must enable Janet to find out what help MyCompany can offer to help solve her issues, as quickly as possible, and without patronizing her."
"The site must give Mark enough new information about MyCompany to keep him coming back regularly to check for updates."
"The site should enable Sharon to register quickly and easily."

Get to know your target market

You should base your scenarios as much as possible on facts you know about your target market or actual user base. The best way to do this is to do research and to interview a number of actual or typical site users.

Who are your visitors? Are they male or female? How old are they?
Think about their cultural background. What's their language?
What skills do they have? IT skills and familiarity with using computers.
Are they likely to be challenged by any impairments, such as difficulty with sight or reading? Do they have any special needs, such as accessibility issues?
What specific goals will drive them to use your website?
What will they appreciate? What would insult, annoy or upset them? What might make the difference between a tolerable experience and a pleasant experience? What do they expect?
What do they want to go away with when leaving your website?

Also remember, there is a mental conversation running in our minds when we’re visiting a website. Try to think what NOT make people think when visiting your site:

"No, I don't want…"
"Where is the link to..?"
"Why did it go there..?"
"Why does it keep..?"

Design Basics

Design around the content — not the opposite

Some think that web design is all about the interface – the look, and that content is what's added on later.

The purpose of design is to enable communication between the consumer and the content.

It’s content that makes a site work, flow and communicate well with the right tone.

It's the web designer’s job to maximize a web site's effectiveness and that means understanding how users will interact with a site's content.

Principles of good web page design

So how do you give your readers the stuff they need in the way that they want it?

There's nothing our brains like so much as order and meaning. It's what they search for from the moment they encounter anything new — and that includes your web page. If brains can't find the sense and order they need, they soon grow exasperated and give up.

Headlines, subheads, body copy point size, pictures, colors — are all supposed to work in a way to help the reader find the route you want him or her to take through the website.

A bunch of stylistic touches, different colored texts, various fonts, strong photos, etc., etc. — it may look really cool but instead of helping the reader it might do exactly the reverse: disrupt natural eye movement and strain the eyes by asking them to jump around the page from element to element.

If you only want one guideline, make this it:

Your website’s goal is to communicate,
not to decorate the Internet

Everything that goes into your web site must have a purpose!

Every single element must help users achieve their goals and support the site's goals.

Successful design does not always depend on attractive visuals, though that can help. Success is primarily a result of good thinking.

Every single feature must either

Help your visitors achieve their goals, or
Support the site's goals without obstructing the visitor's goals

Keep it Simple

It's not as easy as it sounds. Creating simple designs takes courage, clear vision, and skill. A skilled web designer knows how to create a website that works and is easy to use – it’s not only what meets the eye that needs to work smoothly.

Layouts that you know work will be more likely to work for your users than complicated, innovative designs.
A simple message will be understood better than a complicated one.
Interactions with simple, clear steps and few instructions will be completed by more people than a long, wordy alternative.
Clear, uncluttered, recognizable visual design will reduce cognitive friction, reduce mistakes, and help visitors succeed.

There are also important user benefits to gain from keeping the design simple:

Load faster - less waiting
Render (shows up on screen) faster — quicker responsiveness
Usually clearer, easier to scan
Easier to navigate

Web Page Personality

If your company has a certain tone-of-voice or style for print publishing, your designer’s goal is to translate that to your web presence.

Your whole message should be punchy and to-the-point.
Don't cajole, or try to intrigue, you don't have time.
Decide on your site's personality, and stick to it.
Talk about positives, and avoid negatives, i.e. say what you do, or can do, what you believe in, how you work, what you have done, what your experience is...
If you don't have as much experience, mention any relevant experience you do have.
If you're young, talk about your energy, enthusiasm and value-for-money.
If you're a small company, emphasize your commitment, availability, and flexibility.
If you have fewer skills than competitors, turn them into specialties and focus.

Website Project Checklist

Before:
1. Decide on your website’s goal(s)
2. Research your target market and find out what they expect from your website
3. Make sure your website fulfills the visitor’s need(s) and expectations

During:
4. Decide what content to have on your website
5. Make sure the content:
a. fits your target group
b. is to the point
c. answers any potential question
d. has a good “flow” to keep the visotor’s interest
6. Create a web design around the content that enhances the experience and helps communicate your message
7. Keep it simple!

After:
8. Check your site for programming errors that can make it hard to use (make sure there are no “dead” links or missing images)
9. Make sure your website works in all major browsers and on both Mac and PC
10. Ask a few persons from your target group to “test-drive” your website. Listen carefully to their feed-back
11. Consider using a professional marketing company for website promotion on the internet

Samples of good web design

VistaPrint — Quick and easy to navigate.	Apple Computer — Great contrast, very user friendly.	Isagenix — Pleasing colors used to help navigation.	Sierra-At-Tahoe — Easy to find what you’re looking for quickly.


Samples of bad web design

Fred and His Imaginary Friends — The coloring!!! Plus, the site doesn't seem to work in any other browser than Internet Explorer.	Ace of Cakes — The design is OK but the site is impossible to navigate — can’t find anything.	"Creation Museum, Taxidermy Hall of Fame of NC and Antique Tool Museum" — The NAME!!!	Moiré — This site's "navigation" is scary! The whole page flashes in different colors when you try to click on a link.	Tally-Ho — so many things competing for your attention that it makes you leave the website immediately.