mobile view of a wizard

Question

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.

Answer 1

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}

Answer 2

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.