Game Interface Design

David Ethan Kennerly

Play begins and ends at the interface


Here are articles and reference material on user interface design for videogames. The reference material is directed primarily at students in the course Game Interface Design at ITT Tech.

Reference

Articles


Articles

These are various articles on user interfaces in videogames. They are not required reading for the Game Interface Design course at ITT Tech.

Is Space Deep?

    Are text games different from graphical games? Is the difference deep? Here's three differences, that if not deep, must be broad.

    • Spatial reasoning.
    • Construction.
    • Navigation.

    The textual medium cannot test a player's spatial reasoning skills. Puzzle Pirates, BnB, and Gunbound cannot be done in text. Neither can archery in games that employ skill, such as Asheron's Call. I wonder: Could PlanetSide or Endless Ages be played with a text client? It certainly wouldn't be a first person shooter game. If City of Heroes had made it a priority, it could have (and still could) design spatial reasoning into its gameplay in many ways.

    Is space deep? That is spatial reasoning a deep difference between text and graphics? The difference is older than the mammalian brain. Human brains have evolved to enjoy solving spatial reasoning problems, including inverse kinematics, such as: How do I hit that dinner with this spear? According to one of Matt Ridley's sources in The Origins of Virtue, human brains, especially males, contain neural architecture to solve these kinds of problems.

    It might be why boys like first person shooters, and why physics among other sciences were invented. Would Galileo have proven heliocentrism through a textual looking glass? Of course it is mathematically possible and text is where he proposed the simplified cosmology, but would he have been so fascinated as to try without vision? Some computer scientists work hard to discover data visualization techniques, to transform text into images, just so that they may become more entertaining to look at and so engage the brain's search for patterns. Such pattern searching is a simple form of spatial reasoning. The degree of spatial reasoning is not just a matter of interface, but a matter of genre. Massive multiplayer games, compared to other non-MMP games, seem nascent in regard to design of spatial reasoning challenges.

    Construction differs. Second Life proves this by example: it is built on players building in three dimensions. It's builder mode is a limited 3D modeling suite. In the most abstract sense text is built on players building in one dimension: One character after another. Pendantically, one dimension can encode any number of dimensions, but that's not how the eyes see it or the ears hear it. While I've used text interfaces to design graphical games, and of course scripting is inherently more efficient to program as text, such things as level editors are inherently more efficient to review as graphics.

    Navigation also differs. As an example, City of Heroes has a marker on the compass that locates the next important location, which rotates as the player rotates the avatar. Spider-man 2 has a marker at the edge of the screen in its interface that performs a similar function. This would not be possible in text. As another example, text can collapse space. Teleportation does this in graphic games, but it always jars the player, removing her from the fiction for the duration of the teleport. But in text it's expected to move through the boring areas to reach a decision vertex.

    This is not to imply that graphics are superior to text, especially when the levels are designed poorly. I would rather have text get me to the interesting parts of the game, than trudge across a noninteractive landscape. Similar cases can be illustrated for the other two aspects. Text can exercise conceptual reasoning, for which graphics are too concrete. And of course, only text can exercise reading and writing skills. True graphics do include text, but when all you have is text, then all you can do is read or write; thus it is guaranteed these skills are being employed (3v3n 1f t3rr1bl33).

    [top]


Level of Play






    TextHypertextText gameTile gameVector game
    Directed pathDirected graphUndirected graphGrid graphVector space

    One could order the systems along an axis: a text game has more representation of space than hypertext does, but a graphical game (usually) has a more consistent representation of space than a text game does. I'm not sure that a text game sufficiently represents physical space, unless any undirected graph suffices.

    An essential trait of level design is spatial composition. In respect to level design, text games are much closer to hypertext than graphical games are. The rooms are connected sort of like space, but it's a graph without robust consideration of travel, collision, or volume.

    In text, many spatial incongruities, architectural eyesores, screen design, and pacing issues due to distances go unimagined. In text the important areas can be given their due without regard to the uninteresting space inbetween. In graphics, it's better to compress or expand the density of interactive objects in order to manage the information on screen at any given time.

    When I've adapted levels in text games to graphical games (with a representation of space), often times the level has to be redesigned from scratch. Hallways need shrinking or expanding. Density of interaction on screen is fixed by the camera, which is constrained by the architecture and terrain. Redesigning has led me to conclude that text does not sufficiently represent space.

    Still, there should be an organized and navigable place, and that space suffices. But is a representation of physical space necessary for a text game? At least for text, the space is not necessarily analogous to physical space. The text game is isomorphic to an undirected graph whose vertices may possess varying degrees of connectivity. These edges may result in an inconsistent spatial arrangement. A discrete representation of space, as a graph, would likely have a consistent arrangement of edges between its vertices, such as in a system of coordinates.

    So, in the level design, the representation of space depends on the interface. The level itself is an integral part of an immersive game. When a player must travel through a level to complete an objective, then the functionality of the game may be modeled by the paths through the level. In this sense, the degree to which physical space is emulated impacts the shape of the user's possible experiences.

    [top]


Occam's Interface

    In science, a principle of parsimony is employed, which slashes away complex theories or models in favor of simpler ones. This metaphorical slashing is called Occam's (or Ockham's) razor. In videogames, we can observe a gradual move towards increased complexity in the development, for less complexity in the consumption.

    Although gaming culture is becoming more sophisticated, there's a difference between game interface complexity and game culture sophistication.

    A few examples of games supporting this trend are Diablo, Virtua Tennis, Crazy Taxi, Tony Hawk Pro Skater, BnB, Legend of Zelda: The Wind Waker, Return of the King, Prince of Persia: The Sands of Time, and ... City of Heroes. Each of these games is simplifying the interface of its genre while building on the expert players' literacy of the genre.

    I believe the interface simplification and literacy will be the telltale sign of gaming evolution, as it has been with cinema, television, especially advertising, computers, cell phones, and the Internet. As new generations become more and more immersed at earlier and earlier ages, it becomes a part of the culture. Thus, the medium evolves, not for complexity, but for literacy.

    As new generations have come to be familiar with the tropes of movies, the tropes have become more subtle, faster, and simpler. Although production complexity of cinema has increased, consumption complexity has not. Cinematic dialogue has not shot off toward Shakespeare. Game tropes have plenty of simplicity. Blizzard is a house of simplification. StarCraft and Diablo are the essentials of their genre.

    Likewise, Crazy Arcade and QuizQuiz are massive lobbies of simple games. One is called OX quiz, which is as simple as a quiz can be. Imported from a Japanese game show, one either gets on the O side or the X side of a board for a true/false question. The losers are eliminated. Since all this occurs with a few dozen people, it's a bizarre conformist (but fun for some cultures) social experience.

    Designwise, game interfaces are getting simpler. Avatar-centric controls are leading toward camera-centric controls. By camera-centric I mean, if you want the character to go left-screen, press the left-directional button, even if the character is backwards or upside down in the camera view. Camera controls themselves are leadign towards artificial cinematography. This is increasing development complexity for the express purpose of decreasing play complexity, which is decreasing cognitive load.

    Many games are foregoing explicit controls for automatic behavior. Both The Wind Waker and The Sands of Time semi-automatically select various actual attacks depending on the proximity to the target. And in The Wind Waker, Link auto-jumps when faced with an edge. In Virtua Tennis the player doesn't so much choose a swing as press the button when the ball is near. There is more skill to it, but you don't need it to play. When I have non-gamer guests, I often introduce them to Virtua Tennis. It's very easy to learn, can be played with just the D-pad and the A button. Yet, it has quite a lot of room for skill development.

    [top]


Escaping Realism

    Realism is a slippery term. Human experience in the physical world is becoming increasingly supplanted by machine interfaces. Evolutionarily our brains haven't caught up, so to that extent, human experience is rooted in physical metaphors, and of course, by definition, human experience begins and ends in the human body.

    Realism is not a term I would use to describe an interface. In many cases I use physical instead of real, because some things such as a "real community" and "real currency" are ill-defined, whereas "physical community" and "physical currency" are defined.

    I intentionally avoid phrases like "realistic interface" or "real-world knowledge," because our reality, as a tool-using species on a planet, is rapidly changing. Much of what we take for granted as "realistic" is simply the incredibly non-intuitive pain, suffering, and torturous learning that we mastered before we started keeping track of our lives. Physical manipulation of an object at all is not easy. Program a robot. Or watch an infant. So what makes it realistic? It is because we don't remember how hard it was to learn how to manipulate.

    The misunderstanding is deeply rooted. The term for a physically-intuitive interaction is termed direct manipulation. But what makes it direct? Granted, the qualities are complex, yet part of the direct manipulation implication is that it mirrors physical interaction. This is not a necessary goal, as some user interface designers are realizing. User interface designers have proposed, instead of physical-metaphors for interaction, to have magical metaphors for interaction. I'm not making it up. That's the lingo, magical interaction techniques. In my opinion, the term largely a placeholder term for heretofore unexplored metaphors for interfaces.

    Yet as sci-fi/fantasy fan and a casual observer of the Western tradition of magick, I don't mind. As Aleister Crowley, a 20th Century proponent of magick, put it: magick is the art of implementing one's will. That is precisely the aim of the user interface to a computer: to efficiently implement the user's will.

    Indeed, before a child can implement his or her will through human-computer interaction, he or she has to master human-physical interaction. That, of course, is no small task. And so there may be as yet unexplored alternate metaphors for user interfaces that enable much higher performance than mimicking meatspace.

    [top]


Massive Interfaces

    User interfaces in massively multiplayer (MMP) games are years behind single-player interfaces. However within MMPs, World of Warcraft (WOW) and City of Heroes (COH), out of all that have launched in 2004, have lead the way in closing the gap. That's not to say WOW and COH are headed in identical directions. It feels like either is trying to appeal to a different level of system experience: City of Heroes interface feels a little more optimized for novice players, while World of Warcraft interface might appeal more to expert players.

    Many controls or actions in MMP interfaces are inconsistent with their system usages. There is a difference of opinion among game interface designers. Many PC games, with excellent interfaces, are not consistent with the interfaces of PC business applications. While all things being equal, consistency between applications on a system is better than not, I'm not as hard on a novel interface. If it works, it works.

    For example, Puzzle Pirates uses a radial menu, which has not caught on in business applications (or the pie menu), but it fits into the rest of the design, perhaps even better than a radial menu does in Neverwinter Nights. That's because Puzzle Pirates limits the depth and manages the appearance of each button more elegantly than NWN.

    [top]


Case Study: World of Warcraft

    I'll start by mentioning a few things I like in the World of Warcraft interface:

    Usability Features

    Navigation is user-friendly. A world map, a zone map, and a minimap work together with the description of locations given in the quest dialog to direct a novice player efficiently toward his or her objective. These maps expand with exploration which lightens the information load on the novice and slightly eases the transition from being a novice to becoming an intermediate player.

    The minimap is nice. It's not perfect, but enough to avoid getting lost in the terrain. Well, most of the time. In some areas, like Stormwind, there's too many colors for the user to color-code the minimap with terrain. And the you are here (YAH) marker becomes illegible. The minimap just needs a little more legibility, such as a thicker border.

    The chat customization is robust, which I would imagine satisfies your above sentiment. Maybe a little too robust for a novice player. But an expert player (or enough different players) may collectively need a check box for every category of message.

    The merchant dual tooltips are a blessing. Mouse over the item and two tooltips appear. The attributes of the item and the attributes of the item you already have equipped. Blizzard analyzed the task of comparison shopping well. This definitely saves user-hours and effectively directs the user's attention.

    Some of the Diablo/Warcraft features are worth keeping. The NPC quest and training markers are, my favorite. These color-coded "!" and "?" above the NPC heads are elegant and effective. These markers alone save countless user-hours (or user-years?) of clicking on NPCs who have nothing important for you at this time. Along the same lines, the particle system that highlights a lootable corpse is also a nice touch.

    Usability Issues

    World of Warcraft (PC) has quirks in its interface, which don't match WarCraft or Diablo. For example, the default configuration to walk is to depress both mouse buttons. A friend of mine complained of carpal tunnel syndrome after an extended binge of WOW. I can feel why.

    The font is going to make me go blind. No matter whether I set the resolution high or low, the default font looks like 6 to 8 point print. The interface options permit scaling chat and scaling the UI, but even at its maximum scale and highest gamma, I have to squint to read a quest. There seems to be a few sites devoted to customizing the WOW interface, but still, can't a novice player with less than hawk vision be allowed read without damage to his or her eyes?

    Conclusion

    While it's technically impressive that the WOW interface can also be customized, it's much more effective for satisfying the novice player by presenting a default interface which is usable. And that's what World of Warcraft, for the most part, is: exceptionally usable.

    [top]


Fitts' Golf

    Fitts' Golf is a simple children's game to illustrate the relationship between size, distance, and accuracy.

    Contents

    To play, a game board is needed, as appears at the bottom of this page. Also, a pencil for scoring, two pennies, and tape to keep the board in place are required.

    Setup

    Tape the board on a level, smooth table. Each player faces the board so that the word "SCORE" is right side up. Flip a penny to determine who goes first.

    Overview

    Each player takes turn flicking a penny from the hashed marks.

    Taking a Turn

    1. Find the column with the heading "A." Place a penny on the hash mark that intersects the circle. The center of the penny is placed above the intersection.
    2. Using the tip of your fingernail, gently flick the penny. The object is for the penny to end up in the gray circle on the other side of the board.
    3. If the whole penny stops within the gray area, mark 3 points in the box below "A." If the penny is in the next circle, mark 2 points.
    4. Mark 1 point if the whole penny is in the outer circle. And mark 0 points if not fully in any circle or off the board.
    5. Now the other player takes a turn in the same manner.
    After both players have tried from their respective side, follow the arrow to the next box (down the column) and start the penny at the corresponding hash mark.

    Continue this turn taking, scoring, and arrow following until all boxes and starting points have been scored.

    Then add up each row into the circle marked by an "S."

    The distribute of scores at each row illustrates Fitts' Law, which is that accuracy decreases with the distance from a target, and that the size of the target increases this accuracy. Fitts' Law states much more than this, and quite succinctly, yet this enough to begin to appreciate its utility.

    Gameboard in WMF (Windows Metafile) [26 KB]
    or PNG (Portable Network Graphics) [16 KB]

    [top]


Reference

The reference material is directed primarily at students in the course Game Interface Design at ITT Tech.

Glossary

This is a glossary of user interfaces specifically for videogames. For a general glossary of user interfaces, see Usability First in the links section. Most terms come from a reference which is cited. The abbreviated citations refer to these books.

    3DUI: 3D User Interfaces: Theory and Practice
    EGUID: Essential Guide to User Interface Design
    GDP: Game Design Perspectives

In some circumstances, a new term was introduced to clarify the usage or avoid an awkward usage (such as "play area" to replace the common UI term "work area," which originated in business applications). The relevant user interface terms as applied specifically to videogames are:

    accuracy: The accomplishment of a task with a given error rate or error range (EGUID).

    avatar: The player's representation in the play space.

    avatar relative mode: A control map that drives the avatar (Grim Fandango User Manual). Some games, such as Neverwinter Nights, call this drive mode.

    bar: Any slim vertical or horizontal interface element.

    briefing: A screen that informs a player of the objectives of a mission or a level in a game.

    camera: The player's point of view into the play space.

    camera relative mode: A control map that maintains directional compliance (Grim Fandango User Manual).

    compass: An indication of exocentric heading in the virtual environment (3DUI).

    check box: A box that may exist in two states: selected or unselected. The selection may appear as a check, a pip, a depressed button, or any number of toggles. In these more general forms, it is also called a toggle box or just a toggle (EGUID).

    control map: The correspondence between inputs (such as keyboard buttons or a joystick's direction) and actions (such as jumping or walking).

    cascading menu: A submenu that appears by selecting the item in another menu (EGUID).

    command area: The portion of the screen for typing in commands. Also called the command-line or console (EGUID).

    collocated: An interface element whose screen position is attached to an object in the play space (3DUI).

    context: The conditions under which a player issues an input, such as avatar location (GDP).

    decoration: Any object or modification to an object in the play space that has no effect on the player's performance.

    degree of freedom (DOF): The number of dimensions in which a control may be moved. Sliders and most menus are 1-DOF. A palette is 2-DOF. The camera viewport in a 3D modeling program may be 3-DOF (3DUI).

    directional compliance: A correspondence between the user's physical movement of a control and the movement of an object onscreen (3DUI). A game that intentionally destroys directional compliance is MirrorTime for the EyeToy.

    egocentric: A camera that is relative to an avatar in a virtual environment. Some particular types of egocentric camera views are called first-person, over the shoulder, or cockpit (3DUI).

    exocentric: A camera that is fixed in relation to the virtual environment or is significantly distant from the avatar. Some types of exocentric camera views are called third-person, isometric, scene-based, overhead, top-scroller, or side-scroller (3DUI).

    expert player: A user of a game with a relatively large amount of game experience.

    game experience: The amount of time the player has been actively playing any game in a particular videogame series.

    game literacy: The amount of time a player has been exposed to a given genre of videogames.

    goal setting: The method in which the user interface of a videogame informs the player of which tasks will be rewarded.

    hierarchical menu: a structure of menus with submenus that may be selected from a main menu (EGUID).

    heads-up display: An overlay on the play area that provides additional information. This is also used generically to apply to any static panels, toolbars, menu bars, or other interface elements that occlude the play area (3DUI).

    information load: The amount of information that must be recalled in order to use an interface (EGUID).

    journal: A screen or panel that displays a task list, clues, or other relevant information about a task or mission. The journal is dynamically updated to represent the current tasks.

    keyboard equivalent: A keyboard combination that selects an item or executes a command. Also called a shortcut or a hotkey (EGUID).

    landmark: An object in a virtual environment that is easily distinguished, so aids the player's navigation (3DUI).

    linear menu: an invariant sequence of menus (EGUID).

    lobby: An interface for selecting a game session, usually a multiplayer game.

    intermediate player: A player with more game experience than a novice but less than an expert. Although the classification is relative and arbitrary, the classification can help distinguish how one population of players' needs differ from another's.

    meter: A graphical display of a value as a partially filled area, such as a life meter, or an experience point meter. If this meter is shaped as a bar, it is also called a bar, as in a life bar or an experience bar.

    minimap: A map that takes up a small amount of screen space, usually as an HUD element in the corner of the play area.

    mission: A structured set of tasks that the player must perform in order to trigger a reward condition.

    modality: Whether or not a dialog box prevents selection to other portions of the interface, such as in a pause screen (EGUID).

    navigation: The method through which a player gets from a source to a target in a play space that exceeds the play area.

    novice player: A user of a game with relatively little game experience, and perhaps little system experience also.

    order of play: The method through which player actions are regulated. This is usually either real-time or turn-based.

    orthogonality: The activation of an input does not affect the activation of another input. For example, in some action games, a player can independently jump and punch (GDP).

    panel: A framed portion of a window which has more than one row and column (EGUID).

    pie menu: A radial display of menu options; also called a radial menu (EGUID).

    play area: The portion of the screen that views a portion of the play space. This is analogous to the work area in a busines application.

    play space: The virtual environment that represents an entire level, zone, or field in which players may interact.

    player: The user of a game, especially a videogame in this context.

    player performance: Accomplishment of a task at a given speed with a given degree of accuracy.

    pointer: The indication of the direction of a target in relationship to the camera or the avatar (3DUI).

    pop-up menu: A menu that appears at the selection (EGUID).

    private game: A game in which one of the players has control over which players are admitted. All single-player games, of course, are private games. An instanced area in a massively multiplayer game may also be referred to as a private area.

    progress indicator: Feedback that estimates the amount of time or tasks remaining for an operation to be completed. If this is a bar that is filling up, it is usually called a progress bar (EGUID).

    public game: A game in which no player has control over which players are admitted. A massively multiplayer game has many public areas.

    quantitative interface element: Any interface element that is presented as a number or a meter. Such as the score.

    qualitative interface element: Any interface element that is difficult to present as a number or a meter. Such as tools, spaces, decorations, journal, honors.

    radar: A display of the avatar position and relative position of other important objects in the play space (3DUI).

    radial menu: An arrangement of menu options at the perimeter of a circle. Also called a pie menu.

    raycasting: Projecting a line from point, which can be used as a method of selecting an object in an virtual environment, such as when firing a weapon in a first-person shooter (3DUI).

    real-time: A game in which a player may perform an additional action before all the players have had the opportunity to perform a action.

    reference frame: The view from which a camera (and therefore a player) sees the play space. The two general reference frames are egocentric and exocentric (3DUI).

    ring menu: A menu that has the structure of a circular list, so that advancing beyond the end of the menu returns the selection basket to the opposite end of the menu (3DUI).

    score: A quantitative rating of the player's performance.

    space: Any arrangement of contiguous positions that may consistently traversed. This includes puzzles, mazes, and levels.

    speed: The accomplishment of a given task within a given duration (EGUID).

    selection basket: The highlighted item in a menu (3DUI).

    selection volume: A volume (usually simplified) that may be intersected by a method of accessing an object in a virtual environment, such as by raycasting. When this is a rectangular solid, it is also called bounding box (3DUI).

    slider: A bar with a current value that may be repositioned anywhere on that bar (EGUID).

    system control: Altering a global parameter of the application or the system (3DUI).

    system experience: The amount of time a player has been playing games on a particular platform (such as PS2 or PC) (EGUID).

    tab: An edge of a panel that acts similar to a menu bar, except that each item corresponds to a panel (EGUID).

    target highlighting: Calling attention to a location or object in the play area, on a map, or in a radar.

    task: A sequence of actions or a condition whose completion rewards the player.

    task list: A sequence of sentences, each which describes an action that will be rewarded if completed by the player. The task list may also include a check box beside each task.

    tearoff menu: A menu that may be repositioned by drag-and-drop (EGUID).

    timer: A display of time remaining or time passed for a given operation or task in a videogame (EGUID).

    tool: Any game piece that may be used to assist in accomplishing a task, such as an item, skill, or unit (in an RTS).

    toolbar: A vertical or horizontal arrangement of icons, which are in this context, referred to as tools (EGUID).

    tooltip: A pop-up message that provides information about the tool or icon in focus (EGUID).

    turn-based: A game in which each player is given an opportunity to act once before any player may act again (GDP).

    upgrade set: A collection of advanced abilities or items that a player may purchase with a game currency, such as skill points, experience points, videotapes, or any other unit of currency in the game's theme.

    upgrade tree: A collection of advanced abilities or items that is structured so that a player must first acquire the prior upgrade before gaining access to subsequent upgrades.

    virtual environment: The representation of (3D) physical space in a computer's data which is displayed to the user through output devices (3DUI).

    wayfinding: The method in which a player navigates through a virtual environment from a source location to a target location (3DUI).

    you are here (YAH): A marker on a map that indicates the location of the avatar (3DUI).

    [top]


Books

    Editor: Thor Alexander, Massively Multiplayer Game Development 2, Charles River Media, USA, 2005. ISBN 1584503904.

    Doug A. Bowman, Ernst Kruijff, Joseph J. LaViola, Ivan Poupyrev. 3D User Interfaces: Theory and Practice. Addison-Wesley Professional, 2004. ISBN 0201758679.

    George E.P. Box, William G. Hunter, and J. Stuart Hunter, Statistics for Experimenters: An Introduction to Design, Data Analysis, and Model Building. John Wiley & Sons, USA, 1978. ISBN 0471093157.

    Alan Cooper and Robert M. Reimann. Wiley, About Face 2.0: The Essentials of Interaction Design. "Part IV: Controls and Their Behavior." USA, 2003. ISBN 0764526413.

    Wilbert O. Galitz, The Essential Guide to User Interface Design. 2 ed. Wiley 2002. ISBN 0471084646.

    Editor: Francois Dominic Laramee, Game Design Perspectives. Charles River Media, 2002. ISBN 1584500905.

    Allen Newell, Unified Theories of Cognition. Chapter 1. USA, Harvard University Press, 1991. ISBN 0674920996.

    James Ohlen, Dr. Greg Zeschuk, and Dr. Ray Muzyka, "Postmortem: BioWare's Baldur's Gate II." Game Developer, USA, May 2000.

    Andrew Rollings and Ernest Adams, Andrew Rollings and Ernest Adams on Game Design. "Creating the User Experience" and each of the genre-specific chapters: New Riders, 2003. ISBN 1592730019.

    Editor: Marc Saltzman, Game Design: Secrets of the Sages. "Chapter 12, The All-Important User Interface (UI) and Game Control," and "Chapter 15: Testing." 2 ed. Bradygames, USA, 2000. ISBN 1566869870.

    [top]


Links

Reference

Articles

Related Pages

Copyright 2004-2005 David Ethan Kennerly