Rules to Better Interfaces (Wizards) - 8 Rules

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.

• Add screen shot with red circle at the top of the screen
• Put a description next to it

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.

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:

• Login forms - the last login name should be the Default selected and the cursor should be in the password box.

• Report criteria forms - e.g. date start and date end fields should be automatically populated

How do I store the settings?

• .NET: Use the Configuration Block to store the settings.
• Access: Use a local table called 'Control' with one record.

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.

To ensure a consistent user experience, make sure to include these visual elements:

1. Page name. It is important for the user to know which page they are currently on.
2. Page description. You should provide a short description of the task to be performed on the page.
3. Instructions. Not required for every page, this is a short description requesting the user to perform a task, for example, entering some values into a text field.
4. Company logo. This helps promote branding, however it should be inconspicuous and should not move visual focus away from the body of your application.

Technical Note: To ensure visual consistency across applications, create a base form then set the properties in that form (application icon, menu structure, button names etc.) Add any logic in for switching pages with the "Next" and "Back" buttons. Then for all projects, add a reference to that one and inherit the customized form.

In the forms in your application, instead of inheriting from System.Windows.Forms.Form (the Default), inherit from your new base form class.

public class MyForm : System.Windows.Form.Form

Figure: Default code in a Windows Form

public class MyForm : Company.Framework.BaseCustomForm

Figure: Change the form so that it inherits from your new base form classThe "finish" button denotes the end of the Wizard; by clicking on it, the user closes the Wizard.

For longer processes, the Wizard should implement "Start" and "Skip" features to guide the user through from start to finish.

Here's some more information on the Microsoft Standard for Wizard Welcome and Completion Page art and Interior Page art.

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

We recommend using bold instead of dividing lines because:

1. Bold stands out
2. Indentation is more important

3. Developers are not good at keeping the lines aligned - you could create a .NET custom control to do this - but Microsoft do not provide one

   • The dividing lines create additional visual clutter (ever so slight)
   • Each line creates additional performance implications (ever so slight)

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.

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.

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

• If the application is wizard application:The first page of the utility should introduce the user to the application. Because the first two paragraphs of this screen and the first few paragraphs of the application's website often contain virtually identical information (i.e., describing the product) it may be a good idea to make both the same. The first two paragraphs of the screen can be copied from portions of the website. A "More" hyperlink can also be added at the bottom of the screen, which will direct the user to the website where they can read further information about the application.

• If the application is not a wizard application The main menu of the application should have a Help - About... menu item. When clicked, a new form should open up containing similar information as the page in the wizard application described above.