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.

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.

share|improve this question
add comment

1 Answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
2  
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
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.