What can Website Designers learn about User Interface from Games Designers? It’s an easy-enough question, but the answer, of course, isn’t so simple. Firstly, you’re not comparing like for like.

People who play games typically spend dozens – and sometimes hundreds – of hours so doing; whereas people who visit a website usually want to be done in a matter of minutes. A UI which works for one, would not necessarily be appropriate for the other.

So, what’s unique about visiting a website? What does our unsuspecting user secretly want?

The pleasure principle

Aarron Walter, in his influential book on web design, called Designing for Emotion, identifies what he calls “a hierarchy of user needs” which states that the fundamental needs, upon which all web-design builds, are Functionality and Reliability. No one will, presumably, disagree with that since a website – like any other piece of design – needs to be fit for purpose, as and when needed.

Once that is nailed, Walter argues, the next important feature is Usability. Now, some sites are more usable than others, but this is because Usability is allied to Motivation. Why are you even visiting that site?

Council and Government websites, for example, are notoriously labyrinthine, and finding one specific page can be a real trial – but the user is typically motivated by need – so they will stick with it until they find their goal.

A shopping website… not so much. If you want to shop for shoes – you want, ideally, to be no more than two menu clicks away from festoons of footwear.

The superior Motivation – which Walter identifies as Pleasure, but which other commentators call Delight – is at the pinnacle of the pyramid, and can only be achieved if all three stages below it all work.

But, even then, Delight isn’t guaranteed. Achieving that is the secret sauce which goes in the mix and lifts the whole recipe.

Designing for emotion

The responsibility for delivering Delight falls on the Usability – the User Interface.

As Prof. Steve Peters explains – in his delightfully eccentric book The Chimp Paradox – our emotions influence our behaviour much more rapidly than our intellect. Instinct will always beat Reason. So, when designers talk about creating an “emotional experience”, it’s not just some touchy-feely after-thought, it’s cutting through to the heart of a successful interface.

As Aarron Walter says: “people [users] will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.”

When a user visits a website – there is not likely to be a lot of anticipation. Websites are rarely launched after months (or years) of pre-release hype. Redesigned websites are not unveiled as sequels to existing successful websites. Websites don’t have trailers with millions of likes on YouTube. That sense of cultivated anticipation comes from the movie industry and has been adopted by the video game industry.

What a website can expect from a user is, by contrast, a flicker of casual interest, tempered by indifference and scepticism.

Great content delivered in a delightful, emotionally engaging way can immediately dissipate that user apathy. If you’ve taken the trouble to present your design to the user in a way that makes it especially relevant to them – what you’ve really created is a human-to-human interaction. Revealing the human being behind your website – behind your business – is the way to engender trust in a cynical and apathetic world.

Using something simple like hover menus or tooltips, to help customise the user’s visit to the site, are relatively easy wins. Simply remembering the users name and personalising their visit, goes a long way to creating that human-to-human experience.

On the menu

Video game menus are quite different compared to website menus. Or so you might think. But, of course, they’re doing the same thing – they’re helping you navigate and make choices by offering you options.

Some of these are exquisitely complex – Crusader Kings II, for example, is a strategy game whereby users can spend months playing a game which (in game time) spans generations. The menu offers literally dozens of customisable permutations and game play options, as befitting such a long-term endeavour.

You could argue that the interface for a game like this can afford to be impenetrable, because the players are going to spend the time learning it.

But, a first-person shooter game, like Destiny 2, is a much more adrenalised experience, so its menu is far simpler, designed to help the user to make quicker modifications, achieve quicker gratification, then get back into the thick of the game.

How hard is it to code some element of instant gratification into web design?

Look at the glory days of physical media – when Easter Eggs were hidden on the menus of DVD movies. Finding these treats became an Easter-egg hunt, with bragging-rights being automatically issued to whoever found them. This added an element of Gamification, even before that term was coined.

The most elegant (and rewarding) of these, was included on the disc of Terminator II: Judgement Day. The DVD included the Theatrical version of the film and the Extended Cut, but the menu also included a secret feature, where you used your remote control to enter the date of Judgement Day: August 29th, 1997 – as 82997 and, bingo – a new panel opened, allowing you to watch an even longer third version of the film.

Gamification – it’s back!

Gamification is a great way to elicit a pleasure response from a user. Games are fun. We humans are hard-wired to enjoy mastering tasks, to being demonstrably better than other people and to receiving rewards.

How can this be implemented into website UI?

One of the simplest and most effective ways – is to reward users with points or badges, which can add-up to real-world benefits, such as discounts or free-shipping.

Think about eBay – that gives you feedback scores and star ratings, which relate to how efficient and trustworthy you are as a trader. The higher the number (and, crucially, the higher the percentage of your ‘positive feedback’) the more likely you are to be trusted by other retailers. Earning those points, then, is good for business!

You probably have a LinkedIn account. Has that told you that your profile isn’t up to strength? That little status bar is there to create a sense of competitiveness, of wanting to be better than the other guy. But that’s a positive thing, because it makes your profile more impressive – which makes you more impressive.

Growing FarmVille

Remember FarmVille? That Facebook game played a major role in acclimatising people to the still-relatively-new social media platform. Dwell-time increased, new users ventured onto Facebook for the first time to play the game; it even brought older, harder-to-reach users on board. Farmville introduced a lot of people to the idea of in-game purchases, which would go on to have far-reaching repercussions for mobile gaming.

By 2011, FarmVille had 750 million players and was responsible for 10% of Facebook’s income. The genius of the game, was that users had to come back every day, or their crops and animals would die.

The game also encouraged you to make new friends through Facebook, so that you could then collaborate with them on improving your farm.

The game and the platform grew exponentially, at the same time; the one inter-linked with the other.

This was an example of the blurred-lines between website and video game, where both benefited from the UI of the other – and both generated a pleasure response in the user.

Playing the game on social media

Thinking about Facebook. They deliberately wrote gamification into their code. As Sean Parker famously said of the website he co-founded with Mark Zuckerberg: they deliberately created the ‘Like’ button to give users “a little dopamine hit”. That ‘buzz’, that moment of acceptance, of validation, would encourage users to come back for more. It made each visit to Facebook a Delight.

Moving on, to the way Facebook works today, and you’ll find that Gamification is at the heart of the race for Organic Reach. Polls are a tried and trusted method for generating user interaction. If you’ll forgive us for referring to our own Facebook feed – you’ll see an example of this in the question we asked about teamwork – to tie-in with the release of 2018’s Avengers movie.

This isn’t about feeling superior to other users, so much as having your say; airing your opinion because, as we know, everyone else on the internet is wrong!

Unsurprisingly, such polls create polarised results. But, for more open questions, on issues for which there are subtler shades of opinion – Instagram has introduced the Emoji Slider.

This has already proven itself useful to businesses, as a method of ‘soft’ Market Research – a notoriously difficult thing to get casual social media users to engage with. Gamifying your research makes it fun, which makes it work.

It’s been emojinal

The Emoji Slider is just the latest application for those funny little yellow faces that pepper our phone and social media screens. Emojis evolved from so-called ‘emoticons’ (short for ‘emotional icons’) which – back in the very, very early days of the internet and limited character-counts for texting – was a way of using punctuation to quickly communicate emotion.

Emojis are simply a more developed, more expressive, form of that. The official Unicode Standard list now includes almost 3,000 emoji characters which, together, form the language of Emotion.

And Emotion is what we’re really talking about.

So, when it comes to web design, the message is clear: Make it fun and they will come.