0

I'm currently pursuing studies in UX design, and our task is to develop an application that facilitates communication between craftsmen and individuals.

For the registration process, we have opted to use a stepper. I'm interested in knowing the best practices for action buttons that enable users to navigate to the next or previous step.

Our instructor has suggested that we should include the name of the current step in the "Next step" button, such as "Next step: Personal information," but I haven't seen this in any application before. Can you confirm whether this is a recommended best practice?

enter image description here enter image description here

Thank you for your feedback :)

2 Answers 2

1

Whenever I get feedback like that - just a solution with no problem definition - I usually start with trying to figure out, what is it that they're trying to solve? Because it might be that there's a better solution for that problem that they don't realise, but you might.

Are they afraid users won't know or be confused about what the next step is? Why? Isn't subheader at the top insufficient?

It is usually a good idea of additional information on the button as a way to reassure user of what they're doing (for example, when deleting 7 items from the list of 20, you could go "Delete 7 items" to let the user confirm that they really are going to do what they're trying to do). But your case doesn't seem like it's a necessity, especially since it doubles the information about next step on such a small screen.

In any case, if it's an absolute necessity, you could consider not putting the name of the next step as a part of Button's label, but put it in smaller, darker font, below the label, as a kind of sublabel inside the button.

P.S.: Those extra long labels are always a pet peeve of mine - why say "Next step: information about your company" instead of "Next step: Your company"?

0

Your instructor is correct, it's one of the accepted best practices for buttons.

You can read more about it in this article and this article from which I took the following part:

enter image description here

Label buttons with what they do.

Some users do read those labels, so help them by writing button labels that clearly explain what each button does.

The other day, I was anxiously trying to upload a presentation to a Dropbox account. Up popped the message shown in Figure 11. It offered me a single button labeled Awesome! What was that supposed to mean? What did the button do? How could I fulfill my goal of getting that presentation to where it needed to be?

This illustrates a violation of the best practice: Label buttons with what they do.

Most of us have experienced wholly unwelcome message boxes that tell us about some drastic and horrible error—and expect us to click OK. It’s not OK, and I don’t want to click OK after receiving such bad news.

We certainly can’t guarantee that users will read the labels on buttons. In my presentation, I referred to three studies that showed, if you put the wrong button in the line of fire, some users won’t read the button’s label and will click the button. But the two survey studies also showed that some users do read those labels, so help them by writing button labels that clearly explain what each button does.

And if you find yourself in one of those arguments about what exactly the action of, say, Cancel should be on a dialog box—remember that you ought to be labeling the button with what it does, not trying to build an action that corresponds with the label that a button happens to have.

Also, you'll notice that this site, where you're writing this question, uses clearly labeled buttons.

Now, steppers are special elements in themselves since users expect to move to the next step. But consider the previous steps. Let's say the user wants to change something in a previous step. Wouldn't it be more useful to clearly label which step needs to be visited? This is especially true for steppers that allow information to be completed in a non-linear way (sometimes called parallel steppers as well).

However, there's a caveat: if you need the previous steps and require two buttons for previous and next, it might not work well on mobile. Therefore, you must keep that in mind as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.