Still looking for a sponsor Max Paulousky is looking for a Silverlight/.Net job in the Commonwealth

Share to Facebook Tweet this! Share to MySpace Share to Google Share to Live   Share via AddThis

Wizards. Prototype of sketching Wizard for WPF - 1

See the second part of the article here.


Developers implement wizards very often. This sort of application is required when customers should get simple and reliable tool to process, transform, convert, setup, transfer etc. Also, this tool should have a nice, clean, uncomplicated interface, shouldn’t it? It is especially important if users are going to use the wizard on a daily basis. So, developers should get exact and detailed information about user interface of the wizard and provide a prototype to discuss it with customers. That means, developers have to use Microsoft Expression Blend SketchFlow framework which is a great tool to prototype interactive applications.

Wizard screens for the prototype

There is a great document that describes design for wizard user interfaces. It is the Wizard 97 specification and it can be found here. This specification is so successful and useful that developers still use it.

For the prototype, I propose to create following set of screens:

  • Welcome;
  • Select options (one or more screens);
  • Confirmation;
  • Progress;
  • Finish;

Sketchflow map for the prototype

The relations between sketchflow screens

The picture above demonstrates a map of relations between screens.

So, the Welcome screen is the first (initial) one and it is connected with the Select Options screen. If the user reaches the last one, he or she has two ways – go forward to the Confirmation screen or go back to the Welcome screen.

It is natural behaviour, when the user can step back and change options/selection/ read instructions once again etc.

The wizard can have more than one Selection Options screen. For example, the user should choose great number of options and they cannot be placed on the same screen. Moreover, some options should be logically separated between different screens.

Anyway, the last Select Options screen should lead to the Confirmation screen. This one is used to summarize all information the user has selected and inform he or she that the process will start. The user can return and adjust his/her options.

The Progress screen displays current status of the operation (usually, in percents). It can be installation of software, data converting, copying, comparing etc. Based on the progress, user can predict how long the process will be. Usually, the user cannot go back or forward until the process continues. Also, in some situations he or she has no rights to interrupt the process. When the process is finished, the wizard automatically goes to the finish screen, so, the user cannot return to the Confirmation screen.

The Finish screen displays the result of the process. It should provide the way to get/view all detailed information about the process, especially when it has not been successful. In some cases, this screen can provide a way back, but not to the Confirmation or to the Progress screens. It should bring the user back to the first Select Options screen. Such behaviour can be useful if the user does some repetitive work. For example, he or she reverts financial transactions, process information chain by chain etc. So, I display that behaviour on the sketchflow map with the gray arrow.

Welcome screen

This screen should provide initial information about wizard, explanation of the wizard's task etc.

Sketching view of the Welcome screen

The main panel displays purposes, goals and additional information. Some logo or symbol is displayed In the left panel. It should symbolize the wizard. The lower panel contains navigation buttons. They can be visible/invisible or enabled/disabled depend on workflow for that screen.

The symbol is created using the Pencil tool as set of Path elements. All labels are TextBlocks with different FonSize. Buttons are corresponding sketchflow controls. The Previous button has disabled the IsEnabled property.

Select options screen

 Sketching view of the Select Options screen

This screen allows to select required options and start processing them. Also, this screen allows to go back and forward – all buttons are enabled.

The top panel displays information about the screen and what the user can do here. The main panel provides controls like grids, textboxes, checkboxes etc to allow the user enter some information.

Unfortunately, neither WPF nor Silverlight sketchflow frameworks provide datagrid control. But you can draw it manually. Add a sketchflow rectangle, create rows and columns using the pencil tool. That is it!

Next Time

You will get:

  • The rest of the screens;
  • The Information about animation;
  • The information about transition between screens
  • The full source code

See you!

This work is licensed under a Creative Commons Attribution By license.
Comments have been closed on this topic.