GD Chap 8

Chapter 8: User Interface (UI)

What will you be learning in this chapter?

  • What is User Interface?

  • Different interface styles

  • Principles of Game Interface Design

User Interface (UI) Design

  • Definition: User Interface design defines how the player interacts with the game and completes the task presented to them.

  • Purpose:

    • Provides essential information to the player, such as winning or losing status.

    • Information is typically displayed in the Heads-Up Display (HUD), which includes:

    • Score

    • Available lives/energy

Different Interface Styles

  • Classification of game interfaces into four main categories:

    • Diegetic: Information is part of the story and the game environment.

    • Non-diegetic: Information is on-screen but not part of the game world.

    • Meta: Information is part of the story but not displayed in the game environment.

    • Spatial: Information is provided within the environment but not part of the story.

Non-diegetic Interface

  • Characteristics:

    • Not part of the game world; displays information as an overlay.

    • Most common and easiest to produce.

    • Relies on 2D graphics and text.

  • Common information displayed includes:

    • Player's score and health

    • Time remaining

    • Level names

    • Ammunition count (numerical)

    • Speed of the player

    • Mini maps

  • Reference: Screenshot from https://www.toptal.com/designers/gui

Diegetic Interface

  • Characteristics:

    • Information is integrated into the story and the game's environment.

    • Design complexity increases, particularly in a 3D space.

    • Must be seamlessly incorporated into the world.

  • Examples include:

    • Player’s health represented by a glowing strip on the character.

    • 3D objects like maps and compasses as information tools within the game.

    • Ammo counts displayed on the player's weapon.

    • In-game speedometers shown on vehicle dashboards.

  • Reference: Screenshot from https://www.toptal.com/designers/gui

Meta Interface

  • Characteristics:

    • Information is part of the story but displayed on the screen.

    • Represents events that are not occurring in the gameplay but are consequences of the game narrative.

  • Examples include:

    • In a third-person shooting game, if a player character is shot, the screen may splatter with blood.

    • In a racing game, a car crash may cause the screen to crack or shatter.

    • In a 2D game (action/adventure genre), the field of view may become blurred to signify player damage.

  • Reference: Screenshot from https://www.toptal.com/designers/gui

Spatial Interface

  • Characteristics:

    • Provides information and instructions within the game environment but not part of the story.

  • Examples include:

    • Characters have thought bubbles to convey what they are thinking, with bubble positioning relative to the game world and character location.

    • Colored arrows in racing games indicating the direction of the track.

  • Reference: Screenshot from https://www.toptal.com/designers/gui

Principles of Game Interface Design

  • The foundational principles to consider include:

    • Control

    • State Visualization

    • Metaphors

    • Sound

    • Consistency and Coherence

    • Color

    • Layout

Control

  • Importance:

    • Controls are paramount in player experience and game interaction.

    • The controller interface must be clearly defined.

State Visualization

  • Necessity:

    • Players need to be aware of their status in the game.

    • Key data to communicate includes:

    • Score

    • Health status

    • Ammunition count remaining

    • Laps completed in racing games

    • Player's location

    • Time left in activities

Metaphors

  • Definition:

    • Universally recognizable symbols associated with shared meanings and concepts.

  • Example:

    • The play button symbol (triangle) is recognized worldwide in both audio and video contexts.

    • Commands such as quit, play, pause, and return can be depicted using small, recognizable images.

  • Color symbolism:

    • Green is often associated with health or power levels; red typically indicates danger or low levels.

Sound

  • Role in Game Interface:

    • Sound integration is essential for feedback and alerts to players.

    • Provides cues for interactions:

    • Players hear a familiar sound when a button is activated, signifying confirmation.

    • Alarming sounds indicate issues or negative events in the game.

    • Enhances the immersive experience by deepening the game world ambient sound.

    • Examples in first-person shooter games include sounds like footsteps or door creaks.

Consistency and Coherence

  • Guidelines:

    • Limit the use of fonts to no more than two types.

    • Restrict button shapes to one or two variants for intuitive design.

    • Use round buttons for main interfaces and square buttons for pop-ups.

Color

  • Importance:

    • The color scheme contributes significantly to the coherence of the interface.

    • Designers must decide colors for buttons, backgrounds, information boxes, and other elements based on the genre and content of the game.

    • Text readability is vital; typically, white or light-colored text on dark backgrounds is preferred.

Layout

  • Key Principles:

    • Contrast: Differentiate elements by visual differences.

    • Repetition: Use consistent formatting to enhance recognition.

    • Alignment: Position elements to create a visual flow, guiding the player's eyes.

    • Proximity: Group related information or controls to streamline player navigation.

  • Example: The Windows 10 start menu by Microsoft exemplifies effective layout principles.

References

  • https://www.toptal.com/designers/gui

  • Mobile Game Design Essentials - By Claudio Scolastici, David M Nolte