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:
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.
UI Guidelines Strategies
38
To Next Page
Loading...
Need help?
General
Weight and Dimensions
