7

We've been designing a registration form with 5 steps.

The form has many input fields, some required and some not.

The validation is client side and is represented with red text for errors.

I was wondering if success messages along with error messages would provide positive feedback and in some way influence the user to keep motivated.

Maybe there are other ways to do that, and maybe too many green icons in front of form fields can become quite ugly.

3
  • Interesting question. Many non computer/web skilled people say they like in our softwares, but I never dared to make it a general rule. Twitter does it for registration anyway. Apr 30, 2013 at 8:58
  • Just crossing disciplines here, but "The Validation is client side and is represented with red text for errors." can lead to security problems. Client side is great for UX, but make sure you're also doing server side for true security/validity checks. stackoverflow.com/questions/3156992/…
    – CLo
    Apr 30, 2013 at 12:45
  • Yes, i have that in consideration :) Apr 30, 2013 at 16:52

3 Answers 3

7

The user must feel that they are in control of the form and they should be aware how long the form is.

If it's a long form you can have titles at the top or the side marked as "sections" or "steps" and change the color (or change the font color)once they have been completed, like the example below that shows that the user is in screen 3.

But also you can give the user instant validations with html5 to assure that as they go they can see the mistakes and finish the form quicker (rather than clicking on "submit" and then getting the error or even worse, lose all the data they have typed because the page refreshed itself).

validation

2
3

Don't give trivial feedback, as it would take attention unnecessarily. However, there are fields that a successful input in not trivial.

One good example would be the username. When you type your new username, there's a chance it's taken. When a proper one is entered, you can indicate that the chosen username is valid.

First example Second example from twitter

And another nice example (though a bit excessive):

enter image description here

In an afterthought, after looking at the last example, the positive feedback might provide some encouragement to complete the form.

2

I would say that it's probably a good idea. If I run an installer on my OS, each step that is completed gets a verified icon filled until all steps are done. Although, notice on the screenshot that it's not a big green check box - I still get the feeling of "everything is allright".

Another advantage of this is that I can see how many steps there are to be done before the installation is done, wich makes me feel more comfortable - like I am in charge of the situation.

Installtion dialog OS X

Regarding your concerns about visual clutter, I would say that it's a matter of design. Make the design tell the user "this is done" without being intrusive.

There are some classic places where the "yes - it works" icon is used. On some sites where you are asked to enter a unique username you get that direct feedback telling you it works or it doesn't. In that case it's especially nice, since I always wonder if it's unique and it saves me some time in comparison to having to click the call to action button, just to be notified that the username was taken. The difference there, comparing to only using a red warning label if it doesn't work, is that I don't know if the site is using real time checks, so even if I don't get a warning, I can't be sure before I press the call to action button.

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.