SlideShare a Scribd company logo
1 of 48
Download to read offline
Game Design 2
                Lecture 12: Usability, Metaphor & Layout



                            With thanks to Ed de Quincey




http://www.comu346.com                                     dfarrell@davidlearnsgames.com
What is usability?
“Usability is a quality attribute that assesses how
  easy user interfaces are to use. The word
  "usability" also refers to methods for improving
  ease-of-use during the design process.” (Nielsen,
  2003)
Attributes of usability
• Learnability: How easy is it for users to accomplish basic tasks
  the rst time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can
  they perform tasks?
• Memorability: When users return to the design after a period of
  not using it, how easily can they re-establish pro ciency?
• Errors: How many errors do users make, how severe are these
  errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
(Nielsen, 2003)
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
iPhone Keyboard
• http://bit.ly/comu346iPhoneKeyboard
Alpha / Numeric
email / URL
Web Search / Normal Search
First principles: Fitt’s Law
“The time to acquire a target is a function of the
distance to and size of the target.”
• Use large objects for important functions (Big buttons are
  faster).
• Use the pinning actions of the sides, bottom, top, and
  corners of your display: A single-row toolbar with tool
  icons that "bleed" into the edges of the display will be
  many times faster than a double row of icons with a
  carefully-applied one-pixel non-clickable edge along the
  side of the display.
  (Tognazzi, 2003)
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Always consider the user
Useful human strengths and weaknesses to consider include:
• Memory - people can remember 7 (plus or minus 2) “chunks” of
  information.
• Visual perception e.g. colour blindness
• Motor skills e.g. mouse skills
• Learning and skill acquisition
• Motivation
• User’s conceptual models
• Population stereotypes
• Human diversity e.g. accessibility issues for disabled users
Interface Metaphors
“In order to use a computer-based application in an
 effective way it is important that users acquire an
    appropriate cognitive model relating to that
                     application.”

                                 Richards et al.
         http://www.intellectbooks.com/iconic/metaphor/metaphor.htm
“The mouse is a hand and the cursor is a nger”




              http://www.brockerhoff.net/Paper2000.pdf
Metaphors in Games

• Many games don’t use ‘default’ UI styles.
• Metaphors can be used in icons as symbols
• Metaphors can also contextualise your
  interface and help with immersion
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Metaphor exercise
1. Imagine that you have been tasked with designing an in-
   game matchmaking system that lets (similarly talented)
   Xbox 720 & PS4 players compete against PC players in
   Doom 5.
2. Are there any metaphors that you could employ in the
   design to allow players to nd appropriate games?
Layout


• Some layouts feel better than others
• What makes a layout ‘feel’ good?
Rule of Thirds


• Break a screen into
  thirds (horizontally
  and vertically)
• This not only gives
  4 parts of the image
  to consider ‘important’
• It also gives 4 lines
  which can be used
  for spacing
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
• Most often used in visual arts
  (photography) but applies to interface
  layout too
Golden Section/Divine Proportion

   Phi 1.618 …
Golden Section/Divine Proportion
• Creating designs on “feeling”
  –what is that feeling?

  Phi 1.618 …
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
The DNA molecule, the program for all life, is based on the golden section. It
 measures 34 angstroms long by 21 angstroms wide for each full cycle of its
 double helix spiral. 34 and 21 are numbers in the Fibonacci series and their
           ratio, 1.6190476 closely approximates phi, 1.6180339.
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Grids
• If elements are not
  aligned, it strains the
  eye.
• Vertical / horizontal
  alignment or grid
  layouts can help

                            http://webstyleguide.com/page/grids.html
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
http://www.blueprintcss.org/
http://developer.yahoo.com/yui/grids/
http://developer.yahoo.com/yui/grids/builder/
Visual layout and elements
• Screen resolution and size of monitors
   – “image-safe area”
   – Valve do surveys - check out their data.
• Design in a style that appeals to audience’s taste
   – test the design
• Organisational / platform design conventions?
• Consistent visual identity
• Present your message efficiently and avoid clutter
• Draw attention to new or greatly changed content
• Avoid requiring users to scroll in order to determine page contents
   – the “fold” concept for web design
• Avoid requiring the use of horizontal scroll bars
• Use the top and left areas of the page for navigation and identity
Any Questions?


• Note: be prompt tomorrow

More Related Content

What's hot

Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Sachin Gowda
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bbShahid Riaz
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyDániel Góré
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
 
SELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSSELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSDhanya LK
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsAshiq Uz Zoha
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2GeneXus
 
User Interface Design-Module 4 Windows
User Interface Design-Module 4  WindowsUser Interface Design-Module 4  Windows
User Interface Design-Module 4 WindowsbrindaN
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Shane Morris
 
Web UX Landscape (and all points in between...)
Web UX Landscape (and all points in between...)Web UX Landscape (and all points in between...)
Web UX Landscape (and all points in between...)Gene Crawford
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User ExperienceAbdullah Al Nady
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionProttay Karim
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana
 

What's hot (19)

Exploring the world of UX
Exploring the world of UXExploring the world of UX
Exploring the world of UX
 
UI Design
UI DesignUI Design
UI Design
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
 
SELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSSELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWS
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
Module 1
Module 1Module 1
Module 1
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
 
User Interface design
User Interface designUser Interface design
User Interface design
 
Ux5
Ux5Ux5
Ux5
 
User Interface Design-Module 4 Windows
User Interface Design-Module 4  WindowsUser Interface Design-Module 4  Windows
User Interface Design-Module 4 Windows
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712
 
Web UX Landscape (and all points in between...)
Web UX Landscape (and all points in between...)Web UX Landscape (and all points in between...)
Web UX Landscape (and all points in between...)
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer Side
 

Similar to Games Design 2 - Lecture 12 - Usability, Metaphor and Layout

Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and MetaphorGame design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and MetaphorDavid Farrell
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityArabella David
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechZaid Haque
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2Durgesh Pandey
 
CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2Dr. Ahmed Al Zaidy
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profitpenanochizzo
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitFernando Cejas
 
CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6Dr. Ahmed Al Zaidy
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, UglyJoshua Randall
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Developmentbinuvt
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design WorkshopPatrick McNeil
 

Similar to Games Design 2 - Lecture 12 - Usability, Metaphor and Layout (20)

Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and MetaphorGame design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell Tech
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
 
Interaction design
Interaction designInteraction design
Interaction design
 
CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2
 
ICS2208 lecture1
ICS2208 lecture1ICS2208 lecture1
ICS2208 lecture1
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6
 
2nd part of Unit 1.ppt
2nd part of Unit 1.ppt2nd part of Unit 1.ppt
2nd part of Unit 1.ppt
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
 
24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly24 Hours of UX - Agile + UX: Good, Bad, Ugly
24 Hours of UX - Agile + UX: Good, Bad, Ugly
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
 
Chi overview
Chi overviewChi overview
Chi overview
 

More from David Farrell

Game design 2 (2013): Lecture 13 - Colour
Game design 2 (2013): Lecture 13 - ColourGame design 2 (2013): Lecture 13 - Colour
Game design 2 (2013): Lecture 13 - ColourDavid Farrell
 
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
Game design 2 (2013): Lecture 11 - User Feedback in Game DesignGame design 2 (2013): Lecture 11 - User Feedback in Game Design
Game design 2 (2013): Lecture 11 - User Feedback in Game DesignDavid Farrell
 
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UIGame design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UIDavid Farrell
 
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game CommunicationGame Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game CommunicationDavid Farrell
 
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game CommunicationGame Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game CommunicationDavid Farrell
 
Game Design 2 (2013): Immersion Through Game UI
Game Design 2 (2013): Immersion Through Game UIGame Design 2 (2013): Immersion Through Game UI
Game Design 2 (2013): Immersion Through Game UIDavid Farrell
 
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
 Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI DesignDavid Farrell
 
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingDavid Farrell
 
Game Design 2 (2013): Lecture 4 - UI Components
Game Design 2 (2013): Lecture 4 - UI ComponentsGame Design 2 (2013): Lecture 4 - UI Components
Game Design 2 (2013): Lecture 4 - UI ComponentsDavid Farrell
 
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.David Farrell
 
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu FlowGCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu FlowDavid Farrell
 
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13David Farrell
 
Game Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - IntroductionGame Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - IntroductionDavid Farrell
 
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)David Farrell
 
Serious games career quest
Serious games   career questSerious games   career quest
Serious games career questDavid Farrell
 
Serious games cwltgm
Serious games   cwltgmSerious games   cwltgm
Serious games cwltgmDavid Farrell
 
Mindset Training 2 - Goal Orientation
Mindset Training 2 - Goal OrientationMindset Training 2 - Goal Orientation
Mindset Training 2 - Goal OrientationDavid Farrell
 
Mindset Training 1 - what are growth and fixed mindsets
Mindset Training 1 - what are growth and fixed mindsetsMindset Training 1 - what are growth and fixed mindsets
Mindset Training 1 - what are growth and fixed mindsetsDavid Farrell
 
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data VisualisationGame Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data VisualisationDavid Farrell
 
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data VisualisationGame Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data VisualisationDavid Farrell
 

More from David Farrell (20)

Game design 2 (2013): Lecture 13 - Colour
Game design 2 (2013): Lecture 13 - ColourGame design 2 (2013): Lecture 13 - Colour
Game design 2 (2013): Lecture 13 - Colour
 
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
Game design 2 (2013): Lecture 11 - User Feedback in Game DesignGame design 2 (2013): Lecture 11 - User Feedback in Game Design
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
 
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UIGame design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
 
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game CommunicationGame Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
 
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game CommunicationGame Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
 
Game Design 2 (2013): Immersion Through Game UI
Game Design 2 (2013): Immersion Through Game UIGame Design 2 (2013): Immersion Through Game UI
Game Design 2 (2013): Immersion Through Game UI
 
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
 Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
 
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
 
Game Design 2 (2013): Lecture 4 - UI Components
Game Design 2 (2013): Lecture 4 - UI ComponentsGame Design 2 (2013): Lecture 4 - UI Components
Game Design 2 (2013): Lecture 4 - UI Components
 
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
 
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu FlowGCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
 
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
 
Game Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - IntroductionGame Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - Introduction
 
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
 
Serious games career quest
Serious games   career questSerious games   career quest
Serious games career quest
 
Serious games cwltgm
Serious games   cwltgmSerious games   cwltgm
Serious games cwltgm
 
Mindset Training 2 - Goal Orientation
Mindset Training 2 - Goal OrientationMindset Training 2 - Goal Orientation
Mindset Training 2 - Goal Orientation
 
Mindset Training 1 - what are growth and fixed mindsets
Mindset Training 1 - what are growth and fixed mindsetsMindset Training 1 - what are growth and fixed mindsets
Mindset Training 1 - what are growth and fixed mindsets
 
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data VisualisationGame Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
 
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data VisualisationGame Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
 

Recently uploaded

M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 

Recently uploaded (20)

M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 

Games Design 2 - Lecture 12 - Usability, Metaphor and Layout

  • 1. Game Design 2 Lecture 12: Usability, Metaphor & Layout With thanks to Ed de Quincey http://www.comu346.com dfarrell@davidlearnsgames.com
  • 2. What is usability? “Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” (Nielsen, 2003)
  • 3. Attributes of usability • Learnability: How easy is it for users to accomplish basic tasks the rst time they encounter the design? • Efficiency: Once users have learned the design, how quickly can they perform tasks? • Memorability: When users return to the design after a period of not using it, how easily can they re-establish pro ciency? • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction: How pleasant is it to use the design? (Nielsen, 2003)
  • 8. Web Search / Normal Search
  • 9. First principles: Fitt’s Law “The time to acquire a target is a function of the distance to and size of the target.” • Use large objects for important functions (Big buttons are faster). • Use the pinning actions of the sides, bottom, top, and corners of your display: A single-row toolbar with tool icons that "bleed" into the edges of the display will be many times faster than a double row of icons with a carefully-applied one-pixel non-clickable edge along the side of the display. (Tognazzi, 2003)
  • 13. Always consider the user Useful human strengths and weaknesses to consider include: • Memory - people can remember 7 (plus or minus 2) “chunks” of information. • Visual perception e.g. colour blindness • Motor skills e.g. mouse skills • Learning and skill acquisition • Motivation • User’s conceptual models • Population stereotypes • Human diversity e.g. accessibility issues for disabled users
  • 14. Interface Metaphors “In order to use a computer-based application in an effective way it is important that users acquire an appropriate cognitive model relating to that application.” Richards et al. http://www.intellectbooks.com/iconic/metaphor/metaphor.htm
  • 15. “The mouse is a hand and the cursor is a nger” http://www.brockerhoff.net/Paper2000.pdf
  • 16. Metaphors in Games • Many games don’t use ‘default’ UI styles. • Metaphors can be used in icons as symbols • Metaphors can also contextualise your interface and help with immersion
  • 21. Metaphor exercise 1. Imagine that you have been tasked with designing an in- game matchmaking system that lets (similarly talented) Xbox 720 & PS4 players compete against PC players in Doom 5. 2. Are there any metaphors that you could employ in the design to allow players to nd appropriate games?
  • 22. Layout • Some layouts feel better than others • What makes a layout ‘feel’ good?
  • 23. Rule of Thirds • Break a screen into thirds (horizontally and vertically)
  • 24. • This not only gives 4 parts of the image to consider ‘important’
  • 25. • It also gives 4 lines which can be used for spacing
  • 28. • Most often used in visual arts (photography) but applies to interface layout too
  • 30. Golden Section/Divine Proportion • Creating designs on “feeling” –what is that feeling? Phi 1.618 …
  • 34. The DNA molecule, the program for all life, is based on the golden section. It measures 34 angstroms long by 21 angstroms wide for each full cycle of its double helix spiral. 34 and 21 are numbers in the Fibonacci series and their ratio, 1.6190476 closely approximates phi, 1.6180339.
  • 41. Grids • If elements are not aligned, it strains the eye. • Vertical / horizontal alignment or grid layouts can help http://webstyleguide.com/page/grids.html
  • 47. Visual layout and elements • Screen resolution and size of monitors – “image-safe area” – Valve do surveys - check out their data. • Design in a style that appeals to audience’s taste – test the design • Organisational / platform design conventions? • Consistent visual identity • Present your message efficiently and avoid clutter • Draw attention to new or greatly changed content • Avoid requiring users to scroll in order to determine page contents – the “fold” concept for web design • Avoid requiring the use of horizontal scroll bars • Use the top and left areas of the page for navigation and identity
  • 48. Any Questions? • Note: be prompt tomorrow