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

Figure: Bad Example - This screen has no product introduction... The user is thinking ‘What is this going to do?’

Figure: Good Example - This screen has product information before the settings... With a screen capture of where it ends up

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

  

  Figure: Bad Example - Last Username is not saved

  

  Figure: Good Example - Last Username is saved

• 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.

​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.

Figure: Good Example - SSW Link Auditor Wizard's better flow of information

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 class

The "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.

Figure: Good Example - SSW Code Auditor Wizard featuring "Start" and "Skip" options

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

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)

Figure: Bad Example - This is the Tools - Options from Internet Explorer and it groups each section in a groupbox - busy UI.

Figure: Bad Example - This is the Tools - Options from Outlook and it uses dividing lines for each section.

Figure: Bad Example - This is an old screen from Code Auditor - the dividing lines are not required.

Figure: Good Example - This is the new screen from Code Auditor - the bold title and indenting are the best way to show the sections.

Figure: Bad Example - The progress bar does not indicate completed nor next steps

Figure: Good Example - This wizard form shows all steps and indicates where the user is up to

Figure: Bad Example - This is the last page of the wizard but it is not obvious because the finish flag is small and the "Next" button still enabled

Figure: Good Example - Good quality Finish flag on the last page of a wizard.

• 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.

  

  Figure: Good Example - This wizard has an information screen as the first screen

• 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.
  

  

  Figure: Good Example - Help - About... menu item opening the product information