2

We have client-side validation when users fill out a form. See below:

enter image description here

The question here is: if the user answers the question, should the "!" button disappear? This button also serves as toggling on/off the error on the input.

My idea was to have it go green with a check once data is validated. This would mean that if a question is NOT required, then it should be green and checked(?). Additionally, there is a "reviewer" persona where this particular user is not filling out the form but just viewing the form to see what the user entered. In this case, it is assumed that these validation buttons should be hidden.

Another thing to notice is that the "?" is disabled when help-text is not applied to the question. Should the same pattern apply to the data validation if the question is NOT required (where the validation button is disabled?).

Would appreciate anything else you guys can point out that doesn't make sense. Thank you all.

EDIT: here is what the form input looks like when you toggle ON the form validation error:

enter image description here

EDIT AGAIN: here is how it looks based on all the information you guys have provided me. In the labels I have added what each one means.

enter image description here

  • Does the user need to click the "!" button to validate the input? What do you mean when you say the button is used to toggle the error on the input? Is the green checkmark also a button? What does clicking it do? – Andre Dickson Oct 8 '16 at 9:15
  • The user clicks the ! in order for them to see what they did wrong. It's used for more than seeing if they filled something out or not. When I say it's used to toggle the error... I mean that they can click on it to see WHAT the error is such as "the input requires 5 or higher" and the user entered 3 which is invalid. The green checkmark is also a button but does not anything. It just tells them it's validated. – bobbyo23 Oct 8 '16 at 14:08
  • @AndreDickson I added a photo of the validation toggle on state. The user does not need to click on the ! to validate the input. onBlur (tabbing) it will run the validation and if there is an error, it will show. But for a user who is coming into the form brand new, the questions that are required but not answered are technically not valid, right? – bobbyo23 Oct 8 '16 at 21:50
2

Hidden messages

Your design hides messages that the user needs to complete their task - helper text and error text. The user needs immediate access to helper text to ensure that they complete each field correctly on their first try. They also need immediate access to the error text so they can correct invalid inputs.

I don't see the usefulness of having these messages hidden by default. Forcing the user to click a button to reveal error messages is a needless source of friction. I can't imagine a scenario in which the user would find it profitable to explicitly hide these messages themselves.

The error toggle button is not a standard convention so the user will be less likely to click it. Additionally, it does not look like a button and the label ! does not communicate its functionality.

Successful validation notification

While this is commonly used for login flows, I don't see this in use for general form inputs. As Pushkar has already pointed out just skip to the next field when validation is successful. These micro-validations are of interest to your backend system but they are not that important to the user. Signalling that each field is validated when the user just wants to submit the form is unnecessary in my opinion. Additionally, validation and errors should only show after the user has provided an input.

Disabled controls

Disabling the helper text icon indicates that the function is unavailable when you are really attempting to indicate the absence of this functionality. If helper text is unavailable for a field I would remove the icon. Similarly, if you don't perform data validation on a field then no validation controls should be given.

Conclusion

  1. The error message should be immediately visible after an error has been found. The error button ! should be converted to an icon since the message toggling functionality should not be needed. It serves your accessibility requirements so there is no need to remove the icon.
  2. Consider showing the helper text below the question by default. This way the helper text will always be visible to the user while they complete the field. Also, remove the helper button/icon ? as it would only add visual noise to the form if the helper text is already immediately visible.
  3. Validation icons can be removed or at most shown temporarily when an error has been resolved. If kept, validation icons should only be shown in response to a validation performed. Questions that have not been answered should not have a validation icon.

enter image description here Suggested design before form input and validation. Helper text below field title is immediately visible, there are no validation icons and optional and required fields distinguished only by *.

suggested design after validation

Suggested design after validation performed with error message and helper text immediately visible.

  • Thanks for all the info Andre. What would be a good solution for the user to see what they missed or filled out incorrectly? Consider the situation where this is a multi page form with 50 questions. Also consider we have client-side validation. I guess I am having trouble finding a good solution to this. We also used a check and ! With color to meet some accessibility requirement. Do you think it would make more sense to just label it as a check and then appended text that says "This question has not been answered"? I also do not want to give too much noise and distraction. Thank you again. – bobbyo23 Oct 9 '16 at 5:01
  • From what you said about successful validation notification... there would be NO indication of any validation and not until they tab through an input it would provide an error icon or message? – bobbyo23 Oct 9 '16 at 5:03
  • Finally, would it make sense for the help text button to show when there is help text and so the user would need to click or hover to show help text? When no help text was added to the question, it would then not appear, correct? – bobbyo23 Oct 9 '16 at 5:05
  • @bobbyo23 I udpated the answer. – Andre Dickson Oct 9 '16 at 8:24
  • 1
    So make it obvious and say... "Hide Error", "Show Error" to clarify that it's a button as it's not a common interaction. – bobbyo23 Oct 9 '16 at 18:51
0

Why not entirely skip the 'green and checked' for the fields that are optional? That way the user focuses more on the fields that are required.

The ! should turn to green and checked once the data is found to be valid. Else, it just toggles the error when the user moves to the next field.

  • So my only concern with this is that then the toolbars could look inconsistent with some having the button and some that do not. Would that be poor design having that? Also, is it better to have something instead of the button toggle like... "This question has not been answered" or is the "!" and check (with color) enough information to guide the user? – bobbyo23 Oct 8 '16 at 22:37
  • From a consistency perspective, I would remove the green and checked from the form and let it depend entirely on the user to see the red asterisk and answer the question. When trying to submit, the ! would do alert the user that something is wrong and the field needs to be filled properly. The error message could be beside the !. This way, he/she has the chance to review multiple errors on the form. – Pushkar Bhatt Oct 8 '16 at 22:45
  • We are using client-side validation so as they tab through questions or click off, it would try to validate (prior to them clicking submit). Therefore, the icons would be dynamic in nature and provide instant feedback. I believe that the purpose of the ! or check was so that they could easily scan the page to see what is incorrect. In our purpose, these forms are generally quite long (users are building their own custom form and someone else is answering the form). Not sure if that explains anything better... – bobbyo23 Oct 8 '16 at 22:48
  • Then, your original idea behind the green and checked would work. However, I would still skip it on the optional fields. The '?' would apply to the optional fields as well in case the user wants to know more about the field. – Pushkar Bhatt Oct 8 '16 at 23:05
0

I don't think it is a "right way" to do this animation. It can be something less visible, with a smooth transition or something with a great effect.

If it is a form, something formal, the main goal will be to make the process faster and not to draw attention on the animation. The steps can be: red + "!" --> green + "!" --> green + "✓".

If the goal is to entertain the user, this can be more funny or visible, like https://codepen.io/dcarock/pen/OPqGrM or https://site.uplabs.com/posts/form-validation-interaction.

  • The OP wants to know what should happen when an error is resolved. Can you clarify why you think an animation is the approach the OP should take? – Andre Dickson Oct 9 '16 at 18:41

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.