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: Menu Flow (2011)

This lecture looks at how we design menus in games.

How can you make sure your menus meet user needs and how can you avoid missing important items.

  • Login to see the comments

Game Design 2: Menu Flow (2011)

  1. 1. 2011 Game Design 2 Lecture 2: Planning Menu Flow
  2. 2. Book: Game Interface Design (Fox)
  3. 3. Why plan?• Getting it right first time saves time• Clarify your needs• Distribute work• Schedule• Get approval
  4. 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. 5. 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!
  6. 6. Prioritise Design Goals• Always conflicting factors in a design • fact filled educational game • slick interface• Prioritise simplicity or customisation?
  7. 7. Planning a Front End“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
  8. 8. Flowcharts• 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
  9. 9. Flowchart Software• Any tool that works • Illustrator? • Flash? • Web tools like • Omnigraffle
  10. 10. Flowchart Techniques• 37 Signals is a company that specialises in well designed groupware.• They have a simple approach to flowcharting• (article here: )• Good for Use Case modelling
  11. 11. use case• For example - imagine you are going to have a menu in your game to buy and sell goods in a shop.• There are many ways of doing this• so you decide what your usage-cases are: • buy item • sell item • compare items
  12. 12. • and then for each of these usage cases, follow the 37 signals approach to do a quick sketch of a possible screen flow
  13. 13. Multiple possible user actions Multiple outcome actions
  14. 14. End result• Lots of separate use-case sheets• you then take all these sheets and condense them into ‘actual menu’ decisions• you will have some conflicts if two use cases would like a certain screen to behave correctly ‘for them’• better than ‘just deciding’ because you think about the user at all times and won’t miss screens (e-Bug)
  15. 15. 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 • Should be done before you start ‘filling in the gaps’ in your menu design
  16. 16. Brent Fox’s Approach• Draw a box, place title at top• Write screen options in box• ‘Guess’ at options in each screen
  17. 17. Brent Fox’s Approach• Link screens with arrows• Italics for important but non interactive items (descriptions etc)• Padlock symbols for ‘locked’ items• Simple use of colour
  18. 18. 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)