Scribd
Upload
16 views26 pages

Lecture 09 - Game User Interface Design

Uploaded by

arj5029618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views26 pages

Lecture 09 - Game User Interface Design

Uploaded by

arj5029618
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy