Usability Problems Confirmed with Form Placeholders

Today Nielsen Norman Group released an article confirming my fears for placeholders. Katie Sherwin addresses seven issues as to why placeholders are not optimal for usability.

  1. Replaced text reeks havoc on users’ short-term memory
  2. Reviewing completed forms (without traditional labels) becomes impossible
  3. With no labels, errors become increasing hard to fixespecially with fields with similar content
  4. Keyboard interactions can become problematic
  5. Fields with content in them are less noticeable
  6. Users can consider placeholders as auto-filled data
  7. Poor implementations can require additional work for users

Even if you use placeholders in conjunction with normal form labels, as I had in the past, you can’t get over the fact that during testing users’ eyes were drawn to empty fields.

“At the minimum, users will spend more time locating a non-empty field–a nusiance. At the worst, they will overlook the field completely–a potential business-killing disaster.”

With usability at the forefront of my mind when developing web forms, adding cognitive load and additional time to users’ tasks is unacceptable. Adding placeholders in order to save room or make my design cleaner at the cost of ruining the user experience is unacceptable.

Possible Solutions

There’s a new design pattern that has been gaining some traction within the design community that has been lovingly titled Float Labels. In this pattern, the placeholder is both visually and semantically the label for the form. This provides clear context for the user when filling out the form, but produces additional issues.

  • Small labels may cause trouble for users with visual impairments
  • Poor implementation may break the semantic label use rendering this approach useless for accessibility
  • Users may still mistake placeholder data for auto-filled data
  • Users are still drawn to empty fields
  • Doesn’t solve the issue of providing additional information for a field as you are now using the placeholder just as a label, not an example or additional instructions

As always, it is necessary to consider each implementation for every project you do. There may be a time where good implementation of the float label design pattern will benefit you more than hurt you. Here are some resources if you’re interested in learning more about this new pattern that attempts to solve this usability issue.

Website Redesign

web design and development desk

Digital Inflection is 10 years old! Thanks for the birthday wishes, we appreciate it.

Digital Inflection turns ten this month and we wanted to celebrate our birthday by shopping around and buying somethin’ sexy to show you. Fortunately for you, this is just a new design for our website and not some questionable lingerie purchase. In general, our redesign brought us into 2014. You’ll notice flat design, bright colors, and a bit more focus on readability. We took our WordPress expertise and implemented our template into WordPress. We also wanted to put emphasis on

  1. Our portfolio
  2. Requesting a Quote

We updated all of our portfolio pages to include images, a brief description, and a link to the site if they are still public. You’ll also notice (we hope!) a green button following you around on our site as your browse. We’ll be looking researching our metrics to see the click-through-rate on this button and more and may be updating our template as time passes. This is our first major redesign in several years as we generally make small, incremental changes. Thanks for the support of all of our clients, we really do appreciate you. We hope you enjoy the redesign and let us know if you have any comments or questions!