KDE Visual Design Group/HIG/Layout/Wizard

Jump to: navigation, search


DRAFT

Purpose

The wizard pattern is useful for guiding the user step by step through a process of either gathering information or basic configuration of an application.

Example

Example of an app using plasma header

Guidelines

Is this the right control

  • Do not use a wizard to edit options.
  • Use a wizard to set options if actually a group of options all have to be edited at once, eg creating an account or a as first run wizard.

Behaviour

  • Input made in the wizard, should only be applied and saved after the user hits the save button
  • Where possible, the user should be allowed to jump back to previous steps by selecting the step from the list adn edit the data again
  • Where possible, the user should be allowed to quit the wizard at any time without adverse impacts.

Appearance

  • Provide a clear and easily understandable description of each step. Follow the wording guidelines.
  • In addition to Next/Previous buttons, Include a list of steps that allow the user to track the current progress.
  • The list should clearly identify the steps that have been completed and the steps that have not.
  • A wizard should not have more then 10 steps
  • On the last step, provide a clear summary of the task accomplished by the wizard and a Finish button to make it clear to the user that this is the last step.
  • The wizard is always presented in a modal dialog
  • You can either place a horizontal step list on the top of the dialog, or a vertical one at the left.


Specs

There are always three sections in the dialog

  • the header section
  • the content section
  • the footer section

Header

horizontal

Sizing of the wizard

  • the header has a height of 64px


vertical
Sizing of the wizard
  • the header has a width of 200px


Title

On the right side of the show the title of the current step. You can either show an aditional icon before the title for all steps or for none. Don't show an icon only for some.

  • the icon is 40px x 40px
  • the title has a font size of 20px and has a right margin of 16px if a icon is shown
horizontal
sizing of the title
  • the icon is placed 16px to the right and 12 px from the top
  • the title is vertical aligned in the middle of the icon, or the header, if no icon is shown


vertical
sizing of the title
  • the icon is placed 16px to the right and 16 px from the top
  • the title is vertical aligned in the middle of the icon



List of Steps

Every step has a bar, a bubble and a label, except for the first one, that does not have a bar. The default color for the bar and the bubble is TODO Completed and the current step paint the bubble and the bar in the theme.highlightColor.

  • the label has a font size of 12px
  • the bubble has is 20px x 20px


horizontal
sizing of the steps

On the right side show the list of steps.

  • the last step is placed 16px from the right
  • the bubble is placed 16px from the top
  • the bar is 60px * 4px
  • the label is placed horizontally centered below with no margin
  • the label has a max width 64 and can contain 2 lines of text


vertical
sizing of the steps

On the bottom show the list of steps.

  • the last step is placed 16px from the bottom
  • the bubble is placed 16px from the left
  • the bar is 4px * 60px
  • the label is placed vertical centered to the right with 16px margin


TODO incomplete steps


Footer

Buttons:

  • Cancel button. You should always let the user cancel the wizard
  • Next button. Display a next button for all steps, but the last one.
  • Back button. Display a back button on als steps, but the first one.
  • Save button. Display the save button on all steps where the user can end the wizard and save the data. You must show a save button on the last page.

This page was last edited on 26 January 2017, at 11:43. Content is available under Creative Commons License SA 4.0 unless otherwise noted.