7

I have been looking at the styling for validation of input forms of Bootstrap, and wondered if there was a specific reason for where the icons used for inline input validation is positioned.

enter image description here

I thought that the icon outside the input field would be clearer because there are many different types of input fields that also contain actions (e.g. search), whereas the standard for Bootstrap is to place it within the input field.

Are there some examples or references out there to demonstrate the usability/practicality aspects of where the validation icon is placed?

3

On mobile screens the size of your canvas is limited. For aesthetic and practical value most input fields span the entire width of the screen save for some margin left and right of the input field. This leaves no room for the checkmark icon being on the outside of the input field.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Let me explain the aesthetic and practical value. The practical value is that on the left, the input fields leave more room for visible input. On the right the chance is bigger input will go outside the border. This might happen when the input is a long street name or multiple last names.
The aesthetic value is that the left example is more balanced than the right example. If you think away the checkmark icon, the right example will just have a useless white border.

  • So is this really just a result of bootstrap being 'mobile first'? What about for the desktop then? Should it be different or kept the same for consistency sake? – Michael Lai Jul 13 '14 at 22:58
  • It could be because of their 'mobile first' strategy yes, didn't really think about that. I just thought of the value of the one over the other. For desktop, you could go for consistency, but in my opinion it's not that big of a difference and therefor is negligible. – Paul van den Dool Jul 15 '14 at 7:02
  • What would the version on the left look like if text was entered in the fields? I'm assuming the input text would stop somewhere around where the input field on the right ends to accommodate the positioning of the checkmark? – rach oune Oct 22 '14 at 21:40
2

Luke Wroblewski and Etre did some research into inline form validation and tested a range of different approaches with 22 average users. With regard to positioning the validation inside the field versus outside, they didn't find any substantial benefit to the former and noted that validation cannot be positioned inside all fields anyway so it would be inconsistent.

Displaying validation inside form fields failed to deliver any substantial benefit. The positioning of these messages was—necessarily—inconsistent. (While it’s possible to make validation messages appear inside form fields, it is much more difficult to display them inside standard drop-down lists, so we displayed them outside these elements.) In-field validation was not any more noticeable than messages displayed outside the fields.

  • Was this in the context of desktop or mobile form design? It is interesting to see two completely different answers to this question, but I guess that's what makes the discussion interesting... – Michael Lai Jul 13 '14 at 23:00
  • @Michael Lai I don't think the article mentions mobile. – Matt Obee Jul 14 '14 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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