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.
Book
Affiliate
Totally agree, badly implemented steppers is a pain in the ass and i like your solution.
But there are already many other solutions for them.
3d studio max has had the solution you propose for at least 5 years, the slider there is not visible though, you just click and drag. I even think you can drag around the screen if you hit the edge. Very good when you need a value-range of 1-10000 with high precision. A small slider can not do that. Something i haven’t seen but i imagine can be good is a circular slider, kindof like the clickwheel on an ipod.
Paint.NET also has a good solution, they don’t have steppers, they have a dropdown menu with plus/minus buttons on each side. For quick access you can see a big range of values in the dropdown, for small increments use the buttons. Holding shift while clicking does increments of 5 here which is also pretty nice.
Office 2007 has almost the same solution for font-size, dropdown together with increase/decrease buttons. Takes up a bit more space but sure hell beats oldschool steppers.
Holding down the mouse on the step-buttons usually also work for fast increments.
Using the mouse scrollwheel works in some cases too.
Oh, just remembered that the standard photo viewer in windows 7 has something similar for the zoom, pretty neat.
Also there must be some distinction so you can guess that you will get a slider, if i see a stepper i don’t even bother to try the step-buttons because i know they are so horribly slow.
Thanks for sharing those examples. Old school steppers are definitely slow. I usually just type the value I want in, but I think the sliding stepper is a good solution for adjusting values without having to highlight the value, taking your hand off the mouse and pressing a key, all of which, takes up a lot of the user’s time and energy.
I remember from some kind of music sequencer application – the stepper functionality was activated for *mouse scrollwheel* when mouse was *over the input* field.
really nice and easy to use, once you know about this behaviour. and visually really unobtrusive (as there are no extra controls), which is a value on its own.
fireworks has a slider but it’s a pain to select say 2 or 3 pixels for a stroke width when you *only* have to move the mouse 1 or 2 pixels 🙁
Interesting thought but I’m curious if you’ve done any user testing on your slider solution? Much like dave mentioned above, the sliders in fireworks are hard to make incremental adjustments and this is the inherent problem. Steppers are typically used to make small incremental adjustments which slider are not accurate at.
Use the type in box you say? Sure! but there are 2 mental models for the use of this control. Small – fast adjustments are done with step buttons, user doesn’t take his hand off mouse. Making larger adjustments users will forgo the step and use type and return key model of box.
Sorry, but I completely disagree with sliders being a better option. I find sliders to be borderline infuriating when they require even the slightest amount of granularity.
Arguing that they save a user’s time and energy by having an easier to activate control completely ignores the interaction itself. Using a slider requires focus and quite a lot of manual dexterity to get the value you want. Far more than a stepper does. Particularly if the granularity of the values is high.
Sliders can be effective controls in the right context. But a general replacement for steppers, they are not.
totally agree. there are two targeting interactions here: getting to the control, and then getting to the desired value using the control.
replacing two small targets with a single target of the same combined size isn’t much of a gain, and what it is is then blown away by providing a largish control in lieu of an infinitely sized control.
yes – once you’ve put the mouse over the stepper, the size of the stepper button is effectively infinite for operating that stepper button.
You’re right that It does require more manual dexterity if the values are highly granular. However, not if the values have a low level of granularity.
In other words, going from 0 to 20 is faster using a slider than a stepper. But going from 0 to 3 is slower using a slider. Depending on the level of granularity of your values, a sliding stepper could be faster than a normal one.
I find that a lot of steppers allow you to use the cursor keys to go up and down, which is pretty user-friendly. Photoshop is a good example of this.