This week's class looks at how to properly choose and use standard UI components like pulldown menus and slider bars. We also look at the UI from Mass Effect.

1. 2010
Game Design 2
UI Components

2. Errata & News
• So.. you all know Flash?
• Reminder:
• twitter - @comu346
• blog http://comu346.com

3. Buttons etc.

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

9. Radio Buttons
• Used to either
• toggle
• OR select from
a group

10. Sliders
• Adjust values with wide range.
• Numeric ranges.
• Music volume
• Often used for settings
• Analogue or Digital

12. 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

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

17. 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

20. Expand / Contract
• Symbols used to open and close branches
on a tree structure
• Familiar from Windows / Mac OS

23. Summary
• Each of these components has a specific
place where they should be used.
• Try to use the correct UI component in
your designs.

24. Mass Effect’s Interface
• Most of this content sourced from Krystian
Majewski’s great posts at:
http://j.mp/4Itnhd
http://j.mp/6FXxR9
http://j.mp/5s7At5

25. Character & HUD

34. Items

42. Other Problems: Navigation

43. Navigation & Dialogue
Spelling out awful button choices doesn’t make them good

45. Dialogue