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 am programmer not designer nor ux designer. So, I am using Twitter Bootstrap framework for design the page with input elements on it. Basic requirement for my form is - It should fit into 1024x768 window without scrolling. Currently all my forms perfectly fit in the window of mentioned size. However, after validation of form in server side (I am using Django) I should output some error message for certain fields.

Outputting any error message as text before, after, above or below input element is not possible (Some fields will not be seen). Currently I consider using icon after input elements when error occur with popover when mouse hovered or icon clicked. However I did not have any idea if it will be good or not.

So I am looking for best approach to show this error messages using Twitter Bootstrap components only. What will be best practice for this problem? If any additional information required fill free to ask me. Thank you in advance.

P.S. I looked for answer here. However, all answers does not seams suitable for me. I think only @Fresheyeball answers better for my case, but for group of checkbox it looks horrible.

share|improve this question
1  
Why is scrolling not allowed? –  Matt Obee Dec 2 '13 at 11:33
2  
"Outputting any error message as text before, after, above or below input element is not possible" - Well then you're not going to be able to achieve 'best practice'. Don't treat a form as something purely visual - it's a input device for getting data from people. If they can't do that efficiently then it's pointless having it. OK, your one may (subjectively) look nice, but if it's useless then what's the point of it? –  JonW Dec 2 '13 at 11:43
    
@MattObee Because the concept of page assumes it use as only single view with out scrolling like window. –  antindexer Dec 3 '13 at 3:04
    
For @JonW. Do you mean only way to show error messages is showing before, after, above or below input elements? And you mean there is no other best practice solutions for this? –  antindexer Dec 3 '13 at 3:06
    
@antindexer I was really questioning the rationale behind the decision that scrolling isn't allowed. That constraint is obviously impacting user experience, including the way you handle validation. –  Matt Obee Dec 3 '13 at 9:08

1 Answer 1

Best practices are associating error messages with form fields.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

These examples are just a few ways of displaying error messages. As long as the error is contextual and can provide feedback at first glance, there shouldn't be any problems. You don't want to have users dig to figure out what the problem is, because that creates a barrier on forms, and it wont be easy to scan.

Additionally, don't confide yourself in a space that would more than likely not be the case for some users (unless you're in a controlled environment where you know everyone will have the same sized monitors, but even then, you never know what sizes the browser is going to be).

After working for an agency for a while, I've realized a lot of clients/developers believe that users don't scroll their website if elements are not on the top of the fold, however, research and continuous proof points to the contrary: Users scroll. Don't be afraid of below the fold elements.

share|improve this answer

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.