5

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.

Thanks!

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.

3
  • 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, 2015 at 23:47
  • You can use the following library if you decide to code using Android Studio. github.com/shivasurya/materialsteppers Jun 19, 2016 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? Jan 13, 2017 at 18:59

3 Answers 3

1

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

0

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

0

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.