1

The system is used for executing tests.

Each test has to go through a number of stages that include user interaction with the system, meaning that each step also has a dedicated screen.

We have in the system a wizard component that actually serves two purposes:

  1. Provides an indication of the current status of the test - at any given time the test is under a single status.

  2. Allows navigation between the various steps to view their contents. The user can click on a completed step to view information without changing the current test status - that is, only to watch. For example, the test can now be in Step 3 of 4 but the user may click Step 1 to see the information there - the test will still be in Step 3 but Step 1 will be active.

The dilemma: There is a potential for confusion between an active step and current test step indication, since the component is actually used both as a wizard and as a kind of tabs system.

Questions -

  1. Does anyone know of studies on using a wizard UI component to navigate in a way similar to tabs?

  2. I assume that the distinction between the two states can also be made by effective use of visual design - does anyone know good examples of visual design of such a component?

  3. Other thoughts? Alternatives?

enter image description here

Improve this question

3 Answers 3

Reset to default
4

Use matching labels and colors

Showing incomplete tasks in gray quickly highlights the tasks which are being worked on and/or complete if they are shown in a different color.

Here are a few ways to connect the user to what is selected versus done:

  • Make the color of the selected task in the timeline match the header of the area being worked on.
  • Label the task in the timeline and have it match the selected header title (also match icons for added emphasis)
  • Move the completion checkmark next to the step label
  • Show the active step number of total steps

using color and labels Source: UX Planet

Improve this answer
2
  • Thanks, but the problem was not how to distinguish between completed and current step. Its how to distinguish between selected and current steps.
    – Yoav Barak
    Commented Oct 17, 2018 at 18:38
  • In the example above it is clear the selected step is "Entity Mapping" and all data entry is for that. Are you saying the current step here could either be "Data Mapping" (running but incomplete) or "Summary" (with Data Mapping still incomplete) ? If knowing the current step is important and it could really be either of the 2 gray circles above then I would try adding a dark gray border around it the same color as the icon.
    – DaveAlger
    Commented Oct 23, 2018 at 19:15
0

From your example and question, Material Design Steppers covers your questions. It's clearly explained with examples and everything in Material Design is the product of testing.

https://material.io/archive/guidelines/components/steppers.html#

It covers your specific navigation questions.

Improve this answer
2
  • Actually - I think my case is slightly different as the test is at a certain state regardless of the active step in view. Hence the potential for confusion between active and current step. The material design concep covers cases where there is no difference between the two - when editing a prior step - this step becomes the current one so there is no discrepancy.
    – Yoav Barak
    Commented Oct 17, 2018 at 18:52
  • Oh yeah, I see that there's function design in MD Steppers. I wasn't suggesting you change how things function. Just take components from the guidelines, the parts you need and apply them to your design. Just look at their UI solutions and apply what you need where you need it, not change how everything functions.
    – moot
    Commented Oct 18, 2018 at 17:25
0

Just to close the loop - this is what I did eventually.

In the 4th example you can see the challenging state where the user is viewing a complete step (select pathway) while the test is already on the 3rd step.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.