0

I am making a 4-step wizard to create a model's profile.

This is what I have right now:

4 screenshots

There is a header with 5 stars that fill up as the user fills up their profile, and a next button that mentions the next section of the page. The user can click the button or swipe left to move forward, and swipe right to move back.

Now, I am not very happy with the way the header (especially the 5 stars widget) looks:

Should I replace it with some other form of progress indicator?

Is there a way to combine the stars and next button into a single widget, that serves the purposes:

  • Display current progress
  • An action to goto the next screen
  • Show the title of the current screen (this is missing in current version)

Any ideas, or even examples of mobile apps implementing a wizard effectively would be greatly appreciated.

3
  • Imho using stars isn't appropriate, stars serves other purposes you should use stars only when you want a user to assess something e.g. quality of the phone call or some picture, etc. Stars as a indicator of progress will mislead user. Feb 19, 2016 at 12:18
  • @steppenwolf yeah I agree. I'll do something better soon and post it as an answer Feb 19, 2016 at 12:47
  • 1
    but Mirands still rocks don't replace her ;) Feb 19, 2016 at 12:49

1 Answer 1

1

I have mocked up the most common type of wizard with progressive indicator. You might want to "gamify" your app to motivate user to complete all the steps, especially if your model profile consist more than a few steps.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
  • Yeah this looks much better +1 Only the heading is a bit misleading. Feb 20, 2016 at 6:24
  • What is this widget called- the one with lines and circles. Then I can google an implementation for it on android Feb 20, 2016 at 6:40
  • The heading shows the current step. You can try to search for wizard with progress bar.
    – adamsoh
    Feb 20, 2016 at 7:13

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.