What Web Designers Can Learn From Video Games

Advertisement

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games?

Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail.

Screenshot
Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games.

In the same way, website users want their content delivered to them in a way that is easy to understand, intuitive and engaging and that doesn’t require a lot of scrolling or clicking. In fact, Web designers can learn a lot from video game interfaces. Websites that use common game interface tools can streamline the user experience while adding a lot of personality. This can result in higher traffic and a higher rate of repeat visits — and sales… Cha-ching!

It’s no surprise, then, that we’ve seen an influx of carousels, lightboxes, accordions and increasingly sophisticated navigation patterns, as CSS and JavaScript libraries have put such tools within reach of Web browsers. Whether it’s a good or a bad thing, is a topic for another article, and this article will focus on the techniques rather than their wrong applications.

What a Web designer can learn from video games isn’t limited to the user interface. Yahoo Answers works because of the psychology of the achievement system that is built in. So, while we will look at some basic user interface ideas and patterns, other higher-level concepts would be useful, too, and worth exploring.

Remember The Big Picture

In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals. Obviously, a website will often, though not always, have a goal that is very different from that of a video game. On many websites, efficiency needs to be a higher priority than entertainment. A cool fish-eye interface is not the most practical idea for a website dedicated to delivering tax information quickly or for an e-commerce website. However, an interactive social media channel might benefit from a leaderboard or some type of achievement system. Choose your UI components to fit the project.

Looking at the big picture, also consider structure and method — not just UI components. For example, look at how menus are structured, and consider why those choices were made. In many games, you have a hub-and-spoke type architecture, leading to different sets of tools within the menus. If you choose “Weapons,” then all of the options for weapons open on the next screen. You have to navigate back to the top screen in order to choose “Maps.” This structure simplifies a set of options that would otherwise quickly become confusing or overwhelming by providing focused attention on one choice at a time.

Can you see how this type of architecture could benefit a website that presents a large amount of information to the visitor? By allowing the visitor to focus on one piece of a large online task or one nugget of information at a time, you potentially increase the conversion rate for your client. This structure could also be effective when you are crafting a sales funnel on a website. The example below shows a simple game menu structure1 that could easily be applied to the information architecture of a website, building paths for visitors to follow.

Game Menu Structure Example2

If you were building a website for a CPA firm, you might segment its menu information under headings relevant to the type of visitor. A high-wealth individual has very different needs than a small business, but both might be interested in hiring the same firm. You could start at the top level, with two simple entry points serving as a funnel, one for individuals and families and the other for businesses and organizations, each button leading to the hub for that user. This hub page could provide content, offer pertinent tools and advertise relevant services for these very different users, thus simplifying their experience.

Screenshot3

Also, notice places where video games show instead of tell, and try to understand how they do that. Successful games are particularly adept at showing during training sessions, in what are often referred to as “noob caves.” A character has to pass through elementary rooms or levels, where they are taught to accomplish basic tasks in a way that is entertaining and integrated with the story. An adventurer learns to pick up a sword and swing it, then kills a rat, then learns how to pick up treasure. The user is taught to use the interface through immersive experience.

Screenshot4
In The Elder Scrolls IV: Oblivion, you start out in prison and must escape through an underground cave, fighting rats and the occasional small goblin along the way to learn the basic controls of the game.

Why is this relevant? You probably won’t have to make a full interactive tutorial for a complicated interface, but chances are your client’s content will be more clearly received and more quickly understood through intelligent graphics or charts. You could take big concepts and break them down into bite-sized chunks. You could look for potential points of confusion and clarify with tooltips or examples rather than long explanations. By studying how games show instead of tell, you could get a breakthrough on a thorny presentation problem.

Engagement Doesn’t Have to Be Glitzy

Game design wizard Jesse Schell says5, “Games offer the possibility of success, the opportunity to satisfy your curiosity, the chance to do some problem-solving and make clear choices, giving a feeling of freedom.” Even the most mundane of websites could be made more engaging by asking the question, What elements of games do people find pleasurable?

Games provide clear feedback, often at the instant of user input. These elements could be incorporated into interfaces, and not only through carousels or accordions. Asking something as simple as “Would you like to learn more about this topic?” upon confirming the submission of a form can go a long way to increasing user interaction.

Some Web designers already implement some of these common UI components at a simple level. Certainly hover menus and tooltips are not new. Seeing how these are implemented in a game can spark ideas on how to implement ordinary UI elements in a more creative and interesting way.

Examples, Please

Let’s dive in and look at some UI elements that can add zing to your next project. We’ll look at some examples and then a few resources where you can learn more.

AJAX Messages With Loader Image

Fallout New Vegas Loading Screen6

Fallout 3 loading images and tips7

These loading screens from Fallout: New Vegas (top) and Fallout 3 (bottom) have helpful information and tips, along with a background image that expands on the theme of the game. Instead of a spinning loader image, the user sees a roulette wheel or green-screen target that transforms a boring wait into a fun part of the game experience.

What a Web designer can take from this:

Customize your graphics. Use them to pull the user into the “world” that you’re creating on screen. Even if you are working on a corporate website, you can load tips and helpful bits of information. Building a retail sports website? Perhaps you could use a spinning basketball for your loading graphic on a slideshow. Not sure how to get started? Check out this tutorial to learn how to preload content.8

A full-page background image for a loading screen might be too slow, but you could add a colored background to the loading panel div, and then use JavaScript plug-ins to load random tips and information to fill the space. For best results, keep the loader files below 30 KB; the smaller the better. A simple AJAX call can grab tips every so many seconds, or you can simply post one for each load. The choice depends on how much content you need to load and how much time you have. For an example of this kind of loader, check out the Website Grader9 at HubSpot. After submitting a link, check out the loader that comes up as you wait for the result.

Website loader with pizzazz - HubSpot10

Custom Cursors

11Custom cursor12
In Fable 3, the place being chosen by the user is indicated by a magnifying glass, which acts as a custom cursor.

Hand icon13
In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates an object that the player can pick up. A red hand indicates that the item is being stolen and that soldiers might pursue.

What a Web designer can take from this:

Probably the most recognizable custom cursor is the “grabby hand” Google Maps14. But custom cursors are nothing new and are common in Web applications. The capability is built into most browsers.

It’s important to use these cursors sparingly: when offering help, to indicate clickable content, and to highlight important information. Does a particular piece of information absolutely need to be seen by visitors? Try this demo of a custom cursor15 (pictured below). Do you see how it could be used to grab attention and highlight important points? Imagine what a well-executed JavaScript magic wand could do on a children’s website to capture attention! Obviously, it wouldn’t be a good fit for a corporate website, though.

Custom Cursor Demo16

Icons, Icons, Icons

Screenshot1718

Screenshot19

One big difference between video games and websites is that icons are used much more in complex game menus than in website navigation, and rightly so. A user typically spends much more time in a game than on a website. But icons are still used on websites, and increasingly so as the line between websites and Web applications blur.

So, how are icons used effectively in game navigation? They must be readable and fit the context. In the example above from Halo Reach, the user relies on icons to navigate and choose weapons, but the menus resemble a “heads-up display” (HUD) that we might see in a vehicle in the real world. In Oblivion, icons are presented on “scrolls.” Website icons should likewise be easy to understand. Add text labels for optimum usability.

Icons can greatly accelerate navigation through complex menus if the icons are carefully chosen and consistent and if users spend a lot of time on the website. Use solid-color, high-contrast outlines of easily recognizable shapes that are simple and quickly readable.

Games are moving away from small, highly detailed images to more sophisticated outlines (in smaller files), such as those found in Halo Reach and the Call of Duty series, and larger detailed images with distinctive shapes, such as the ones below. Even if you don’t notice the details, you will recognize the hand, circle and face outlines. Using the same color makes them less visually complicated and easier to decipher. The more icons that are used, the simpler and more quickly readable they should be.

Screenshot20

You can also use icons as visual cues to focus attention on key topics. Use “header” graphics instead of buttons as quick prompts in content boxes and repeating topics to reinforce concepts. Make complex images bigger, and be consistent. Use icons to add interest to lists, and break up content into digestible pieces and to draw attention to important sections of text, as Treemo21 does so well. Consider using relevant icons for navigation and topical groupings. You could use consistent shapes as headings within the text or as pull quotes to indicate that certain content is related. Use icons to make content easy to scan, highlighting points of interest, so that users can quickly find pertinent information.

Icons don’t have to be static illustrations. The screenshots on Pattern Tap22 serve as traditional thumbnails, but their distinctive shape also functions as an icon, increasing interest and reinforcing the brand:

Iconic thumbnails23

What about using your client’s own products as icons? The clever sub-menu on DonQ24, shown below, uses the products themselves as icons, quickly and easily directing you to the one you’re interested in. Even more clever is the way that the rest of the content dims when the sub-menu appears, making your options stand out.

Icon submenu, products as icons25

Full-Page Carousels

Tabbed screens that fade out, such as this one from Dragon Age, Origins, have been around for a long time:

Screenshot26

In the “Carnage Report” in Halo Reach, below, this idea is taken to a new level. The screens scroll horizontally, and each page has multiple tabs. Gamers are used to this type of interface. But take it to the Web, and people will be surprised.

Screenshot27

You have to interact with this type of interface to do it justice.

Jax Vineyards28 uses a similar type of layout, without tabs:

Carousel Navigation29

Add tabs to each carousel screen, and you would take this website to the next level.

Magento30 offers another, simpler take on this idea:

Screenshot31

Right now we see this type of interface in mobile and tablet UIs in which there are multiple background images. We also see it in games of all types. This is more than tabs within tabs or simple horizontal scrolling: think iPad with multiple desktops. Think for a Living32 offers a (very game-like!) map in the top-right corner to help users navigate its unusual carousel.

What a Web designer can take from this:

If you have a lot of content, then this bold solution can be user-friendly and can increase engagement. Remember the good old on-page anchor tag with a target? This is the same concept in new clothing. Your screens slide in and are easily navigable with a touch screen, which is a factor that will only increase in importance.

Because of the various screen sizes, this type of layout requires careful planning and might call for CSS3 media queries33 to ensure that the content loads as intended on different screen sizes. You will need to make your layouts responsive34. You can implement a full-screen carousel by using a page-sized div, with the overflow set to hidden, and placing the screens in an unordered list with a set width.

Users will become increasingly familiar and comfortable with this type of interface as they adopt tablets. Implementing an even simpler horizontal scroll can make your client stand out from the crowd.

Slider Menus

Screenshot35

Screenshot36

Fable 3 is out, and its immersive menu system is completely different from the one in Fable 237, pictured above. But Fable 2 has such a beautiful slider menu38 that we had to include it.

Scrolling with the slider reveals buttons, and content is presented on the right half of the screen. The buttons also have dropdowns under them. Inactive content dims. Pictured above is the top category of “Clothing.” Then the content drills down to “Coats,” then to specific clothing items. Does this remind you of e-commerce?

What a Web designer can take from this:

Have you ever been on a website that had huge fly-out menus that covered the page? And as you hovered over items, they expanded into sub-menus… four levels deep! Such complicated menus can be intimidating and make the person want to leave. Making the menu small, easy on the eyes and quickly scrollable is a great way to overcome bloat and keep visitors from clicking away.

There are already some slider scripts39 that provide custom scroll bars for any div container. Why not put buttons in the div? There may be certain settings (like entertainment or fashion websites) where this type of menu is more usable and scalable than your average dropdown or fly-out menu. Add an AJAX loader for your onClick event, and you have an engaging interface that users can easily decipher. The goal is to keep users on one screen while keeping the menus scalable. You could add literally as many items under each menu as you need without making them unwieldy.

Pivot Screens

I must admit, my heart skipped a beat the first time I saw the pivot screens on Halo Reach. When you get to the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of menu screens. This is a visual cue. What happens when you push the controller to the right? The screen jumps and scrolls horizontally, blurring, to give you the next screen, which uses perspective as well, this time skewing all of the text and images to the left. Under a tab, your character is animated, barely moving and eerily life-like. Bravo. I sat and played with the pivots for a while. Of course, my first reaction was, I want to do that.

What a Web designer can take from this:

With a little Photoshop, you can emulate this menu. By using a large panoramic background image that covers two screens’ width with skewed CSS3 typography40, and a fast horizontal scroll in JavaScript, you could get something close to the tilt found in this game.

Apply this to a smaller pane, and use it on a banner or button that is completely animated in two frames, and you’ll get a wow (so will your client). I haven’t seen anyone using this method on the Web yet, but I did work up a little demo41 to give you a starting point should you want to implement this yourself.

UI: Pivot screen42

Also, notice the way that Halo Reach integrates mundane menu screens into the world of the game with the clever illusion of a landscape in the distance. It’s a beautiful thing. It gives a sense of depth and approach, like when you look at a city from a plane before landing. It builds excitement and entices you to go deeper, to interact and be part of the action. This type of integration does not lend itself to all website experiences, but it does to some; and when appropriate, it is worth doing. Never underestimate the power of delight.

Context Menus

Assassin's Creed Radial Menu43

The context menu in a video game is the kissing cousin of a website sub-menu. Context menus like the one above from Assassin’s Creed: Brotherhood give the user specific options depending on their location in the game and their choice of actions. If you choose to cast a spell, then the sub-menu offers you a fireball or lightning blast. If you choose to move, then you can run, climb or hide, all from the radial menu. Radial menus with icons are very popular, but context menus could just as easily be short vertical lists of text.

What a Web designer can take from this:

When you invite a user to take a specific action, a context menu can enhance the experience. Instead of providing lists of links, you could offer a fun array of specific actions to take. We see this used now in Web applications and in small social media sharing widgets.

When making a context menu, you might at least consider making it radial. Radial menus should give users a choice of three to eight options, and the interface can add visual interest. Keep the menus as simple and clear as possible. They should offer relevant choices to the user at the point of decision and increase conversion rates. They should also be easy to click and visually lightweight.

For a fun example of a radial context menu, check out TuneGlue’s musicmap44:

Radial menu45

While this was done in Flash, you could build a simple radial menu with JavaScript46. Or you could get more complex, with nested radial menus47, like so:

Radial Menus, Nested48

Radial menus aren’t limited to context menus. Pop-up panel menus at a point of action can be equally effective and may not take as much time or testing to develop.

Panel Context Menu49

Your Turn

Many other examples of great interface ideas can be gleaned from studying video games. Games offer design inspiration that can help you reward and gratify users and make your interfaces more intuitive and fun.

Are you building a website for a non-profit that is planning a donation drive? Consider using leaderboards to track donations. You could use leaderboards to give a shout out to the top 10 readers on your blog, giving them greater incentive to comment.

Study how icons are used, and think of ways to implement them that will make your website more user-friendly and enjoyable. Make interesting tooltips, or consider ways to add downloadable content (“DLC” for all you gamers out there) as a reward or incentive. By observing and implementing creatively, your websites will become more engaging and easier to use. And let’s not forget that doing the research is really fun!

Further Resources

(al)

Footnotes

  1. 1 http://theballgame.wordpress.com/2009/10/04/planing-the-menu-structure/
  2. 2 http://theballgame.wordpress.com/2009/10/04/planing-the-menu-structure/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/05/hub-and-spoke-funnel.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/05/oblivion_start11.jpg
  5. 5 http://www.ted.com/talks/jesse_schell_when_games_invade_real_life.html
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/01/falloutnv-load1.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/01/falloutload1.jpg
  8. 8 http://jqueryfordesigners.com/image-loading/
  9. 9 http://websitegrader.com/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2011/01/hubspot.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/05/immersive.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2011/05/immersive.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2011/06/steal.png
  14. 14 http://www.google.com/maps
  15. 15 http://www.ajaxblender.com/article-sources/jquery/custom-cursors/index.html
  16. 16 http://www.ajaxblender.com/article-sources/jquery/custom-cursors/index.html
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2011/05/readHUD.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2011/05/oblivion-menu.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2011/06/ob-char.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2011/06/oblivion-icons-magic.png
  21. 21 http://www.treemo.com
  22. 22 http://patterntap.com/collections
  23. 23 http://patterntap.com/collections
  24. 24 http://donq.com/
  25. 25 http://donq.com/
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2011/06/da-origins.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2011/06/carnage-report.jpg
  28. 28 http://jaxvineyards.com/#/sauvignonblanc
  29. 29 http://jaxvineyards.com/#/sauvignonblanc
  30. 30 http://go.magento.com/
  31. 31 http://go.magento.com/
  32. 32 http://www.thinkingforaliving.org/
  33. 33 http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  34. 34 http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2011/06/fable-scroll2rev.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2011/06/fable-scroll3rev1.jpg
  37. 37 http://lionhead.com/fable2/
  38. 38 http://jqueryui.com/demos/slider/
  39. 39 http://flowplayer.org/tools/demos/rangeinput/scrollbar.html
  40. 40 http://www.zenelements.com/blog/css3-transform/
  41. 41 http://www.redtoadmedia.com/pivot.html
  42. 42 http://www.redtoadmedia.com/pivot.html
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2011/06/radial-menu-a-creed.jpg
  44. 44 http://audiomap.tuneglue.net/
  45. 45 http://audiomap.tuneglue.net/
  46. 46 http://www.webtoolkit.info/javascript-pie-menu.html
  47. 47 http://www.tikku.com/jquery-radmenu-plugin#code_example_4
  48. 48 http://www.tikku.com/jquery-radmenu-plugin#code_example_4
  49. 49 http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
  50. 50 http://www.emdezine.com/deziningInteractions/2010/03/22/why-have-a-design-pattern-library/
  51. 51 http://artofgamedesign.com/
  52. 52 http://www.welie.com/patterns/
  53. 53 http://developer.yahoo.com/ypatterns/
  54. 54 http://www.simonbattersby.com/blog/vertical-scrollbar-using-jquery-ui-slider/
  55. 55 http://www.patternry.com/
  56. 56 http://gamification.org/wiki/Encyclopedia

↑ Back to topShare on Twitter

Anne Miles is the owner and Toad-in-Chief at Red Toad Media. A trained graphic designer, Anne's strength lies in her ability to translate messages to the web through user interface design, web graphic and interactive design, web copywriting and social media marketing. Anne has designed everything from software interfaces to children's books. She has taught college courses and also worked as a multimedia specialist for a Fortune 500 Company. She has designed for a wide range of clients, small and large. She lives and works on the outskirts of Louisville, Kentucky.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Terrific article. As the video game industry continues to innovate, it also helps to spark trends in both visual and product design.

    Also, Oblivion. FTW.

  2. 3

    One of the greatest things I take away from comparing video games to websites is that a video game is designed to work on a large variety of screens. The same content is delivered no matter if you have a 62″ LED tv or a 32″ tube tv. Now the graphics might be better based on you TV’s capabilities, but the content is the same.

    This idea is at the core of my views about mobile websites and device agnostic websites in general. The content should be the same, one should just progressively enhance the experience when capabilities allow for it.

    • 4

      Anne Sallee Miles

      July 27, 2011 7:50 am

      thanks Brett. I agree but as you probably know, many times download times etc, make complicated ui not practical for mobile. Hopefully we will see that change over time. You are right though, progressive enhancement is key.

      • 5

        Yes download times are something very important when designing for mobile devices. It would be in bad practice to serve the same design used on the desktop to mobile, tablet, other devices.

        I envy the way game designers develop their games. So often do we make websites for “modern browser” and if we have time, make a fall-back for IE6, if it all… I know I’ve done it before. But game designers make their content available to anyone with a TV.

        Take Call of Duty: Black Ops for example. You can play CoD:BO on your 10 year old TV, and it works just fine. If you play on CoD:BO on a HD capable TV, the graphics improve dramatically, and if your TV is capable of 3D you can play Black Ops in 3D.

        I relate the old TVs to old mobile phones, old browsers, users without JavaScript enabled. All of these users should still be able to “play the game” or in other words access your websites content, they just won’t see the “HD graphics” or get the “3D experience”

        • 6

          very well said. Perfect.
          designer should think about all those users who may have does nt have device resources. also we always think about design degradation in graceful way in older browsers or devices but mostly do not think about upgraded or latest devices that can deliver more.
          @Anne Sallee Miles : great article and creatively executed

          • 7

            Anne Sallee Miles

            July 28, 2011 7:55 am

            @veerendra – You’re right, a lot of times there can be a tunnel vision where people are focused on graceful degradation rather than innovation and pushing the limits of what is possible. That’s why even though a creatives might not have technical front-end programming skills they can be really great to brainstorm with because -they don’t know- what’s best practice and may come up with something that can have a lot of punch and is absolutely do-able. It just isn’t necessarily easy to do. Grin. Glad you enjoyed the article.

        • 8

          The comparison between Television and Browser is an inaccurate one, since the browser is more akin to the gaming platform than the television.

          If we designed websites for the latest browser that worked on any monitor that a user might have attached to their computer, that would be similar to the environment game designers are working in.

          The requirement to design for decades old browsers would be like game designers having to make Call of Duty Black Ops work on a Sega Saturn.

  3. 9

    Thanks for writing a superb article, it sure point out a lot of great examples!

  4. 11

    Hehe, very nice i enjoyed reading. keep up.

  5. 12

    Another excuse/reason why I should keep playing video games. Hahahaha

  6. 13

    Awesome!

  7. 14

    A wonderful, hard-worked article. Great job. Wish you could mention the new interface of Starcraft 2 too.

    • 15

      Anne Sallee Miles

      July 27, 2011 7:45 am

      Actually we thought about it but I had to limit my study to xbox games due to time constraints. I do like the Starcraft interface and have been looking at it recently.

  8. 16

    Great article! Thank you for the insight!

  9. 17

    >What Web Designers Can Learn From Video Games
    You will learn to strafe-jump.
    Believe me, web design is nothing similar to game or application design.
    Usability of UI elements is on the whole new level here.

    • 18

      Anne Sallee Miles

      July 28, 2011 7:59 am

      Actually I have worked on application design and am aware of the differences between web design and game/app design. You’re right. It is a much higher level of UI. And that’s why I think web designers can learn from it. thanks for your thoughts.

  10. 19

    The Skyrim UI is worth noting as an excellent example of interface design:

    • 20

      Anne Sallee Miles

      July 27, 2011 7:47 am

      absolutely. But since it hasn’t been released yet it was difficult to study. maybe in a follow-up?

  11. 21

    The sad fact is that we’re far far from ever being able to replicate vector-based interfaces (flash-like or game-engine-like) on the web. And hell, given that users change browsers only slowly, and browse on mobile devices more frequently these days, and the additional complexity that such new standards would bring, it’s likely that we’ll never get there with straight html/css/js. It’s hard enough just getting rectangular layouts to work in different browsers. Might as well just use flash.

    • 22

      Anne Sallee Miles

      July 28, 2011 8:03 am

      hm. I disagree. Doing innovative and more complex UI on the web sans Flash requires more work and testing, sure. Will it ever approach what you can do with vector? I don’t know. Possibly our current models will evolve into the next thing, isn’t that how progress occurs? I have been reading about doing 3D with jquery. I think more is possible than we can imagine. I know that if we don’t try, it certainly won’t be possible.

  12. 23

    Monster article, Anne. So much good stuff here I need a day off work to absorb it all LOL Thank you, and gratz on the SmashingGig

    • 24

      Anne Sallee Miles

      July 28, 2011 8:04 am

      Thank you! I am glad you liked it and deeply appreciate your input. :-) there is a lot to get through, lol

  13. 25

    I’ve worked on both and can attest that good UI design key to game and web success, but often video game designers don’t get the credit they deserve for thinking outside the box and innovating. Of course, just like much web design, there’s a lot of crappy UI design in games as well, however, in the last few years I see real thought going into most UI’s for games. Conversely, because of constant changes in web technologies & standards, and the various browser wars, it’s more a mish-mash of brilliant to unusable.

    • 26

      Anne Sallee Miles

      July 28, 2011 8:06 am

      I think whatever your media, there will always be a mish-mash of brilliant to unusable because of so many other things than design. There is the human factor of decisions made by committee, egos, budget constraints, etc. But realities like that can’t keep us from pushing for …awesome. lol.

  14. 27

    Interesting that you highlight Oblivion and Fallout 3 as examples. As much as I typically enjoy Bethesda’s games, Obilvion and Fallout are rather infamous as examples of poor videogame UI that keep players clicking around unnecessarily complex menus rather than, y’know, actually playing the game — to the point where players stepped in and modified the games themselves to improve on them (Google “Darnified UI” for more info).

    Not saying the underlying concepts aren’t sound, but it’s important to note that what may be fascinating and immersive in one medium (here, web design), can seem a frustrating time-waster in another.

    • 28

      Anne Sallee Miles

      July 28, 2011 8:12 am

      hm, well thanks for letting me know that. Actually, as a player I have found their menus to be really interesting, attractive and easy to deal with so I’m surprised to see that there are those who don’t like them. You know there is a big debate between immersive experience (a la Fable 3) vs complicated menus. I prefer the pip boy to the immersive room that you have to use to swap weapons in Fable 3, that to me is much more irritating. Maybe it is a matter of taste? I mostly play rpgs and I have found the Bethesda games particularly fun and their art/ui to be superior. Can you give me an example of an rpg ui that was done better? how would you change it?

      • 29

        The problems with the Fallout 3 and Oblivion UI’s stem from the same problems that often plague websites. They were both designed for consoles where the play has access to a controller and only a few buttons. When the games were ported over to the PC the UI was not changed and not optimized for a mouse and keyboard or for larger screen resolutions. It’s the same concept as a website/web app not being optimized for mobile browsers.

        I would say these games are a great example of how UI’s need to be optimized for different platforms.

        In the end games tend to have the same problems with UI that most websites do, but I’ll also say it really helps when you have a 3 year development cycle like most games as opposed to a “get it done right now” cycle like most websites.

        • 30

          Anne Sallee Miles

          August 6, 2011 8:35 am

          Justin,

          I can see how playing these games on a pc rather than a console might be frustrating and definitely not as enjoyable as playing a game optimized for the pc (was Morrowind any better? we have it but I haven’t played through it yet) However I think that seeing how these arguably successful game designers solve their UI problems can be profitable and again, would challenge you to think about (and share!) how something you found cumbersome could have been done differently or better. I think another commenter pointed out that you spend a lot more time with a game than with a website (lol…unless it is both game and site…but I will let that one go) and that point is valid. Do you think that some of these ideas are workable on a website where they might be annoying or cumbersome with a game?

          • 31

            Justin is spot-on here, keeping on the subject of games the latest Elder Scrolls game ‘Skyrim’ suffered the same ‘console-itis’ with its UI. So much so in fact that PC gamers ‘modded’ the UI to make it more usable and PC optimal – within weeks of the games release. The difference is a huge improvement to usability.

            This does translate to the web in some ways with users who might choose a ‘reader’ app over consuming your website content directly or altering styles/fonts/colours to suit – but I admit this a tenuous link as most web content ‘consumers’ don’t have the access or the inclination to change your website/app.

            Great article Anne and thanks for sharing

  15. 32

    Great article, although the script that changes the mouse cursor doesn’t work good on Mac Lion + Firefox. I had to restart my browser!

    • 33

      People of the world… please change the cursor using CSS rather than JavaScript.

      cursor: pointer;

      • 34

        Anne Sallee Miles

        July 28, 2011 8:18 am

        Steve, you’re absolutely right. CSS is the best way to deal with cursors in most situations. The example given here was something that would have to be used sparingly and for a targeted result, in specialized scenarios. It is meant to be an example of something unusual. If I was unclear on that, apologies.

    • 35

      Anne Sallee Miles

      July 28, 2011 8:16 am

      @luca sorry about that. A lot of the examples are experimental, not fully developed and meant to spark further exploration. I did play with that one on my mac with Firefox but wasn’t on the Lion OS. If I get some extra time I will work on a demo myself that is more cross-browser compatible.

  16. 36

    Andrew Spangler

    July 27, 2011 9:09 am

    Interesting article. I have always found many game UI’s underwhelming. For web designers we have to deal with browser compatibility. And that may or may not limit what we can do. For game designers they often have Platform variations particularly PC games vs. a platform (PS3, XBOX,WII). The way users interact with menus will be completely different depending on the input device they are using, not to mention the performance issues of real time games where timing is everything and losing time clicking a button can get you lolpwnd.

    In terms of hard core PC based gaming I find it interesting the way the community plays a part and develops mods that enable UI performance enhancements. Ala curse gaming. This actually puts ui into the gamers hands. Parallels in web development can be seen with the strong WordPress and Drupal communities that add great enhancements through the plugin/module architecture.

    • 37

      Anne Sallee Miles

      July 28, 2011 8:24 am

      I love these comments. You’re totally on target, there are input device and platform issues, for both sets of designers. Here’s the thing though, and I found this really interesting. I’ve been reading book called the Houdini Solution that postulates that it is our limitations that actually inspire the greatest creativity. Might be an idea worth exploring.

      Open source software has certainly opened up collaboration and innovation for web developers, but I think the game mod culture is something even bigger. It’s similar, but there is almost a brotherhood there …might just be me…lol. But that is what it seems like.

  17. 38

    Great article! You should write more!

  18. 40

    Great article. I was also reading somewhere that the creators of the new Elder Scrolls: Skyrim were inspired by the iTunes layout when creating the new menu layout.

    • 41

      Anne Sallee Miles

      July 28, 2011 8:26 am

      okay, now you guys have made me salivate to see the Skyrim UI. Anyone have good links? I have seen previews of Skyrim in Game Informer but didn’t see much in terms of UI, it was all story/art.

  19. 42

    game interfaces are terrible

    you learn what not to do from most game

  20. 43

    awesome article, keeping me inspired, thank you :D

  21. 44

    i dont play any games, so thanks for bringing out the parallels, which i otherwise would never have noticed :)

    • 45

      Anne Sallee Miles

      July 28, 2011 8:38 am

      you’re welcome. Maybe this will inspire you to fire up a game or two as well.

  22. 46

    Amazing article !

  23. 47

    Anne, this is a very enlightening perspective! Of course, I would expect nothing but that from you! Congrats on an outstanding demonstration of your thought leadership!

  24. 49

    Something that you touched on briefly is absolute key for me now in creating amazing web experiences for web applications – training ground.

    The ‘first use’ instance of an application sets up the scene and if you don’t have the ability to guide through you can quickly lose people. It’s only in recent years that game manuals have started to go the way of the dodo being replaced with contextual and in-game training and information.

    This is something that many applications could benefit from researching and constructing wonderful ways of explaining how to solve a particular puzzle or task within an application.

    Excellent and well written piece.

  25. 50

    Really good article. Other well-designed nav menu’s in games I remember playing with were, Wipeout and Colin McRae’s DIRT…

  26. 51

    Interesting but I stopped reading after “custom cursors” :p

  27. 52

    Absolutely loved it. Game design can do wonders for a website, or a business in general .

  28. 53

    Prajwal Shrestha

    July 31, 2011 2:00 am

    Absolutely right. I agree with article. I likes…

  29. 54

    What an excellent article! I’m keeping it bookmarked for the next time I need a UI solution.

  30. 55

    Great article, something i’ve been discussing a lot with other designers over the last few years particularly in an elearning environment. What I think i’ve gained the most from game interfaces is that their designers are use to working in a 3D space where as a lot of web designers are still stuck in a 2D desktop publishing mentality. Adding a level of depth to the interface gives a designer another tool for prioritising information and gives the user an ability to sort the information they’ve accessed in a much more realistic interpretation of a desktop that the interfaces used by operation systems. How many of us use browser tabs to have multiple pages open from the same website? I see that as a failed interface because it doesn’t let the user compare and contrast the information they require. Adding a 3D dimension doesn’t need to be a gimmick, done properly it’s more natural and intuitive than a 2D space. Thanks for your hard work Anne, if you’re ever on the other side of the globe i’d love to buy you a beer.

    • 56

      Anne Sallee Miles

      August 6, 2011 8:41 am

      Okibi, I think you’re onto something huge and it is something I am exploring myself as much as possible. I am working on what exactly is possible using our current tools and studying things like the Five Platonic Solids (you’ll see me quoting Vitruvius sometimes if you follow me on Twitter) I don’t think all of that is necessary but I do think a basic grasp of the mathematical concepts underlying 3D animation will make me a more powerful designer in the 2D space. Anyhow, if I am ever on the other side of the world .. I’ll take you up on that beer. Thanks for your comment, I am definitely inspired.

  31. 57

    As a designer, I also look at games as source of inspiration and ideas. not to mention i’m a gamer myself. this is a great article :D talks about real facts…another good sample is “xbox home screen” how you can integrate it as a website with css3 transition and jquery :D

    • 58

      Anne Sallee Miles

      August 6, 2011 8:44 am

      Anthony – I thought about referencing that as an example but xbox changed their Blade menu to a more traditional interface and, while I like the transitions they use still, it wasn’t as much of a pop as the blade menu was. JMHO. I have seen this type of menu in Flash but not in jquery… got any links/examples?

  32. 59

    Great Post! Do you have more references to psychology of achievement and game mechanics? Thanks!

  33. 61

    One thing that interface designers can learn from games, something that was only briefly mentioned in the article, is the fact that game UIs are designed to be far more abused repetitively that most websites. Thus, they are often tested more thoroughly by internal QA teams and are usually far more robust and refined that most websites.

    As a player of many of the games mentioned above, I can attest that when spending hours and hours flipping between screens you really get a feel for the long-term effectiveness, something you can’t get from just seeing the screenshots. Fable III, for instance, looks great on the surface, but was a terribly cumbersome and overly segmented UI once you spend a few hours with it. Fallout constricts the UI to 60% of the screen size to make room for the surrounding PipBoy art. Sure, super cool at first, frustrating after 30 hours when you’re scrolling for your 5.5mm ammo in a short inventory list full of hundreds of items

    I think my main point is that while some game UIs look really great, as the screenshots in this article show, the true standouts are the ones you use for hours and hours without even noticing them. Quick access to functions and controls without over-segmentation, pagination and “are you sure?” confirmation. YES! For the 900th time, yes, save over the existing game! I think this longevity is the real thing we can learn from game UIs, rather than surface-level novelties.

    • 62

      Anne Sallee Miles

      August 6, 2011 9:12 am

      Wow Judd, I hope you didn’t get the idea that I don’t play. I not only play but have beaten 80% of the games listed and have spent the ridiculous amount of time you mention with the menus. (Which is why I was inspired to write the article.) I got bored with the Assassin’s Creed series early and I’m not great at FPS so most of my forays into Halo are pure stress busting, but I play a lot. I not only disagree with you heartily, but I had a different experience, I guess. You mentioned screen size, I play on a huge screen so that might be part of it. I also didn’t tend to hoard ammo. LOL. I also think that the Fable II menus, which is what is pictured above, did get a little cumbersome to use sometimes, but the game is so short to play through it was bearable. However for the very reason you mentioned, the fact that people don’t spend the same amount of time with a website as they do with a game… that fact makes some UX used in games even more well-suited for websites, don’t you think? If people won’t be spending that kind of time with the interface, they won’t get annoyed by it? right?

      And while your point is well taken as far as how frustrating you have found some of these UX solutions while spending hours and hours and hours of repetitive contact with them, the point I was making was that the same solutions could be used to present information in a way that was intelligent and engaging, not to mention attractive, on a website. I do agree with you that we should not let the UX take center stage, become obtrusive or hinder usability. I hope that you understand that I was not suggesting that we do so.

  34. 63

    Amazing article!! People should always not narrow their mind to just a thing : game.. Or Website. And think in a more systemic way. So this article push people working in different fields to be creative, open-minded, etc.
    Thanks every one who put comments as it follow-up with this great article. And Anne as someone told you, you should keep going to write !
    A French visitor :)

  35. 64

    Adam Hermsdorfer

    August 13, 2011 6:42 pm

    I bet that I haven’t played video games since NBA Live ’95, but you did a great job comparing the two mediums.

  36. 65

    Михаил Илинов

    August 20, 2011 10:53 am

    As avid gamer I enjoyed this article very much. There is some really cool toughs that comes in my mind and I’ll surely gonna try. Experimenting is always the right way to evolve :).

  37. 66

    Great article Anne – indeed you are absolutely right and I have noticed the same (being a video game player); but cannot believe COD did not get a mention.

  38. 67

    @Dave – Sorry Dave. I actually tried to include COD but my pertinent screenshots weren’t high quality enough and proved elusive to capture (despite me begging for help on Twitter.) Forgiven?

  39. 68

    Chathura Asanga Kulasinghe

    March 1, 2012 4:43 am

    How did I miss this worthy article when it was posted. :-)

  40. 69

    Absolutely inspiring article. I too have found many inspiring elements in games that push me as a web developer. One of my favorite examples is the Mass Effect 2 loading screens when traversing between levels of the Normandy. Great use of (long) load times.

    Cheers!

  41. 70

    OMG you give the new direction of web designing that we can learn from video games. My mind never get on that side that video games is also play the vital role.

↑ Back to top