Rules to Better Interfaces (Wizards)

Since 1990, SSW has supported the developer community by publishing all our best practices and rules for everyone to see.

If you still need help, visit Website Design and User Experience and book in a consultant.

  1. A brief introduction will give some idea about what will happen on this process and it may save user's time and effort. So, if you expect that not all users will be totally clear on what the settings do, add an introduction with a screen.

  2. Irrelevant of the type of application, "Close" should never be used in any wizard or form. 'Cancel' has a much clearer definition and should always be used to exit a process without starting it, saving it or changing it.

    See our rule Do you label your form buttons consistently? on this.

  3. When building multi-step wizards (e.g. forms, onboarding flows, or setup processes), always provide a "Back" button, unless there's a very good reason not to.

    A "Back" button gives users confidence that they can safely navigate through the steps without fear of losing progress. It helps reduce frustration and increases completion rates, especially when users need to review or correct something in earlier steps.

  4. The user's last settings should be saved and should be selected as the Default the next time a form is opened in many instances. For example:

  5. Though all software should be intuitive there are still times when users need extra guidance. Wizards are ideal especially for stepping through more complicated steps or when an application isn't going to be used regularly. E.g. SSW Code Auditor may only run once a month, during which time the user may forget all the steps involved. You can see an example of all the relevant steps at Code Auditor User Guide.

    Most importantly when a first time a user tries your program, they should be able to step through the setting up process. A wizard helps to show how your application flows from beginning to end.

  6. Many applications have a lot of content on each form. If this is the case there needs to be some way to separate certain sections. To achieve this separation Microsoft (and therefore most developers) uses separating lines, but this UI is not perfect because:

    • It creates additional visual clutter
    • It is hard to maintain
  7. In a wizard, a visual indication about the progress should be provided so users know where they are up to. It should also let the user know which steps have been completed and how far to go.

    A good way to do this is use a left navigation bar with bold on the step they are currently at.

  8. When a user reaches the last page of a wizard, a visual indication should be provided so that they know that the process has finished. We use a finish flag to do this.

  9. How you present the product information depends on the sort of application you are developing.

per page
1 - 9 of 9 items
We open source.Loving SSW Rules? Star us on GitHub. Star