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.
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.
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:
Also make sure that the label doesn’t look detached from the image as a result of too much spacing.
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).
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.
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.
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:
If you’re the one writing the code, make sure you account for these issues and your layout doesn’t break.
Whenever you’re dealing with a thumbnail view, follow these guidelines:
Join 8,000 awesome people on my mailing list — SaaS founders, product managers, designers & developers who are business-driven and want to build better software.