-2

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.

Improve this question
5
  • 1
    Why is scrolling not allowed?
    – Matt Obee
    Dec 2, 2013 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, 2013 at 11:43
  • @MattObee Because the concept of page assumes it use as only single view with out scrolling like window.
    – Khamidulla
    Dec 3, 2013 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?
    – Khamidulla
    Dec 3, 2013 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, 2013 at 9:08

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.