User interface design in video games

Written in Mar 10 by Anthony Stonehouse Tags: , , , , , , , ,

User interface design in games differs from other UI design because it involves an additional element — fiction. The fiction involves an avatar of the actual user, or in this case, player. The player becomes an invisible, but key element to the story, much like a narrator in a novel or film.

This fiction can either be linked directly to the UI, partly, or not at all. There seems to be a growing debate with which is more immersive for the player. One side of the debate is that UI elements that sit within the game world, and therefore ‘viewable’ by both the player and avatar, are the more immersive and provide a more seem-less experience. However these elements are often clunky and inherit many restrictions. They need to strictly adhere to to the fictional narrative and adopt the visual design of the game’s art direction. They also sit within the geometry of the game’s perspective, often rendered on a 3D plane that can reduce their legibility.

Erik Fagerholt and Magnus Lorentzon explore these theories in their thesis for Chalmers University of Technology titled: Beyond the HUD — User Interfaces for Increased Player Immersion in FPS Games. They introduce the term diegetic interfaces for UI elements that exist within the game world that the player and avatar can interact with through visual, audible or haptic means.

I believe well executed diegetic UI elements do benefit the player by enhancing their experience of the narrative. However, they are more difficult to implement because the inherit restrictions.

Metro 2033 uses a complete diegetic UI with no HUD elements to help to support the game’s narrative. It does seem to run the risk of frustrating the player though slow response times but perhaps this forms part of the game mechanic, I have yet to play the game.

Metro 2033’s diegetic interface

A well executed example that I am familiar with, and one that is often used, is the act of interacting with the phone in Grand Theft Auto 4. It mimics the real world interaction — you hear the ringing and there is a delay before you answer it, the act of answering itself is often an awkward process in reality. The game’s fiction adopts real world fiction so perhaps it makes diegetic elements easier to integrate.

Grand Theft Auto IV mobile phone interface element

UI elements can also exist in the game world and not be viewable by the player’s avatar, therefor avoiding the clunkiness of having to interact with the avatar (but also avoiding jumping out to menus) and the need to strictly conform to the game world’s art direction. They still need to follow the rules of the game’s fiction so they help immerse the player and provide a seamless experience.

These elements can either exist within the geometry of the word, or on the camera/screen for the player. Fagerholt and Lorentzon use the term Spatial to define elements of the UI that sit in the geometry and Meta to define elements that exist on the camera.

Fable 2’s dotted line that guides you to locations marked on your map is an example of a Spatial element, it exists in the game world but the avatar doesn’t interact with it. It ensures a more seamless experience, avoiding jumping out to a map screen as often.

Fable 2’s glowing trail

Splinter Cell Convictions also adopts some nice Spatial elements in the form of projections that illustrate objectives within the game world. Their scale does seem to challenge the fiction slightly more than other examples.

Splinter Cell Conviction’s objectives projected in the game world

A common example of a Meta UI element is blood the splatters on the screen as a form of health bar, as in the recently launched Modern Warfare 2.

Lastly there are the traditional non-diegetic UI elements. They have the freedom to be removed completely from the game’s fiction and geometry and can adopt their own visual treatment, though often influenced by the game’s art direction.

I think these elements are best used when the diegetic, meta and spatial forms provide restrictions that break the seamlessness, consistency or legibly of the UI element. World of Warcraft has a pure non-diegetic UI, that adds nothing to the fiction. It does allow the user to completely customise though, hopefully ensuring a familiar experience.

Here are some visual representations of these concepts that have been adapted from Fagerholt and Lorentzon’s thesis.

For further reading; Marcus Andrews from DICE examines recent games using these theories from Fagerholt and Lorentzon in this article posted on Gamasutra. Michael Grattan, a senior at the University of Souther California writes a response to the article on his blog.

New physical interaction methods make their way to the PS3 and 360 this year, called Move and Natal respectively. These technologies promise to challenge current best practice in game UI design and generate even more innovation in the area. As a designer currently working in web design I’m almost jealous of the levels of interaction plus the addition of audio and haptic elements available in game UI — while I’m still refined to users with an outdated keyboard and mouse. Web does offer other challenges and more variety in content delivery though.

4 Comments »

  1. […] the wanderlust.net « User interface design in video games […]

  2. Robert Kabwe says:

    Great roundup and thanks for the links.

    From your posts it sounds like you might be interested in exploring game design a bit further. No reason you can’t work with game designers on their UI or work on your own game while you do web design. Or push the boundaries of web design using javascript/html5/video/sound etc. - as browsers and JS engines become more powerful the line between game canvas and web canvas will blur.

  3. anthony says:

    Thanks for the comment Robert, you have some interesting posts on your site I’m currently reading my way through.. Yes, it would be interesting to work on the UI of a game — I’m interested in all forms of interaction design and think as the lines between the mediums blur I may even get a chance at some point in the future! I don’t think I have any skills in actual game (mechanic) design so can’t see myself creating anything on my own though.

  4. […] key area of the problem lies in how we’re presented and interact with complex information diegetically, that is, interfaces that actually exist within the game world itself.” […]

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

May 10

Creative art of presentations

Presentations are used to communicate, inspire or demonstrate a topic, perspective or concept. They can be one of the most effective and inspirational mediums for delivery.

Mar 10

Games as multi-genre digital content for the web & mobile

After attending the Games Based Learning 2010 conference in London I’ve come away with a realisation of what the medium is capable of and present the case that web designers should be informed and ready to implement games as another form of digital content.

Mar 10

User interface design in video games

Games are introducing innovative UI elements that exist within the game world. After reading through a Thesis and a few articles on game interface design I examine the different types of UI elements, separating them in to categories and providing examples of their implementation.

Mar 10

Sony PS3 vs Microsoft XBox 360

Having finally been able to justify purchasing a Playstation 3 I thought I’d give a quick comparison of it against my trusty Xbox 360.

Dec 09

Designers + consumerism

The evolution of graphic design over the past 100 years from purely aesthetics to meeting functional, cultural, social and production requirements has helped to develop the change and growth of consumerism.

Oct 09

Adopting radical design

Modern vs traditional house

Radical new approaches to design are often controversial, especially if they challenge a ‘traditional’ model — where many are instantly dismissed by their potential audience as being ugly. I recently experienced this while looking at purchasing a new scooter. It’s an interesting process and made me wonder.. are we missing out on mass improvements within […]

Sep 09

The most important thing I learned about design

The medium is the message

One of the primary theories within design that became clearer to me as I progressed through my career was that visual rhetoric is personal to the reader, and is based on their previous experiences — with the medium, their culture, always a combination of the two and more than often includes other influences too. This […]

Aug 09

An artist’s visions of hell

Hell has always be a source of fascination — it exists in most cultures and religions. Many artists, designers and writers take inspiration from Dante’s Divine Comedy when referencing hell in their work — in fact it’s surprising how much influence the Italian poem has had on modern culture. I’ve been exploring visual executions of […]

Jul 09

The Age of Conan

Age of Conan

Funcom is currently giving ex-players of Age of Conan the chance to come back and try the game for 2 weeks for free. If you sign up for a subscription at the same time they’ll even give you 20% off and through in some nice in-game items. Being particularly interested in MMO games from an interactive […]

Mar 09

Wearable projected gestural interfaces

Pranav Mistry: Unveiling the Sixth Sense

MIT’s media lab have unveiled a series of short videos demonstrating possible scenarios and advantages of their sixth sense interface — a wearable projected gestural interface. The gestures are based on a multi-touch screen interface but as the interface is projected there is no need for a screen, so mobility is easy and costs are […]

Mar 09

Glitchy fashionable effects

Chairlift

An interesting observation came up a number of years ago in one of my typography tutorials at the National Institute of Design while I was presenting some work. The T-shirt I was wearing featured deteriorated type on the sleeve. The print was worn, faded and some of the letters were even beginning to fall off, […]

Feb 09

Future of interaction

Warp 920AV

I see games as one form of media that is advancing trends in interaction design. Two recent trends which I’ve begun to explore are Augmented Reality and free Massively Multiplayer Online (MMO) games. Augmented reality games overlay the real world with a virtual world, the two combine to create a gaming space, though this concept requires […]