Image Browser


Users need to view and/or select images out of a set of images


Allow users to select an image out of a set of thumbnail images


Use when

Users have to view images as part of some higher level task such as viewing a portfolio, selecting an image to be printed, search for an image to be included in a presentation, viewing photo's of a car and so on. The number of images should not be to large, from 1 to 30 images is ok. Can be part of selecting the appropriate Product Page for a set of products.


Present a series of thumbnails of the image, possibly combined with a label or using a fixed label location as in an Icon Menu. Users can then select an image that is shown in the main display area if that is feasible or otherwise in a separate window. One technique to make it more "fun" is to animate the image from thumbnail to full size. When the users sees one image, use Stepping to allow them to navigate through the collection one by one.


Showing a thumbnail allows people to recognize the image they want visually without creating a bandwidth and screen-space problem. When the thumbnails and the selected image are shown in the same space, users can also switch easily between images.

More Examples


plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below