Early eye-tracking studies by Matteo Penzo (2006) and Luke Wroblewski (2007) took a hard stance for top-aligned labels, and against other patterns, especially inline labels. Later work by NN Group (2014) reinforces the idea that placeholder text, in general, hurts form usability. More recently, creative designers have embraced a newer pattern, floating labels which start with placeholder text that floats to the top of a field as users start typing.

Many, many, many top retailers have implemented the floating label — are they wrong?

Adam Silver (2017) makes a strong, 7-point case why floating labels are a bad idea, while the web accessibility experts at Userway recommend floating over static for visually impaired users.

Silver argues inline labels leave no room for hint text (fair, although you can use sub-copy below fields or tooltips where appropriate), typically are low contrast, and placeholder text can be misinterpreted as already filled values that users will skip over (Nielsen Norman agrees). Much of the early user testing research focused on eye tracking and reducing the visual fixations required - the idea is help users get through the dang thing faster. Proponents of floating labels argue top aligned fields waste space and make the form subjectively feel more difficult. In a mobile-first world, conserving real estate is a serious consideration. But with the popularity of browser auto-fills and typeahead address finders, users today need to spend less effort filling in every single field. Perhaps, both are great, just pick one. And if you have the resources to, A/B test it. 🧪 

Or, follow Shopify’s decision — even if you’re on a different platform. You bet they’ve tested the $*#@ out of their hard-coded checkout, and they’ve chosen to float 🪂 . They won’t let their own customers mess with its layout, why should fix what isn’t broken?

🤨 Avoid “Address title” fields — especially for modern browsers that like to autofill forms (yep, Chrome tries to autofill the address in the “title” field)

👟 Skechers adheres to the vertically aligned form layout recommendation

👉 Sub-text persists as users enter their information. Small type can be harder to read, so mind font size, etc

👢 DSW uses the conventional approach with its asterisks* - red color, to the right of field labels

Contrast the above with merchants that use gray asterisks within the fields themselves - very hard to visually process:

👟 Skechers uses hint text to display formatting examples for users

💡 Ann Taylor shortens its form by presenting Address 1 alone with hint text “Start typing your shipping address” and a toggle to expose the hidden form fields if users wish

🛍️ Saks uses a tooltip to provide additional information about delivery signatures. Because only a segment of customers care about this, and such detail would clutter up the form, the tooltip is an appropriate solution

😬 It’s harder to associate the sub-copy with its corresponding field when padding is tight. This is a poor example!

📲 Make sure your checkout pulls the right keyboard with the @ symbol and . visible with the alpahbet

📲 TabIndex allows users to navigate forward and back using < and > buttons

🏈 Fanatics returns error messaging as a user tabs ahead, vs after the full form is submitted

😐 Most forms accept any input. It’s worth putting additional validation rules into your back end, such as minimum character count for address or zip/postal code and phone number fields

🧘‍♀️ Lululemon explicitly describes the error with the fields that need correction, vs a single error message at the top of the form

👖 Urban Outfitters describes the nature of the error, where possible

🐊 Crocs explains the nature of the error - the zipcode was too short. Ideally it would also call out that only numeric inputs are accepted in this US-scoped form

👜 If you use floating labels, you can use placeholder text for the error and bump it to the top as users correct it, like Coach

👗 Aritzia adds padding to its typeahead results to make them easy to tap on mobile

Contrast this with examples of tighter padding that can be more difficult to tap precisely:

🙈 Avoid left-aligned labels. The ragged spacing makes it harder for users to relate each label with its field and requires unnecessary eye movement

🤨  2-column layouts are proven to underperform in user tests compared to single column flows

🤨 Unconventional form layouts can look cool, but can increase the cognitive load on how to navigate through. The vertically aligned pattern has been extensively user tested - why reinvent what isn’t broken?

👻 Ghost fields break conventional design in favor of plain horizontal lines. Can you discern the difference between the Credit Card Number field and the horizontal spacer between credit and PayPal payment options?

🤨 Inline asterisks make it hard to scan the form and quickly identify your required fields — especially when you deviate from the red asterisk convention!

🙈 There’s no reason to fill fields with hint text identical to their labels. Notice how this makes the one true hint (Zip/Postcode) far less effective

🤨 This can seriously confuse customers who have never seen this before — especially with the headline “Bill to new address,” which is head scratching for guest checkouts — was my Shipping address not good?

If you really want to leverage a shorter form, consider these tweaks — use “Find your address” vs “Search for an address.” Note that this example doesn’t replace the entire Address step with just a box — the First Name/Last Name fields and Shipping heading anchor that this is still a Shipping step:

👻 There’s no visual styling applied to the PayPal tab. Did you notice it at all?

😿 ALLCAPS IN GENERAL MAKE TEXT HARD TO READ, LET ALONE PAIRED WITH INLINE LABELS AND LOWER CONTRAST FONT (ON MOBILE!)

Yes, I’ve recommended tooltips in the ideas above — I’m talking about important details that would better be served by auto-visible microcopy. Anecdotally, users don’t interact with tooltips often. It’s risky to hide important details or instructions behind them.

As a survey designer, I’ve done many tests on such ‘hint’ icons, containing additional copy. In our tests, respondents almost never see them, and of those that do very few access them. We concluded to never use them for anything we actually want a user to see.

(Source: UX Movement Comment section)