Is placeholder UI a good design practice?
-
Placeholders in UI design can reduce clutter and guide users, but they disappear upon typing, which can cause confusion.
-
They may not be accessible due to low contrast and are sometimes mistaken as pre-filled data.
-
Best practices include pairing with labels, ensuring contrast, and retaining placeholders until typing starts.
Deep dive
Placeholder UI elements have become a common sight in modern digital interfaces. While they are visually appealing and help in reducing form clutter, they also present several potential pitfalls.
What are the benefits and challenges of using input placeholders?
Benefits of an input field placeholder
-
Space-saving: Placeholder UI can reduce visual clutter by acting as inline hints.
-
Guidance: Placeholders can provide straightforward guidance and help users understand input fields.
Challenges
-
Disappearing: Once users start typing, placeholders vanish, which can lead to confusion about what the field was meant for.
-
Placeholder text accessibility: Placeholders often lack sufficient contrast and might not be read by screen readers, compromising accessibility.
-
Mistaken identity: Users might mistake a form placeholder as pre-filled data, leading to skipped input fields.
What is the best way to implement placeholders?
Dos
-
Use placeholder text to give hints or brief instructions, helping users understand fields quickly.
-
Ensure placeholder text has enough contrast to be visible and accessible to all users, including those using screen readers.
☝️Note: Placeholder text should have a minimum color contrast ratio of 4.5:1 to meet WCAG 2.0 AA guidelines, or 3:1 if the text is large (over 18pt or 14pt bold).
-
Allow placeholders to remain visible until typing begins, preserving user context before input.
-
Pair placeholders with explicit labels outside the field for continuous guidance, even after typing begins.
Don'ts
-
Avoid using text in a placeholder as the sole label, as they disappear when typing starts and leave users without context.
-
Do not overuse placeholders for simple fields where the label already provides enough clarity.
-
Keep critical instructions outside the input field, using placeholders only for additional, non-essential information.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
-
Is the input text placeholder necessary, or could a label serve the purpose better?
-
How does the placeholder affect accessibility?
-
What happens when the placeholder disappears—does the user still know what to do?
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
-
Placeholders in Form Fields Are Harmful by Katie Sherwin
- Why you should stop using placeholders in text boxes by Daniel Berryhill