Report: Web directions @media, Day 2

Talks on gameful design and a rallying call to develop a new toolkit: slides now live


Gamification involves integrating game dynamics to drive participation

Presentation slides for the inspirational talks at Web directions @media last week have started to go online, enabling those who missed out to catch up on a slice of the action.

This year Hannah Donovan called on the industry to seek out a “toolkit of the future” to facilitate designing for new platforms; there were two talks on the “gamification” of applications; and multiple speakers outlined exciting new possibilities in CSS3 and HTML5.

In his talk on sustaining passionate users, Stephen P. Anderson put forward techniques for using gamification to motivate people to undertake and complete tasks.

He said that gamifying business applications to keep users engaged is a good strategy, but railed against the common practice of “sugar coating” - that is, adding a layer of fun on top of the task, such as points, badges, gold stars and so on. “A game layer doesn’t sustain behaviour,” he warned. “Instead of adding fun, find the fun in the core activity.”

To achieve this, the game aspect must tap into human nature by appealing to things that people are naturally driven to do. For example, people like to increase their status, and to improve relative to their personal best. So a game is more likely to be engaging if it can provide a chance to satisfy these desires.

He used the example of an application for recording the time spent on different tasks during the working day. The first step in gamifying the activity is to identify the core challenge – in this case, the underlying purpose of time tracking is to make the user better at estimating how long it will take them to do things. The next stage is to devise a process that drives the user to accomplish the core purpose by exploiting one of the useful aspects of human psychology that Stephen has identified. In the time tracking application, this can be achieved by asking users to estimate how long their tasks will take before they have started them, and then to record the actual time taken. At the end of the day, the application will calculate how accurate the user was in their estimation, and over the weeks plot a graph of how their accuracy has changed. Adding this measure of accuracy to the time tracking turns the activity into a game.

Sebastian Deterding spoke on a similar topic, offering a detailed analysis of what makes games engaging and how to incorporate those aspects into “gameful design”. He looked at two massively successful games, LEGO and Go, and concluded that their popularity is due in part to their status as “possibility engines” – they generate a vast array of possibilities for creativity. He offered Minecraft as an example of an online game that is successful because it embodies this quality.

Possibility engines were contrasted with “exhaustibles” – games whose possibilities are exhausted very quickly. He argued that lots of gamified apps fall into this category.

He even went so far as to say that some app makers are in an “abusive relationship” with their players. Games that use meaningless points and badges as incentives aren’t offering the players anything of value. This gives rise to an intention among users to play until they’ve extracted whatever small amount of value they can from the game and then leave. Since the players are providing something of value but getting very little in return, the players are to some extent disrespected by the game creators.

The key to designing gameful systems that will retain users in the long run is to reward players with something that is genuinely valuable so that there is an equal exchange. Slides here

Over in the development track, Nicole Sullivan looked at ways to improve the performance of your site by writing quicker code. She quoted Dave Hyatt as saying “The sad truth about CSS3 selectors is that they shouldn’t be used at all if you care about page performance” and recommended the CSS Stress Test bookmarklet for identifying your slowest selectors. She also warned that often slowness doesn’t come from any particular selector, but the cumulative effect of lots of code: “At 18-20k of CSS, performance drops suddenly”.

Stephanie Sullivan Rewis expressed her excitement about some of the new features in the CSS3 Backgrounds and Borders Module. Of particular interest were the image masking capabilities: alpha masks, which use a pattern of alpha to clip content; masking with gradients and masking with SVG files.

She also talked about CSS Regions, which allow text to flow across multiple areas, bringing a magazine-like quality to the web.

In her talk on designing without the browser, Hannah Donovan spoke about how the web design community needs a wider toolkit in order to cope with the challenges brought by new platforms. “Increasingly the media we’re designing for is not the browser, and right now these new mediums are less flexible.” She said that many web designers are from “flatland”, that is, a traditional graphic design background that doesn’t have a great way to communicate the 3D experience. The toolkit of the future will take account of physical space, context, scale and timing. Web designers need to look to other design disciplines to develop the right techniques for the next era. “I think it’s going to be awesome!” See her annotated slides at

Also keep an eye on for more presentations.