1. Fundamentals of Game Design, 2nd Edition
by Ernest Adams
Chapter 8: User Interfaces

2. 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 8 User Interfaces

3. 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 8 User Interfaces

4. 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 8 User Interfaces

5. 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 8 User Interfaces

6. 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 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 8 User Interfaces

7. 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 NPCs and objects
Pause or save the game
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

8. 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
Design the primary gameplay mode first.
Remind students to consider the player first in player-centric design.
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

9. 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 8 User Interfaces

10. 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 8 User Interfaces

11. 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 8 User Interfaces

12. 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 skimp on design
All elements, including the shell menus, should be in harmony.
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

13. Managing Complexity Simplify the game Depth versus breadth
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
Abstraction means completely removing processes or systems from the game. Automation means leaving processes in, but letting the computer control them so the player doesn’t have to.
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

14. Managing Complexity (Cont.)
Context-sensitive interfaces show players their current 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 8 User Interfaces

15. 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
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 8 User Interfaces

16. 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 8 User Interfaces

17. Camera Models (Cont.) First-person perspective
Used only in avatar-based gameplay modes
Pros and cons:
Little animation needed for the avatar
You don’t need to design AI to control the camera
Players find it easier to aim ranged weapons
Players may find it easier to interact with the environment
Player cannot see avatar
Difficult to indicate avatar’s personality
Camera angles are limited
Certain moves are difficult
Rapid movements may cause motion sickness
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

18. 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 8 User Interfaces

19. 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—camera controlled by player
Context-sensitive camera model—camera moves intelligently to follow the action
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

20. 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—avatar and other characters appear in front of static backgrounds
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

21. 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 8 User Interfaces

22. 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 8 User Interfaces

23. 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 8 User Interfaces

24. 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 8 User Interfaces

25. 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 8 User Interfaces

26. 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 8 User Interfaces

27. 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
With point-and-click, player gives a command and the unit or character travels to the designated location by itself, wthout further steering.
© 2009
by Pearson Education, Inc.
Chapter 8 User Interfaces

28. 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 8 User Interfaces

29. 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 8 User Interfaces