Go back to post list

Shop Like a Gamer – Gamification and eCommerce UX

Shop Like a Gamer – Gamification and eCommerce UX

Gamification, that is applying game principles and elements in non-game contexts, has been quite a thing for some time in the web design and UX industry, and most probably it’s here to stay. Even those of us who are not regular gamers can spot certain patterns and methods and use them successfully in creative projects.

Why use gamification

Gamification is adopted widely by web designers for a couple of main reasons:

  • to attract users’ attention
  • to keep the users engaged with a service or a product
  • to facilitate user journey and thus enhance the usability of an app or a website by setting up clear journey steps and focusing on the website’s coherence

Game principles set clear targets before the users, reward them for their actions and encourage them to compete with others, be it by highscore tables or badges system. These methods can be easily spotted in major services like MailChimp or LinkedIn – the former brings a bunch of funny interactions, including high fives with their monkey mascot, and the latter gives the users a never-ending quest to complete their profiles, because it’s actually impossible to reach 100% of the progress bar. The princess is in another castle.

Gamification and web design

Games catch people’s attention and can occupy them for countless hours, which is why using even their basic principles can make a whole lot of difference in the UX. After all, playing any game is primarily about making choices, taking actions and facing the results: to use an old cliched statement, everything is a game.

Since gamification is so wide-spread (especially on promo or game websites), most probably you have already run into a “gamified” site at least a couple of times. This is why I will not discuss in-depth the typical examples here: I want to focus on eCommerce websites that use small gamification principles in a subtle manner for better user experience and visual engagement. Some of their techniques are so common that we hardly notice them, but still they fall nicely in the rules of games theory.

Of course, gamification will not work wonders if the products and the website are generally lousy. Product quality and uniqueness, neat website design, good items descriptions, crisp and flattering photos and reasonable prices are still the basic elements of a successful online store, but whether you are a web designer or an eCommerce owner, check out these small elements based on gamification theory that you can use in your next eCommerce design or in your current website to improve the UX and the general coherence of the site.

Clear scenario

This is something that every successful website, especially an online store, must think about at the very beginning: who are the players (that is, the target audience)? What is their goal? How can they achieve it? Think of all dead-ends and dropout moments; you can use a tool like HotJar to follow users’ paths and pinpoint the moment when they abandon the website. Try to predict all possible scenarios and don’t leave the users with a non-informative 404 page – always give them a chance to take another road.


Image by Jenny Cham

Journey feel – step by step

– a logical step-by-step procedure from the moment a user enters the website to the successful transaction. Logical proceeding is crucial here, for if a user gets lost, chances are they will abandon the cart and never come back.

It’s always good to provide the users with a visual representation of their journey. This element may seem obvious, but far too many online stores neglect to incorporate it.

Here’s a good example from figleaves.co.uk:

Always keep your users informed about what they are doing and where they are – breadcrumbs for easy navigation and a site map will keep them on track.

Journey feel – choices and options

Dead ends happen and if you don’t want to lose a customer forever when they reach one, think about clever ways of guiding them out of the trap.

For example, if they make a typo in the search box, don’t just flash out the disheartening “No matches found” message. Instead, think of a “Did you mean…” list of similar keywords.

If they reach the 404 page, don’t just make them stare at these three horrible digits. Provide some useful links that may guide the users to their desired location. A good copy to make things sweeter won’t hurt either.


Modcloth.com 404 page

And what if the desired size of that fabulous kitty T-shirt is sold out? Make sure the customer is the first to know when it’s back in stock.


Threadsence.com “Sold out in your size” link

Do you remember that beardy wizard the hero can turn to when he gets stuck? Be there for your visitors when they need help. Don’t be a Clippy, but make sure the visitors are not left alone: think about good size charts, products knowledge base, comprehensive FAQ section and a contact form.

Repeat the experience

The Sims franchise has been successful for over 15 years now and why? Save for its vivid community that still adds to the game, The Sims can be replayed forever with new scenarios and elements to discover.

Give your eCommerce visitors a chance to repeat the shopping experience by showing them the carefully selected products they might have missed but which will match that fab piece of clothing they have just selected. Plus, spare them the effort of figuring out whether the shoes match the dress or whether the tie matches the shirt – they surely do.


Anthropologie.com “Get the Look” sidebar

Cooperation

Speaking of communities, there’s nothing better to keep any undertaking alive than a devoted group of people that inspire and provide for other users. In the game realm, a team of cooperating users can learn from each other and thus grow both as a group and as individual players. Think of encouraging your visitors to share their ideas with the world to spread the word about your brand and for the sheer fun of cooperation:


Freepeople.com community styling

Of course, sections like “People who purchased this item also purchased…”, “People who viewed this item also viewed…” and user reviews of the products fall within this category as well. All these help to build trust and long-time relationships with your customers.

Competition and challenge

Competition games light that spark of a warrior in the players’ hearts and can keep them fighting these fire-breathing dragons or the guys on the other side of the battlefield for days (and nights). Introducing an element of competition to your online store can be tricky, because where there is competition, most probably there’s conflict, so think ahead about a moderator in case the things go awry. Think highscore boards, likes, badges, stats and contests – just be careful that these don’t get out of hand.

And if there’s no option of user competition, perhaps self-challenge is possible? Collecting points, payback and loyalty programs can turn simple shopping to a game-like experience, and sales with countdown timers or free shipping for a certain amount of product bought can be the factors encouraging the users to buy more.

Engagement


Patagonia.com product stories

When creating a website, try to give the visitors a behind-the-scenes sneak peek or a personal word from the people involved to make them feel personally bonded to what you’re offering.


Artizia.com designer’s note

Not to mention that a good piece of reading is a nice thing, either.

What other things can keep the users engaged and interested? Think of some unique UI elements:


Dollarshaveclub.com product type switch

and captivating calls to action:


Patagonia.com search box


Freepeople.com review CTA

If the users have fun interacting with your website, chances are they will stay longer and turn into profitable customers.

Conclusion

Gamification is quite a powerful psychological tool that can modify users’ behavior by affecting the way they interact with your website. What’s important, however, is that it starts and ends with the user journey: when you have a clear idea what the visitors should do, you can more easily prompt them to make the right choices. Good user journey organizes and declutters the website leaving only the meaningful elements, so gamification traits always must be put in context and with the goal in the designer’s mind. Gamification will not make your product greater than it is, but it may keep your visitors and customers engaged and make them come back – and, after all, isn’t it what all business is about?