Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Gamasutra: The Art & Business of Making Gamesspacer
Cross-Platform User Interface Development
View All     RSS
May 23, 2019
arrowPress Releases
May 23, 2019
Games Press
View All     RSS

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


Cross-Platform User Interface Development

March 26, 2004 Article Start Page 1 of 2 Next

UI is always the first thing a player will see, and yet it's often the last thing a developer thinks about. Just like the opening credits for a movie, the UI can help to set the mood for the rest of the game, for better or worse. If a game has a UI that looks bland, or is difficult to use, how will that impact a player's first impressions of the rest of the game?

From PC to Console

Whether you're converting a PC game to console or developing an original console title, the PC is always going to be a major part of the production pipeline. This section will illustrate some of the major differences between consoles and computers.

The Display: What You See May Not Be What You Get

Content on the PC can look very different once it's on a console. It's important to understand the differences between the displays used for PCs and consoles.

- CRT Computer Monitors most commonly used by gamers
- Variable Resolution: Typically between 640x480 - 1280x1024
- Progressive (Every line drawn)
- 17"-19" in size (typically)
- Small Dot Pitch
- Consistent screen area(same for all models and brands)
Crisp and clear display: meant to be viewed up close

Computer Game Display

- CRT Televisions most commonly used by gamers
- Fixed Low Resolution: 640x480(typically)
- Interlaced (Every other line drawn)
- 19"-36" in size (typically)
- Large Dot Pitch
- Variable screen area (different for every model and brand)
- Fuzzy and blurry: meant to be viewed from a distance

Console Game Displays

The Tech Behind The "Tube"

TVs use electron guns to shoot tight beams of electrons onto the screen from within a vacuum tube. The screen is coated with phosphor, which glows where it gets hit by the beam.

The Tech Behind The "Tube" - Cathode Ray Tube

What Happens When TVs Behave Badly

Screen Distortion

The pictures below, from the beta test of Jedi Academy (Xbox), show one of the distortions that can occur on televisions.



This is what happens when you have a lot of electrons in one line of resolution and fewer in another. Electrons repel one another because of their like electrical charge. The brighter the color, the more electrons are being fired at the screen, which will mean more electrons repelling one another. The opposite is true of darker colors - fewer electrons repelling one another. Together these lines create screen-distortion.


  • Invest in a really cheap TV for distortion testing - the kind you get at a super market, not at Best Buy.
  • Avoid using bright and dark colors together, especially with thin and/or straight lines.
  • Screen Legibility

    Text is such a common part of our daily lives that we rarely stop to notice just how complex it really is. Just think of how many polygons it would take to render a letter like "Q". There is a reason why you never see "Books On TV" - you would go blind trying to read that much text on a TV. Televisions were never designed for reading text on screen. A console developer must always test for legibility of the UI on a television, especially when concerning fonts.

    Concerning Fonts

  • The larger and thicker the text, the easier it will be to read. It's better to have the player page down than to try and fit it all on one screen with a smaller font size.
    If you can read this then you are straining your eyes J
  • Try to make all your letter characters the same size. That will make it easier to manage long text strings.
  • Avoid using lowercase letters as they are more difficult to read. Lowercase letters are also more difficult to manage since their sizes vary so much. Instead, try using smaller versions of uppercase letters.
  • Consider using an outline for the font. It may not look as clean, but it can go a long way towards making your text easier on the eyes.
  • Here are some good and bad examples for TV viewing:




    HUD Readouts in Jedi Academy (Xbox)


    TVs tend to over-scan their screen area, which means the picture on the screen is a little larger than the display. How much the TV over-scans varies from TV to TV. To compensate, console manufactures (e.g. Sony, Microsoft, Nintendo) require that the edges of the screen not contain any important information. That means things like a heads up display, dialog boxes and UI elements must remain within the confines of a safe region. Sony, Microsoft, and Nintendo have different requirements, but none of them have restrictions on being too cautious. Microsoft requires that an Xbox title have a safe region that uses only the middle 85% of the screen (544x408) making it the most conservative. We have yet to find a TV that this safe region won't compensate for. (Note: The safe region is different for HDTV)

    Jedi Knight: Jedi Academy


    The pictures above illustrate the impact the safe region (added outline) had on Jedi Academy. Note the difference it made to the HUD.

    A Note on Technical Requirements
    Games that do not meet manufacturers' technical requirements (such as conforming to the safe region) are not allowed to be published. Manufacturers do grant exceptions, but generally not for any really significant violations.

    From Mouse to Controller

    "The keyboard and mouse give you near instant response and near exact control. The controller is a far less precise, far more...well...leisurely input device."
    - Warren Spector

    With PC games, the player uses a mouse pointer to precisely select the item they want. With a console, however, the player has to use the D-pad or thumbstick to seek the item they want by cycling through the entire menu. It is therefore very important to make the UI menus as efficient as possible. Below are some guidelines to consider:

    Make sure that anything you put in the UI is absolutely necessary.

    With a mouse this menu is no problem but a real pain for a console controller.
    By consolidating non-essential menu items, the player has less to seek through.

    Avoid placing menus that require scrolling to see all its contents.

    This design means the player has to evaluate each choice and reject it until, they find the one they want.
    With all the information visible, the player may see their choice and seek to it.

    Absolutely make sure that menu navigation is fast.

    And when I say fast, I mean instant. Screen transition animations are one thing, but having to wait a second between each menu item is incredibly frustrating and totally unnecessary.


    Article Start Page 1 of 2 Next

    Related Jobs

    FoxNext Games
    FoxNext Games — San Jose , California, United States

    Senior Narrative Designer
    FoxNext Games
    FoxNext Games — San Jose, California, United States

    Associate Level Designer
    FoxNext Games
    FoxNext Games — San Jose, California, United States

    Senior World Builder
    FoxNext Games
    FoxNext Games — San Jose, California, United States

    Senior Content Designer

    Loading Comments

    loader image