Devil in the details. Label placements matter.
Make it easy…
I was working on a massive enterprise payroll application redesign and a focus of the experience was efficient data entry. We knew that a payroll professional (think clerk, HR pro or Payroll Goddess) would have to interact with data entry daily and that over a year we estimated that they might encounter 3,000,000 inputs. Making those interactions as simple, quick and painless as possible was a key goal for the design and engineering team. Where we could, we reduced or removed inputs, but there are some things in payroll that will likely always be inputs. We started looking at best practices and I was surprised at how a design decision like this could have a massive impact on not just user experience, but the bottom line of a company.
Make room for German, French, Spanish and others.
In addition to wanting to make the application as easy to use, the client needed to prepare for localization in non-English markets. Target languages included German, French and Spanish. A general rule of thumb is that the area for input labels will require about 30% more space.
What's best?
I compared “Top Label” and “Left Label” research and recommended “label top” for the interface. User testing showed it was faster and the "top" position supported the localization goals. In the middle of the project, additional voices were added to the team and the idea of “label left” started showing up in the wireframes. I challenged this decision and was met with strong convictions that the switch was for the better.
A debate ensued and eventually all parties (myself, the new in-house UX pro, the project owners, managers and engineering) were asked to join a meeting to discuss what direction to take. As a consultant, I knew I needed a quick, visual way to convey why one choice was better than the other. Unfortunately, we could not deploy both ideas and test the decisions with our users.
I created the infographic below to help the broader team understand my position and more importantly, the reasons why. The team debated going in a new direction (left label) and it's merits but, in the end, decided that "top label" was the better choice.
The 10x faster read speed was easier for the users of the app, easier for translation later and saved the business a week per employee per year in time that might have been wasted with the left label. I love it when the user experience and the business need align.
One Final Thought
After making the estimation on how much time was spent looking at forms for on professional in one application, I started to wonder which design pattern is the most common in our lives. I would love to hear from you in the comments on what you see the most, what you prefer and why.