Make error notifications in posts more obvious/visible

Question

I was reading a question, and the OP had entered a jsFiddle link without the http:// into the question. I wanted that to be a link, so I edited it to add the http://.

When I went to save the edit (yes, I forgot an edit summary, sue me), I got an error.

Your edit couldn't be submitted. Please see the error above.

Unless I'm just blind, I don't see any errors. What's wrong with my (helpful) edit?

After staring at the screen for a bit longer, I noticed the error the message was referring to! It's on the right of the textbox, blended in with the Careers 2.0 ad.

Can this error popup be a little more obvious? Maybe show the error with the message below the textbox?

Also, I'm guessing the OP entered the URL without the http:// just to get around this error (wonder if he noticed the popup). Can we maybe enforce this better? Like don't allow jsFiddle links regardless of whether they are clickable or not?

P.S. I copy & pasted the code into the question to complete my edit!

_{Helping search with/without punctuation: "Your edit couldn't be submitted. Please see the error above." - Your edit couldnt be submitted Please see the error above - "Your question couldn't be submitted. Please see the error above." - "Your answer couldn't be submitted. Please see the error above."}

Answer 1

Here's how we plan to fix this specific issue:

• Text fields with an error associated will now get a one pixel red border in addition to the error pop-up

• The error pop-up itself will get a two pixel wiggle on a power of two delay, so that we get a few narrowly spaced soon after the error appears and fewer as you are presumably fixing the problems. [edit] We ultimately decided to go with lowering the contrast in the sidebar instead of the wiggle

  Having said that, here is our plan, in general, for error messages. We are hoping to finish completely by the end of this week.

Things we have already finished

• A rewrite of about 40% of the errors on the site to make some a little easier to understand and more user-friendly. For instance, in places where we used to say "sorry, posts can't contain that content", we are now explicitly telling you what content you can't include.
• The order of checks on submission has been changed. We now run our spam checks first, then the validation checks, then the captcha. Throwing a validation error should no longer cause you to have to fill out a captcha before you can correct the mistakes.
• New styling. Errors are now bright red bubbles instead of maroon text blocks. We also added notification styles (blue), and each style has two different ways to close. See here: https://meta.stackexchange.com/a/167515/202998

What we are working on currently

• Ajax errors. We're going to be running error checks on blur and also periodically. This means that you'll get errors much sooner, and issues with closing error boxes should diminish substantially because we will be automatically removing errors as you fix them.
• As I mentioned earlier, we are adding the wiggle and the red border to make things more visible

Answer 2

A common way to draw attention to form validation errors is to jump the user's screen right to the error when they try to submit via an anchor or other method. The jump instantly makes you see something changed and the error should be right about where you start reading. Since the error is off to the side one might want to animate it slightly, like with a color fade in/flash similar to the orange fade when you post a comment, to attract the eyes.

The fact that it's in the side column, where banner blindness is a significant possibility, is also problematic, but I'm not sure how that could be solved for this particular error message without obscuring the text area, since appearing below/above the text box might be distant from the actual error.