Four Basic UI Input Controls
And even more basic conventions to remember usage 😛🤘🏻
We interact with input controls everyday — not just on our phones, but with common everyday objects. Since babies we’ve practiced our fine motor skills—and cause and effect, for that matter—with all kinds of switches, knobs, dials, levers, hooks (you get the point)—designed for us to slide, pull, push, flick, or twist, for some effect to take place. Think of the ever-so-popular kids pop-up surprise toy, which allows those as young as 6 months to do just that — push, twist and switch.
“Our interactions with every day physical inputs have carried over to our digital devices...” — Birdy Lushlin, Design Engineer
In this article
- What is an Input Control
- Four Basic UI Input Controls
What is an Input Control?
Input controls provide physical affordances with every day objects. You most likey can find a variety of this affordances— door knobs, thermostats, and light switches—in the room you’re currently in. Simply take a look around you.
In the digital world, input controls are the interactive elements of a user interface—which users can trigger an action or modify a state.
Four Basic UI Input Controls
A few basic and very common UI input controls consist of—and certainly not limited to—checkboxes, radio buttons, toggle switches and sliders.
Checkboxes
Checkboxes allow users to select one or more items from a single option or set of options. You see single checkboxs when a yes/no choice is needed, such as in the “Remember me?” login option. And multiple checkboxes when one item or more can be selected from a set, such as adding multiple toppings to your ice cream order — thus allowing for one or more items to be selected at a time.
For checkboxes (and radio buttons) it’s easiest to follow the convention—The number of items allowed [to be selected] of the number of items offered.
If we strip that down even further, it looks something like this:
Amount allowed of amount offered.
- One of one/One of multiple/Multiple of multiple
Radio Buttons
On contrast, radio buttons allow users to select only one option from a set of options. A way to differentiate a radio button (try to follow me here) is when an radio button is selected—clicking a non-selected radio button—deselects the current item, and simultaneously selects the new option — thus allowing for only one option to be selected at a time.
Amount allowed of amount offered.
- One of multiple
Toggle Switches
Toggle switches are digital on/off switches. They prompt users to choose between two polar opposites as in true or false and should provide immediate results.
For toggle switches it’s easiest to reference an actual light switch. The only two settings for a light switch [with no dimmer] is either off or on, therefore follow the on/off formula.
- On or off
“…toggle switches should only be used when the user needs to decide between two opposing states.” — www.nngroup.com
Sliders
A slider is an input control that uses a knob or lever to control a variable, such as a dimmer on a light switch or to control the temperature of a thermostat.
The main distinction and easy way to remember the usage of a slider is when a range of value or intensity is needed — think a little, or a lot with something in between.
- Low, medium, high
Final Thoughts
Whatever you call them — Controls, inputs, selectors, buttons — humans have interacted with them in the real world, way before digital inputs were even a thing. So if you ever need to quickly remember when to use a particular input —simply interact with the everyday objects around you.
