Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Are you asking about the button always being this color, or does it change to a different color when there are no errors? –  Rachel Keslensky Nov 20 '12 at 23:49
    
@RachelKeslensky See my edit –  HighCore Nov 20 '12 at 23:57
add comment

3 Answers

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.

share|improve this answer
    
Its not a matter of encouragement, because no matter how many times the user presses Save, data will not be saved if there are validation errors. See my edit. –  HighCore Nov 20 '12 at 23:56
add comment

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.

share|improve this answer
    
I should have mentioned im not doing a web site. Im doing a desktop application using the best UI framework ever: WPF. See my edit –  HighCore Nov 21 '12 at 0:38
    
I'm actually not even doing an application. I'm creating my own application framework, so all this stuff is completely generic and the functionality is built-in right into the framework, applicable to any form in any application. –  HighCore Nov 21 '12 at 0:39
    
Got it. I stand by my recommendation. The only way to be sure is to prototype two versions and do some observational testing. You'll know if it enhances validation or not. –  Itumac Nov 21 '12 at 13:17
add comment

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.

share|improve this answer
    
I'm not doing a website. see my edit –  HighCore Nov 21 '12 at 14:21
    
I think my answer still stands, perhaps just without a link. –  Ben Durnell Nov 21 '12 at 20:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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