2

When a viewport approaches smaller sizes, my first thought is to linearize and grow each form input, giving each input a full-width. This removes the UI hinting of the larger viewport, but arguably looks better.

Here's an illustration: (intentionally vague to avoid too much detail)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I am curious if anyone has data/articles or experience regarding this design decision. I looked through Luke Wroblewski's site but don't have any other references handy.

Thanks.

  • 2
    The main reason people do this is because there are so many screen widths and resolutions when you get down to mobile and so I guess it makes sense to go full width. I can see why you'd like to hint at the length of the input though. Perhaps you could have the input fields full width but in brackets put '(5-12 characters)' or something after the label? That's providing you have those sorts of restrictions on the length of those shorter items of course. – Chris Apr 8 '15 at 14:11
2

From a visual point of view, 2 sizes is OK, different sizes for input fields is very confusing, and the same applies if you expect to input 2 characters and have room for 40. The user will wonder if they need to add something else in most cases, so visual hinting plays a role.

Of course, like Chris commented, you need to keep in mind that under a certain size, you'll have no control of the look in small screens, so it's always tempting to go the easy way and convert every form element to a 100% width element. Quite honestly, everybody does it, but depending on how obsessive you're, you might want to use this visual aid and still keep it to the maximum extent.

One very known and widespread example is Bootstrap. You have .form-group-sm and .form-group-lg as classes for small and large form inputs, or you can use col-* (where * could be xs-[number], sm-[number], md-[number] or lg-[number] ) and then simply use form-group class which has 100% width. But whichever approach you choose to use, the point is Bootstrap has the option for input sizes, and believe me it has ran through extensive UX testing. Same applies to Zurb Foundation, so it's pretty safe to say different sizes in form is really good, the data is in the millions of sites using it!

  • For now, I've decided to keep the hinting but attempt to group elements inline and/or vertical when logical. Thanks for the thoughts. – Brian Muenzenmeyer Apr 29 '15 at 13:47

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.