Example

1. Value of 1st step

Process explanation

Some explanatory words about this particular step.

Question 2/4

Headline of this step

...and here comes your wonderful content

<div>
  <ol class="p-t-30 wui-multi-step wui-multi-step--4">
    <li class="wui-multi-step__item wui-multi-step__item--visited">
      <div class="wui-multi-step__icon">
        <a class="unstyled"><i class="fal fa-user-hair-buns"></i></a>
      </div>
      <label title="Value of 1st step" class="wui-multi-step__label"><a>Value of 1st step</a></label>
    </li>
    <li class="wui-multi-step__item wui-multi-step__item--active">
      <div class="wui-multi-step__icon">
        <a class="unstyled"><i class="fal fa-starship-freighter"></i></a>
      </div>
    </li>
    <li class="wui-multi-step__item">
      <div class="wui-multi-step__icon">
        <span class="unstyled"><i class="fal fa-space-station-moon-construction"></i></span>
      </div>
    </li>
    <li class="wui-multi-step__item wui-multi-step__item--disabled">
      <div class="wui-multi-step__icon">
        <span class="unstyled"><i class="fal fa-explosion"></i></span>
      </div>
    </li>
  </ol>
  <div class="p-t-30">
    <div class="border-1 display--table w-full wizard-form">
      <div class="display--table-cell wui-bg-color--gray-95 w-1/3 v-align--top text--center p-20">
        <img alt="Process explanation image" src="https://cdn.wescale.com/wescale/wui/images/system-feedback/doing-good.svg" class="m-b-15" style="max-width: 90px" />
        <h4 class="m-b-5">Process explanation</h4>
        <p class="font-size--lg wui-color--gray-46">Some explanatory words about this particular step.</p>
      </div>
      <div class="display--table-cell wui-bg-color--white w-2/3 p-20">
        <div class="p-20">
          <p class="font-size--lg m-b-0 wui-color--gray-46">Question 2/4</p>
          <h1 class="m-b-20">Headline of this step</h1>
          <div class="row">
            <div class="col-lg-11">
              <p>...and here comes your wonderful content <i class="fa-hand-love fa-lg fa-solid wui-color--yangmei"></i></p>
              <input id="dummy-input" type="text" class="form-control" placeholder="Enter your preferred flying object">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Show source

The layout of the wizard is pretty straightforward. The shown result can be created from existing wui elements and some utils. To ensure consistency across the platform, please stick to this structure as much as possible.

Usage

Wizards are a powerful design pattern for more complex processes - especially when these processes are not commonplace for the user.
By breaking down a large process into smaller parts, each of these steps is easy to understand and requires less cognitive effort from the user. This allows the user to work more focused, which results in fewer errors. In addition, more screen real estate is available, giving room for additional information and explanations in the design.

But as helpful as wizards are, they are not appropriate for all situations. If they are used too often, they can get annoying. Especially power users with a good understanding of the domain can be slowed down in their work. If you expect some of your users to run the wizard repeatedly, consider offering them a faster alternative for entering their data.

Anatomy

Key elements

1. Use the wui-multi-step here.
2. Process explanation image. Choose a proper max-width for the image and set it as inline style.
3. Heading of the explanatory part of the wizard. (h4)
4. Text explaining what is asked in this step and why. (font-size--lg wui-color--gray-46)
5. Indicates which step (out of how many overall) the user is on. (font-size--lg m-b-0 wui-color--gray-46)
6. The main subject and the most important headline of the page. (h1)
7. This area contains any content. For better readability and visual balance we recommend wrapping the container in a col-lg-11.

Margins and widths

WUI decisions

• Navigation. There are two ways to navigate. Either via the wui-multi-step or via the main buttons. Within the sticky header the primary button always leads to the next question, and the secondary button leads to the previous one. We stick to these two navigations. There is no further navigation within the content.
• Consecutive. Since the individual steps build on each other, it is not possible to skip one or more steps. Only the next (and all previous) items are clickable.
• Dependencies. It is possible to jump back and forth between the already completed steps. However, the entries of all subsequent steps are reset as soon as the user makes a change.