Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Game Design 2 - Lecture 2 - Menu Flow

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

  • Login to see the comments

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>

×