Toggle navigation

6 Things Video Games Can Teach Us About Web Usability

November 13, 2009

Those who think video games are not educational, this post is for you. Not only can video games be an enjoyable experience, they can teach us many things. Websites and video games often use similar concepts about usability in order to achieve an amazing end-product. I’ve come up with 6 essential concepts that video games can teach web designers about usability.

1. Users Have No Patience

Regardless of what the product is, users will get frustrated easily if they have to wait a long time for a response to an action. Nobody likes a loading screen in a video game. While loading screens can be minimized in multiple ways, it is hard to eliminate them altogether since they use disc-based media. Developers try to keep the user entertained by playing background music, customizing the loading icon/progress bar, or displaying information such as history or facts during the load time. EA Sports FIFA 09′s loading screen has the user play against the goalie in a practice environment while the game loads.

For Web usability, this means that new pages must display within 1 second for users to feel like they’re navigating freely; any slower and they feel held back by the computer and don’t click as readily.

Jakob Nielsen – Alertbox, October 5, 2009

On the web, loading screens are most associated with Flash. Flash applications almost always have loading screens. If something takes more than 1 second to react, most users will get frustrated and leave. Even the simplest of things such as a hover element should not have a delay. Bandwidth is becoming less of an issue these days and websites should be able to make the user feel as if they are in total control.

2. It’s All About the Experience

Even the elderly could not resist the Nintendo Wii (source: BBC)

Even the elderly could not resist the Nintendo Wii (source: BBC)

Why do people play video games? Simple: They want to have fun and enjoy the action, however that is defined. Modern games increasingly try to engage the user by making the games contain a strong storyline and mirror elements you would find in the cinema, such as recent popular games like Grand Theft Auto 4 and Uncharted 2. Since these games are attempting to be more realistic, it is no surprise that the video game industry is overtaking the movie industry. Instead of watching great movies, you get to feel like you are in one, with full control of the characters. The creative interaction is the key rather than just eye candy. The Nintendo Wii became popular among traditional and non-traditional gamers due to its unique interaction, even though its graphics were inferior to other gaming consoles.

On the web, the experience is what keeps users coming back. E-commerce websites are particularly focused on the experience because they want potential customers to feel like they are shopping safely and securely. Users browse the web for information. It is how the website presents this information and, more importantly, how it gets the user to that information that makes the experience worthwhile. Amazon and eBay have been pioneers in the e-commerce world and their strong returning customer base proves that they know what they are doing.

3. Progressive Enhancement is Good

This generation of video games are now available with HD audio and video. If you own a system capable of high definition like Xbox 360 and Playstation 3, you can take advantage of high quality graphics and sound. Not only can games look more crisp and realistic with vibrant colors, they can also produce uncompressed multiple channel audio that makes you feel like you are in the game – literally! For those who don’t have an HDTV or a modern surround sound system these systems will simply downgrade those features and play the game as normal. The games will always function the same and sound the same – it’ll just be in a lower resolution and with only 2 channels of audio. No harm done to them. Progressive enhancement in action.

Websites are starting to show progressive enhancement as well with the use of CSS. Web designers try to reward users who browse with modern browsers (i.e. Firefox and Safari) with a beneficial experience that users of IE cannot have, without detracting from the functionality. Designers are using RGBa values, which allow them to include an added alpha channel to the element. This is a powerful tool to have in your designer toolbox because it allows you flexibility and control in overlaying graphic elements and to incorporate opacity variances into the design.

CSS Document
.element {
     color: #fff;
     color: rgba(255,255,255,.5) /* for modern browsers */
}

The example above declares a standard CSS rule for the text color. Older browsers who do not support CSS 3 will only recognize the first line and ignore the rest. The more modern browsers, however, will read the second rule and therefore ignore the first rule. The same concept applies to the CSS 3 border radius property and the CSS 3 opacity property (alpha channel on the entire box element). Andy Clarke uses transitioning properties on his website that are only functional in Safari. These properties, which make the DVD and disc animate on hover, can provide some unique design interactions. Taking these concepts and applying them into websites gives users a unique experience and at the same time doesn’t take away the essence of the design entirely for those who use, well… IE.

4. Minimize Learning Curve by Including Tutorials

Instruction booklets are becoming less used these days for video games. Developers are now putting tutorials into the game and having the user learn as they progress. Most typical games will have the first level or so of the game be the learning grounds for the rest of the game. This is becoming a de facto standard in the industry. During this time, users will be prompted with basic controls and developers will design the level to make sure the the controls are used properly before permitting users to continue the game. These learning tools help minimize frustration and also get the user prepared. What better way to learn than to actually try. Reading instructions is not as effective.

Websites need to be careful about introducing new objects or applications to the user. If you suspect a user will have to think about how to use a particular part of your website, you will have a problem. Users will need assistance with it – whether it is simple instructions or a video tutorial.

5. Keep the Interface as Simple as Possible

In-game menu. Better watch your back!

In-game menu. Better watch your back! (source: Game Trailers)

Interfaces are extremely important in grabbing the user’s attention. Video games are coming up with some creative ways of designing their interface. While being creative, they still function the same and are easy to navigate. Nobody wants to be confused about where they are or how to get out of the location they are in. Navigation should be carefully thought out. Dead Space uses an intuitive in-game menu where your menu pops up in front of you while you are playing the game. There is no interruption from action as you still have control of your character. Madden NFL 10 uses a simple menu system that zooms to different parts of the stadium in the background based on the navigation section you have chosen.

Websites must remain simple to use, or users will get frustrated and leave. The UI needs to make sense and be engaging at all times. Breadcrumbs are important for sites that are large, preventing users from feeling lost.

The ability to simplify means to eliminate the unnecessary so that the necessary may speak.

Hans Hofmann

6. Don’t Rely on Graphics Alone

Great graphics, but unusable controls make this game hard to recommend

Great graphics, but unusable controls, make this game hard to recommend

Those who remember Grand Theft Auto 3 can agree that it was not the most beautiful looking game around at the time of it’s launch. That said, they will also agree that it was the best game to play at the time and it was a huge hit. Graphics can’t do it alone. The experience also needs to be great. GTA3 was impressive because it had an engaging storyline, incredible controls, and was a blast to play. A game with pure eye candy and no functionality will not last long in this industry.

On the web, functionality needs to be priority over design. Once a site functions properly, then you can apply the interface to it. Just like a chair, it needs to function before it looks great, otherwise it is useless. Plan out your websites carefully and make sure that you are considering all aspects exhaustively. Just like video games, a website can be popular if it functions and is enjoyable but will be useless if it’s just eye candy.

So, what are your thoughts on video games and web usability? Do you have any other comparisons? We’d like to hear from you!

44 Responses to 6 Things Video Games Can Teach Us About Web Usability

  1. Pingback: uberVU - social comments

  2. John House says:

    Thanks for your great article. There is so much junk on the internet it is hard to find good quality information when you really need it. I just came across your site and have bookmarked it. Look forward to reading more in
    the future keep us posted.

  3. Pingback: Twitted by nunovargas

  4. Pingback: 6 Things Video Games Can Teach Us About Web Usability | Atlantic BT « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  5. Pingback: Twitted by leojordao

  6. Pingback: Twitted by Floris

  7. Pingback: Darklg Web (darklgweb) 's status on Tuesday, 17-Nov-09 17:05:39 UTC - Identi.ca

  8. Pingback: Twitted by Arekibo

  9. Pingback: Twitted by sylvainloiseau

  10. Pingback: 6 Things Video Games Can Teach Us About Web Usability | Atlantic BT | IPhoneMate

  11. Pingback: 6 Important Points in Designing a Website « JustClick

  12. Pingback: Games X Web usability « DC blog

  13. Pingback: Insights on designing for the web « Design and Innovation Daily

  14. Thierry says:

    I very agree on the fact that “cloth-to-reality”3D image” can’t do it all.
    Animations and sound adds a lot of immersive value.
    How can these two be mimics in web sites?
    - For “sound”, I have no ideas since web surfing is, up to now, mainly a soundless experience.
    - animations ? I think iphone/ipodtouch show us the way. animations between actions is a wondeerfull daily experience. Now how can this web made in a standard html site …. well I don’t think it is quite possible today. We will have to wait a bit.

  15. Great article – I am a hard-core Warcraft player and a usability person (I’ve never worked with an interface with so many icons as Warcraft :) ).

    I would add a little bit to the patience point – when you’re playing a platform game it gets very annoying jumping across a gap and always landing short – sometimes that can kill your progress through the whole game. Yes, games should encourage the player to develop skills to keep it interesting, but that process should never cause bottlenecks.

    No other entertainment medium (e.g. a book, film,or CD) stops you part way through, and forces you to meet an absolute “standard” or level of understanding before you can move onto the next section.

    Must dash – warcraft beckons!

  16. Pingback: Twitted by TheMarkInman

  17. Pingback: Twitted by jakejohnson

  18. Pingback: Cairns Web Developer » Blog Archive » 194. Focus on User Tasks

  19. Pingback: Twitted by diogenespassos

  20. Pingback: Twitted by Trypnotik

  21. Pingback: Twitted by rogeriopa

  22. Pingback: Twitted by niravbpatel

  23. Pingback: Contenidosenred. Comunicación, márketing y contenidos en Internet

  24. Pingback: Website Research 4: Game/Web Design « Jessica Tanguay

  25. R4 says:

    During my childhood, I was educated that video games are not educational, sometimes, they would effect our studies, our bodies. But since I entered the university, I found this view is wrong,not only can video games be an enjoyable experience, they can teach us many things. And thanks for your information.

  26. Pingback: 194. Focus on User Tasks | Boagworld

  27. Pingback: gameplay trailer, gameplay trailers

  28. Pingback: Our Bookmarks: Nov 16 - Nov 22, 2009

  29. Pingback: Internet Web Directory

  30. Pingback: Tamil Serials online,Telugu Serials online,Hindi Serials online,Malayalam Serials online

  31. Pingback: Web Design

  32. Pingback: impressive web

  33. Pingback: battlefield 3

  34. Pingback: free rs membership

  35. Pingback: bsg tips

  36. Pingback: Play Cricket

  37. Pingback: posicionamiento web Valencia

  38. Pingback: instalar plantillas joomla

  39. Pingback: Video Games

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>