Simplicity vs Usability

Posted by on / 0 Comments

I keep going back and forth on my thoughts of form field labels and usability. I have read and understand the arguments against it, however I have yet to see what I feel are definitive metrics on form field labels being inside or outside of the text box. Here is my general philosophy on the subject. If you are going to use inline form field labels, use them correctly. When I design forms, I employ a hybrid approach that takes into account the context of the page and content. There need to be labels other than the ghosted text and the best place for these labels is above the form fields, however every single individual field does not need an outside label. It’s overkill.

The first thing to think of is how an individual text input functions. A label should disappear when you being typing in that form field, not when the user first clicks on them, and if you clear out the text box then the label needs to re-appear.

form-feild-example-email

form-feild-example-email-selected

form-feild-example-email-entered

Authentication is key to good form usability. If you are using inline labels make sure that have a complete solution for authentication. If there is an error, make sure it is worded very simply and should usually try and re-state the field label itself. Errors should always appear before submit, preferably as soon as the user stops typing, and it needs to appear next to the field that it is referencing.

form-feild-example-authentication

If you have a lot of information then keep it contextual; group together fields that make sense and in that circumstance definitely label those groups. Make sure to keep information in a format that makes sense to a user. If it is an address, make sure it looks like an address.

form-feild-example-address

There needs to be clear visual cues to the user which field they currently have selected. Labels need to be large, easy to read, and there needs to be a difference between the text the user has entered and the ghosted text. Iconography can help this, however only on small form fields, otherwise you run the risk of being distracting. Only use one column layouts for forms – this gives the user a flow that they can read and comprehend, there are too many different ways for a user to interoperate multiple columned forms. Fields that are not required should not even be shown.

I contemplated not writing anything on this subject. The articles I have read that make the arguments against inline form labels are logical, well thought out, and correctly researched, with fantastic examples. My post has none of those qualities. It is merely an observation based on my own studies, experiments, and experience. The one problem that I have is that people make the statement that designers generally just make assumptions, which in and of itself is a very large and often times incorrect assumption. When I take a risk on a design, I get feedback from peers, and test and research it throughly before implementation. Then once completed I take a look at the metrics and search for user feedback.

I will be the first to agree that a common mistake I see from junior designers is making complicated forms inline without thinking. However another mistake I commonly see among seasoned usability experts is over explaining simple concepts. In fear of confusing the user, you often times end up confusing them more by giving them too much information. To be fair, this is of course a huge assumption on my part as well. However, a wider range of people are using modern technology than they were even three or four years ago, and I believe that in part we have some of these simplified interface elements to thank for this.