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
10.
11.
12. Sliders
• Adjust values with wide range.
• Numeric ranges.
• Music volume
• Often used for settings
• Analogue or Digital
13.
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
15.
16.
17. Text Fields
• User input for naming or communication
• Intuitive with PC.
• OK with iOS or Android etc...
• Annoying with console
18.
19.
20. Expand / Contract
• Symbols used to open and close branches
on a tree structure
• Familiar from Windows / Mac OS
21.
22.
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
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.