Should I never ever use only placeholders in forms?

Question

I have a form that the users will use a lot of times becouse is the main funcionality of my webapp.

It has select boxes with large options, so they are quite wide. Looks something like this:

May be the button is too wider, isn't it? is that a bad practice? The good point is that the user doesn't have to scroll down to complete the form each time their have to use it. Note that I have a navbar at the top of the page too.

The other alternatives that I've thought:

Labels at the top

With the labels at the top of each select box, the form is too long and then I force users to scroll, and as I said, I don't want to.

Placeholder

Using placeholders without labels the form looks really great. I don't want to fall in this terrible mistake, but maybe in this case I could make an exception. I mean, as the form will be very used, and the fields to fill are quite intuitive and I think in a case of this features, wouldn't confuse the user.

This is an empty form:

This is a filled form:

Do you keep your position against the only-placeholder method in this case, or could I use it?

Answer 1

In your case I don't think there is an issue removing labels,Since you are using only select boxes in your form and there are no text fields, When users click on select box they are going to be presented with list of options so I don't think the issues of auto focus, lack of compatibility with browsers for placeholders plays an issue in your case.

Answer 2

You might consider showing a tooltip on hover like:

Answer 3

You can try use this pattern (for options already selected):

It lets you keep this placeholder look while still not resigning from having labels displayed within the field. You can use other text color (like light gray or something) to degrade the significance of the label of course.

Answer 4

From my point of view, the problem with using placeholders without labels is also relevant when using combo boxes and not only when using text fields. In both cases the "label" disappears when typing or selecting something. If the user is not familiar with your form and the order of the combo boxes, this could be confusing.

I suggest that you use labels as in your first example (Brand, Model, Color) and then use a placeholder text to illustrate an example of which options the combo box contains. I.e. in the Brand combo box it could be "E.g. Toyota" and so on. This will provide more support to the user instead of "Select brand".

As for the search button I prefer a smaller button aligned to the right.

Answer 5

Given your three options, I haven't seen a strong case for removing the labels. The reasons you're giving are personal preferences:

With the labels at the top of each select box, the form is too long and then I force users to scroll, and as I said, I don't want to.

-

Using placeholders without labels the form looks really great.

Even in this case I would use a label + placeholder text. Design for the best case scenario, but plan for the worst. You need to account for items such as slow connections, screen-readers, and mobile devices. Ask yourself the question if for some reason my CSS didn't load and all the user had was my raw HTML, would this still make sense? Is my HTML organized logically? Am I providing correct prompts where need at a base level?

As Anders Kjærby Jacobsen mentioned, I think your best option is your first one, but with the button smaller (not full-width). I would differ with Anders on the placement and align the button along the left edge in line with your form fields as it's a natural line your drawing down the form.

Answer 6

Quick answer

• Display labels on the left of the form controls if you have enough space.
• If not, hide the labels in a safe way (see below).
• Align the form button with the form controls.

Accessibility point of view

From an accessibility point of view, all form controls should have labels. That allows all users -- included those who use assistive technologies -- to use the form effectively (more info about this).

Under some circumstances, however, you might want to hide the labels using CSS. In that case, make sure you use a safe technique.

Usability point of view

From the info that you provide, I believe that is not necessary to show the labels of the form controls:

• Users will use this form often, so they will understand its structure.
• There are only 3 fields.
• The fields are closely related (brand, model, and colour).

Design point of view

Some designers have come up with creative solutions to display field labels. You might like to have a look at them:

• Circle CI -- the placeholder becomes the label when the form control is filled in or has the focus.
• Search in gov.uk -- you have to look at the source code to see the technique they used.

Answer 7

One thing you could consider is moving the placeholder text outside of the input. A perfect example, in my opinion, can be seen here:

http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders

This way your input and placeholder text aren't "confliction" (couldn't think of a better word, sorry) and are actually becoming an opportunity for an interesting interaction within your UI.

Answer 8

You could use some nice CSS trickery to show/darken the placeholder text when focused or on hover.

You could fade the placeholder text to a light grey (to keep your form looking clean and light) then darken when focused or mouse over.