SlideShare a Scribd company logo
2013

Game Design 2
Lecture 7: Immersion through UI

http://gcugd2.com
Sunday, 3 November 13

david.farrell@gcu.ac.uk
Reading
• Anthony Stonehouse
http://bit.ly/9isY6D

• Erik Fagerhold & Magnus Lorentzon (2009)
http://bit.ly/d0HfcW

• Gamasutra (Marcus Andrews @ EA:DICE)
http://bit.ly/9H6xuL

• SlideShare presentation from Fagerhold
http://slidesha.re/bjxr4I

Sunday, 3 November 13
Immersive UI
• Trend towards minimal HUD
• UI as transparent as possible to not distract
player

Sunday, 3 November 13
Terminology
• Diegetic: Interface included in the game world
• Non-diegetic: Interface rendered outside game
world

• Spatial: UI Elements resented in game’s 3D space
but not be an actual in-game entity

• Meta: Representations can be in game but aren’t
necessarily visualised spatially for player

Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Case Study: Far Cry 2
• Goes to great lengths to make UI diegetic
• especially hard for FPS games
• Uses in-game gadgets perform traditional
HUD roles

• map
• time
• weapon condition
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
What works?
• Novelty factor
• diging bullets out of arm
• Ubisoft promoting UI in marketing
• Interaction with NPCs
• you can see what that character is doing
• injury rescue
Sunday, 3 November 13
What doesn’t work?
• UI seems conflicted
• there are traditional non-diegetic HUD
elements such as: ammo; interaction
opportunities; health etc

Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
• The non-diegetic elements fade in and out
• Some elements of the UI don’t provide the
player with enough information

Sunday, 3 November 13
Sunday, 3 November 13
What does it mean?
• The struggles of FC2 show that it is nearly
hopeless for (realistic FPS) games to be
playable and 100% diegetic

• If you make a late decision to compliment

your diegetic components with nondiegetic, the design will suffer - best to plan

Sunday, 3 November 13
Case Study: Dead Space
• Fully diegetic interface.
• Unlike most games, they had an explicit
direction that all UI elements be ‘in the
game world’

• Fairly traditional HUD system with a twist
• all rendered as in-game holograms
Sunday, 3 November 13
Sunday, 3 November 13
• in addition to the holograms, Dead Space
also draws interface on the actual player
avatar

Sunday, 3 November 13
Sunday, 3 November 13
What works?
• Sci-Fi Fiction lends itself to diegetic UI
• “typical UI, rendered atypically”
• Perspective
• Using player avatar as a canvas is a great
way to promote immersion

• largely depending on setting & 3rd
person camera

• Preserving Functionality
• preserves functionality but adds style

Sunday, 3 November 13
What doesn’t work?
• Functionality breakdown
• the holographic 3D map failed to aid

player navigation leading to the
implementation of another,
complimentary feature - the ‘locator’ that
has a completely new diegetic spatial
method

Sunday, 3 November 13
Sunday, 3 November 13
What does it mean?
• Fairly traditional interface rendered in
novel fashion.

• May be unrealised potential benefit of
diegetic & innovative UI

• Whilst the UI may have helped in the

marketing (& sales?) its benefit to the
gameplay is subjective

Sunday, 3 November 13
Case Study: TF 2
• Uses mixed methods to communicate
• very much a “whatever works” approach

Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
Sunday, 3 November 13
What works?
• Mix of UI elements from each of the

categories provides for lots of info without
a cluttered HUD

• shows that UI components don’t need to

have an immediately obvious theme or be
immersive to work

Sunday, 3 November 13
What doesn’t work
• the mix of styles can be perceived as a bit
messy

• inconsistencies can require more cognition
from the player

Sunday, 3 November 13
What does it mean?
• TF2 has hardly any diegetic qualities but
largely succeeds in UI design.

• Shows that players will tolerate mixing
styles in an interface

Sunday, 3 November 13
Summary
• Diegetic interface elements can help to
reinforce the fiction of a game and can
help keep the player immersed.

• Diegetic elements are harder to design and
integrate than non-diegetic elements
especially in FPS games like Far Cry 2

• When there is a trade off between

immersion and functionality - functionality
must be given priority

Sunday, 3 November 13

More Related Content

What's hot (19)

PPTX
Tower Defense Generator: A Tool for Supporting Game Design Education
Jose Zagal
 
PPTX
Game design@itp v3
Emma Westecott
 
PPTX
How to deliver a game in kodu
Nour Khouja
 
PPTX
Quick prototyping (Construct 2 & Unity) by Roan Contreras
DEVCON
 
PPTX
Game programming-help
Steve Nash
 
PDF
Modes of Play: A Frame Analytic Account of Video Gaming
Sebastian Deterding
 
PDF
josephHiggins_BenchmarkPortfolioDeck
Joseph Higgins
 
PPTX
Mizzou Game Development slides September 10th
EliotProkop
 
PPTX
Phases of game development
Victor Terekhovskyi
 
PPTX
Game design at Playrix
Serbian Games Association
 
PDF
Game Design Tools: For When Spreadsheets and Flowcharts Aren't Enough
Katharine Neil
 
PDF
Video game initial plans
HarryAdkinsPenningto
 
PPTX
LAFS Game Design 1 - Dynamic Elements
David Mullich
 
PPT
Take That!: Evaluating game systems as communicative media
Gifford Cheung
 
PDF
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
David Farrell
 
PDF
Orthodoxies and technologies in game design
Katharine Neil
 
PPTX
Game design careers
Junky McJunkerson
 
PPTX
Chapt 1 (part 1) mobile apps framework and platforms
Muhd Basheer
 
PPTX
Bethesda's Iterative Level Design Process for Skyrim and Fallout 3
Joel Burgess
 
Tower Defense Generator: A Tool for Supporting Game Design Education
Jose Zagal
 
Game design@itp v3
Emma Westecott
 
How to deliver a game in kodu
Nour Khouja
 
Quick prototyping (Construct 2 & Unity) by Roan Contreras
DEVCON
 
Game programming-help
Steve Nash
 
Modes of Play: A Frame Analytic Account of Video Gaming
Sebastian Deterding
 
josephHiggins_BenchmarkPortfolioDeck
Joseph Higgins
 
Mizzou Game Development slides September 10th
EliotProkop
 
Phases of game development
Victor Terekhovskyi
 
Game design at Playrix
Serbian Games Association
 
Game Design Tools: For When Spreadsheets and Flowcharts Aren't Enough
Katharine Neil
 
Video game initial plans
HarryAdkinsPenningto
 
LAFS Game Design 1 - Dynamic Elements
David Mullich
 
Take That!: Evaluating game systems as communicative media
Gifford Cheung
 
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
David Farrell
 
Orthodoxies and technologies in game design
Katharine Neil
 
Game design careers
Junky McJunkerson
 
Chapt 1 (part 1) mobile apps framework and platforms
Muhd Basheer
 
Bethesda's Iterative Level Design Process for Skyrim and Fallout 3
Joel Burgess
 

Viewers also liked (20)

KEY
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
David Farrell
 
PPT
Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games
Electronic Arts / DICE
 
PDF
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
David Farrell
 
PDF
Game Design 2 (2013): Lecture 4 - UI Components
David Farrell
 
PDF
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
David Farrell
 
PDF
Game Design 2 (2013): Lecture 3 - Use of Text in design.
David Farrell
 
PPT
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
David Farrell
 
PDF
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
David Farrell
 
PPT
Game Design 2: Lecture 10 - UI Layout
David Farrell
 
PPTX
Mobile game design: What makes it different? v2
Devin Becker
 
PPT
Game Interface Design
Chris Castaldi
 
PPT
Game Design 2: Lecture 8 - Semiotics and Icon Design
David Farrell
 
PDF
Game design 2 (2013): Lecture 13 - Colour
David Farrell
 
PPTX
Designing Game Interfaces
Mike Jones
 
PPT
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
David Farrell
 
PPTX
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
David Farrell
 
PPT
Serious games career quest
David Farrell
 
PDF
Game design 2 (2013): Lecture 14 - Revision
David Farrell
 
PPT
Game Development Project Management/Concept
Kevin Duggan
 
PPT
Game Design: The Production Plan
Kevin Duggan
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
David Farrell
 
Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games
Electronic Arts / DICE
 
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
David Farrell
 
Game Design 2 (2013): Lecture 4 - UI Components
David Farrell
 
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
David Farrell
 
Game Design 2 (2013): Lecture 3 - Use of Text in design.
David Farrell
 
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
David Farrell
 
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
David Farrell
 
Game Design 2: Lecture 10 - UI Layout
David Farrell
 
Mobile game design: What makes it different? v2
Devin Becker
 
Game Interface Design
Chris Castaldi
 
Game Design 2: Lecture 8 - Semiotics and Icon Design
David Farrell
 
Game design 2 (2013): Lecture 13 - Colour
David Farrell
 
Designing Game Interfaces
Mike Jones
 
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
David Farrell
 
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
David Farrell
 
Serious games career quest
David Farrell
 
Game design 2 (2013): Lecture 14 - Revision
David Farrell
 
Game Development Project Management/Concept
Kevin Duggan
 
Game Design: The Production Plan
Kevin Duggan
 
Ad

Similar to Game Design 2 (2013): Immersion Through Game UI (20)

PDF
ICS3211 Lecture 10
Vanessa Camilleri
 
PDF
User Experience 4: Usable User Interface
Marc Miquel
 
PDF
Heads-up Displays: Inspiring Creative User Interfaces
Jainan Sankalia
 
PPTX
ICS3211 lecture 12
Vanessa Camilleri
 
PDF
Designing Game Interfaces
Mike Jones
 
PPT
Interface: Creating the connection
Tracie King
 
PDF
Freed d week_11 style guide_v5
Douglas Freed
 
PPTX
98 374 Lesson 03-slides
Tracie King
 
PDF
Video Game HUDs - Information Presentation and Spatial Immersion
James Babu
 
PPT
interface presentation
Stevy Southwick
 
ODP
Interface presentation
Stevy Southwick
 
PDF
"Overview and Conclusions" by Sherry Jones (August 16, 2014)
Sherry Jones
 
PDF
Interface in Game Design
Geraldo Gomes da Cruz Júnior
 
PDF
Human Computer Interaction
khairul imam
 
PPT
Scenario plan for video game development
Jeremy Pesner
 
PDF
Alternate Gaming Interfaces, Kieran Nolan, F.R.O.G. 2010
Kieran Nolan
 
PDF
Cross Reality User Experience: Taming the Wild West of VR and AR Interaction ...
Rob Scott
 
DOCX
Alternate Dimension Portal/ Test Plans
TracyWalker123
 
ICS3211 Lecture 10
Vanessa Camilleri
 
User Experience 4: Usable User Interface
Marc Miquel
 
Heads-up Displays: Inspiring Creative User Interfaces
Jainan Sankalia
 
ICS3211 lecture 12
Vanessa Camilleri
 
Designing Game Interfaces
Mike Jones
 
Interface: Creating the connection
Tracie King
 
Freed d week_11 style guide_v5
Douglas Freed
 
98 374 Lesson 03-slides
Tracie King
 
Video Game HUDs - Information Presentation and Spatial Immersion
James Babu
 
interface presentation
Stevy Southwick
 
Interface presentation
Stevy Southwick
 
"Overview and Conclusions" by Sherry Jones (August 16, 2014)
Sherry Jones
 
Interface in Game Design
Geraldo Gomes da Cruz Júnior
 
Human Computer Interaction
khairul imam
 
Scenario plan for video game development
Jeremy Pesner
 
Alternate Gaming Interfaces, Kieran Nolan, F.R.O.G. 2010
Kieran Nolan
 
Cross Reality User Experience: Taming the Wild West of VR and AR Interaction ...
Rob Scott
 
Alternate Dimension Portal/ Test Plans
TracyWalker123
 
Ad

More from David Farrell (13)

PDF
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
David Farrell
 
PDF
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
David Farrell
 
PPT
Serious games cwltgm
David Farrell
 
KEY
Mindset Training 2 - Goal Orientation
David Farrell
 
KEY
Mindset Training 1 - what are growth and fixed mindsets
David Farrell
 
KEY
Game Design 2: UI in Games - Revision Lecture
David Farrell
 
KEY
Game Design 2: Micro and Macro Data Visualisation
David Farrell
 
KEY
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
David Farrell
 
KEY
Game Design 2: Lecture 12 - Platform Specific Design
David Farrell
 
KEY
Game Design 2: Lecture 11 - Colour
David Farrell
 
KEY
Mindset talk
David Farrell
 
KEY
The impact of affect in serious games
David Farrell
 
PPT
Comu346 lecture 6 - evaluation
David Farrell
 
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
David Farrell
 
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
David Farrell
 
Serious games cwltgm
David Farrell
 
Mindset Training 2 - Goal Orientation
David Farrell
 
Mindset Training 1 - what are growth and fixed mindsets
David Farrell
 
Game Design 2: UI in Games - Revision Lecture
David Farrell
 
Game Design 2: Micro and Macro Data Visualisation
David Farrell
 
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
David Farrell
 
Game Design 2: Lecture 12 - Platform Specific Design
David Farrell
 
Game Design 2: Lecture 11 - Colour
David Farrell
 
Mindset talk
David Farrell
 
The impact of affect in serious games
David Farrell
 
Comu346 lecture 6 - evaluation
David Farrell
 

Recently uploaded (20)

PPTX
TRANSLATIONAL AND ROTATIONAL MOTION.pptx
KIPAIZAGABAWA1
 
PPTX
How to Create Odoo JS Dialog_Popup in Odoo 18
Celine George
 
PDF
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
PDF
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
PDF
Horarios de distribución de agua en julio
pegazohn1978
 
PDF
Aprendendo Arquitetura Framework Salesforce - Dia 03
Mauricio Alexandre Silva
 
PPTX
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
PDF
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
PPTX
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
PPTX
Universal immunization Programme (UIP).pptx
Vishal Chanalia
 
PPTX
Introduction to Indian Writing in English
Trushali Dodiya
 
PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
Identifying elements in the story. Arrange the events in the story
geraldineamahido2
 
PDF
Vani - The Voice of Excellence - Jul 2025 issue
Savipriya Raghavendra
 
PPTX
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
PPTX
EDUCATIONAL MEDIA/ TEACHING AUDIO VISUAL AIDS
Sonali Gupta
 
PDF
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
PPTX
Controller Request and Response in Odoo18
Celine George
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PPTX
Difference between write and update in odoo 18
Celine George
 
TRANSLATIONAL AND ROTATIONAL MOTION.pptx
KIPAIZAGABAWA1
 
How to Create Odoo JS Dialog_Popup in Odoo 18
Celine George
 
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
Horarios de distribución de agua en julio
pegazohn1978
 
Aprendendo Arquitetura Framework Salesforce - Dia 03
Mauricio Alexandre Silva
 
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
Universal immunization Programme (UIP).pptx
Vishal Chanalia
 
Introduction to Indian Writing in English
Trushali Dodiya
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
Identifying elements in the story. Arrange the events in the story
geraldineamahido2
 
Vani - The Voice of Excellence - Jul 2025 issue
Savipriya Raghavendra
 
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
EDUCATIONAL MEDIA/ TEACHING AUDIO VISUAL AIDS
Sonali Gupta
 
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
Controller Request and Response in Odoo18
Celine George
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
Difference between write and update in odoo 18
Celine George
 

Game Design 2 (2013): Immersion Through Game UI

  • 1. 2013 Game Design 2 Lecture 7: Immersion through UI http://gcugd2.com Sunday, 3 November 13 [email protected]
  • 2. Reading • Anthony Stonehouse http://bit.ly/9isY6D • Erik Fagerhold & Magnus Lorentzon (2009) http://bit.ly/d0HfcW • Gamasutra (Marcus Andrews @ EA:DICE) http://bit.ly/9H6xuL • SlideShare presentation from Fagerhold http://slidesha.re/bjxr4I Sunday, 3 November 13
  • 3. Immersive UI • Trend towards minimal HUD • UI as transparent as possible to not distract player Sunday, 3 November 13
  • 4. Terminology • Diegetic: Interface included in the game world • Non-diegetic: Interface rendered outside game world • Spatial: UI Elements resented in game’s 3D space but not be an actual in-game entity • Meta: Representations can be in game but aren’t necessarily visualised spatially for player Sunday, 3 November 13
  • 12. Case Study: Far Cry 2 • Goes to great lengths to make UI diegetic • especially hard for FPS games • Uses in-game gadgets perform traditional HUD roles • map • time • weapon condition Sunday, 3 November 13
  • 15. What works? • Novelty factor • diging bullets out of arm • Ubisoft promoting UI in marketing • Interaction with NPCs • you can see what that character is doing • injury rescue Sunday, 3 November 13
  • 16. What doesn’t work? • UI seems conflicted • there are traditional non-diegetic HUD elements such as: ammo; interaction opportunities; health etc Sunday, 3 November 13
  • 19. • The non-diegetic elements fade in and out • Some elements of the UI don’t provide the player with enough information Sunday, 3 November 13
  • 21. What does it mean? • The struggles of FC2 show that it is nearly hopeless for (realistic FPS) games to be playable and 100% diegetic • If you make a late decision to compliment your diegetic components with nondiegetic, the design will suffer - best to plan Sunday, 3 November 13
  • 22. Case Study: Dead Space • Fully diegetic interface. • Unlike most games, they had an explicit direction that all UI elements be ‘in the game world’ • Fairly traditional HUD system with a twist • all rendered as in-game holograms Sunday, 3 November 13
  • 24. • in addition to the holograms, Dead Space also draws interface on the actual player avatar Sunday, 3 November 13
  • 26. What works? • Sci-Fi Fiction lends itself to diegetic UI • “typical UI, rendered atypically” • Perspective • Using player avatar as a canvas is a great way to promote immersion • largely depending on setting & 3rd person camera • Preserving Functionality • preserves functionality but adds style Sunday, 3 November 13
  • 27. What doesn’t work? • Functionality breakdown • the holographic 3D map failed to aid player navigation leading to the implementation of another, complimentary feature - the ‘locator’ that has a completely new diegetic spatial method Sunday, 3 November 13
  • 29. What does it mean? • Fairly traditional interface rendered in novel fashion. • May be unrealised potential benefit of diegetic & innovative UI • Whilst the UI may have helped in the marketing (& sales?) its benefit to the gameplay is subjective Sunday, 3 November 13
  • 30. Case Study: TF 2 • Uses mixed methods to communicate • very much a “whatever works” approach Sunday, 3 November 13
  • 34. What works? • Mix of UI elements from each of the categories provides for lots of info without a cluttered HUD • shows that UI components don’t need to have an immediately obvious theme or be immersive to work Sunday, 3 November 13
  • 35. What doesn’t work • the mix of styles can be perceived as a bit messy • inconsistencies can require more cognition from the player Sunday, 3 November 13
  • 36. What does it mean? • TF2 has hardly any diegetic qualities but largely succeeds in UI design. • Shows that players will tolerate mixing styles in an interface Sunday, 3 November 13
  • 37. Summary • Diegetic interface elements can help to reinforce the fiction of a game and can help keep the player immersed. • Diegetic elements are harder to design and integrate than non-diegetic elements especially in FPS games like Far Cry 2 • When there is a trade off between immersion and functionality - functionality must be given priority Sunday, 3 November 13