When applied correctly, these ‘drivers’ can be powerful tools to increase user engagement in web design. The benefits are vast, including the generation of a positive user response, as well as the facilitation of user comprehension of digital content.
Evolving development methods and tools, such as WebGL and Canvas allow web designers to integrate these into user journeys and interfaces ever more easily and seamlessly.
Let’s look at some examples
Challenges and storytelling: SPENT
‘SPENT’ is a website created by Urban Ministries of Durham (UMD) to raise awareness and money in order to fight poverty in deprived communities. Instead of relying on a typical imagery-based approach to make viewers feel pity or guilt, it makes clever use of storytelling and branching choices to challenge users by making them active participants in a scenario-driven tale of poverty.
Participants are placed in the shoes of a typical individual who relies on UMD support. The design also applies other mechanics like consequences, loss aversion and social networking to really immerse users.
In just 10 months after its release the game managed to raise $45,000 from 25,000 new UMD donors and received news coverage from CNN and ABC. In 2014 it was reported that almost 11 million people had spent an average of 11:46 minutes on the site.
Badges and achievements: Google News and Team Treehouse
Google News Badges
Team Treehouse achievements
A common, but difficult mechanic borrowed from video games are badges or achievements. Letting users acquire rewards for doing certain things on a website is ought to provide them with a sense of progression and thus keep them coming back. However, this is only effective if users value the rewards they receive.
In 2011, Google released Google News Badges in the US in an attempt to motivate users to read more news articles on topics which they would not normally engage with. With limited success they have largely remained unheard of. There was neither challenge in attaining them, nor value in sharing them.
An achievement system which I personally found engaging was the one used by Team Treehouse, an online service that teaches users to code. Their achievements feel challenging to earn and worth sharing. They provide users with a real sense of progression in an area where the learning curve is quite steep and can feel off-putting.
Combination of multiple mechanics: Google Interland
In 2017 Google released ‘Interland’ (Be internet awesome), a web-based gamified online learning platform to help kids learn key lessons about digital citizenship and safety.
Since this example aimed to engage kids aged 13 to 18 who regularly play video games, it made use of a broad spectrum of game mechanics, making it more of a game than a traditional online learning intervention.
Interland works through impressive advancements in browser capabilities, especially those of its own, Google Chrome, to make a website that essentially works like a full scale game to effectively hold the attention of kids.
From storytelling to rewards, Interland makes meaningful use of a wide array of game mechanics conveyed through a striking 3D-style user interface, acting as the ‘glue’ to tie it together into an interactive narrative that successfully entices users of all ages.