4

Working on a mobile version of a multi-step navigation that has to go step by step in the form of a wizard.

however the local translations for some of the steps are quite long.

shortening the step names isn't an option, therefor i've come up with the following solution. similar to the android horizontal navigation pattern.

as this is not a common, would it make sense to the user

enter image description here

  • Can the user scroll the navigation component horizontally to reveal all the steps? Also, is "Long step [4]" supposed to be the active one in your mockup? – Nate Green Jan 18 '17 at 16:03
2

What you have presented is fine with one small exception:

Since the user cannot see the whole of the last step, they are likely assume that the process is longer than the steps that are visible. Give them some sort of indication of the number of steps there are as well as their progress through the steps by adding something like "Step 5 of 12" somewhere close to your visual step guide. Something like this:

enter image description here

1

Consider using icons (if possible) for each page. And if necessary current page could have the title.

enter image description here

  • 1
    Could you explain why you think this solves the OP's problem? To me, this doesn't seem to solve the problems with process length, and icons usually aren't a suitable replacement for text labels. – Nate Green Jan 18 '17 at 16:00
  • OP's problem lies at the local translations for some of the steps are quite long. The text could get too long. By replacing the text with a icon, you eliminate the problem with long steps name and also without the need to provide translation (if the icons are self explanatory enough). Hope I answer your question. This question is not about having too many steps (but the title). – SimonTeo Jan 19 '17 at 1:23
0

It can layout correctly but I would remove the dots and vertically center the text. Use ellipsis in the second line if the text doesn't fit in two lines.

enter image description here

0

I think this could make sense pending execution, and have a few thoughts to help iron it out -

  1. Does tapping "Option 1" or "Option 2" take you to the next step? Using the chevron seems a bit odd if that's the case. Typically it denotes that you're entering a subscreen, not continuing to the next step. Might consider single or multi-select UI (radio buttons, etc) with a "Next" button.
  2. What platform is this for (web, iOS, Android, or all)? There doesn't seem to be a way to exit this step wizard, or move backward.
  3. From your comments, it strikes me that step names are important. That being the case, I'm not sure stuffing the names into a horizontal stepper in the header is the right call. Two suggestions there -
    • Use icons or numbers in the horizontal stepper, and display the step title inline above the options.
    • Use a vertical stepper instead. I've attached a mockup of what that could look like. It has the benefit of always having enough room for step regardless or screen width, easily accommodate UI to move forward / back / out of the flow, and being able to accommodate any number of steps without obscuring them.

enter image description here

0

enter image description here

If the user does not need to know the name of a step until it is active, you could simply display "Step 1", "Step 2", etc at the top. Then, when the user is on the step, use the step name as a title. Ex. Step 5 of 5: Super Crazy Long Process Name

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.