Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.
97

Interestingly the w3 Spec for placeholder allows for either behavior: User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise). But, functionally speaking, ...


44

I would side with having the placeholder text show as long as possible without getting in the way. The way it is done in Chrome is better, in my opinion. I've found ways to get around this on all browsers, however. What I've done in the past is remove the placeholder text on focus, but also re-displayed that text by making the label--which is almost ...


38

This article by NNGroup actually covers this exact topic. http://www.nngroup.com/articles/form-design-placeholders/ To summarize: WORST: Using a placeholder that says "Password" with no additional label is the worst way to go about it, there are many reasons presented in the article as to why but primarily Disappearing placeholder text strains ...


29

Typically I find using the placeholder text as an example of the intended content is best. So, the label describes the field, and the placeholder exemplifies the type of content. Here's a good example, from this article: http://www.pardot.com/faqs/forms/placeholders-and-labels/


28

It's called a content placeholder or skeleton screens. This is a great way to focus attention on progress and content being loaded instead of wait times while the whole app is loading. About Skeleton screens Apple have incorporated skeleton screens into its iOS Human Interface Guidelines, calling it "launch images." It recommends showing an outline of the ...


15

Generalising between platforms I would go with the following basic guidelines, they further emphasise a disabled field with a grey background. Normal (with a value) Black text, white background, black border. Normal (with a placeholder) Grey text, white background, black border. Disabled Grey text, slightly lighter grey bg, grey border. E.g.


14

Removing it when you start typing is better Depending on how the focus was moved to the input field, the user may not necessarily see the placeholder text before it quickly disappears. Yes you might read it before you manually click in the field but perhaps not if you happened to tab into the field from the previous input. There's also the possibility ...


14

You might consider showing a tooltip on hover like:


13

It should be a short hint (in you example "Type your username") rather than an example data (ChuckNorris). The reason for this is that Placeholders have the potential to be mistaken for pre-completed fields, especially at a glance. If you have placeholders showing sample data then that increases the possibility of people thinking the field has already been ...


12

Placeholders gone terribly wrong tl;dr When a placeholder doesn't clarify anything, it shouldn't be there. This is a great example of the negative impact of placeholder text pointed out by NN/g quite some time ago. Summary: Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check ...


10

The consensus is that it is not ok to use placeholders to replace labels. http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/ http://www.shiftedbits.net/rambling/why-html-placeholders-dont-replace-html-labels/ http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-...


10

In your case I don't think there is an issue removing labels,Since you are using only select boxes in your form and there are no text fields, When users click on select box they are going to be presented with list of options so I don't think the issues of auto focus, lack of compatibility with browsers for placeholders plays an issue in your case.


9

The change to preserve placeholder text on focus in the recent Firefox 15 release confused me the first time I saw it. I actually thought the field was disabled. In Firefox, the default styling (text color) of placeholder vs. disabled is very similar, and unlike Chrome, there isn't a default focus highlight, so the main indication that the field is ...


8

Sometimes consistency for the sake of consistency is a bad thing. Consistency is a UX principal only in the sense it helps the user understand info on the screen. In this example, it's leading to clutter as oppose to assisting the user. A placeholder should act as a prompt to help users provide the correct info/format into the field. By its nature, a ...


7

Are the images themselves of any value? - placeholder or actual. If you're dealing with a mixed-case of images and missing images, why not design for the most common denominator? Likewise from a design perspective, you're putting heavy emphasis on the image scale and placement itself - are most users more familiar with the image or title of entity? I'd ...


7

User scenario: User starts to fill a form of 6 fields (all filled with placeholders) The user sees the placeholders each time before filling the field and understands what needs to be filled User clicks on the field and the focus makes the placeholder disappear. Before the user might start filling the field, the user gets a message or mail and gets ...


7

Having seen someone trying to highlight some placeholder text for several minutes so that she could delete it and begin typing, I would say the delete on focus would be the most user friendly for all ranges of users. I think the colour of the placeholder text makes a difference here as it was the same colour as the input text, maybe a light grey or ...


7

We checked this recently in a user test and it showed clearly that the field has to be empty once a user clicked it. If the text stays in there they thought they were not able to change this field and did not even try typing. Another thing: I remember an UX consultant from Nielsen Norman reporting that if users see an empty field they tend to write ...


7

The most effective placeholder text I've seen is on the Polar sign up form. The placeholder text is an explanation of why the field is there or what the requirements for the field are. I can think of a couple reasons for this: Most people already know what a "First Name" is without you giving them an example. We don't expect to see full sentences in these ...


7

In most cases, forms are made of native elements and the look and feel is therefor (ideally) determined by the operating system. Mac OS has a different way of showing something is disabled if you compare it to windows. Here are two text fields of Windows XP and Mac OS X with native behavior: vs. I would advice you not to change this behavior for several ...


6

A placeholder is an efficient tool for teaching what your user is going to do next without spoon-feeding him. The key of success here is to give an answer to the question: What am I gonna to do next, how and why? As this could be a lot of information, it's okay to split the answer on multiple dialogs. An example: If you want to get the user's profile image, ...


6

Which approach is better for users and why? The better approach is the default approach. The user has chosen a browser and is used to how that browser does what it does. Don't mess with the defaults.


6

You can try use this pattern (for options already selected): It lets you keep this placeholder look while still not resigning from having labels displayed within the field. You can use other text color (like light gray or something) to degrade the significance of the label of course.


6

Some things I have seen done before in this scenario: Make placeholder text green instead of grey (user input is in black) Placeholder text is in italics (user input is in normal text) Put angle brackets around text, eg. < your name here >. (This one is somewhat "technical", i.e. something a programmer is more likely to understand) I would suggest that ...


6

If its acting as a value then why not have it as a value? The placeholder text should be used to hint at the type of entry that is required. In your particular scenario I would either set the value attribute to Any instead of the placeholder attribute. Then if the user wants to change the value they can, else they leave it as Any and tap Select. Better ...


6

Your placeholders need to be explicit enough to allow users understanding what they are waiting for during loading time. Are we waiting for the chart lib to load ? data ? maybe the whole component ? Axis only This option is probably the best match with other components placeholder as it imply that only data is loading ans everything else is already setup ...


5

I believe it depends on content too much to give a single answer. what is the best way to indicate that the image used is a placeholder image? Generally, you want it to be easy to tell the placeholder from the real thing. So if the expected image is a photo, do not use a photographic image as a placeholder, but rather an icon. Always make sure that the ...


5

Identicons, as shown in the attached image above, are good options as the placeholder for missing images. Advantages: Does not indicate the type of image that's missing, only that this particular item doesn't have its own image. Identicon will prevent user grouping the items with products with the same placeholder images. See below attached image. At ...


5

Reading GP89 answer having seen users try to highlight or even delete placeholder text does seem to strongly suggest that removing the placeholder text on focus would be better. Also placeholder text SHOULD be used as a minor help anyway. The problem seems to be though people are using it as a replacement for labels which clearly placeholder is not. Any ...


5

When you use placeholder, the piece of information, help or example it is trying to relay to the user, is hidden from the moment a user types something. To reveal the info, user has to clear the field (e.g. cutting the text to clipboard, to be pasted back after reading). I'm even tempted to say that most users won't be able to figure out a way to get the ...


Only top voted, non community-wiki answers of a minimum length are eligible