0

I am working on a project that involves multiple screens and forms. There are approximately 15 screens the user will go through to complete a registration. Due to technical reasons dev team want to label one screen as 5a (driver license info) and the second as 5b (address info), user then moves to screen 6. Is it ok from a UX stand point to label multiple steps as 5a, 5b or should it just 5 and 6? thanks

2 Answers 2

0

Try to design this without step numbers. It's good to show users their progress, but after a certain point, a large number of steps can be intimidating and might lead to users putting off the task. Plus, you get into situations as you optimize your stepper where you'll be moving steps around, and you'll constantly have to be reassigning steps to step numbers.

Opt instead to show the step name with a progress indicator.


Upload Driver's License Stepless progress bar showing 62% progress

5
  • I am using a progress tracker from our design system and cannot implement a design that is not within the system. I have never seen it broken down into A and B steps that's why I am asking. The user has the ability to save their progress and leave so I don't think what you have suggested would work. thanks
    – tiki16
    Mar 29 at 17:08
  • That's good information. What does your design system say about mixing letters and numbers in step headings?
    – Izquierdo
    Mar 29 at 17:16
  • They don't say anything that is why I am enquiring. I've never seen it before. This was put forward by the developers. I will suggest we just go with numbers rather than the letters. Makes no sense to me. Devs trying to be UX designers...yeesh.
    – tiki16
    Mar 29 at 19:30
  • Yeah, it sounds like they are trying to get the UI to reflect some backend technical process that is frankly not your problem.
    – Izquierdo
    Mar 29 at 19:35
  • That is correct!
    – tiki16
    Mar 29 at 19:38
0

The stepper with a, b, c is normal in long forms, although extremely confusing. In Spain, the online declaration of workers' income is completely done based on steps with substeps. Personally, every time I do it I have no idea what step I'm in, it's only useful at the end, when the errors comes, then an alert shows in which a, b, c section the error is.

For small forms I don't think a substep within each step makes sense. In fact, there are technical alternatives, such as vertical scrolling within the same step to access its sections, in this case, yes, a, b, c.

enter image description here

If there is no other alternative and the design must be linear with steps and sub-steps, I would do my best for any user:

  1. Understand it immediately
  2. Know clearly what step they are in
  3. Understand there are steps and substeps

The only way to achieve this is through contrast, and this is where design comes. I can only suggest examples since the question doesn't have a mockup.

  • Differentiates well which is the step and which are the substeps (Size, color, figure/ground...)
  • Place the step forward or backward marks by grouping all the content:
< STEP  substep_1   substep_2   substep_3 >
  • Clearly displays the current step (Size, color, figure/ground...)

enter image description here

1
  • We don't have sub-steps defined in our design system. I think they (Devs) just want it to appear that there are fewer steps by adding subs (not good UX). The user can save and return so having the step numbers is important.
    – tiki16
    Mar 29 at 19:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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