2

I'm trying to create a meal ordering process which is split across 5 steps. I wanted to know what might be a good way to design a stepper pattern for mobile.

After researching i have narrowed down to 4 options

1) Compress the step circles and text to fit in line: readability problems, too cluttered hence going to ignore it.

2) Vertical stepper: This would be a good option but some of the steps are too "tall" for my use case and will be even "taller" on mobile hence, navigating amongst steps will not be very great as pointed out in this answer too.

3) Step X of Y pattern: This is a good alternative but a few problems here are that the user can't see all the steps and navigating directly through steps is problematic

4) Horizontal scrolling of the steppers: Apart from the scrolling i don't see any problems with this approach but i wanted to know if there is some user research on this specific topic.

So i'm unsure between approach 3 and 4 and would greatly appreciate if someone could guide me or propose an alternative that could solve the steps problem.

1

In my website, I would use some of the alternatives below:

Aletrnative 1:

Something that works like pagnation. Basically, I will show just 2 steps at first step and last step and 3 steps for others.

See an example:

  • step 1: Current Step > Next step
  • step 2: First Step > Current Step > Next step > ...
  • step 3: ... > Last Step > Current Step > Next Step > ...
  • step 4: ... > Last Step > Current Step > Next Step > ...
  • step 5: ... > Last Step > Current Step

Of course, you need to be creative working with it and you can put any text there.

Aletrnative 2:

enter image description here

Aletrnative 3:

enter image description here

Aletrnative 4:

enter image description here

Aletrnative 5:

I added another option where you can add some bar like this 4th example and change "< 520" for the title of the current step.

enter image description here

I hope that is useful and I had understood what you need.

  • I did try out the alternatives but 5 steps with text don't really fit without cramming it up. Other option as you suggested would be to have only the current step's text but if i enable back navigation from the steps then there won't really be enough tap target. Also the alternative 1 is what i was wondering but with horizontal scroll. Have you ever tried a horizontal scroll step left counter? For now i have simply gone for the Step X out of Y with the current step text. – Saurav Seth Apr 22 at 15:02
  • @SauravSeth Could you please insert your template here? Then I can try to help you how to do it. – BraDev Apr 26 at 14:24
0

You can try to use as an alternative the material Design tabs as a reference. You can hide some unused steps but if user swipe, then he can see it.

See image example and see more in https://material.io/design/components/tabs.html#usage

enter image description here

OR like I had used on my last website. you can insert a box over the trackbar with all information.

enter image description here

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.