Form validation and 'Save' button color

Question

I'm displaying input validations on my form with a (!) (a white exclamation sign inside a red circle). Is it ok to make the Save button red (not as violently red as the circle, but some soft red color) until all errors are cleared?

If the user presses the save button when there are errors in the form (and thus the button is red), the application automatically focuses the first error field it encounters and shows the validation error balloon.

Is my approach right from a UX perspective? what other visual indications could be applied to the save button if not?

Edit: To clarify myself, the button turns "normal" when there are no more errors to correct. I has the same style and color as the rest of the buttons in the application, and only becomes red IF there are errors, which actually prevents saving.

Edit 2: I should have mentioned I'm using WPF. All these behaviors mentioned occur in real time when there is a validation error in the form, which is also validated in real time as the user inputs the data, so

As soon as you hit the backspace key and leave a required field blank (fo example) the following occurs:

1 - the (!) sign is immediately drawn at the side of the problematic field.

2 - a red callout balloon appears above the (!) sign containing a description of the error (such as "This field is mandatory.")

3 - The Save button becomes red.

Then, if the user presses the save button while in this state:

1 - The keyboard focus will be immediately directed to the problematic field.

2 - The transition of that field from non-focused to focused makes the Balloon animation to execute again, therefore the balloon appears to "blink" once.

3 - The (!) sign remains there (at the side of the problematic field), and it is not removed until the correction is made.

Then, finally when all fields are corrected:

1 - The Save button recovers the normal button chrome (light gray)

2 - all (!) signs have already dissapeared from the screen as the user corrected the errors on each.

3 - Balloons are directly linked to keyboard focus and error state, so if there is no error state there is no balloon.

Answer 1

I do not recommend it for a few reasons. 1. You are employing a UX pattern where and error appears next to an element that needs attention. By changing the save button, you potentially imply that there is something wrong with the button too.

1. What do you intend to do when the user corrects all the validation errors? Turn the button blue again? Can you manage that state change consistently throughout the site? Does it serve you to do so? What if they miss a correction? -> the button remains red and they don't know what to do! It promotes the user togive up.

2. The color change will be associated with the click. It may distract the users from the errors you point out elsewhere.

You are on the right track though. Instead, consider a message next to the save button that describes the state of the form submission.

On click, display: "Saving...", a spinner or similar. If it fails validation, identify the inputs that need correction as you are doing and replace the saving message with something informative like "Please correct the errors above and try again." Leave the button be.

I hope this helps.

Answer 2

You want to encourage saves, yes?

Anything you want to encourage should be made a pleasing color -- which in most cases means blue or green.

Probably you want to make the save button appear "faded" compared to other buttons (greyed out buttons are a known affordance when you want to make it clear the button is not available), but you still want to make it clear it's an acceptable button.

Answer 3

I think the problem is that the red button doesn't convey enough information to be useful, and you are expecting them to click on it anyway to be informed.

In that case, what's the point of changing the color?

Perhaps instead of making the button red, you could put some red text next to it saying "[!] Three required fields are missing" or something similar (I'm using [!] to represent your alert image/sign).

You could even make it a link that jumps to the first problem field.