Oops!
DOCUMENTER
Research and design of an appropriate wizard that helps the users navigate easier and have a clear overview of the process.

Research


  • Unique Wizard name and a brief statement at the start of Wizards
  • Normally max. 6 Steps (screens) without scrolling
  • Complex tasks into subtasks (and this possibly down break into subtasks), although in this way we are forced to create more screens, but these can be summarized in a parent step in the navigation
  • A "CANCEL" option
  • Offering an "EXIT" (go stored data will be lost) or "SAVE FOR LATER" option
  • No associate tasks outside the Wizards
  • Offering additional assistance (context sensitive)
  • Highlighting the progress information (progress bar, etc.)
  • Compulsory fields clearance function
  • Last Step "SUMMARIZE" with the options "FINISH" or "GO BACK / EDIT", working in more than 10 Screen necessarily with hyperlinks or navigation that makes me jump directly to individual steps.
  • Steps as disabled See has until the user performs the previous steps
  • Readability is no more than 60 characters per line

Designs

Naturally because the list of steps is more than the minimum amount for the horizontal, the list of steps is vertical and scrollable within its frame.

Oops!

Option “A” for the list of steps has the previous step darkened and the current step is shown with an arrow pointing to the body of the wizard.


Oops!

Second design for option “A” is to have the content of the wizard in a hierarchy. The subject of the task is separated from the rest of the elements.


Oops!

IOption “B” has an indicator next to each step of the wizard with three different icons for finished, current and remaining. Also, to balance the colours on the screen as well as emphasizing on the subject of the wizard, the subject is the same colour as the navigation bar and the three buttons in the bottom of each wizard step.


Oops!

Final design’s navigator has a navigator icon next to the steps as well as a progress cycle showing what percentage of the wizard has been completed so far.


Year
2016