Good Design Prevents Accessibility Issues
Floating Labels and the Folly of Floating
I’ll admit it – I’m not the biggest fan of Google’s Material Design UI library. Don’t get me wrong, I can appreciate the sleek aesthetics and the intent behind creating a cohesive, branded user experience. But when it comes to accessibility and usability, I’ve found that Material Design’s approach to form fields, particularly their use of “floating labels,” falls woefully short.
I recently started working on a project that used the Material UI library, and the text fields immediately caught my eye. Or rather, they didn’t – that was kind of the problem. You see, in Material Design, the label for a text field is designed to “float” above the field itself, only becoming visible once the user starts typing. This is presumably to create a minimalist, uncluttered look. But in practice, it ends up making the form fields confusing and hard to use, especially for users with disabilities.
As I’ve written about before, the primary issue with floating labels is that it can be incredibly difficult for users to determine the purpose of each field. With no persistent label visible, users are left to rely on contextual clues and their own memory to figure out what information each field is meant to collect. This becomes even more problematic for users with cognitive impairments or short-term memory issues.
And it’s not just users with disabilities who struggle with floating labels – they can be a pain for everyone. Imagine trying to fill out a lengthy form, constantly having to pause and think “Okay, what was that field again?” as you tab between the different inputs. It’s a frustrating and inefficient user experience, no matter who you are.
The Trouble with Shrinking Labels
But the issues with Material Design’s text fields don’t end there. Even if users do manage to figure out the purpose of each field, they may still have trouble reading the label text itself. You see, when a user starts typing in a Material Design text field, the label doesn’t just float up – it also shrinks dramatically in size, down to a measly 75% of its original height.
Now, I get the intent here – the designers wanted to keep the label visible even as the user’s text filled the field. But in practice, this small label text can be incredibly difficult to read, especially for users with visual impairments or those who have deliberately increased their system text size for accessibility.
As the team at Deque points out, this shrinking label text can also cause issues for users who need to select and copy the label, perhaps to look up a definition or translation. With the label’s small size and tricky positioning, it becomes a real hassle to interact with.
And let’s not forget about the label text wrapping issue that Matsuko highlighted in their article. When you have a long field label, like “Adresse de courrier électronique professionnelle” in French, it can end up spilling out of the text field’s outline, creating an unsightly and confusing visual mess.
Google’s Questionable Design Choices
Now, you might be thinking, “But wait, Google is behind Material Design – surely they know what they’re doing when it comes to user interface design.” And that’s a fair point. Google is a massive tech company with seemingly endless resources and user research capabilities. Surely they must have put a lot of thought and testing into these form field designs, right?
Well, as Matsuko pointed out, the Material Design text fields have actually gone through a few design iterations over the years, with the current version being an improvement over the old “underlined text” approach. But even with these updates, the fundamental issues around label visibility, readability, and usability remain.
It’s honestly quite puzzling to me that a company as powerful and influential as Google would publish a UI library with such obvious accessibility and usability problems. I can only assume that, in the grand scheme of things, making their forms look “clean” and “modern” took precedence over ensuring they were actually easy for people to use.
A Better Way Forward
So, what’s the solution? Well, as Matsuko so eloquently put it, the answer is simple: “make your form fields look like form fields.” In other words, ditch the floating labels and go with a more traditional, persistent label approach.
This might not be as visually striking as Material Design’s floating labels, but trust me, your users will thank you. As the team at Deque notes, conventional form fields with clear, always-visible labels are much easier for users to navigate and understand, regardless of their abilities or device preferences.
And if you’re worried about your forms looking “boring” or “outdated,” fear not. There are plenty of ways to apply creative design thinking to form fields while still prioritizing usability and accessibility. Play around with color, typography, and microtinteractions to make your forms visually appealing, without sacrificing the core user experience.
At the end of the day, good design is all about creating experiences that work for everyone, not just the tech-savvy or aesthetically-inclined. And when it comes to forms – the bread and butter of so many websites and applications – accessibility should always be the top priority.
So, if you’re a building and renovation company in Aberdeen, UK, looking to create a truly user-friendly website for your customers, I’d strongly encourage you to steer clear of Material Design’s floating label text fields. Instead, embrace a more traditional, accessible approach to your forms. Your users will thank you for it – and who knows, they might even stick around long enough to learn about your top-notch building and renovation services!
