SE404 Game Design and Development
Lecture 09– Game User Interface Design
Dr Eng. Bryar Hassan
Assistant Professor
bryar.ahmad@ukh.edu.krd
Office number: G1
Content
• Principles of UI Design
• Design process
• Simplify Game UI
• Interaction models
• Camera models
• Visual elements
• Feedback Elements
• Audio elements
• Navigation mechanisms
2
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
3
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 action 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
4
Principles of UI Design
• Consistent style and functionality
• Immediate feedback
• Limit number of steps for action
• Undo
• Minimize physical stress
• Don’t overload the player’s short-term memory
• Group controls on the screen
• Shortcuts
5
UI Design Process
• Define gameplay modes
• Choose screen layout
• Select visual elements
• Define control mechanism
• Shell Menus
6
UI Design Process / Define Gameplay Modes
• Define gameplay modes first
• Then, customize it (customization, story telling, …) later
• Gameplay - What the player has to do?
• Camera mode
• Interaction mode
• How game is moving from mode to mode?
• Modes share elements
• Visual elements
• Controls
• Menus
• Input devices 7
UI Design Process/ Choose Screen Layout
• Main view - game world
• On screen controls
• Feedback elements
8
UI Design Process/ Select Visual Elements
• Tell the player what he needs to know
• What part of game world?
• Information about resources
• Feedback elements
9
UI Design Process/ Select Visual Elements (Cont.)
• Players need to know:
• Location
• Action
• Challenge
• Success or failure
• Resources
• Progress
• How big is the danger of failure?
• What is next?
10
UI Design Process/ Define Control Mechanism
• Let player do what s/he wants to do
• Key actions (for challenges)
• Feedback to actions
• Input devices
11
UI Design Process/ Define Control Mechanism (Cont.)
• Players Want to:
• Move , look around and interact
• Use objects
• Manipulate objects
• Construct and demolish objects
• Financial transactions
• Give orders
• Customize
• Talk with players
• Change Options
• Pause, Save, Quit
12
UI Design Process/ Shell Menus
• Start, configure, save, load, close
• Before / After play
• One click away
• First thing the player see
• Last thing the designer plan
13
Simplify Game UI
• Less accurate operations
• Less functions - e.g. no fuel consumption in racing game
• Automation - e.g. gear shift
• Broad interface - e.g. plane cockpit
• Deep interface - hierarchical menus
• Context sensitive interface - e.g. content sensitive pointer
14
Interaction Models
• Avatar-based
• Multi-present
• Party-based
• Contestant
• Desktop
15
Camera Movement
• Dolly - forward - backward
• Truck - side scrolling game
• Pan - swivels
• Tilt - look up - down
• Crane
• Roll
16
Camera Models
• 2D and 3D
• 1st person
• 3rd person
• Aerial Perspectives
17
Camera Models/ 2D Versus 3D
• 1st and 3rd person perspective are not available
• Most games running on powerful game hardware are 3D
• Small games and games played in browser are sometimes 2D
18
Camera Models/ 1st Person Perspective
• Advantages
• Do not display avatar – reduced development cost
• No AI to control the camera
• Players find it easier to aim the enemies
• The play may find interaction with the environment easy
• Disadvantages
• Does not have the pleasure to watch himself/herself
• Cannot customize looks
• No body language or facial expression
• Certain types of moves become difficult
19
Camera Models/ Third Person Perspective
• Camera moves behind slowly
• Camera orients only after the avatar stops moving
• Camera behavior when avatar turns
• Always turning where avatar looks
• Camera turns after 2 seconds
• Camera turns when avatar stops
• Influenced by landscape objects
• Semi transparent object
• Crane camera up and tilt down
• Semi transparent head
20
Camera Models/ Aerial Perspective
• Omnipresent interaction model
• Top-down perspective
• Isometric perspective
• Free roaming camera
21
Visual Elements
• Main view - game world
• Feedback elements – indicators and maps
• Character portraits
• Screen buttons and menus
• Text
22
Feedback Elements
• Digits - large value, small area
• Needle gauge - large area, easy to read
• Power bar
• Small image repeated multiple times
• On/off lights
• Icons
• Text indicators
• Mini map
• Radar screen
• Color 23
Audio Elements
• Sound effects
• Vibration
• Background sound
• Music
• Dialogue and voice over narration
24
Navigation Mechanisms
• Screen oriented navigation
• Top-down and isometric perspectives
• 2D side scrolling games
• Avatar oriented navigation
• Touchpad for movement
• Mouse for camera
• Flying
• Point and click navigation
25
Thank You
