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.
10. Sliders
• Adjust values with wide range.
• Numeric ranges.
• Music volume
• Often used for settings
• Analogue or Digital
11.
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
13.
14.
15. Text Fields
• User input for naming or communication
• Intuitive with PC.
• OK with iPhone
• Annoying with console
16.
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
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