A hole would be something. No, it was nothing.
Rock Biter, The NeverEnding Story
After countless hours, days, months, or even years of work, your social-networking-slash-content-management application is complete. It’s scalable, it’s rich, it flashes pretty lights and makes every comment sound witty. You throw the launch party, break the bottle across the bow, and send the final check to the offshore development firm. You open the doors to eager users who pour into your site and fill it with …nothing.
Welcome to reality: most users are mostly lazy.
Icons, avatars, and thumbnails are great for previewing a larger, more detailed content item; they invite interaction and self-expression. While the dedicated core of users within an online community might be happy to personalize and enhance their data with photo images, the larger population of casual users rarely has the time or the inclination to upload one more image. So how can you handle those cases where no image is available?
Option 1: Prevention
Make it required
One simple, rather heavy-handed solution is to require an image, either when a user creates a system account or uploads their media. This can be extremely useful in cases where imagery is critical to the success of the system, such as a dating site, where user behavior is heavily influenced by photos of other users. In other scenarios it adds a potentially onerous step to a valuable process – registered users and live content are often far more valuable than anonymous users. It may be more useful to ignore metadata like thumbnail images until the user has completed the task and you can make a compelling case for the value of additional information. Get them in the door first, and then make the pitch.
Display a Default Image
Probably the most common solution to the problem of missing thumbnail images is to display a default image as a placeholder. This kind of functionality is easily implemented and can include a message or image encouraging the user to upload a custom image.
Default images seem to fall across a spectrum: at one end, there’s the textual “No photo yet” message. At the other end is branded imagery like Vimeo’s monkey head icon. Default images can be a great place to inject humor, reinforce a brand, and cajole users into getting more involved.
If you use default images in your site, be sure to make them look like default/placeholder content: do not try to trick a user by displaying an image that mimics likely site content. If the image doesn’t clearly read as default data, users will become confused and frustrated, thinking the image is the result of an error.
Use an Image Library
Some interfaces up the ante by providing a library of default images. AIM allows users to select a buddy icon from an image a library or upload a custom image. iChat follows suit, as does the Windows OS.
Other applications automate the process. I haven’t ever noticed randomly-assigned default images, but some message boards vary a user’s avatar according to the number of posts they’ve made. Linking display information to metadata or member activity can create simple incentives for valuable behaviors.
Find a Related Image
An alternative to using a static default image or library is to use a related image. Meetup allows members to use an event photo in place of a group photo.
Option 2: Treatment
Perhaps none of the above examples fits your needs. Perhaps most of your users aren’t uploading images and you’re not comfortable studding your interface with default imagery. Embrace the nothing: don’t replace missing images. This option can be valuable for interfaces designed to minimize extraneous data, such as applications that target mobile devices or are bandwidth-sensitive. If the default imagery isn’t really adding value to the user experience, why include it at all?
If you decide not to show anything, you’ll have to decide to handle the display space. Do you preserve the empty space or is it more useful to flow the other page elements into the space? Probably the most relevant factor here is the role of the design grid: in cases where many member listings or content items are listed together, preserving the empty space may facilitate visual browsing. In other cases (such as a single content display) it may be more useful to increase data density by moving the other UI elements into the space.