Game Design 2Lecture 4: UI Components

2013

Buttons etc.

Interaction Options

• Push Buttons

• Radio Buttons (toggle)

• Sliders

• Lists

• Text Fields

• Drop Down Menus

Radio Buttons

• Used to either

• toggle

• OR select from a group

Scroll Bars

• Used to show more data than fits in space

• Horizontal or vertical

• Often have arrows at each side to allow for more controlled scrolling

Sliders

• Adjust values with wide range.

• Numeric ranges.

• Music volume

• Often used for settings

• Analogue or Digital

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

Text Fields

• User input for naming or communication

• Intuitive with PC.

• OK with iOS or Android etc...

• Annoying with console

Expand / Contract

• Symbols used to open and close branches on a tree structure

• Familiar from Windows / Mac OS

Summary

• Each of these components has a specific place where they should be used.

• Try to use the correct UI component in your designs.

Mass Effect’s Interface

• Most of this content sourced from Krystian Majewski’s great posts at:http://j.mp/4Itnhdhttp://j.mp/6FXxR9http://j.mp/5s7At5

• Krystian Majewski’sgame Trauma is on Steam

Character & HUD

Items

Other Problems: Navigation

Navigation & Dialogue

Spelling out awful button choices doesn’t make them good

Dialogue

The point of this is not to ‘slag off ’ the Mass Effectdesign team - these are the kinds of problems that you find all over (most) games.

We want to set a higher expectation here.Everything you design MUST have a purpose.You MUST think about the user at all times.Have a good reason for your design decisions.