3

I am working on mobile app form. Form contains 5 steps, given below- 5 step showing progress

This is for iphone 5 and will not be fit in as it is, because on portrait mode step 3 and 4 getting chopped. What is the better option to implement this? I would like to see if anyone is already implemented this for mobile devices. Help appreciated in advance.

Improve this question
3

Generally people do not have long sequential forms on a mobile device. However since the mobile is becoming feature rich in all aspects it is natural to expect that from mobile. @tohster has provided exact solution of how wizard can be implemented in mobile.

You might want to consider few changes which may free up your real estate further. These are in addition to what it already provided. Both these designs are suited for sequential flow and jumps are discouraged (UI does not provide enough action elements for that).

Further you can use horizontal swipes to navigate between steps, one at a time.

enter image description here

Needless to say that this is a quick mock up I could come up with, and is not pixel perfect. It has some issues here and there, but I hope you get the idea of what I want to convey.

Improve this answer
  • Thanks @merqri! both solutions can be utilised. I liked @merqri 3rd option. Going with that. – GirishUnde Mar 25 '15 at 5:56
3

Use design prioritization to simplify the layout.

The top priorities might be something like:

  • User must know what stage she is on.
  • User must know where she is in the overall process.

So a few resulting possibilities are:

enter image description here

enter image description here

Improve this answer
  • First option is looking better, where i can add page title on next line. But I will not be able to display all page titles and only numbers. is that appropriate? – GirishUnde Mar 9 '15 at 9:45
  • 1
    This is a mobile app so there is typically very limited space, hence the design tradeoffs – tohster Mar 9 '15 at 14:11

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.