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.