Game Design 2 Lecture 2: Planning Menu Flow

Lecture 2: Planning Menu Flow

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 [email_address]

I am available:

Monday, Tuesday, Friday, Thursday

Welcome artists?

Website still ropey but yesterday’s slides and audio are online

http://www.comu346.com

[email_address]

Why plan? Getting it right first time saves time Clarify your needs Distribute work Schedule Get approval

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 screen interface forces single civic change this hurts the 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

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!

You are (almost never) your target user

Find out what they think of other interfaces

Design around their preferences

Test your design and iterate!

Prioritise Design Goals Always conflicting factors in a design fact filled educational game slick interface Prioritise simplicity or customisation?

Always conflicting factors in a design

fact filled educational game

slick interface

Prioritise simplicity or customisation?

Planning a Front End When designing your Werewolf interfaces, you all considered the layout But did you consider the flow of screens and menus?

When designing your Werewolf interfaces, you all considered the layout

But did you consider the flow of screens and menus?

“ 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

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

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

Flowchart Software Any tool that works Illustrator? Flash? Web tools like lovelycharts.com

Any tool that works

Illustrator?

Flash?

Web tools like lovelycharts.com

Flowchart Techniques 37 Signals is a company that specialises in well designed groupware. They have a simple approach to flowcharting (article he re: http://bit.ly/37flowcharts ) Good for Use Case modelling

37 Signals is a company that specialises in well designed groupware.

They have a simple approach to flowcharting

(article he re: http://bit.ly/37flowcharts )

Good for Use Case modelling

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 elements without getting lost in detail

Pro’s

Good for quick idea sketching

Good for use case modelling

Easy to see important elements without getting lost in detail

Brent Fox’s Approach Draw a box, place title at top Write screen options in box ‘Guess’ at options in each screen

Draw a box, place title at top

Write screen options in box

‘Guess’ at options in each screen

Link screens with arrows Italics for important but non interactive items Padlock symbols for ‘locked’ items Simple use of colour Brent Fox’s Approach

Link screens with arrows

Italics for important but non interactive items

Padlock symbols for ‘locked’ items

Simple use of colour

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)

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)

Buttons etc.

Interaction Options Push Buttons Radio Buttons (toggle) Sliders Lists Text Fields Drop Down Menus

Push Buttons

Radio Buttons (toggle)

Sliders

Lists

Text Fields

Drop Down Menus

Radio Buttons Used to either toggle Or select from a group

Used to either toggle

Or select from a group

Sliders Adjust values with wide range. Numeric ranges. Music volume Often used for settings

Adjust values with wide range.

Numeric ranges.

Music volume

Often used for settings

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

Used to display ordered data

Used to allow navigation

Can be single or multiple select

Either selection can move or list can move

Text Fields User input for naming or communication Intuitive with PC. OK with iPhone Annoying with console

User input for naming or communication

Intuitive with PC.

OK with iPhone

Annoying with console

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.

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.