What principle of design does this saying apply to everything on a page design should have some relationship to something else on the page?

There are many principles of design. But when it comes to web and interaction design, 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.

These six guidelines provide the basic outline for a great user experience and an awesome website design.

What do you think is critical for a good user experience?

What are the principles of page design?

What is the principle of design that contains different elements but work well together?

What are the 7 types of principles of design?

Which principle describes how elements that are laid out on a page should create a feeling of equal visual weight?