Donald Norman provides what may be the best six to abide

by.

There are many principles of design. But when it comes to web and interaction design,

Donald Norman provides maybe the best six to abide by.

Donald Norman is one of the greats of computer human interaction and user-centred design

(he did, after all, coin the term) and his principles are a good place to start with any design

project.

But first, some context

Norman's main idea is that devices, things, computers, and interfaces should be functional,

easy to use, and intuitive. His idea is that there are two gulfs to avoid: the gulf of execution

and the gulf of evaluation.

Say you want to delete a photo from Facebook. Your goal is to delete it, and the end result

is it being deleted.

What happens in between is the gulf of execution, e.g. clicking a button that says 'delete'.

This gulf is small where there are only a few roadblocks (like when you're deleting a photo).

It's much larger when there are lots of roadblocks, like having lots of fields in a contact

form.

The gulf of evaluation is when a user is expecting feedback from a system, and the system

either doesn’t provide the feedback at all or, alternatively, doesn't give the feedback the user

is expecting.
Think of an ecommerce site. You've entered your credit card details and clicked check out.

You expect a message to pop up saying 'well done! Now please continue to shop' if nothing

happens, you don't know what to do because the feedback you expected didn't happen, and

in fact no feedback happened at all. This confusion (which often results in panicky button

pushing) is called the gulf of evaluation – you have nothing to evaluate!

So, how do we avoid the twin gulfs?

1. Visibility

Users need to know what all the options are, and know straight away how to access them. In

the case of websites, this is an easy win.

For example, use intuitive iconography that clearly indicates there are more options hiding

deeper down (for example, the Hamburger). This is even more important for mobile design,

when screen space is at a premium and there's a strong (STRONG) desire to get rid of

everything except your CTA.

2. Feedback

Every action needs a reaction. There needs to be some indication, like a sound, a moving

dial, a spinning rainbow wheel, that the user’s action caused something.

Google Chrome does a great job of this when they're loading pages. The little spinning

circle starts as soon as you hit enter, so you know something's happening, and goes faster
when the page is about to load, so you know you're about to do something again. It’s simple

and effective feedback.

3. Affordance

Affordance is the relationship between what something looks like and how it's used.

For designers, it means that as soon as someone sees something, they have to know how to

use it. For example, a mug has high affordance: it's easy to figure out intuitively how to use

it. For web designers, affordance is even more important. Users need to be able to tell how

to access information they want from a website, or else they’ll just leave.

4. Mapping

Mapping is the relationship between control and effect. The idea is that with good design,

the controls to something will closely resemble what they affect.

A great example of mapping is the vertical scroll bar. It tells you where you are in a page,

and as you drag it down, the page moves down at the same rate; control and effect are

closely mapped.
5. Constraints

Constraints are the limits to an interaction or an interface. Some are really obvious and

physical, for example the screen size on a phone. Others are more nuanced, like a single,

continuous page website having an image peeking onto the main page. It is logical for the

user to scroll down to see the next image, and thus the rest of the website.

6. Consistency

The same action has to cause the same reaction, every time.

If a website has a back button that sometimes turns a computer off, it becomes very hard to

navigate around the web. The same applies for visual consistency. Logos and brands have

power and recognition because they use the same logo. Twinings has used theirs for 227

years, and now everyone knows that a box with 'Twinings' written on it has tea inside it.