Fundamentals of

nd
Game Design, 2 Edition

by Ernest Adams

Chapter 9: User Interfaces

Objectives

 Explain how the user interface mediates

between the player and the core mechanics
to create the user experience
 Discuss how principles of player-centric
interface design can answer questions about
what the player needs to know and wants to
do
 Know the basic steps required to design a
game’s user interface

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 2

Objectives (Cont.)

 List options that can help to control a game’s

complexity
 Describe the five well-known interaction
models
 List the most commonly used camera models
and discuss their advantages and
disadvantages
 Describe how visual elements supply
information a player needs to know to
succeed in the game
© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 3
Objectives (Cont.)

 Explain how audio elements such as sound

effects and music affect the user experience
 Know the types of one-, two-, and three-
dimensional input devices and discuss how
they affect the game experience
 List the most commonly used navigation
systems and explain how each system
controls action in a game

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 4

What Is the User Experience?

 User interface is often called the presentation

layer
 The experience must be entertaining
 Outputs = Visual + audio elements
 Inputs = Control elements

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 5

Player-Centric Interface Design

 Players prefer to use a familiar UI

 General principles of interface design:
 Be consistent
 Give good feedback
 Avoid seizing control from the player
 Limit the number (3) of steps required to do things
 When appropriate, permit player to reverse actions
 Minimize physical stress; provide shortcuts
 Keep related info together on the screen

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 6

Shortcuts

Execute complex combo moves

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 7

Shortcuts

Execute complex combo moves

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 8

Group info

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 9

Group info

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 10

Player-Centric Interface Design
(Cont.)
 Tell the player what he needs to know
 Is he succeeding or failing?
 What is he doing now and what should he do
next?
 Offer actions the player can perform
 Move
 Look around
 Interact with objects
 Pause or save the game

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 11

 The Design Process
2

Screen Layout

3
1

Primary Gameplay Player Needs to

Mode Know

4
5 Shell Menu Player’s Action

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 12

The Design Process

 Define the gameplay modes you’ll need

 Define the primary gameplay mode first, then
move on to others
 Then think about the visual elements and controls
that will be needed for each mode
 Define a different user interface for each
gameplay mode
 For each mode, design a screen layout, select visual
elements, and define inputs
 Build a prototype UI in PowerPoint or Flash

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 13

The Design Process (Cont.)

 Choose a screen layout

 Main view will be the largest visual element on the
screen
 Find a balance between the amount of screen
space devoted to the main view and amount for
feedback elements and onscreen controls

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 14

The Design Process (Cont.)

 Tell the player what he needs to know

 Select data from core mechanics that you want to
show
 Choose feedback elements to display that data
 After defining critical information, move on to
optional information
 Keep in mind the general principles of good
interface design

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 15

The Design Process (Cont.)

 Let the player do what she wants to do

 Begin devising appropriate control mechanism for
each action the player can take that affects the
game
 Create visual and audible feedback for actions
 Map input devices to player’s actions based on
chosen interaction model
 Each time you move to new gameplay mode, note
actions it has in common with other modes to
keep control mechanisms consistent

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 16

The Design Process (Cont.)

 Shell menus
 Shell menus allow the player to start, configure,
and manage operation of game before and after
play
 Player should not have to spend too much time in
shell menus
 Shell interface is the first thing players see, so
don’t skip on design

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 17

Managing Complexity

 Simplify the game

 Abstract some details
 Automate some functions
 Depth versus breadth
 Deep interface places commands in multilevel
menus or dialog boxes
 Broad interface offers more options at one time
 Best solution is a deep interface with keyboard
shortcuts

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 18

Depth vs. Breadth

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 19

Guidelines on managing the
depth or breadth of game
interface
 Offer both: deep and broad interfaces
• Deep for the new players
• broad for experienced users
• assign shortcut keys to frequently used functions
 Avoid more than 3-4 levels deep
 categorize the options for structure menus by frequency of
access.
• most frequent accessed elements should be one or
two steps away from the player.
• least frequent accessed elements can be farther
down the hierarchy.

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 20

Managing Complexity (Cont.)

 Context-sensitive interfaces show players

their current options
 Hide the unneeded options
 Avoid obscurity
 In the user interface, don’t sacrifice function for
looks
 Test the UI on someone outside your project

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 21

Context Sensitive

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 22

Interaction Models

 Means by which the player projects his

intentions into the game world
 Common types
 Avatar-based—player acts through a character
 Multipresent—player acts on many places at once
 Chess, SimsCity
 Party-based—player controls a group of people
 Contestant—player acts as if on a TV game show
 Desktop—similar to computer desktop metaphor

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 23

Camera Models

 Determine virtual camera behavior by asking

how you want player to view the world
 Perspectives are camera models that are
largely fixed and unintelligent, e.g. top-down
 Virtually all standalone games running on
powerful game hardware employ 3D
 Use 3D graphics only if you can do it well
 Good 2D is preferable to bad 3D

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 24

Camera Models (Cont.)

 First-person perspective
 Used only in avatar-based gameplay modes
 Pros and cons:
 Little animation needed  Player cannot see avatar
for the avatar  Difficult to indicate
 You don’t need to design avatar’s personality
AI to control the camera  Camera angles are
 Players find it easier to limited
aim ranged weapons  Certain moves are
 Players may find it difficult
easier to interact with the  Rapid movements may
environment cause motion sickness

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 25

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 26
© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 27
Camera Models (Cont.)

 Third-person perspective
 Used for avatar-based games and allows the
player to see the avatar
 Most common perspective in 3D action and
action-adventure games
 Challenges for this perspective:
 Defining camera behavior when the avatar turns
 Intruding landscape objects between camera and avatar
 Permitting player adjustments to the camera

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 28

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 29
Camera Models (Cont.)

 Aerial perspectives
 Used with party-based or multipresent interaction
models
 Types of aerial perspectives:
 Top-down perspective—used to display maps
 Isometric perspective—camera angle is such that all
three dimensions can be seen at once
 Free-roaming camera—like isometric but camera
controlled by player to show the best angle
 Context-sensitive camera model—camera moves
intelligently to follow the action, show the best angle

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 30

Top Down

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 31

Isometric

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 32

Context Sensitive

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 33

Perspectives (Cont.)

 Other 2D display options found in Web-based

games and on small devices
 Single-screen—entire world on one screen
 Side-scrolling—player sees the game world from
the side as avatar moves left and right
 Top-scrolling—landscape scrolls beneath the
avatar and new challenges appear at top
 Painted backgrounds—2D+3D, avatar and other
characters appear in front of static backgrounds

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 34

Single screen

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 35

Side scroll

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 36

Top scroll

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 37

Painted background

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 38

Painted background

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 39

Visual Elements

 Main view
 Should be largest element on the screen
 Main view options:
 Windowed views—main view takes up part of the
screen, with the rest of the screen showing panels
displaying feedback and control mechanisms
 Opaque overlay—small window superimposed over
main view; the overlay obscures the main view
 Semitransparent overlay—small window that players
can see through partially

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 40

Windowed view

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 41

Opaque overlay

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 42

Semitransparent overlay

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 43

Semitransparent overlay

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 44

Visual Elements (Cont.)

 Feedback elements communicate details

about the game’s inner states
 Indicators inform about the status of a resource
 Digits, needle gauge, power bar, small multiples, colored
lights, icons, text are common types of indicators
 Mini-maps show an area larger than the main
view so player so orient herself
 Colors give additional clues

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 45

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 46
Visual Elements (Cont.)

 Character portraits
 Can give the player a better idea of the person
 Can function as a feedback element if they
change
 Key issues regarding text in a game
 To make localization easier, store text in text files
 Choose typefaces and formatting carefully to
harmonize with theme and present information
clearly

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 47

Character Portraits

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 48

Audio Elements

 Sound effects
 Vibration (“rumble”)
 Ambient sounds
 Music
 Dialog and voiceover narration
 Repetition can be irritating
 Create multiple alternative versions
 Writing and acting must be good

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 49

Input Devices

 Three-dimensional input devices

 Accelerometers (e.g. Wii controllers), GPS receivers
 Two-dimensional input devices
 Directional pads
 Joysticks
 Mouse or trackball
 Touchpad and touch screen
 One-dimensional input devices
 Controller buttons and keys
 Knobs, sliders, and pressure-sensitive buttons

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 50

3 Dimension

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 51

2 Dimension

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 52

1 Dimension

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 53

Navigation Mechanisms

 Screen-oriented steering—push joystick

toward the top of the screen to move the
avatar the same direction
 Avatar-oriented steering—push joystick up to
move avatar forward in the direction the
avatar is facing

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 54

Screen-oriented

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 55

Avatar-oriented

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 56

Navigation Mechanisms (Cont.)

 Flying
 Requires two mechanisms because the
movement occurs in the third dimension as well
 Usually first-person perspective inside cockpit
 Point-and-click navigation
 Used to give directions to semi-autonomous units
 Uses a pathfinding algorithm
 To give the player more control, allow him to set
waypoints for the unit

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 57

Point and Click

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 58

Allowing for Customization

 Useful and easy to design

 Include a key reassignment shell menu
 Save all customization changes on a per-
player basis (like the Nintendo Mii)

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 59

 Designer:
BRUTE
ATTACK

Gamer:
MAGIC
ATTACK

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 60

Summary

 You should now understand

 What the player needs to know and how it can be
presented
 How to design a game’s user interface
 How to use audio and visual elements
 How the input devices affect the game experience

© 2009 by Pearson Education, Inc. Chapter 9 User Interfaces 61