Spin boxes
Use a spin box to allow users to choose an item from an ordered list easily. For example, use spin boxes to allow users to find a number or to change the day of the week.
|
User goal |
Action using the navigation keys |
Action using a touch screen |
|---|---|---|
|
Find an item in the list. |
Move a finger vertically on the trackpad. |
|
|
Choose an item from the list. |
Click the trackpad. |
Lift a finger from the screen. |
|
Move to another spin box. |
Move a finger vertically on the trackpad. |
Drag a finger vertically on the screen. |
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.
Was this information helpful? Send us your comments.