Thumbnail

Tagged as: , , , ,
 

The Design Need:

You want to offer users an overview of available pictures, movies or pages without showing complete images.

Design Examples:

Flickr.com uses thumnails with different orientations.

Design Solution:

Show a miniature version of the image, movie or webpage on the website. You can use thumbnails as you would use titles in a content overview.

Technically there are many different ways to create thumbnails, from fully automated scripts to manually. Some design best practices to keep in mind when using thumbnails in your website:

  • When you create or crop thumbnails, make sure they can show the user what to expect. The image should show the most important information from the image or movie. The best way is to combine resizing and cropping to give enough detail that is still visible & comprehensible on a small image.
  • If a movie frame is used as a thumbnail, ensure that you choose a frame that conveys something about the movie. Often the first or last frame is not the best choice.
  • Make the thumbnail as well as the caption clickable. This helps users navigate to the content of their choice.
  • When thumbnails are presented next to eachother, make all thumbnails the same size. This helps users to browse through images and avoids a cluttered impression.

When to use:

You should use this design pattern:

  • Whenever you want to show an overview of pictures, movies or other images for the user to browse through
  • If showing all full images would take up too much screen space and/or would slow down the website too much
  • If you want to give visitors a preview before they decide to download a certain picture, movie or other image.

Why use this solution (rationale):

Using thumbnails helps to provide overviews of the available pictures, images or movies on a website. Thumbnails also give previews of content which helps users in their search or selection process. With thumbnails pages will load faster since not all full images need to be downloaded at once.

More info elsewhere:

• Categorized as Design Patterns