Gamasutra: The Art & Business of Making Gamesspacer
arrowPress Releases
July 23, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Observations on User Interface Design
by Eric Schwarz on 09/26/11 09:36:00 am   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

The user interface is something that doesn't get nearly enough attention.  Much like good sound design, when a user interface is done well, the player doesn't notice it - and when it's done poorly, it can be aggravating and damaging to the play experience, to the point of turning some players away from a game.  Although we tend to talk about good and bad interface considerations, it's rare that I really see many people go into precise detail about just what makes a good interface.  In this article, I'd like to take the time to go over what I consider to be the key tenets of good user interface design - while I don't want to suggest that this is the only approach to take, in general, just about every game with a good interface I've seen has adhered to most or all of these points, and ignoring them usually leads to poor results in the end.

Function Over Form

Although it's nice to have a good-looking interface, the absolute worst thing that a designer can do is build an interface that ends up encroaching on the functionality it's supposed to be providing the player.  While this problem can manifest in some very obvious ways from time to time, it's worth considering the small ways in which placing visuals over functionality can hurt a game.

Wait... you mean all those dials and buttons don't do anything?

 Take, for example, Fallout 3 - while the Pip-boy 3000 gives the game a significant dose of personality, helping to include what is usually a meta-game element within the game world, the Pip-boy is also generally poorly laid out precisely as a result of the designers prioritizing the look and feel of the interface over basic usability.  Over a third of the entire game screen display is consumed by the Pip-boy, and many menus devote over half of the remaining screen space to large icons rather than providing more information to players.  Combine this all with menus nested within other menus (and, in New Vegas, menus that toggle between different functions) and it's very clear that the desire to include the Pip-boy was so strong that it ended up sabotaging and hiding some of the game's most fundamental information.  It's a classic case of prioritizing "cool stuff" over crucial information and usability, and it could have been completely avoided with a little forethought.

Compare the Pip-boy above to Diablo's health and mana orbs - they're distinct, and aesthetically interesting, even defining for the Diablo franchise, but they aren't obtrusive and remain easy to read and understand.  Even the original Fallout, age and different standards aside, was more successful interface-wise than Fallout 3.  All the technology and shaders thrown onto a menu can't change the fact that it's still cumbersome to use.

Interface is a Frame

Where many games treat the interface as just that, a tool, Fallout and Diablo treated it as more: a portal into the game which serves to reinforce the fiction, the tone and mood.  A good comparison to draw is a picture frame - while a picture in itself can be beautiful, a good (or bad) frame will completely change one's perception of that picture, regardless of just how lovely it is on its own.  This doesn't have to be completely literal: while the two games above do actually form a sort of frame around the game, and others, such as Ultima: Underworld literally treated the perspective view as only a single part of the gameplay experience, others, such as Half-Life, achieved the same effect by grounding the heads-up display in the narrative.  The HEV Suit is one of the most iconic elements of Half-Life, and grounds us in the game's world... despite the fact that we barely even see it.

Not only is Diablo's interface functional, it also helps define the game world.

 While I often see it said that heads-up displays and other aspects of game interfaces can draw players out of the game, remind them of the barrier between them and the virtual world, I've always felt this is a poor argument that, if anything, is refuted by play experience.  Contrary to this opinion, I find that most often, a good interface will actually improve immersion, rather than detract from it, and by attaching certain game functions to in-universe objects, the player can feel as if he or she is operating an actual mechanism within that game world, rather than simply pressing buttons on a gamepad.  Granted, this can be taken too far, as seen in Fallout 3, but when the balance between aesthetics and usability is struck, the user interface goes from being just a tool, to a legitimate and defining character within the game world itself.

Don't Hide Information

This is another tenet that I feel doesn't see much discussion, at least with regards to interface.  Put simply, a designer should anticipate the information the player will need during gameplay, and put the most critical of it on-screen at all times.  For a shooter, this is pretty easy to figure out - health, ammunition, armour, and so on are all safe bets, and unless removing these common HUD elements is part of the game's design, there's rarely a reason to consider much more as far as shooters go. 

But what of more complex games, or those which require the player to juggle more information at once?  Too often, I see games which simply model their interfaces after first-person shooters, without much of an attempt to actually consider just what things the player might want to see during gameplay.  Instead, information that the player might well want (or need) at a glance ends up buried in menus and sub-menus, meaning that not only is the player inconvenienced, but he or she may completely ignore that information entirely.  To be blunt, if this happens, then the user interface has failed: its one goal is to give the player the information necessary to gameplay.

250,00 gold and still unhappy?  What must I do?!

 Although otherwise a fantastic game, the 2004 remake of Sid Meier's Pirates! has one annoying flaw of this nature - though several critical aspects of gameplay are linked to the game's timer, often there is no precise information given on how much time the player might have to accomplish a task.  The one that stands out the most for me is crew morale: although the interface displays a general indication of the crew's mood, and the player is able to respond to the crew's needs based on this, there's never a clear indication of just how much time the player has left to salvage his or her situation, or how much gold the player needs to find to improve their spirits.  Where sometimes I'd be able to survive for months on end with a near-mutinous crew, other times my morale would plummet radically over the course of a single day, and suffice is to say, it really is no fun when you feel you have little control or understanding of why something in a game.

Give Me Details!

On a related note, it's a fairly common trend in gaming nowadays for the information available to players to be minimized or abstracted.  Although generally considered an attempt to streamline gameplay, more often than not, this sort of approach ends up being confusing and detrimental to gameplay.  Put simply, if there's no reason as to why information shouldn't be provided to the player, then there is no reason why that information should be withheld... and if you have the opportunity to be precise rather than vague, then precision should almost always win out.

Without a standard for what those bars
indicate, these "stats" aren't particularly reliable.

A great example of this can be seen in Call of Duty: Modern Warfare 2.  Although it features a deep and engaging multiplayer component, with strong RPG leanings in its equipment progression, perks and so on, the game hesitates to provide players with some of the precise information that they might want when playing the game.  This ranges from the simple (how much damage, exactly, does a weapon do?), to a bit more crucial (what is the radius of a Frag Grenade versus C4?).  Although the game does provide some statistics for players to review, interestingly, these aren't expressed as numbers, but rather, as simple bars... while this makes for a more approachable menu (no need to include a character sheet in your shooter), the data provided is vague at best and, according to fan feedback and testing, occasionally quite inaccurate as well.  Yes, sometimes you want to just give the player the basics... but at the same time, there's no reason why players shouldn't be given the details either, because you can bet that there are plenty out there who want those details, no matter what the game is.

Minimize Required Input

Along the same lines, it's worth considering just how the player is going to get to that information.  A mouse click?  A hotkey?  A nested list menu?  A drop-down scroll box?  A check box?  A grid navigated with the thumbsticks?  Pages flipped through with shoulder buttons?  Game consoles especially have limited input functionality, and so additional prioritizing is necessary for console games, but regardless of the platform, all information should be quick and easy to get to, without fuss.  Although I hesitate to provide a golden rule, if the player needs to perform more than two or three commands to find the information he or she is looking for, then chances are, it's harder to get to than it should be, and the more layers you have, the less likely the player is to ever refer to that information.

Civilization V gives you the information you
need, but rarely in a way that's convenient.

 Of course, this can be easier said than done.  Sometimes, user interface can become necessarily cluttered, complex, or hidden - this is especially common in strategy games, where the player needs access to huge amounts of information, but only on occasion.  There's nothing wrong with nesting information that you know players won't always need, but never put it deeper than it absolutely needs to be.  Civilization V, for instance, despite being an excellent game, has major problems with this.  While information on the resources different players have to trade can be easily seen in the diplomacy menu, for instance, there's no way to know if you have anything that player wants until you go into a completely separate series of menus via the trade screen.  Additionally, the nested nature of many menus in the game and the use of large fonts and icons requires more scrolling than what would otherwise be necessary.  While its predecessor's interface was hardly perfect, at the very least it was organized and grouped information together where it would logically be wanted - compared to Civ IV, Civ V can often require twice as many mouse clicks just to perform the same tasks.

Keep Controls Consistent

Have you ever played a game where pressing a certain button or hitting a certain key just didn't do what you expected?  Although there's something to be said for challenging genre conventions, usually, deviating from standard key and controller layouts is a poor idea which only artificially increases the learning curve of a game.  Unless you're genuinely able to improve on the interface, there should be absolutely no reason why your new game, Medal of Duty, maps the firing of weapons to the A button, reloading to the right trigger, crouching to the D-pad, throwing grenades to the analogue stick, and so forth.  On the PC, this need only grows greater - with more buttons than ever available, and often necessary, it can be confusing for the player to have to re-learn all their familiar hotkeys again just for one game.  Unless you can genuinely provide a good reason to not map J to the journal in your RPG, or the mouse wheel to switching weapons in your first-person shooter, then simply don't do it.

That said, that's no excuse to deny the player the option to customize and remap keys - even those hotkeys you tried so hard to make consistent.  There is no technical reason why players should not be able to do so, especially on the PC, as unlike gamepads, mice and keyboards have far more equally valid button layout.  Even so, as a basic usability feature, there is really no excuse not to allow players the option, even on consoles... that is, unless you don't mind telling disabled customers that they can't play your game because of your own oversight.

Convenience, Schmenience

Ah, a new item!  Wonderful!  I was getting sick and tired of my old Bodkin of the Weakling anyway, but... wait, what's this?  The Scepter of Ill Tidings?  Well, just how am I supposed to know which one's better?  I mean, maybe one's good for bashing, and the other is good for stabbing, but how do I know how, why, and where?  What about the damage they deal?  Which one is better for me?  What about my character class?  Ah, screw it, I'll just sell it.

Even something as simple as comparing items
can dramatically improve the user experience.

 Alright, perhaps the scenario above is a bit of an exaggeration, but it's common to play a game and end up with a situation where you might want to perform a task, such as comparing two weapons, and the game does not make it particularly easy to do so.  Whether that's something as simple as not being able to see the stats of both weapons at the same time, or not having a clear indication of which one is useful for what task, or what their requirements are, or how much money is valued at, there are times where the user interface, while not exactly failing, can still easily let the player down.  As a designer, it's important not just to give the player what he or she needs, but anticipate what he or she might actually want given the nature of the gameplay.  The interface is something that exists to service gameplay, and anything you can do to make that gameplay experience smoother and more manageable is a worthy addition.

Maps

Videogame maps do not have a very good reputation.  Sometimes, they take the "form over function" route, and end up looking cool without being particularly detailed or useful (The Witcher 2 has this problem from time to time, especially in outdoor areas).  Other times, developers end up trying to incorporate some sort of 3D gimmick, resulting in a map that has the rare distinction of being both hard to read and hard to manipulate (for a long time the Splinter Cell games were haunted by this).  And sometimes, well, there's just no map at all, or it's stuffed into a tiny corner somewhere.  Suffice is to say, if you're going to include maps in your game, they had better be easy to read, access and understand - if they aren't, then you've wasted your time.

Where am I?  Why, let me just consult my handy... er... oh.

 Of course, creating maps is an additional investment, requiring new artwork, programming, level design work, etc.  At the same time, the incredible improvement to a game's usability that a good map can provide cannot be overstated.  Even if you feel your game is simple, or small, or easy to understand, it doesn't matter: put a map in it, unless, of course, the player's perspective is such that the playing field might as well be a map to begin with (Supreme Commander and its strategic camera zoom feature).  Chances are all players are going to use the map at one point or another, and there are plenty more who will use it to plan their approaches, devise more efficient strategies and plans, compare play-style with others.  Maps are also extremely useful for guiding the player, both for in-game purposes and for secondary game information sources like walkthroughs, as well.  No matter how much you might insist it's not necessary - trust me, it is.

Conclusion

Although this list is by no means completely exhaustive, I feel that these are the absolute most key points which an interface needs to hit in order for it to be considered good.  Thankfully, most modern games have great interfaces, and some of the most basics problems are, in many cases, things of the past.  That said, there are still many interface problems that continue to be prominent in the world of gaming, whether that's the withholding of important information from the player for no good reason, poorly-made and useless in-game maps, or the prioritizing of aesthetics over usability.  As the metadata layer between the player and the game, the user interface is one of the most important things to get right... and one of the worst you can possibly mess up.  Hopefully, this list has provided some food for thought on how to avoid falling into what are still in many cases common issues.  Thanks for reading!


Related Jobs

InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[07.23.14]

Quest Writer (m/f) for The West
2K
2K — Novato, California, United States
[07.22.14]

Level Architect
Respawn Entertainment
Respawn Entertainment — San Fernando Valley, California, United States
[07.22.14]

Senior Systems Designer
Big Fish Games
Big Fish Games — Seattle, Washington, United States
[07.22.14]

Game Engineer






Comments


Michael Frauenhofer
profile image
Very well-thought-out article! Great read.

Luis Guimaraes
profile image
Ah, that Borderlands picture could also be the exemple for the topic above it: Keep Controls Consistent.

Timo Naskali
profile image
Good article! But I'd like to add here some thoughts about how I tend to feel about HUD elements for contrast.



Interface is Someone's Head Blocking Your View at the Movie Theater:



Although I agree that a developer should include HUD elements that a player needs to enjoy a game, I think that they should also put effort in trying to only show them when they're needed. There's usually no need to show the PC's health, ammo and armor outside of combat situations, yet these elements usually obscure the player's view of the world even during exploration. Although the interface as frame thought is interesting, the fact is that usually the HUD doesn't surround the game view but is sitting on top of it, obscuring it - or at least that's how it tends to feel to me.

Although on paper it doesn't sound like a small hp meter here, a mini-map there and an ammo meter there would hurt immersion that badly, in practice I've found my enjoyment of many games gets notably increased when I disable the HUD.



Hide Information:



I think more games should at the very least offer the option for the player to toggle the visibility of the HUD on/off. If it can be done autonomously and intelligently by the game (Uncharted is a good example) all the better.



Don't Give Me Too Many Details!



I think that many games actually tend to give the player too much information and end up hurting the game as a result. While the compass arrow in Oblivion made it faster and easier to find your next objective, I think it also made navigation boring compared to Morrowind.

A friend of mine told me that he spent probably more time looking at the mini-map in Dragon Age 2 than the actual game world, because it was just easier to navigate it that way.



I guess what I'm trying to say is that HUD design can be a balancing act between immersion and usability, utility and challenge, mystery and transparency etc.



Anyways, thanks for writing these articles, I tend to enjoy them a lot!

Eric Schwarz
profile image
Good points. I have to second that it's always best to allow UI elements to toggle on and off as necessary, or, ideally, to give the player control over them. If I could turn Oblivion's quest compass off (without mods, of course) then I definitely would, although to be honest I don't see a real downside of playing the game using the mini-map... it's better that the possibility is there for the player rather than not.



However, this also highlights the issue of when the UI becomes a crutch for poor design - many quests in Oblivion, for instance, are designed around the quest compass being ever-present, such as "kill six unique trolls in the wilderness", and without smart design to accompany that goal (troll camps to look for, scripted sequences to alert the player to their presence, dialogue with the locals to find their locations, etc.), the play experience can actually be harmed were the player to turn those assists off.



Similarly, in Dragon Age 2 (and other titles like Deus Ex: Human Revolution), UI elements like "important NPC" markers and loot highlights tend to exist because environments are actually so cluttered that it's nearly impossible to figure out what's interactive and what isn't without big, glowing arrows pointing you in the right directions. Compare to the original Deus Ex, or perhaps even Neverwinter Nights, where usually if you saw an object, it was interactive. Crate? You can lift it. Gun? You can use it. Potted plant? You can throw it at someone. Chest? You can loot it. In the quest to capture more and more detail, developers have actually made games less interactive and intuitive.



Thanks for the feedback, and I'm glad you enjoyed the article!

Will Buck
profile image
Lots of good points made in these comments here!



To the compass arrow point, I echo that sentiment having just played through Assassin's Creed 2. I navigated to things almost purely on the minimap and the navigation icons it provided. In a game that has such gorgeous environments, it kinda stinks that they were ultimately so same-y that it necessitated those markers. Eventually, then, when looking for the "symbols", I had to use the internet to figure out where landmarks were later on, when if things were differentiated just a little bit, I might have done enough exploring in the regular gameplay to know where those landmarks were. Alternatively, if everything else is marked on the maps, why not the landmarks also?



One of my favorite examples of excellent UI-design is Metroid Prime. The overlay was a perfect frame for the game, thematically and aesthetically fit wonderfully, the map was informative without being a heavy crutch and exploration was still encouraged, information well presented.



Also Chronicles of Riddick Butcher Bay is a testament to minimalism with its overlay and how it didn't display unless it was pertinent, although I do echo that there needs to be a way to toggle it on manually; designers and programmers can't write the definitive guide to when a player will and won't want the info.

Eric Schwarz
profile image
Open world games are an interesting case, and I think in general can afford to be an exception. Creating unique and hand-crafted content for a massive game world is next to impossible - most developers work in broad strokes and fill in details in key locations in order to save time and resources, even going as far as to use terrain generators rather than sculpting it themselves. Unless you have a budget like Rockstar's, chances are you simply aren't realistically going to get a world with as many unique locations and set-pieces to help with the player's navigation... and sometimes, setting can constrain your opportunity as well, as in Assassin's Creed.



It's an interesting paradox, really: a huge game world to explore, but all the "important" parts are marked by few and far between icons, the rest effectively filler. Makes one wonder whether the supposed advantages of such a design are really worth the sacrifices. I have to wonder why we don't see more randomly- and procedurally-generated environments considering that so few open world games are really able to provide strong narrative structure and meaning that truly does take advantage of the gameplay mechanics. If you're going to give players a sandbox, it makes sense to run with it and take it as far as you can, rather than spread a smaller game out inside it.

Sean Hayden
profile image
Excellent article! This is vital info that more game developers need to keep in mind. There's no excuse for poor UI or controls, and even less excuse for UI/controls that cannot be customized. I can't even imagine playing games like Oblivion or Neverwinter Nights 2 without any mods!

Mathieu MarquisBolduc
profile image
Back in my computer science days, Interface Design is one of the class I hated the most, but with retrospective, it was one of the most useful. I highly recommend every gameplay, UI programmer and every designer to study it. Except when you learn to make good interface you'll see the faults in every UI you use... Playing Monster Hunter Tri right now and the UI is close to criminal.

Kelly Kleider
profile image
Great topic! I've been thinking a lot about usability (mostly to do with tools, not games) and interface functionality, lately. Your first example compares pipboy (interactive) with health/mana (stat display) which is like a radio to instrument panel comparison. Your critique of the pipboy is accurate, though.



I think something that is often overlooked is purpose...wtf is the thing for? Function...it does THIS, but wtf is it for? If it's a stat, it should be handled differently than something you interact with. As I'm typing this comment, I'm thinking this is so vague and broad...you should focus on a genre/platform and go from there, if I had time I would but it's easier to goad you into doing it and then rant in your comments section...hehe



Good talk...

Gregory Faulkner
profile image
@Eric Schwarz, You bring up a lot of good points between the different interfaces, however I did have one problem with your article. In your first example you mention the Fallout 3 PIP-Boy, you say that it is a bad interface because it takes up a lot of the screen as opposed to the Diablo one where you can still see the screen while seeing the interface, the main problem here is that the PIP-Boy is a pause menu. This means that when this window is up there is nothing else to do other than use this window. Yes there is a lot of extra stuff there to make it look pretty but those buttons do infact show that you are navigating the menus and which menus are next to the one that you are currently looking at. Even the gauge in the top left is useful as it shows the current amount of radiation in your body. The higher the worse if it gets into the red then you start feeling the ill-effects of radiation sickness. If you were to compare the games in-game menus this game uses a heads up display. This link is a picture I found(http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2009
/07/fallout3_screenshot.png) of the in-game HUD I do not own the picture at all but thought it might help aide incase you have never played the Fallout games. This would be better to use to compare to the Diablo picture you used, unless you wanted to discuss Diablo's start menus versus Fallout's start menus.


none
 
Comment: