UI Practicum #4. Everything Your Need to Know About Thumbnails

Published May 20, 2016 by Jane Portman
Categories:

• Articles
• Design
• UI Practicum

In this issue of UI Practicum we’ll talk about best practices around thumbnail views. Photo galleries, ecommerce stores, visual blogs — that’s where you’ll need thumbnails most often.

In plain English, a thumbnail is a small preview image, accompanied by a text label. Sounds easy, right? But there’s a ton of potential design traps! Let’s make sure you don’t fall into them with your next project.

Are text labels really necessary?

Text labels are an absolute must in the majority of cases. The only valid exception is probably a photo roll in your own iPhone.

For the rest of cases, there’s important information to be conveyed. And you can’t rely on the image to do that! In the ideal world (and in app presentations) images are pretty and make sense. In real life, images submitted by users usually fall somewhere between “bad” and “very bad” (unless it’s an Instagram feed of a famous designer). And more importantly, they can be uninformative and confusing!

Even if you’re curating the images yourself (imagine an online store), there inevitably will be unconventional products that need text explanation.

You can only rely on a thumbnail with a text label. It will convey full info even if the image fails.

Pick the optimal thumbnail size

When it comes to thumbnail size, it’s the same good old challenge: fitting as much content as possible without sacrificing its quality.

So when thinking about image size, try and follow these recommendations:

• image size should be large enough for comfortable viewing;
• image size should be small enough to accommodate the necessary amount of text without crazy line wrapping;
• image size should be not too large so that the content density remains good (reasonably large number of thumbnails fits into one page);
• there should be a good amount of white space between thumbnails to let the layout “breathe.”

Also make sure that the label doesn’t look detached from the image as a result of too much spacing.

Define your approach to the image ratio problem

Not surprising that images come in a variety of aspect ratios! That might not be obvious for a grid of images in the blog where you hand-pick everything. But it can be such a mess if you’re designing a yellow-pages app!

You can just place all images inside a flexible grid and hope for the best, but I don’t recommend you do that. Instead, use one of these methods.

Method 1. Prevent. Try and stick to a consistent image size (now making that a challenge for your content team). Or make it a software constraint like Instagram does.

Method 2. Trim. Trim down the images to one aspect ratio of your choice (usually a square). But keep in mind, not images look good trimmed, and it requires some AI to keep faces inside (there’s some software for that). It’s up to you whether to trim the image permanently (not recommended), or for the thumbnail only.

Method 3. Fit. Assign a square area (or a rectangle) to the image, which might even have a border, and “fit” the images in — there will be white sides from time to time, but the grid will be safe and pretty. If each square area has a subtle border, it will even look good most of the time (especially if images have white background).

Design the text label

The usual challenge here is too much information to display: like 3-5 types of data for a single image. And you don’t have all the vertical space in the world! To solve this problem, use the following methods.

• Try and limit the number of text lines under each image to 2 or 3.
• Use contrast to make the lines look different. You can use contrast in size or in color. Make sure this contrast is dramatic enough to be visible (2px font size difference is not enough, for example).
• If you have larger paragraphs of text, ensure that the thumbnail is wide enough (that’s why landscape banners work well for blog post previews).
• If you have a ton of information to display, try combining a few entries into a single monotonous line of text (usually set in smaller type).

Call-to-action buttons: to be or not to be?

Generally speaking, adding buttons to each entry makes the layout super-crowded. Any CTA button adds another line to your label (using precious vertical space), and also adds visual noise.

So your choice to include a CTA for each thumbnail should be very, very purposeful.

I want to address ecommerce here as an example. There are two actions you trigger here: “Add to cart” and “View details.” If your idea is to include “View details” only, then we can skip on the buttons entirely: the pattern of clicking onto a thumbnail to view details is natural and obvious.

Account for critical cases

Here go a few cases you should take into account when it comes to your content. If you’re designing a layout, make sure some of your thumbnails fall into these categories:

• text entry missing;
• text entry too long (allow for comfortable line wrapping);
• image missing (introduce a pleasant placeholder);
• exotic image ratio;
• no price (free item);
• item out of stock;
• any other situations like that.

If you’re the one writing the code, make sure you account for these issues and your layout doesn’t break.

Practicum

Whenever you’re dealing with a thumbnail view, follow these guidelines:

• Optimize your thumbnail size to make it as large as possible, while maintaining good data density (reasonable amount of thumbnails per line or page).
• Define your approach to different image ratios.
• Identify what data you need to include in the text labels.
• Carefully design the text label to fit your content, using contrast in size or color.
• Make a thoughtful decision whether you need a CTA for each thumbnail.
• Don’t forget to design for critical cases (missing elements, etc.)
• Follow best practices for data tables to design controls around your thumbnail view.

Have UI challenges you’re struggling with? Send in the screenshots at jane@uibreakfast.com, and I’ll tear down the most interesting situations here in UI Practicum.