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.

  • 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. – steppenwolf Feb 19 '16 at 12:18
  • @steppenwolf yeah I agree. I'll do something better soon and post it as an answer – vedant Feb 19 '16 at 12:47
  • 1
    but Mirands still rocks don't replace her ;) – steppenwolf Feb 19 '16 at 12:49
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

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

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.