How do you pick a UI component for your interface element?

1. 2013
Game Design 2
Lecture 4: UI Components

2. Buttons etc.

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

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

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

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

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

17. Text Fields
• User input for naming or communication
• Intuitive with PC.
• OK with iOS or Android etc...
• Annoying with console

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
• Krystian Majewski’s
game Trauma is
on Steam

25. Character & HUD

34. Items

42. Other Problems: Navigation

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

45. Dialogue

49. The point of this is not to ‘slag off’ the Mass Effect
design 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.