SlideShare a Scribd company logo
Game Design 2 Lecture 2: Planning Menu Flow
Errata and News I am available: Monday, Tuesday, Friday, Thursday Welcome artists? Website still ropey but yesterday’s slides and audio are online http://www.comu346.com [email_address]
Why plan? Getting it right first time  saves  time Clarify your needs Distribute work Schedule Get approval
Helping Games Design CounterStrike ‘buy’ menu.  could have been difficult to put in later Civilization 4 Trade screen interface forces single civic change this hurts the design
 
 
User Centric Design You are (almost never) your target user Find out what they think of other interfaces Design around their preferences Test your design and iterate!
 
Prioritise Design Goals Always conflicting factors in a design fact filled educational game slick interface Prioritise simplicity or customisation?
 
Planning a Front End When designing your Werewolf interfaces, you all considered the layout But did you consider the flow of screens and menus?
“ Clear communication of the flow of the interface  is the number one goal of a flow chart.” 1 1. Brent Fox, Game Interface Design, Page 13
Identify how you get from A to B If you use good software, you can mock up different flows using same screens. Avoid having screens that you can’t get to Flowcharts
 
 
Flowchart Software Any tool that works Illustrator? Flash? Web tools like lovelycharts.com
Flowchart Techniques 37 Signals is a company that specialises in well designed groupware. They have a simple approach to flowcharting (article he re:  http://bit.ly/37flowcharts  ) Good for Use Case modelling
 
 
 
Multiple possible user actions Multiple outcome actions
37 Signals Sketching Pro’s Good for quick idea sketching Good for use case modelling Easy to see important elements without getting lost in detail
Brent Fox’s Approach Draw a box, place title at top Write screen options in box ‘Guess’ at options in each screen
Link screens with arrows Italics  for important but non interactive items Padlock symbols for ‘locked’ items Simple use of colour Brent Fox’s Approach
 
 
Pop Up Menus Not usually standalone Usually appear on top of screen Cover only part of screen (dim) Modal Usually little info Don’t usually go anywhere (dead end)
Buttons etc.
Interaction Options Push Buttons Radio Buttons (toggle) Sliders Lists Text Fields Drop Down Menus
 
 
 
 
Radio Buttons Used to either toggle Or select from a group
Sliders Adjust values with wide range. Numeric ranges. Music volume Often used for settings
 
Lists & Drop Downs Used to display ordered data Used to allow navigation Can be single or multiple select\ Either selection can move or list can move
 
 
 
Text Fields User input for naming or communication Intuitive with PC.  OK with iPhone Annoying with console
 
Notices By next week, website will have lectures & recommended reading lists online. Twitter? @comu346 If you missed yesterday’s lecture, come see me No tutorial on Thursday but there will be a lab.

More Related Content

KEY
Game Design 2: Menu Flow (2011)
KEY
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
PPT
Game Design 2: Lecture 10 - UI Layout
PPT
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
KEY
Game Design 2 (2010): Lecture 2 - Menu Flow
PDF
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
KEY
Game Design 2: Lecture 4: Game UI Components
KEY
Game Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: Menu Flow (2011)
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 10 - UI Layout
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2: Lecture 4: Game UI Components
Game Design 2: 2011 - Introduction to Game Interface Design

What's hot (20)

KEY
Game Design 2: UI in Games - Revision Lecture
PDF
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
PDF
Game Design 2 (2013): Lecture 4 - UI Components
KEY
Games Design 2 - Lecture 10 - Game Interface Prototyping
PDF
Game design 2 (2013): Lecture 14 - Revision
PPT
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
PDF
Game Design 2: Lecture 1 - Introduction
PDF
Game Design 2 (2013): Lecture 3 - Use of Text in design.
PDF
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
PDF
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
PPTX
Presentation - iOS - UI and UX - Mr. Samesh & Mr. Neetin
PPSX
Axure for dummies, that don't even know they are
KEY
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
PPTX
ICS3211 lecture 08
KEY
COMU346 Introduction To Game Interface Design
PPTX
Simulating systems: Delivering digital difference
PPTX
Sharpest tool in the box: Choosoing the best authoring tool for your learning...
KEY
Game Design 2 (2010): Lecture 3 - UI Components
PDF
Design Workshop I @ Cornell Tech
PDF
Creating an Interactive Book with iBooks Author #mLearnCon15
Game Design 2: UI in Games - Revision Lecture
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game Design 2 (2013): Lecture 4 - UI Components
Games Design 2 - Lecture 10 - Game Interface Prototyping
Game design 2 (2013): Lecture 14 - Revision
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Game Design 2: Lecture 1 - Introduction
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
Presentation - iOS - UI and UX - Mr. Samesh & Mr. Neetin
Axure for dummies, that don't even know they are
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
ICS3211 lecture 08
COMU346 Introduction To Game Interface Design
Simulating systems: Delivering digital difference
Sharpest tool in the box: Choosoing the best authoring tool for your learning...
Game Design 2 (2010): Lecture 3 - UI Components
Design Workshop I @ Cornell Tech
Creating an Interactive Book with iBooks Author #mLearnCon15
Ad

Viewers also liked (14)

PPTX
Designing Game Interfaces
PPTX
ORCID user stories and use cases
PDF
Domain-Driven User Interface Design
PPTX
Icon assignment
PPTX
조합디펜스
PDF
Game design 2 (2013): Lecture 13 - Colour
PDF
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
PDF
The Design of Everyday Games
PPTX
루시드러너 소개
PDF
4 sdlc and stlc
PPTX
원소스멀티유즈모바일게임 컨셉기획서
PDF
트레블헌터 개발기획서
PPS
8 Characteristics of good user requirements
PDF
UX Design + UI Design: Injecting a brand persona!
Designing Game Interfaces
ORCID user stories and use cases
Domain-Driven User Interface Design
Icon assignment
조합디펜스
Game design 2 (2013): Lecture 13 - Colour
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
The Design of Everyday Games
루시드러너 소개
4 sdlc and stlc
원소스멀티유즈모바일게임 컨셉기획서
트레블헌터 개발기획서
8 Characteristics of good user requirements
UX Design + UI Design: Injecting a brand persona!
Ad

Similar to Game Design 2 - Lecture 2 - Menu Flow (20)

KEY
Usability Design: Because it's awesome
PPT
Ch11
PDF
Beginner's Guide to UI Design
PPTX
Unit ii design process
PPTX
Chapter 5 human computer interaction chapter 5
PDF
IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
PDF
Modelling the User Interface
PDF
The definitive guide to Web flowcharts
PPT
03-Guidelines, Principles, and Theories.ppt
PDF
Web valley talk - usability, visualization and mobile app development
PPTX
Interaction-design-basic.pptx
PDF
User Interface design & methods for easy utilization
PPT
E3 chap-05
PPT
HCI 3e - Ch 5: Interaction design basics
PPT
E3 Chap 05 Interaction Design Basics
PPTX
Chapter 4 interaction design
PPT
Interaction design in industry
PPTX
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
PDF
Mimuw hci2021-4
PDF
Wou Intro To Usability Jandrzejewski
Usability Design: Because it's awesome
Ch11
Beginner's Guide to UI Design
Unit ii design process
Chapter 5 human computer interaction chapter 5
IA 6: Patterns for Effective Interaction Design. Jenifer Tidwell
Modelling the User Interface
The definitive guide to Web flowcharts
03-Guidelines, Principles, and Theories.ppt
Web valley talk - usability, visualization and mobile app development
Interaction-design-basic.pptx
User Interface design & methods for easy utilization
E3 chap-05
HCI 3e - Ch 5: Interaction design basics
E3 Chap 05 Interaction Design Basics
Chapter 4 interaction design
Interaction design in industry
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Mimuw hci2021-4
Wou Intro To Usability Jandrzejewski

More from David Farrell (16)

PDF
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
PDF
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
PDF
Game Design 2 (2013): Immersion Through Game UI
PPTX
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
PPT
Serious games career quest
PPT
Serious games cwltgm
KEY
Mindset Training 2 - Goal Orientation
KEY
Mindset Training 1 - what are growth and fixed mindsets
KEY
Game Design 2: Micro and Macro Data Visualisation
KEY
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
KEY
Game Design 2: Lecture 12 - Platform Specific Design
KEY
Game Design 2: Lecture 11 - Colour
PPT
Game Design 2: Lecture 8 - Semiotics and Icon Design
PPT
Game Design 2: Lecture 9 - Immersion through UI
KEY
Mindset talk
KEY
The impact of affect in serious games
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): Immersion Through Game UI
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Serious games career quest
Serious games cwltgm
Mindset Training 2 - Goal Orientation
Mindset Training 1 - what are growth and fixed mindsets
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 12 - Platform Specific Design
Game Design 2: Lecture 11 - Colour
Game Design 2: Lecture 8 - Semiotics and Icon Design
Game Design 2: Lecture 9 - Immersion through UI
Mindset talk
The impact of affect in serious games

Recently uploaded (20)

PDF
Rakshabandhan – Celebrating the Bond of Siblings - by Meenakshi Khakat
PPTX
The story of Nomuzi and the way she was living
PDF
Songlyrics.net-website for lyrics song download
PPTX
Understanding Colour Prediction Games – Explained Simply
PDF
What is Rotoscoping Best Software for Rotoscoping in 2025.pdf
PDF
Commercial arboriculture Commercial Tree consultant Essex, Kent, Thaxted.pdf
PDF
My Oxford Year- A Love Story Set in the Halls of Oxford
PPTX
wegen seminar ppt.pptxhkjbkhkjjlhjhjhlhhvg
PDF
Download FL Studio Crack Latest version 2025
PDF
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
PPTX
What Makes an Entertainment App Addictive?
PPTX
shbthd htsh htrw hw htr 5w h5e 54 y.pptx
PPTX
SPARSH-SVNITs-Annual-Cultural-Fest presentation for orientation
PPT
business model and some other things that
PDF
Apresentação2 analise estrutual.hhjghjpdf
PDF
High-Quality PDF Backlinking for Better Rankings
DOC
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请
PDF
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
PDF
MAGNET STORY- Coaster Sequence (Rough Version 2).pdf
PPTX
BULAN K3 NASIONAL PowerPt Templates.pptx
Rakshabandhan – Celebrating the Bond of Siblings - by Meenakshi Khakat
The story of Nomuzi and the way she was living
Songlyrics.net-website for lyrics song download
Understanding Colour Prediction Games – Explained Simply
What is Rotoscoping Best Software for Rotoscoping in 2025.pdf
Commercial arboriculture Commercial Tree consultant Essex, Kent, Thaxted.pdf
My Oxford Year- A Love Story Set in the Halls of Oxford
wegen seminar ppt.pptxhkjbkhkjjlhjhjhlhhvg
Download FL Studio Crack Latest version 2025
WKA #29: "FALLING FOR CUPID" TRANSCRIPT.pdf
What Makes an Entertainment App Addictive?
shbthd htsh htrw hw htr 5w h5e 54 y.pptx
SPARSH-SVNITs-Annual-Cultural-Fest presentation for orientation
business model and some other things that
Apresentação2 analise estrutual.hhjghjpdf
High-Quality PDF Backlinking for Better Rankings
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
MAGNET STORY- Coaster Sequence (Rough Version 2).pdf
BULAN K3 NASIONAL PowerPt Templates.pptx

Game Design 2 - Lecture 2 - Menu Flow

  • 1. Game Design 2 Lecture 2: Planning Menu Flow
  • 2. Errata and News I am available: Monday, Tuesday, Friday, Thursday Welcome artists? Website still ropey but yesterday’s slides and audio are online http://www.comu346.com [email_address]
  • 3. Why plan? Getting it right first time saves time Clarify your needs Distribute work Schedule Get approval
  • 4. Helping Games Design CounterStrike ‘buy’ menu. could have been difficult to put in later Civilization 4 Trade screen interface forces single civic change this hurts the design
  • 5.  
  • 6.  
  • 7. User Centric Design You are (almost never) your target user Find out what they think of other interfaces Design around their preferences Test your design and iterate!
  • 8.  
  • 9. Prioritise Design Goals Always conflicting factors in a design fact filled educational game slick interface Prioritise simplicity or customisation?
  • 10.  
  • 11. Planning a Front End When designing your Werewolf interfaces, you all considered the layout But did you consider the flow of screens and menus?
  • 12. “ Clear communication of the flow of the interface is the number one goal of a flow chart.” 1 1. Brent Fox, Game Interface Design, Page 13
  • 13. Identify how you get from A to B If you use good software, you can mock up different flows using same screens. Avoid having screens that you can’t get to Flowcharts
  • 14.  
  • 15.  
  • 16. Flowchart Software Any tool that works Illustrator? Flash? Web tools like lovelycharts.com
  • 17. Flowchart Techniques 37 Signals is a company that specialises in well designed groupware. They have a simple approach to flowcharting (article he re: http://bit.ly/37flowcharts ) Good for Use Case modelling
  • 18.  
  • 19.  
  • 20.  
  • 21. Multiple possible user actions Multiple outcome actions
  • 22. 37 Signals Sketching Pro’s Good for quick idea sketching Good for use case modelling Easy to see important elements without getting lost in detail
  • 23. Brent Fox’s Approach Draw a box, place title at top Write screen options in box ‘Guess’ at options in each screen
  • 24. Link screens with arrows Italics for important but non interactive items Padlock symbols for ‘locked’ items Simple use of colour Brent Fox’s Approach
  • 25.  
  • 26.  
  • 27. Pop Up Menus Not usually standalone Usually appear on top of screen Cover only part of screen (dim) Modal Usually little info Don’t usually go anywhere (dead end)
  • 29. Interaction Options Push Buttons Radio Buttons (toggle) Sliders Lists Text Fields Drop Down Menus
  • 30.  
  • 31.  
  • 32.  
  • 33.  
  • 34. Radio Buttons Used to either toggle Or select from a group
  • 35. Sliders Adjust values with wide range. Numeric ranges. Music volume Often used for settings
  • 36.  
  • 37. Lists & Drop Downs Used to display ordered data Used to allow navigation Can be single or multiple select\ Either selection can move or list can move
  • 38.  
  • 39.  
  • 40.  
  • 41. Text Fields User input for naming or communication Intuitive with PC. OK with iPhone Annoying with console
  • 42.  
  • 43. Notices By next week, website will have lectures & recommended reading lists online. Twitter? @comu346 If you missed yesterday’s lecture, come see me No tutorial on Thursday but there will be a lab.