UI Components

UI Components

Short Description

Wizard is a step process to achieve a single goal which can be broken down into dependable sub-tasks.

5.2.1 Guideline

Certain guideline must be taken care while adopting Wizard component which are listed as below.

  • Wizard heading block should take full width of the panel in which it is placed, considering the same we’ve not fixed the height & width. Height as heading title can wrap in two line if too lengthy, so designer should consider the height at the time of creating actual screens. Icon in the heading block should be at 15PX margin from the left border while the title should be at 10PX margin from the icon .
Wizard Step one parameter
Fig 5.2.1a Parameter of Wizard Process
  • The task of inputting data into the system should be parted into multiple steps. Each step is presented to the user one at a time.
  • The Wizard pattern is very similar to the tab pattern. The difference between the two is the focus. In tab user can jump to each tab, while in wizard its step process where user can not jump to next step until he completes the current step he is in. By default first step will be open while other steps will be disable.
  • Designer should break the content in logical steps in such a way, so that number of steps can be minimised. Below is explanation of wizard pattern in different steps, considering a wizard of three steps.
  • First Step

By default first step will be active. In the first step, others steps will be inactive (disable). After

Wizard Step one
Fig 5.2.1b First step of Wizard

inputting data in the first step, users navigate through the wizard by clicking navigation options “NEXT”. During this process data input can be saved as described in the implementations guideline. So user at least don't loose the data if any sudden issue occur. If it passes the validation, the first step successfully completed & it will lead user to second step.

  • Second Step

Now as the first step completed, icon and title for the step one will change and takes colors defined for the success, while second step will be an active & third step will still be in inactive (disable) state. After inputting data in second step, user navigate through the wizard either by clicking “NEXT” or “BACK”, next will take him to third step and back will take him again back to first step. If there is any validation error, the icon and title for the 2nd step will

Wizard Step two
Fig 5.2.1c Second step of Wizard

change & takes the color defined for the error state. In this case user need to fix the error and he can’t proceed to 3rd step without fixing an error. If it's a warning message, icon and title will change and takes the color defined for the warning state. In this case with user can have access to the 3rd step. If it passes the validation either by warning or successfully, it will lead user to 3rd step..

  • Third Step

Now as the first & second step completed, icon and title for the step one will change and takes colors defined either for the success or warning, while third step will be an active. After inputting the data, user will have navigation option “SUBMIT” as it's the final step, which thus indicates the completion of the wizard.

Wizard Step three
Fig 5.2.1d Third step of Wizard

5.2.2 Behaviour

Behaviour for the different states are listed as below.

  • Active State
  • Block Background: White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: SkyBlue(#2991d6)  
  • Title Color: SkyBlue(#2991d6)  
    Inactive (Disable) State:
  • Block Background: LighterGray(#f6f6f6)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: DimGray(#c5c5c5)  
  • Title Color: DimGray(#c5c5c5)  
Inactive state
Fig 5.2.2a Active/Inactive sates of Wizard
  • Success State
  • Block Background: LighterGray(#f6f6f6)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: SeaGreen(#45b6b0)  
  • Title Color: SeaGreen(#45b6b0)  
  • Error State
  • Block Background: White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: Red(#ff0000)  
  • Title Color: Red(#ff0000)  
Error success state
Fig 5.2.2b Error & Success State of Wizard
  • Warning State
  • Block Background: LighterGray(#f6f6f6)   or White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: Orange(#feaa30)  
  • Title Color: Orange(#feaa30)  
Warning state
Fig 5.2.2c Warning sates of Wizard

5.2.3 Usage

Behaviour for the different states are listed as below.

  • Use when the user needs to perform a task or a goal that dictates more than one step. I.e. An example is adding an image to a website which can include uploading the image and cropping the image; the image cannot be cropped before it is uploaded to a server.
  • Use when the user needs to perform a complex task consisting of several dependable sub-tasks.
  • Use when the user needs to input complex data into a system but the tasks is more easily achieved by splitting the process into a series of smaller and simpler steps.