Forms are an indispensable part of e-commerce. They are currently the only means of collecting information like shopper details (name, address etc) and credit card information at checkout.

There are various implementations though the traditional one has always been a label with a rectangular box beneath it. Without the label, these rectangular boxes don’t mean much as a customer is left with no idea as to what data goes into each box.

One of the greatest threats to form usability is inline labels. This is where placeholder text is placed within the rectangular box in which data is to be entered and acts as the field label instead of having a permanent label above the textbox. Inline labels save space and make for a sleek and simple design. This makes them a very tempting design choice especially on mobile where space is always at a premium. Inline labels do suffer from a massive problem though:

Disappearing field labels

Take a “Name” field for example. The field label is printed inside the textbox and disappears once a customer starts typing. Some labels disappear once a customer clicks on the field. This seems rather harmless but things can get quite problematic when a customer has to type data into multiple fields.

Let’s use a customer named Jonah as an example. Jonah is filling out his shipping information on the checkout forms. He fills in his name, city, state, and zip code. When he starts to fill out his home address (160170 Maryland Avenue), he gets distracted by a text after only typing 16017.

He returns to the form after a few minutes and he’s not sure what exactly he was filling in. Since the field label disappeared once he started typing all he can see is a string of five numbers and he’s not quite sure what they’re supposed to represent. The only way for Jonah to know what he was typing in the first place is to clear the entire field so the field label can reappear again.

The solution…

Have field labels at the top of the field/text box so that customers can always know what kind of information they’re required to type in.

An alternate implementation

You can also experiment with a floating label. This is where the field label floats to the top of the textbox instead of disappearing completely when a customer starts typing.

Where and when can you use placeholder text with impunity?

The login prompt – this is just the email and password field. No one is going to get confused here since it’s become an accepted intranet standard.
The search box – Text along the lines of “Search”, “Search here”, “What are you looking for?”, or “Type your question here” is fine.

As a formatting aid

Placeholder text can be used within fields to show the expected formatting of the data to be entered. A customer may just type in his address as Pennsylvania Avenue, Washington DC instead of 1600 Pennsylvania Avenue, Washington DC so you can use placeholder text to demonstrate proper formatting.