Hacking the brain

This article first appeared in issue 234 of .net magazine – the world's best-selling magazine for web designers and developers.

Ryan Singer from 37signals recently made the observation that “if you make chairs, you’ll want to understand how people sit. If you make user interfaces, then you should understand how people perceive and think”.

But why is this so important? Because gaining an understanding of how our users think and act enables us to tailor wonderful user experiences that improve conversions and encourage repeat visits – and this in turn creates happy users! With a little borrowing from disciplines such as cognitive psychology and behavioural economics we become able to ‘hack the brain’.

The field of UX is both broad and deep; here are five techniques to get you started.

Emotional memory

If you’re able to remember the best meal you’ve ever had, it’s emotional memory that keeps those smells and tastes accessible to you long after you’ve left the restaurant. Likewise, if you’ve ever been in a life-or-death situation, it’s your emotional memory that enables you to recall (and hopefully never repeat) that particular set of circumstances. Humans remember anything that is emotionally charged, or that happened while we were in a state of heightened emotion.

So how does this help us as web designers? We need to create emotion in our users above and beyond that which is possible with mere usability. By developing emotional connections and experiences, our users will remember our site, form a bond with it – and recommend it to others.

How can we do this? The answer to that question is a book in itself, but there are two key things we can do. The first is to carefully control a user’s focus. A great example of a site that does this is simplehoney – a new travel site from Eric Nakagawa, creator of I Can Has Cheezburger?.

Rather than opt for the traditional approach of complicated search forms, simplehoney guides you though the process of selecting your hotel with a series of images and evocative words. When you first sign up you are asked about the type of holiday you like to go on.

This is a brilliant example of priming, and it’s putting users in an emotional state where they’re actually imagining the type of holiday they want to go on. Imagination is powerful, and by asking these questions with strong visual queues simplehoney is effectively putting users on the first step of their holiday.

But simplehoney goes one step further, and starts to ask personality-based questions to determine the type of traveller you are.

Again, this is an excellent way of drawing from the user their desire to travel. By adding these two things together – imagination and desire – simplehoney has created a strong emotional association with its brand, its product and you.

A second way to create an emotional connection is to create an engaging personality that the user can interact with. This is a double-edged sword: for every user that loves MailChimp’s Freddie von Chimpenheimer IV there is another who prefers the slick, professional approach of Campaign Monitor. But if you’re true to yourself you will likely create a personality with which your target audience will empathise.

Consider the PhotoJojo store. The first thing that strikes you is the font it uses: it’s fun, friendly and straightaway tells you a bit about the site and its creators. You immediately (and perhaps unconsciously) make a decision as to whether this is a brand that reflects your personality. If you do, and you dig deeper into the product pages, you’ll find other lovely touches such as the ‘Do Not Pull’ lever and the happy/sad shopping cart.

If you add the pieces together, PhotoJojo creates a strong personality for itself – it is a delightful site to interact with. This delight can turn a user into a fan, and even into an evangelist. PhotoJojo has a loyal band of followers, who happily promote and recommend the site, and so this personality has parlayed into free word-of-mouth marketing – and that’s priceless.

Depth vs breadth processing

Our ability to complete relatively complex tasks, such as filling in a long form or navigating a large website, is influenced by our state of mind. Frustrate and confuse your users and they enter ‘depth first processing’ – the same state you find yourself in when you lose your car keys. In this state nothing is simple, and finding what you’re looking for is almost impossible.

In an anxious or stressed state, your field of focus narrows. You are looking to find the quickest solution to the detriment of all the other possible solutions around you.

My favourite example of this is the old version of Basecamp. I wanted to search for a post I’d written about Facebook apps and looked in the top right-hand corner for the search field – but it simply wasn’t there.

I stared at the page looking for a search form, scrolled up and down, but couldn’t find it anywhere. But this is Basecamp, I thought! Surely it must have a search form.

After wasting what seemed like hours looking, I finally asked our CTO who pointed to a little tab at the top that read ‘Search’. Click on that, and you’re presented with the search form.

Because I was frustrated with the site, and because I was convinced there was no search function, I couldn’t see the tab. This, of course, doesn’t excuse 37Signals such woefully bad user interaction design!

Compare this to ‘breadth-first processing’, a state we enter when we’re happy. When we have positive experiences our limbic system releases dopamine, a powerful neurotransmitter that aids memory and information processing.

If we can put our users in a positive state they will solve tasks with ease and enjoy the process. A great example of this is Google+.

Post-redesign, Google+ is effortlessly usable: it encourages exploration and delights with cute animations. It’s the social network we wish all our non-techy friends were on.

This didn’t happen by accident. Google+ lead designer Fred Gilbert said, “You notice, all of our shapes, all of our logos, have been softened. There’s a difference between building something like an appliance and building something for people. For people, you want to build an environment that’s friendly. To do that we made icons that were fun.”

The other oft-cited example of a web application that places users into breadth-first processing is MailChimp. It’s an app that’s been pulled apart many times, but it’s worth remembering that it has many options and is a powerful piece of software. Yet it can seem so easy to use because its friendly, chatty interface encourages exploration; it’s almost as if MailChimp is goading our brains to just play.

Delight your users, create positive experiences, and they are less likely to run into usability problems. And, if they do, they’re far more likely to solve them quickly rather than bouncing from your site to a competitor’s.

Sequencing

Sometimes a process can seem too long and complex to be worth the user’s time. By breaking the task up into bite-size chunks, and giving your users feedback on how far through that process they are, you are ‘sequencing’.

Sequencing doesn’t only improve task conversion; it encourages the user to provide more data than they may have done for an unsequenced task. It also enables you to make the process fun.

Sequencing facilitates tapping into the inner OCD demons many of us harbour, too. By breaking down a task into chunks, and then showing the user how many chunks have not yet been completed, the user is compelled to finish the job. Humans rarely like to leave a task incomplete, especially when they are offered a simple way to complete it.

LinkedIn demonstrates one of the best known examples of sequencing, and it does this in a couple of different ways.

When you first sign up to the site you’re presented with a ‘handwritten’ to do list. The first task is highlighted for you, and below this first task is a list of further things you can do in order to complete your profile.

When you log into the site in the future and head over to your profile page, LinkedIn breaks down completing your profile by assigning a percentage to each thing you need to do.

You might not have the time to fill in everything right now, but you’re probably able to fill in one or two areas of your profile. This is much easier to do, and takes up far less time, than asking users to complete their entire profile in one attempt.

The paradox of choice

Perhaps one of the biggest myths in society today is that choice is good. We are continually offered more choice, often as a way for people in authority trying to absolve themselves of responsibility.

The problem is, it’s wrong. Too much choice is not always good; in fact it can be paralysing. This paralysis can mean the difference between a sale/ conversion and a customer leaving your site or deleting your app. But why?

With too much choice, we worry about making the wrong decision. We are often so worried about making the right decision that we are destined to be dissatisfied with it, lamenting the other decisions we could have made.

How many times have you been to a restaurant with an unreasonably long menu (I’m looking at you, Pizza Express) – and after deliberating for 10 minutes you order what you always order? That’s choice paralysis in action.

How does this affect us as web designers? We need to carefully consider the number of options we give our users at any particular point in time. Fewer options means it’s easier for users to make decisions and complete tasks.

For example, one of the worst offenders has to be Flickr, which at the last count had 57 different menu options (excluding all other links on the page). Consider what a user wants to do when they log into Flickr – do they really have 57 different things on their mind?!

Put another way, users now have 57 chances to make the wrong decision, get frustrated, and then leave the site.

Another good example of too much choice in web design is the search forms on travel sites.

For example, ebookers has a search function with 31 primary options and six secondary options. This is far too many for anyone to meaningly decipher with ease, and it’s just not necessary.

At the other end of the scale is Skyscanner, which has just 10 primary options and four secondary options.

By providing fewer options Skyscanner is simplifying the form, reducing the risk of user error (and frustration!) and making the site more visually appealing. Three birds, one stone.

The law of reciprocity

Finally let’s take a look at the law of reciprocity. If someone buys you a drink, you feel compelled to buy them one back. It’s a combination of human nature and social etiquette.

We can take this idea and apply it to our web applications by substituting drinks for badges, achievements and awards. These small gifts we give our users, when delivered correctly and at the right moment, are often repaid with social engagement and an increase in daily active users.

Codecademy offers us a great example. On the homepage you are guided through a delightful interactive command line interface, typing in code at the prompt and instantly seeing its effects. Once you have completed the small tutorial you are rewarded with a badge.

I haven’t even signed up yet! Codecademy doesn’t know who I am or why I’m on the site, and yet it’s given me a badge. That feels great! And for the user who does want to learn how to code it compels them to hit the ‘Get Started’ button and sign up. By rewarding me with this badge I am more likely to convert into a subscriber.

It’s also interesting to note what follows the badge. You’ll see that Codecademy has smartly added some social buttons – the notion being that if it gives you a gift you might reciprocate by spreading the word about the site.

One final word of warning: you should never ask for a gift, but merely provide the opportunity for your users to give one. Asking is very rarely rewarded, and can look a little desperate; the art of reciprocity is in its subtlety.

Supporting your business

User experience is a massive field, and this article can really only give you a taster of what is on offer. However, hopefully you’re now instilled with hunger for more!

With these five techniques firmly under your belt, you can tweak your current sites to offer an enhanced user experience and track the changes to see the effect they have.

Above all, remember that user experience is something that should support your business goals, not distract from them. Make sure you aren’t simply adding ‘bells and whistles’, but fundamentally improving the experience users have when they visit your site or use your application. That is the key to long-term success.

Discover 20 steps to the perfect website layout at Creative Bloq.