0

I've read everywhere that using placeholders as labels is a bad choice seeing as, when the user starts typing/selecting, they may forget what they're doing or what the field was originally for.

But I've been seeing so many instances of placeholders as labels in mobile, and I feel that when there's a proper icon as a label, it makes up for the actual placeholder text disappearing when you type, like this:

http://www.smashingmagazine.com/wp-content/uploads/2013/03/good-vs-bad-22-500.jpg

What is the best approach for this on mobile, does the icon really make up for it, or should we still stick to:

Label Input (with example 555-555-5555 as placeholder text)

Improve this question

2 Answers 2

Reset to default
1

In terms of usability, placeholders in form fields are NOT very usable. But there are always some exceptions.

  1. Something is better than nothing: To me, placeholders in form fields are better than a form field without any hint.

  2. Situation and form-field dependency: Placeholders in password fields may require users to remember some structure (Memory resource), and specially, this becomes even harder for distracted mobile users. However, there are also some simple tasks, such as First name , address etc, since these are quite intuitive; placeholders could be used.

Take-away: 1. Mobile users are more distracted than desktop users, keep user's context in mind while developing placeholders 2. The form-fields which require simple, short and intuitive hints for comprehension, feel free to use placeholders.

Improve this answer
1

Matt Smith on Dribbble has a really elegant solution he calls "Float Label Form Interaction".

enter image description here

Here is the source page with a live demo:

https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction

Improve this answer
2
  • Note that in this case, the placeholder does not disappear when the field is focussed. It disappears only after starting to type. This is different from many current implementations, and reduces the problem of the user not seeing the placeholder after turning to (ie., focussing) the field.
    – virtualnobi
    Commented Oct 8, 2014 at 10:52
  • there's a tutorial for how to implement something that looks similar on CSS Tricks: css-tricks.com/float-labels-css
    – Sabrina Gelbart
    Commented Oct 22, 2015 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.