I read in another question how important order steps are to give your users a context of where they are in the order process..

I'm currently only showing the current step like (3.delivery address) at the top of the screen. but this still doesn't give enough context as in, the user doesn't know how many steps they have left before the order has been placed.

what are some good ways to achieve this without using too much space?


Consider using something like Roman Nuriks Wizard Pager

From his G+ post

" On Wizards

Entering data and filling out forms on mobile devices kind of sucks. Because of this, you generally want to put as much of the burden of data entry on yourself—the developer—as you can, and as little on the end user as possible. For example, registration forms with 10 input fields are likely to annoy users far more than those with only 2 input fields… or one… or even none (auto-fill the email and auto-generate a password!).

Having said that, there are a number of very fair use cases that require a lot of user input, or complex user input, and have potentially nontrivial consequences. For example, customizing and ordering physical goods, scheduling bank transactions, or setting up a complex app (or operating system!) for the first time.

While you can generally design single-page data entry forms for such processes, sometimes it's more effective to guide the user through the process step-by-step, explaining things along the way, and giving her a sense of comfort about her progress. It's generally also comforting to provide a 'review' step at the end, letting the user get an overview of what's about to happen before pressing the big red 'execute' button.

On Android, there hasn't been much documentation around designing wizards (something I hope we address), or great open source examples of wizards (at least as far as I know), so I'd like to offer one such 'reference' example implementation.

You can get the code here: https://github.com/romannurik/android-wizardpager

There are a few key features I'd like to call out about this implementation:

• Branching, or the ability for wizard steps to influence the availability of later steps • Allowing the user to review before committing • Allowing the user freeform navigation between wizard steps • Support for required and optional steps • Support for step classes (technically, each step is an instance of a Java class, so you can have multiple instances within the wizard) "


Using a progress bar design pattern can help your users get a sense of where they are in the process:

enter image description here

For more examples of progress bar, best practices, and what type can suit you the best, take a look at this article from Smashing Magazine: http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

If you have a lot of steps and cannot fit horizontally in mobile view, you could consider just showing 3 out of X steps:

  1. Previous Step
  2. Current Step
  3. Next Step

When user gets to the next step, simply update your progress bar to reflect the above three states. Here's an example:

enter image description here

  • Ah Nice ! Thank you, That's really interesting but Maybe fading away will Give the user the idea that the view is swipe-able ? – mars Mar 12 '14 at 0:07

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.