I've got a wizard as given in the following mockup.


download bmml source – Wireframes created with Balsamiq Mockups

What would be an appropriate way to make this wizard mobile friendly. There were wizards which just shrink when it's in mobile views with just a number to represent the step without the text. What would be a better way to approach this.

2 Answers 2


The most direct approach is to stack them on top of one another, e.g 4 steps top, 3 steps bottom. If that seems a bit cluttered you might want to explore these solutions.

Solution 1

If showing all the steps is not important, then you could condense all the steps and just show the title of the current step.


download bmml source – Wireframes created with Balsamiq Mockups

Solution 2

Designate a scrollable container for the list of steps. The current step will be highlighted. User could scroll left-right to view the steps to take.


download bmml source

  • Thank you for your reply! The solution 1 was far more better than the scrollable solution! Mar 14, 2016 at 5:36

If I would get something like this to create I would approach:

If Clickable process-

I would give each step an icon with text on web view and for mobile view I would remove the text, leaving icons behind. As we all know, if every steps have any interaction, that it needs to be easily found and easy to handle. If you make it very small it will be very difficult to tap.

If it is not clickable-

We can leave a small filled circle for completed steps and unfilled circle for incomplete step and a dark highlighted color for step selected.

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.