Your Web Site as a Game
When I first heard someone mention using video game metaphors in web site UI design I thought of the UI common in many first person shooters, such as heads up displays and menus for managing weapons and tools inventories. But I was thinking too literal. It’s way more basic, it’s about saving the princess and leveling up. The cornerstone of using game metaphors is to provide rewards to users who accomplish certain tasks on your site. These rewards can be virtual, such as badges, medals or special titles (guru-user) or real world rewards, such as discounts, free schwag (t-shirts) or gift certificates. When users accomplish multiple tasks, they get even more. By providing rewards for tasks and sets of tasks you can encourage exploration on your site. Users will be more likely to try a feature on your site if there is an incentive, even one as small as a badge. You can also use rewards to encourage users to provide more data about themselves.
One of the most used examples of game metaphors in web UI design that I heard referred to at SXSW was also the subtlest, linkedIn’s profile progress bar. This progress bar is persistent on a user’s profile and informs him or her of what percent “complete” their profile is. The reward is the warm, fuzzy feeling users get when their profile reaches 100%, the sense of completion and accomplishment.
More obvious uses of game metaphors are used in both Gowalla and Foursquare, which are location aware social networking apps for smart-phones. When users visit a real world location they can “Check In”, or post their location to their status along with an optional short message. Users of both these apps get badges/stamps for visiting real world locations and can even get discounts or gift certificates for visiting a series of locations.