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.
Use thumbnail images in a table to display several images at one time.
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.
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.
Users can view more images by performing the following actions:
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 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.