User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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,, 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.

share|improve this question
up vote 2 down vote accepted

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

share|improve this answer
I agree with this solution, although for security reasons I wouldn't show which input is the wrong one (I'd show the dialog below the button instead). – Yisela Sep 10 '13 at 1:23
Thanks. You rock. – Kim Prince Sep 10 '13 at 2:58

Your Answer


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.