The Front Door

by Steve Bowler on November 29, 2007

in user interface

User Interface. It’s the bastard child of the gaming industry. Often cast aside and forgotten about ’till the last minute, typically an afterthought, it is hardly ever given its due when it comes to game design discussion.

I’ve been giving UI (user interface, specifically the “menu” design) a lot of thought lately, as I’m being tasked with more and more UI definition tasks on our new game title, and while I’m working towards finding what the functional aspects need to be to make using the interface intuitive to use, I’m constantly thinking about the aesthetics of the design as well. Typically, I don’t think design necessarily needs to be involved in the aesthetics side of menus as far as designing their usability, but I can’t help thinking that the look and feel and sound of them is just as important as how they look.

Art-wise, I think they boil down into two categories:

  • ¬†UI that accentuates, compliments, or enhances the look, theme, and feel of your game. Successful UIs that come to mind are Twisted Metal: Black, Bioshock, Metroid: Prime.
    • UI that is minimalist. It is what a plaque is to a museum art piece. It is there to merely define the function while being as unobtrusive as possible so you can enjoy the art of the game. Valve does this exceptionally well. Crysis does a pretty good job of this as well.

    When UI Fails
    I’ve often said that your UI is your Front Door to your house of a game. It’s the very first thing people see when they pop in your disk/demo, and despite what people think, first impressions are everything. A lot of designers think they don’t need to worry about it, but who wants to walk inside of a double-wide trailer whose aluminum siding is falling off of for the promise of untold riches inside?

    Despite my glowing praise of the gameplay in the previous post, Street Fighter titles typically fall into this department. Their menu designs are neither compelling nor elegantly simple. They’re just simple, and ugly. They always leave a bad taste in my mouth and I consistently think “why did they leave in this temp programmer art?” They actually get in the way of my enjoyment of the game, when I’m forced to navigate their clunky menus.

    Another series of games that does a horrible job at UI (in general) are sports titles. More often than not they hope that carbon fiber textures and slick shiny menu items will distract you from the fact that the UI is a hopeless mess of higherarchies that are impossible to navigate intelligently. They are neither minimalist nor enhancing the gameplay. They are merely something in the way which must be bypassed in order to enjoy the game. Why would you want your menu navigation to be a burden?

    Getting UI Right

    UI should be effortless for the user. It needs to not only be easy to use, but it should be engaging. Valve manages this with audio feedback cues that are persistent throughout all of their titles. With the new Source engine, all of the UI sfx are consistent. Mousing over a valid option yeilds a neutral sound effect. Clicking on a non valid option gets you a negative “glurp.” Clicking on a valid option forces an affirmative sound cue. A blind person could probably hear you navigate a Valve menu and know if you were moving up or down in their higherarchy.

    In addition to being intuitive, they really need to be enjoyable and understandable. When you get in a car, you immediately understand the dashboard (a similar comparison can be made to steering wheels/gamepads, but that’s for a later post). I think we’re beginning to stumble upon these similar values in video game menus/HUDs, but we’re a ways off yet. I’m still trying to find a title where the UI/menu system is a real treat to navigate. I’ve seen some good ones, but I’m open to recommendations. Anyone have any suggestions?

    Apologies for such a disjointed post. Been working on host crap for the past two nights and this post is dry and long enough as it is.

    Comments on this entry are closed.

    Previous post:

    Next post: