Ending the Painful Clicking on Steppers

by on 10/09/10 at 8:02 pm

As technology evolves, design needs to evolve with it. If design falls behind, we’ll end up underusing the technological potential given to us, instead of maximizing the full potential technology can offer. This is why it’s important to find new and better ways of designing things.

New does not necessarily imply better. When I say better, I am talking about designs with speed, power, efficiency and effectiveness. A design that encompasses all of this is a better design for users.

An example of this are stepper controls. Stepper controls have been around for a long time. They have generally looked and functioned the same way since their birth. That’s fine if they’re perfectly designed, but they aren’t. There are problems with them.

Ending the Painful Clicking on Steppers

Steppers offer users two ways 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.

Ending the Painful Clicking on Steppers

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.


Ending the Painful Clicking on Steppers Ending the Painful Clicking on Steppers

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

10 Responses to “Ending the Painful Clicking on Steppers”

  1. Erik

    Oct 10th, 2010

    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.

  2. Erik

    Oct 10th, 2010

    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.

    • anthony

      Oct 11th, 2010

      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.

  3. Jüri

    Oct 10th, 2010

    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.

  4. dave

    Oct 12th, 2010

    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 :(

  5. Zack Mazinger

    Oct 12th, 2010

    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.

  6. Justin

    Oct 30th, 2010

    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.

    • eric

      Nov 18th, 2010

      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.

    • anthony

      Nov 19th, 2010

      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.

  7. Phil

    Mar 4th, 2011

    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.

Leave a Comment