I have been filling out lots of forms lately and keep finding some very bad form UI. There have been some really fantastic, easy to use forms as well. Rest assured, the Internet is improving! (I think)
Much has been written on why good forms work best, how they work, etc. The bottom line is, use of common form UI is extremely useful in filling out forms. In 2016 there are ridiculous amounts of blog posts, UI libraries and frameworks, and research done to determine what is considered best practice. As a developer, even if you cannot change the style, maybe you can change the HTML or visa versa.
Below are several examples of the kind of thing I’ve been finding.
This happened because the column to the left had a huge textarea element that was cramping these labels. I read this as, “Company Name Company…” then I stopped and just saw a bunch of Company’s, some fields on the right, and no clue what they were even asking for.
- The column with these input fields was not wide enough
- There is no
margin-bottomset on the
- Add some margin for when the label and input collapse due to the width of the column.
margin-bottom: 10px;will work
- Increase the width to an appropriate size, don’t allow it to collapse beyond a certain point
- Always test what happens when the window or columns collapse too much
Tiny, Cramped Buttons
The developer here must have applied some reset or normalize CSS but then didn’t add any UI styling.
- They are too small to click on easily
- They are too close to each other
- Add padding
- Add some margin to separate the buttons
After filling out this “Filter By” field, I promptly clicked the “Clear All” button anticipating it was the “Search” or submit button. Instead of submitting the form, I cleared all the form fields. This was pretty annoying. I know the user should be reading the form elements and not just clicking on stuff. However, this could have been prevented.
- The search or submit button is an icon only, there is no “button”, difficult to click on while using a mobile device
- The “x” is right next to the search “button”, also difficult on a mobile device
- The “Clear All” button is where many search buttons are placed
- Add a submit button
- Style the “Clear All” button differently, I like using a link for clearing a form
- Add some margin and padding to the icons in the input