Steppers are a user interface control that offer users a way to increase and decrease values. They can type the value they want in the text box, or they can click the up and down buttons. The good thing about them is that they’re versatile because they allow users to use either their keyboard or mouse to type in or click to get the value they want. The bad thing is that clicking to get the value you want is painful.
The up and down buttons on steppers are tiny. Clicking on one requires accuracy and precision with the mouse. This uses up a lot of the user’s time and energy. This also makes the arrows hard to distinguish, especially if you have bad eyesight. Sometimes the values increase and decrease by fixed values. This gives users less flexibility in picking their values, and forces them to type the value they want in the text box.
As you can see, a normal stepper is not very efficient or effective for users. In order to make it better, it must evolve from a stepper to a sliding stepper.
A sliding stepper combines the stepper and the slider together. Instead of offering users two tiny buttons for adjusting values, it only offers one button. This makes the button bigger, easier and faster to click. The user doesn’t have to worry about whether they clicked the up or down button because it’s all one button. When they click the button, it opens up a vertical slider.
The user can move the slider’s thumb up or down to increase or decrease values. The values are no longer fixed, giving users more flexibility in picking their values. Increasing and decreasing values are now faster and easier for users because instead of clicking, they’re sliding. When users are sliding, they get strong up and down directional cues. When users are clicking, the directional cues aren’t strong at all.
The sliding stepper offers a lot of benefits to users. It’s a step up from the stepper because it’s faster, stronger, easier and better. The stepper is like using a staircase to get to your destination. The sliding stepper is like using an elevator.