↵

Placeholders are problematic(adamsilver.io)

almost 7 years ago from Adam Silver, Interaction designer focused on inclusive design and design systems

  • Tommy Hodgins, almost 7 years ago

    I think the advice is never to have the instruction be present only as the placeholder. Nothing is more annoying than having to empty a field to check what you were supposed to enter into it.

    Why not use a solution that says: display a label and a placeholder, and any time an input isn't empty, display the placeholder text inside the element. Any time a field has text in it, display that placeholder somewhere else visually near the field.

    <label> <input placeholder="Enter your Name"> </label> <style> label:after { display: block; font-family: sans-serif; font-size: 9pt; color: #999; } @element 'input' and (min-characters: 1) { $parent:after { content: 'eval("placeholder")'; } } </style> <script src=http://elementqueries.com/EQCSS.js></script>

    There's one quick solution!

    6 points
    • Jonas GothJonas Goth, almost 7 years ago

      Really like this solution as well for it's simplicity. Great example of this for iOS.

      Though i find the major reason to generally avoid putting the placeholder text inside the element as a default, is because users tend to instinctively think a current value is already in place. There are many examples of increased conversion rates, when having the placeholder text fixed above the field at all times instead.

      0 points