Where to place login failed message in Twitter Boostrap

Question

This is a basic question from a programmer who would like to get the design 'right'.

In the example Twitter Bootstrap, where would you place the 'failed login attempt' message?

Here's a link to the basic example, http://getbootstrap.com/examples/jumbotron/, with the login for top right.

It seems to me the options are:

• In a javascript alert, but this requires additional user clicks
• In a new page (after redirect), but this seems unnecessarily complex
• Beneath the login form (in the header). This seems the most natural place to put it, but would mean increasing the height of the header for a single element

I guess the question is... Where would Mark Otto put it?

Sorry if this is not very relevant.

Answer 1

How about something like this. This makes it clear what went wrong (well, not my dummy text) and does not get in the way of the two fields or the input button. I am using a tooltip for the error message.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

If you're not going to indicate which field is the source of the error, I would recommend doing a more global style alert above the header in fact. Also, make sure the error messaging is friendly, and clearly describes what happened and how to recover from the error. Also provide a forgot your password link in the message.

Something like this:

---

We're sorry, it seems the email password combination you entered is incorrect. Please try again. Forgot your password?

---