2010




       Game Design 2
       Lecture 2: Planning Menu Flow
Book: Game Interface Design
          (Fox)
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 scree...
User Centric Design

• You are (almost never) your target user
• Find out what they think of other interfaces
• Design aro...
Prioritise Design Goals

• Always conflicting factors in a design
 • fact filled educational game
 • slick interface
• Prior...
Planning a Front End

“Clear communication of the flow of the interface
    is the number one goal of a flow chart.”1




  ...
Flowcharts

• Identify how you get from A to B
• If you use good software, you can mock up
  different flows using same scr...
Flowchart Software

• Any tool that works
 • Illustrator?
 • Flash?
 • Web tools like lovelycharts.com
 • Omnigraffle
Flowchart Techniques
• 37 Signals is a company that specialises in
  well designed groupware.
• They have a simple approac...
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 elem...
Brent Fox’s Approach
• Draw a box, place title at top
• Write screen options in box
• ‘Guess’ at options in each screen
Brent Fox’s Approach
• Link screens with arrows
• Italics for important but non interactive items
  (descriptions etc)
• P...
Pop Up Menus
• Not usually standalone
• Usually appear on top of screen
• Cover only part of screen (dim)
• Modal
• Usuall...
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Upcoming SlideShare
Loading in …5
×

Game Design 2 (2010): Lecture 2 - Menu Flow

2,273 views

Published on

In this week's lecture, we looked at how to plan and design menus.

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

No Downloads
Views
Total views
2,273
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide


























  • Game Design 2 (2010): Lecture 2 - Menu Flow

    1. 1. 2010 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 lovelycharts.com • 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: http://bit.ly/37flowcharts ) • Good for Use Case modelling
    11. 11. Multiple possible user actions Multiple outcome actions
    12. 12. 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
    13. 13. Brent Fox’s Approach • Draw a box, place title at top • Write screen options in box • ‘Guess’ at options in each screen
    14. 14. 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
    15. 15. 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)

    ×