Best practice: Implementing spin boxes
• Use spin boxes for a list of sequential items.
• Use drop-down lists for non-sequential items or items with irregular intervals. For a short list of non-sequential items,
you can use a spin box to provide a more interactive experience for users.
• Avoid using a spin box if several other components appear on the screen.
• Add spin boxes to dialog boxes instead of screens where possible.
• When users highlight a spin box, display three to five items vertically.
• Use an identifiable pattern for the sequence of items (for example, 5, 10, 15) so that users can estimate how much they
need to scroll to find the target item.
• Avoid making users scroll horizontally to view multiple spin boxes. If necessary, separate spin boxes into multiple fields.
Tree views
Use a tree view to display objects, such as folders, in a hierarchical manner.
Objects in the tree view are nodes. The highest node is the root node. A node in the tree can have child nodes under it. A
node that has a child is a parent node.
Users can perform the following action in a tree view:
User goal
Action using the navigation
keys
Action using a touch screen
Action using a physical
keyboard
Expand or collapse an
object with a plus sign
(+) or minus sign (-) in
a hierarchy.
Click the trackpad. Tap the object. Press the Space key.
UI Guidelines Containers and components
86