7

I'm working on a wizard-esque form that will have multiple steps. I'd like to show that you've finished a step.

The catch is that we don't want to give the end-user the impression that the step is also valid yet, as the validation isn't happening until the last step. It may be valid, it may not be, but the step is completed for now.

I have this now:

default view:

(1) step 1...
(2) step 2...
(3) step 3...

As you complete a step, I wanted to change it to a visual state to indicate that you've completed that step. Right now I use checkmarks:

(✓) step 1 (completed)...
(2) step 2...
(3) step 3...

The concern is whether or not the checkmark is perhaps signalling 'valid' more than 'step completed'. Opinions? Maybe it doesn't matter? Any ideas on different/better icons/visuals?

If after Step 3 any step is invalid, we have the user start over. So it really doesn't matter from step-to-step which is invalid.

5

When it comes to the User, I don't believe you can differentiate between "complete" and "valid". Complete is complete. Filled out, valid, items attached, user authenticated, whatever.. from the User perspective.

I'm also not a fan of validating a series of screens all at the end. Studies we did showed users got frustrated thinking they're finally through and being sent back to step 1. Though, to be fair, the testing we did was on a form that needed information on hand for initial screen and a large % had "closed" this information once they made it to new screen. This testing may not be valid in your case because of this need for "data on hand".

I'd be honest and add a "Step 4: Validation" Then you can check them off if you want.

  • I agree. however, this is probably a unique situation. This is a log in process. There are very specific reasons to not indicate any specific one of them is valid, but I still feel strongly that people should be aware of the number of steps ahead of them. – DA01 Jul 30 '10 at 20:08
  • 1
    I like the Idea of adding a validation step. It's honest and transparent for the user. – Lisa Daske Aug 2 '10 at 13:59
2

As a general point - in my experience users find multi-page forms that do not validate as you go extremely frustrating. I'd revisit idea if at all possible... Maybe you can go into the reasons why it's necessary and folk will be able to come up with some alternatives.

That said...

If the point is to indicate progress - could you do that will something else rather than a per-field indicator? A countdown of fields left to go? A progress bar?

  • It will hit the server each time (AJAX update) but we're not going to have them actually go to multiple pages. The form is literally 3 fields, so a progress bar seems overkill but it's definitely something to consider. In fact, perhaps we simply don't need to indicate it with additional visuals...the mere act of enabling each field one-by-one is perhaps enough. – DA01 Jul 31 '10 at 21:46
  • 1
    I think with only three fields then any kind of indicator is overkill. Surely it should be obvious? – adrianh Aug 1 '10 at 10:44
0

A combination of inline validation and contextual summary validation banner could be used. As the user goes through each field, the moment focus is shifted from a particular field the validation should happen. not while typing as it may be too early or not at the end of the form. timing is important. you can prevent most errors at the source using inline field validations with hint texts, input masking etc. and the server side errors can be validated at the end and inform the user through a summary validation banner with hyperlinks that takes the user to that exact location of the error field. In my opinion, you don't need to show any graphical element to the user once he fills out a field. User doesn't care about the difference between the errors and exceptions anyway.

UK design system has a section about this. https://govuk-elements.herokuapp.com/errors/

0

Creating wizards are usually the way to go provided you the "tech" to validate it. As the user does not care about the nuances of validated vs completed. Considering that this is a special case. I suggest you combine all the wizards in a single page and use a full page scroll (please don't use accordions as this might ruin the experience with the added effort to open and close it.) Attaching an article that highlights a similar use case.

https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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