Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

If a data source doesn't contain images for certain items, what is the best way to indicate that the image used is a placeholder image?

The type of placeholder image would probably alter dependant on the type of image that should be there. For example if its a missing image of a person then a silhouetted image of a person would probably be used. But what if its a generic image whereby I don't want to indicate the type of image that's missing, only that this particular item doesn't have its own image.

Any thoughts?

EDIT/ADDITION

Ok lets get into specifics then. Lets assume a placeholder is needed. it has to be a generic placeholder i.e. no human silhouette or identicon or file type. Is the best solution a variation on the flat grey mountain and sun icon? I believe it is but what are peoples thoughts on this?

share|improve this question
2  
For serious answers see below but for a bit of fun you could always consider Fill Murray –  Charles Wesley Dec 10 '13 at 17:40
    
@CharlesWesley I will be considering that :) –  Dave Haigh Dec 13 '13 at 15:50

4 Answers 4

up vote 3 down vote accepted

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 placeholder matches the style and colors of the system, visually showing that this piece of graphic is a part of the program controls, not a part of the user contents, or perhaps just leave the space empty.

Some variations:

  • Layout does not necessarily require a placeholder. Not finding a good example right now, so this menu will have to do:

    enter image description here

  • Containers can be used so that it does not matter whether there is an image inside or not (Empty folder below)
  • Icons: could be used, depending on the situation, just like the silhouette you mention, or the Empty Image below:

    enter image description here

Edit/Addition (see question)

If the image that needs a placeholder is the type of image that actually could be The Sun and the Mountain, then yes, using that metaphor would work.

If the image, when existing, rather would be a picture of a tool (a hammer), a shape (a polygon, a border, a rounded corner), an organism (an amoeba), then pick another metaphor accordingly.

If you really need a placeholder image/icon for your "generic image", then the job starts in finding that metaphor, and many systems find The Sun and the Mountain appropriate.

share|improve this answer
    
Good points. Agree with everything here. ive updated my question getting into specifics of the icon to use. What are your thoughts? –  Dave Haigh Sep 26 '13 at 9:24
    
Amending my answer. –  JOG Oct 31 '13 at 16:11

enter image description here

Will this be a good solution? =)

The use of an Identicon as shown in the attached image above as the placeholder for missing images.

2 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.

enter image description here

At first glanced, using same placeholder images, users might group them as similar product.

share|improve this answer
    
You know it wouldn't hurt to actually mention the word "identicon"... –  Tobias Kienzler Sep 25 '13 at 14:47
    
Thanks Tobias, Identicon that's the word. I've been scratching my head over what does that call. –  SimonTeo Sep 26 '13 at 2:24
    
You're welcome - I found it either on gravatar.com or somewhere on meta.stackoverflow.com... Anyway, more information on it is at scott.sherrillmix.com/blog/blogger/wp_identicon –  Tobias Kienzler Sep 26 '13 at 7:03
1  
(sidenote: If you're more into unicorns...) –  Tobias Kienzler Sep 26 '13 at 7:10
1  
(...and animations: chaostangent.com/2009/09/50-frames-of-life - I'll stop here...) –  Tobias Kienzler Sep 26 '13 at 7:18

enter image description here

In that case, you might just want to use a plain grey box. The sun and mountain suggest a photo of a landscape if you ask me. Just my thoughts.

share|improve this answer
    
I would think that the images still take some time to load, resp. that some error is preventing the images from loading. –  unor Dec 10 '13 at 18:47

In @SimonTeo's case, a much better solution in my opinion is to abbreviate the name/username combined with different background-colors.

If someone's called "Name Namely":

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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