game design 2 - lecture 2 - menu flow
DESCRIPTION
Lecture 2 in the Caledonian University class COMU346, Games Design 2TRANSCRIPT
![Page 1: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/1.jpg)
Game Design 2Lecture 2: Planning Menu Flow
![Page 2: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/2.jpg)
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
![Page 3: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/3.jpg)
Why plan?
•Getting it right first time saves time
•Clarify your needs
•Distribute work
•Schedule
•Get approval
![Page 4: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/4.jpg)
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
![Page 5: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/5.jpg)
![Page 6: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/6.jpg)
![Page 7: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/7.jpg)
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!
![Page 8: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/8.jpg)
![Page 9: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/9.jpg)
Prioritise Design Goals
•Always conflicting factors in a design
•fact filled educational game
•slick interface
•Prioritise simplicity or customisation?
![Page 10: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/10.jpg)
![Page 11: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/11.jpg)
Planning a Front End
•When designing your Werewolf interfaces, you all considered the layout
•But did you consider the flow of screens and menus?
![Page 12: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/12.jpg)
“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
![Page 13: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/13.jpg)
•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
![Page 14: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/14.jpg)
![Page 15: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/15.jpg)
![Page 16: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/16.jpg)
Flowchart Software
•Any tool that works
•Illustrator?
•Flash?
•Web tools like lovelycharts.com
![Page 17: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/17.jpg)
Flowchart Techniques
•37 Signals is a company that specialises in well designed groupware.
•They have a simple approach to flowcharting
•(article here: http://bit.ly/37flowcharts )
•Good for Use Case modelling
![Page 18: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/18.jpg)
![Page 19: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/19.jpg)
![Page 20: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/20.jpg)
![Page 21: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/21.jpg)
Multiple possible user actions
Multiple outcome actions
![Page 22: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/22.jpg)
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
![Page 23: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/23.jpg)
Brent Fox’s Approach
•Draw a box, place title at top
•Write screen options in box
•‘Guess’ at options in each screen
![Page 24: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/24.jpg)
•Link screens with arrows
•Italics for important but non interactive items
•Padlock symbols for ‘locked’ items
•Simple use of colour
Brent Fox’s Approach
![Page 25: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/25.jpg)
![Page 26: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/26.jpg)
![Page 27: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/27.jpg)
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)
![Page 28: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/28.jpg)
Buttons etc.
![Page 29: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/29.jpg)
Interaction Options
•Push Buttons
•Radio Buttons (toggle)
•Sliders
•Lists
•Text Fields
•Drop Down Menus
![Page 30: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/30.jpg)
![Page 31: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/31.jpg)
![Page 32: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/32.jpg)
![Page 33: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/33.jpg)
![Page 34: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/34.jpg)
Radio Buttons
•Used to either toggle
•Or select from a group
![Page 35: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/35.jpg)
Sliders
•Adjust values with wide range.
•Numeric ranges.
•Music volume
•Often used for settings
![Page 36: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/36.jpg)
![Page 37: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/37.jpg)
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
![Page 38: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/38.jpg)
![Page 39: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/39.jpg)
![Page 40: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/40.jpg)
![Page 41: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/41.jpg)
Text Fields
•User input for naming or communication
•Intuitive with PC.
•OK with iPhone
•Annoying with console
![Page 42: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/42.jpg)
![Page 43: Game Design 2 - Lecture 2 - Menu Flow](https://reader036.vdocuments.mx/reader036/viewer/2022081518/5465655aaf7959871b8b68a6/html5/thumbnails/43.jpg)
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.