Jason Paolasini Chapter 8 A Benjamin Isherwood – – Chapter 8 B CHAPTER 8 UI DESIGN

USER INTERFACES User Interface Design and the Processes Managing Complexity Interaction Models & Camera Models Functionality and input devices Game Customization

WHAT IS THE USER INTERFACE What works is better than what looks good. The looks good can change, but what works works. – Ray Kaiser Eames

A LITTLE BIT OF TERMINOLOGY BEFORE WE START Button !=Button

PLAYER CENTRIC DESIGN Not Just Any Old Interface

DESIGN RULE 1 Do Not Innovate Unnecessarily in UI Design

THE GENERAL PRINCIPLES Be Consistent Give good Feedback Remember the player is in control Limit the number of steps required Permit easy reversal of actions Minimize Physical Stress Don’t strain players short term memory

Group related screen-based controls and feedback mechanisms Provide shortcuts for experienced players

WHAT THE PLAYER NEEDS TO KNOW Think of these as questions a player would ask…

WHAT THE PLAYER NEEDS TO KNOW Where am I? What am I doing right now? What challenges am I facing? Did my action succeed or fail? Do I have what I need to play successfully? Am I in danger of loosing the game? Am I making progress? What should I do next? How did I do?

DESIGN RULE 2 Do Not Taunt the Player

WHAT THE PLAYER NEEDS TO DO

Move Look around Interact with NPC’s Move Portable objects Manipulate Fixed Objects Construct and Demolish Objects Negotiations and Financial transactions Conversations with NPC’s Customize Character Talk to friends in Multiplayer games Pause the Game Set Game Options Save the Game End the Game

BEFORE YOU DESIGN DEFINE INTERACTION STYLE AND CAMERA STYLE

MANAGING COMPLEXITY

SIMPLIFY THE GAME Using Abstraction and Automation

ABSTRACTION & AUTOMATION

DEPTH VS. BREADTH UI

CONTEXT SENSITIVE INTERFACES

AVOID OBSCURITY Artistic Overenthusiasm, Pressure to Reduce Screen Usage, Developer Familiarity

INTERACTION MODELS

AVATAR BASED

MULTI-PRESENT

PARTY-BASED

CONTESTANT

CAMERA MODELS

FIRST PERSON

Pros Avatar design is not required except cut scenes Camera AI is not required Body does not block view Most players find navigation easier Cons No avatar customization Lack of avatar emotions First person perspective denies camera angles for dramatic effect Motion sickness in viewers

THIRD PERSON

TYPES OF THIRD PERSON

AERIAL PERSPECTIVES

TOP-DOWN PERSPECTIVE Grand Theft Auto 1

ISOMETRIC PERSPECTIVE Warcraft III

FREE-ROAMING CAMERA Maze ball

CONTEXT-SENSITIVE CAMERA MODELS ICO and the colossus collection

DESIGN RULE 3 Limit Camera Movement During Frenetic Action

OTHER 2D STYLES ■ Single-screen. The display shows the entire world on one screen, normally from a top-down perspective with cheated objects. The camera never moves. Robotron: 2084 provides a classic example. (See the left side of Figure 13.1.) ■ Side-scrolling. The world of a side-scroller—familiar from an entire generation of games—consists of a long 2D strip in which the avatar moves forward and back- ward, with a limited ability to move up and down. The player sees the game world from the side as the camera tracks the avatar. ■ Top-scrolling. In this variant of the top-down perspective, the landscape scrolls beneath the avatar (often a flying vehicle), sometimes at a fixed rate that the player cannot change. This forces the player to continually face new challenges as they appear at the top of the screen. ■ Painted backgrounds. Many graphical adventure games display the game world in a series of 2D painted backgrounds rather like a stage set.

SINGLE SCREEN Robotron 2084

SIDE SCROLLING Mario Bros. 3

TOP SCROLLING Atari Space Invaders

PAINTED BACKGROUND Leisure Suit Larry