When you look at a form on a website, how much attention do you pay to the style and formatting?

It wasn’t something I considered really. I mean, how much thought needs to go into a form layout? Whether it’s a login form, a payment form or a contact form. They’re pretty standard.

You know what they want automatically.

I thought so too. Until I was logging into a website one day and they used placeholders, and no labels. Suddenly I found myself questioning if I was supposed to be using an email address, a phone number or a username.

For anyone wondering, a placeholder is the text which is in a textbox and then disappears when you select the textbox.

An example of this is on the Google homepage. In the image above, you can see that the textbox contains the text “Search Google or type a URL”. However, when you select the textbox, in the image below, then this text disappears allowing the user to type in their own search term.

While this works well for something like the Google homepage, where users only have the option to search, it becomes slightly more confusing when we are considering multiple textboxes.

If there is the possibility that a user could become confused, this is where labels come in handy.

Have you ever noticed the Facebook login form in comparison to the Linkedin login form? Both of these forms opt for the placeholders which inform the user what information they need to provide to access the website.

However, where these forms differ is when the user selects each textbox. Facebook, for example, follows Google’s example and sticks to the placeholder method. Meaning that the placeholder information disappears.

Linkedin, on the other hand, goes a different route. Linkedin chooses to convert the placeholder into a label when the textbox is selected. This means that the user can still see what information is required without having to click out of the textbox to make the placeholder reappear.

When considering how to make your website accessible, you should consider how to keep things simple for the user. While the aesthetic of a placeholder can be preferable (I do agree I’m a fan of the minimal look on these forms!), anything that can cause confusion for a user can result in the loss of a potential customer.

Have you ever considered the impact of these forms? Have you ever found yourself suffering from form confusion?