How do you make decisions? If you’re like most people, you’ll probably answer that you pride yourself on weighing the pros and cons of a situation carefully and then make a decision based on logic. You know that other people have weak personalities and are easily swayed by their emotions, but this rarely happens to you.

You’ve just experienced the fundamental attribution error — the tendency to believe that other people’s behaviour is due to their personality (“Josh is late because he’s a disorganised person”) whereas our behaviour is due to external circumstances (“I’m late because the directions were useless”).

Cognitive biases like these play a significant role in the way we make decisions so it’s not surprising that people are now examining these biases to see how to exploit them in the design of web sites. I’m going to use the term ‘persuasion architects’ to describe designers who knowingly use these techniques to influence the behaviour of users. (Many skilled designers already use some of these psychological techniques intuitively — but they wouldn’t be able to articulate why they have made a particular design choice. The difference between these designers and persuasion architects is that persuasion architects use these techniques intentionally).

There are 7 main weapons of influence in the persuasion architect’s arsenal:

• Reciprocation
• Commitment
• Social Proof
• Authority
• Scarcity
• Framing
• Salience

How do persuasion architects apply these principles to influence our behaviour on the web?

Reciprocation

“I like to return favours.”

This principle tells us that if we feel we have been done a favour, we will want to return it. If somebody gives you a gift, invites you to a party or does you a good turn, you feel obliged to do the same at some future date.

Persuasion architects are not shy of asking for the favour that you ‘owe’ them. (By the way, if you’ve enjoyed this article, please leave a comment!).

Commitment

“I like to do what I say.”

This principle tells us that we like to believe that our behaviour is consistent with our beliefs. Once you take a stand on something that is visible to other people, you suddenly feel a drive to maintain that point of view to appear reliable and constant.

Persuasion architects apply this principle by asking for a relatively minor, but visible, commitment from you. They know that if they can get you to act in a particular way, you’ll soon start believing it. For example, an organisation may ask you to ‘Like’ one of their products on Facebook to watch a video or get access to particular content. Once this appears in your NewsFeed, you have made a public commitment to the product and feel more inclined to support it.

Social Proof

“I go with the flow.”

This principle tells us that we like to observe other people’s behaviour to judge what’s normal, and then we copy it.

For example, researchers at Columbia University set up a web site that asked people to listen to, rate and download songs by unsigned bands. Some people just saw the names of the songs and bands, while others — the “social influence” group — also saw how many times the songs had been downloaded by other people.

Even more surprisingly, when they ran the experiment again, the particular songs that became “hits” were different, showing that social influence didn’t just make the hits bigger but also made them more unpredictable.

Authority

“I’m more likely to act on information if it’s communicated by an expert.”

This principle is about influencing behaviour through credibility. People are more likely to take action if the message comes from a credible and authoritative source. That’s why you’ll hear people name dropping and it’s also what drives retweets on Twitter.

Persuasion architects exploit this principle by providing glowing testimonials on their web site. If it’s an e-commerce site they will have highly visible icons showing the site is secure and can be trusted. If the site includes a forum, they’ll give people the opportunity to rate their peers: for example, some web forums (like Yahoo! Answers) let users vote up (or down) answers to posted questions. The top ranked answer is then perceived to be the most authoritative.

Scarcity

“If it’s running out, I want it.”

This principle tells us that people are more likely to want something if they think it is available only for a limited time or if it is in short supply. Intriguingly, this isn’t just about the fear of missing out (a kind of reverse social proof). Scarcity actually makes stuff appear more valuable. For example, psychologists have shown that if you give people a chocolate biscuit from a jar, they rate the biscuit as more enjoyable if it comes from a jar with just 2 biscuits than from a jar with 10.

Related to this is the ‘closing down’ sale. One of the artists at my friend’s art co-op recently decided to quit the co-op and announced this with a sign in-store. She had a big rush on sales of her art. Then she decided not to quit after all. So pretending to go out of business might be a ploy!

Framing

“I’m strongly influenced by the way prices are framed.”

This principle acknowledges that people aren’t very good at estimating the absolute value of what they are buying. People make comparisons, either against the alternatives you show them or some external benchmark.

One example is the way a restaurant uses an “anchor” dish on its menu: this is an overpriced dish whose sole aim is to make everything else near it look like a relative bargain. Another example is the Goldilocks effect where you provide users with three alternative choices. However, two of the choices are decoys: one is an overpriced, gold plated version of your product; another is a barely functional base version. The third choice — the one you want people to choose — sits midway between the other two and so feels “just right.”

Salience

“My attention is drawn to what’s relevant to me right now.”

This principle tells us that people are more likely to pay attention to elements in your user interface that are novel (such as a coloured ‘submit’ button) and that are relevant to where they are in their task. For example, there are specific times during a purchase when shoppers are more likely to investigate a promotion or a special offer. By identifying these seducible moments you’ll learn when to offer a customer an accessory for a product they have bought.

White space, as defined by Mark Boulton, “is the space between elements in a composition.” White space should be your default layout tool. One rule of thumb is never to introduce a design element if you could accomplish the same goal with white space. You will be surprised by just how much you can accomplish with white space alone.

While white space should be used in abundance, contrast should be used as little as possible. Design theorist Edward Tufte, who is responsible for the notion of the “least effective difference,” urges designers to use the smallest visual variation required in order to effectively communicate an idea. Practically, this means emphasizing what’s important and dialing back everything else.

To illustrate both of these points, take a look at this pricing chart from TypeKit and then look at the modified version:

Original version.

Modified version.

You’ll notice that the modified version contains a dark heavy border, not unlike the default border around HTML tables. Which version does a better job of minimizing visual noise? (The answer, of course, is the original.) Plenty of white space and minimal contrast help reduce visual noise and will make your application feel simpler.

When we were redesigning our content management system, we weren’t able to kill one complex feature in particular: the bulk edit function. In the previous version of the CMS, an entire column of a main screen was devoted to the bulk edit basket. The feature consumed about 30% of the screen real estate, but we found that very few people actually used it. Our solution was to introduce a single icon with a number beside it indicating how many items were in the basket. Clicking on the icon or number revealed the list of items in the basket through a modal dialog. This saved a huge amount of space and prevented the majority of users from being distracted from their primary task.

“When a small, unassuming object exceeds our expectations, we are not only surprised but pleased.”

Applications that try to do everything often struggle to do anything well. A successful application is a lean application: one that isolates a single problem and solves it brilliantly. Underdo your competition!

The best way to get a lean streamlined application is by eliminating features. When deciding whether a feature is necessary, the default answer should be “No.” Make features really fight to be included. If it doesn’t help the majority of users accomplish their frequent tasks, then it should probably be left out. Don’t get me wrong, being the one who swings the axe is tough, but when customers wax lyrical later on about how easy the application is to use, you can take all the credit.

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

Source: Jakob Nielsen’s AlertBox

Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google’s search box is wide enough to accommodate long sentences.

Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.

However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

For further information please take a look at the articles Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows).

Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use.  Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Other Resources

• Introduction To Good Usability
• Web form design guidelines: an eye-tracking study

Have any thoughts on what we’ve covered, or know of other useful usability findings? Please leave a comment below.