Displaying images

Images can be displayed individually on the screen and as thumbnails in a table, list, or carousel.

Use the single image view to display a full-sized image. In this view, users can zoom in to and pan the image.


This screen shows an example of the single image view.

Use thumbnail images in a table to display several images at one time.


This screen shows an example of thumbnail images in a table.

Use thumbnail images in a list to help users find an image quickly. The list displays smaller images than the table and includes additional information, such as the name and date, for each image.


This screen shows an example of thumbnail images in a list view.

Use thumbnail images in a carousel view to allow users to browse through a related set of images such as featured items or a photo album. This view requires less space and allows other items to appear on the screen at the same time.


This screen shows an example of thumbnail images in a carousel view.

Users can view more images by performing the following actions:

User goal

Action using the navigation keys

Action using a touch screen

View more thumbnail images in a table or list.

Move a finger vertically on the trackpad.

  • Drag a finger vertically on the touch screen.
  • Swipe up or down on the screen.

View more thumbnail images in a carousel view.

Move a finger horizontally across the trackpad.

  • Drag a finger horizontally on the touch screen.
  • Swipe across the screen.

Best practice: Displaying images

Guidelines for displaying thumbnail images

  • Use the same size for each thumbnail image in a particular view. Resize or crop images if necessary. If you must display the original image without cropping it, create a box that is the same size as the other images and place the box behind the image. Center-align the width or height of the image.
  • Do not distort the image proportions.

Guidelines for displaying images in a single image view, table, or list

  • Always provide a single image view so that users can zoom in to and pan images.
  • In a table, display four images in each row by default.
  • If images take time to display, render the images in increments and provide placeholder images.

Guidelines for displaying thumbnail images in a carousel view

  • Avoid using a carousel view if the primary goal for users is to find a specific image. Use a table or list instead.
  • Display three to seven images on the screen at one time. The number of images to include on one screen varies depending on the size of the thumbnail images and the width of the screen.
  • Display the total number of images and indicate the current position of the highlighted image.
  • If there are more images than can be displayed on the screen at one time, display a partial image or an arrow on the left or right side of the screen. Include a scroll bar if it is important to show the beginning and the end of the images in the carousel view.
  • If images have a specific order, provide users with an indication of the start and end of the set of images.
  • Assign shortcut keys for moving to the next or previous image. Where possible, in English, allow users to press "N" to move to the next image and "P" to move to the previous image.
  • Avoid placing images in a carousel view near other components.
  • If you include labels, place the labels above the image on BlackBerry devices with a touch screen. This approach allows users an unobstructed view of the label as they move through the images.
comments powered by Disqus