User interfaces

1. Fundamentals of Game Play
User Interface Design
Sayed Ahmed
BSc. Eng. in CSc.
MSc. in CSc.
http://sayed.justetc.net
http://www.justETC.net
Presented at the University of Winnipeg
Winnipeg, Manitoba, Canada

2. Topics
 General Principles of User Interface Design
 A process for designing your interface
 How to manage the complexity
 Interaction Models
 Camera Models
 Examine most widely used visual and audio elements in
game UI
 Analyze the functionality of various types of input devices
 A variety of navigation mechanism
 Camera Models
 Input Devices

3. Topics
 How to make your game customizable

4. Is User Interface Important?
 A bad interface can kill a game
 Even with a great game play
 The User Interface creates the player’s experience
 Making the game Visible, Audible, and Playable
 The user interface has an enormous effect on how the player
perceive the Game
 Satisfying
 Disappointing
 Elegant
 Graceless
 Fun
 Frustrating

5. What is the User Interface?
 Lies in between the player and the internals of the game
 Knows all about any supported input and output hardware
 Translates the player’s input
 Into actions in the game
 Pass those actions to the core-mechanics
 Presents internal data that the player needs
 In visible and audible format
 Output
 Visual Elements and Audio Elements
 Input
 Control Elements

6. What is the user Interface
 Feedback to the player
 Gives important information to the player
 About his activities
 The state of the game world
 The state of his Avatar
 Feedback Elements
 The elements that provide this information
 Visual or Audio

7. Player Centric Interface Design
 UI plays more complex rules in games than in any other software
 Games exist to entertain
 Other software take data, process data, control
processes, and visualize results
 Game UI must be easy to learn but
 Must not tell everything that is happening inside the game
 Must not give the player the maximum control
 Mediate between the internals and the player
 Create an experience for the player that feels to him
like game play and storytelling

8. Player Centric Interface Design
 Focus on what the player needs to play the game well
 Provide smooth and enjoyable experience

9. About Innovative UI
 Innovation is good in almost all aspects of Game Design
 Theme
 Game World
 Storytelling
 Art
 Sound
 Gameplay
 Do not innovate unnecessarily when designing a new
interface
 Button assignments on controllers and keyboards

10. About Innovative UI
 Over the years
 Most genres have evolved
 a practical set of feedback elements
 Control mechanisms suited to their gameplay
 Play the games in your chosen genre
 Pay special attention to games that are widely admired as the best –
 Their UI probably helped them secure that reputation
 Adopt whichever of them is appropriate for your game
 Want to offer a new user interface for a familiar problem
 Build a tutorial level
 Test them with novice and experienced players
 Take their feedback
 Check if it’s a substantial improvement or not
 If not, go back to what works
 Allow the player to customize the interface

11. Some General Principles
 Be consistent
 Give good feedback
 Remember that the player is the one in control
 Limit the number of steps required to take an action
 Permit easy reversal of actions
 Remember game balance
 Minimize physical stress
 Don’t strain the player’s short-term memory
 Group related screen-based controls and feedback
mechanisms on the screen

12. Some General Principles
 Provide shortcuts for experienced players

13. What the Player Needs to know
 What is happening in the game world
 What they should do next
 Need to know whether their actions are leading them to
success or failure
 Information the player must know to play the game –
according to player centric view of game design
 Where am I? main view, map, audio feedback
 What am I actually 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 losing the game

14. What the Player Needs to know
 Am I making progress?
 What should I do next?
 How did I do?

15. What the Player Wants to Do
 Move
 Look around
 Interact physically with nonplayer characters
 Pick portable objects up and put them down
 Manipulate fixed objects
 Construct and demolish objects
 Conduct negotiations and financial transactions, and set numeric
values
 Give orders to units or characters
 Conduct conversations with nonplayer characters
 Customize a character or vehicle
 Talk to friends in networked multiplayer games

16. What the Player Wants to Do
 Pause the game
 Set game options
 Save the game
 End the game

17. The Design process
 Define the Gameplay Modes First
 Choosing a Screen Layout
 Telling the Player What he Needs to know
 Letting the Player Do What She wants to do
 Shell Menus

18. Design Process
 Define the Gameplay Modes First
 Once you have chosen
 Camera Model
 Interaction Model
 Gameplay for the primary gameplay mode
 You can begin to create the details of the user interface
 Choosing a Screen Layout
 General screen layout
 The visual elements that it will include
 Main view – largest
 Balance between main view and feedback elements and on-screen
control
 Not a big issue in computer or console games

19. Telling the Player what he needs to know
 Think what the player needs to know
 Apart from the current view of the game world
 What critical resources does he need to be aware of all times
 What’s the best way to make that information available to him
 Select the data from your core-mechanics that you want to show
 Choose the feedback elements most suited to display those data
 What warnings the player needs to be given
 Decide how
 New type of feedback element

20. Letting the Player Do What she wants to do

21. Shell Menus

22. Managing Complexity
 Simplify the Game
 Abstraction
 Automation
 Depth Versus Breadth
 Broad Interface
 Deep Interface
 Context Sensitive Interfaces
 Avoiding Obscurity
 Artistic Over Enthusiasm
 The pressure to reduce UI screen usage
 Developer familiarity with the material

23. Interaction Models
 Avatar Based
 Multi present
 Party-based interaction model
 Contestant model
 Desktop model

24. Camera Models
 3D Versus 2D Question
 For 2D Graphics
 1st and 3rd person perspectives will not be available
 Most games running on powerful game hardware are 3D
 Small games or games played in browsers are sometimes 2D
 First-Person Perspective
 Advantages
 Don’t display avatar – reduced development cost
 No AI to control the camera
 Players find it easier to aim the enemies
 The player may find interaction with the environment easy
 Disadvantages
 Doesn’t have the pleasure to watch himself – cannot customize looks

25. First Person Perspectives
 No body language or facial expressions
 Reduces the player’s sense of her as a distinct
character with a personality and a current mode
 Personality must be expressed in other ways
 No cinematic camera angles for dramatic effect
 Certain types of moves become difficult
 Motion sickness

26. Camera Models
 Third Person Perspective
 Challenges
 Camera Behavior when the Avatar turns
 Camera always behind
 Motion sickness
 No fun of watching his or her side and front
 Camera moves behind slowly
 Implement side view – slow camera move – image dizzying
 Super Mario 64
 Camera reorients only after the avatar stops moving
 Toy story
 Intruding Land Scape Objects
 Player adjustments to the camera

27. Camera Models
 Aerial Perspective
– Omnipresent interaction model
 Top down perspective
 Isometric Perspective
 Free roaming camera
 Aerial Perspectives

28. Visual Elements
 Main View
 Windowed Views
 Opaque Overlays
 Semitransparent Overlays

29. Feedback Elements
 Indicators
 Digits
 Needle gauge
 Power bar
 Small multiples
 Colored lights
 Icons
 Text indicators
 Mimi maps
 Color
 Character Portraits
 Screen buttons and menus
 Text
 Localization
 Typefaces and formatting

30. Audio Elements
 Sound Effects
 Vibration
 Ambient Sounds
 Music
 Dialog and Voiceover Narration
 Input Devices

31. Terminology
 Accelerometers
 GPS

32. Two Dimensional Input Devices
 Directional Pads
 Joysticks
 Mouse
 Touch Sensitive Devices

33. One Dimensional Input Devices