UI Guidelines
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
View more thumbnail images in
a table or list.
View more thumbnail images in
a carousel view.
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.
38
Action using the navigation keys
Move a finger vertically on the trackpad.
Move a finger horizontally across the
trackpad.
Action using a touch screen
•
Drag a finger vertically on the touch
screen.
•
Swipe up or down on the screen.
•
Drag a finger horizontally on the touch
screen.
•
Swipe across the screen.
Strategies