Game Design 2 - Lecture 2 - Menu Flow

3,969 views

Published on

Lecture 2 in the Caledonian University class COMU346, Games Design 2

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,969
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
114
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Game Design 2 - Lecture 2 - Menu Flow

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

×