I want to build an app for android and iOS that uses a five-step wizard to create an asset.

Are there any established design patterns for tablets for a wizard pattern of this sort? I was thinking perhaps tabs across the top or bottom indicating the steps, along with a progress bar. Some other options might be a swipe system - swipe to the next step or something like that.

Additionally, I'd like to know what the options are for a phone layout.

If there's a well-established pattern, it's probably better to use that.


Edit: For what it's worth, I realize that Xcode might actually provide a template for this. I will be using Phonegap, however, and as such I won't be able to use those templates.

  • Have a look at how they did this: Step Forn Wizad. It is nice because it lets you painlessly toggle between steps even on mobile viewport size. – DasBeasto Jul 24 '15 at 23:47
  • You can use the following library if you decide to code using Android Studio. github.com/shivasurya/materialsteppers – Swapnil Borkar Jun 19 '16 at 8:35
  • Can a user jump between step or is the visual representation of the steps just to inform of where they are in the process? – DarrylGodden Jan 13 '17 at 18:59

One pattern you could consider is the Wizard layout described by Oracle's Alta UI guidelines, and implemented in the Oracle JET toolkit. The iOS version looks like this:

Screenshot of a Train implemented by Oracle JET

| improve this answer | |

Instagram's App, at least for smartphones (not tablets), has a kind of wizard style get forward to complete your new Instagram picture process. See https://play.google.com/store/apps/details?id=com.instagram.android

| improve this answer | |


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |

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.