Guidelines that describe how to use thumbnail images to give users the best previews of files as they browse with your Windows Store app.
If you want users to browse files with your app, you should let users see previews of those files as they browse by displaying thumbnail images. For example, when users use a file picker to browse the file system, Windows use thumbnails to let the user preview all the files in a location as they browse. We also recommend that you use a thumbnail to give the user a preview of a single file to display alongside other, more detailed file information.
Using thumbnails to preview files in this way helps keep the look and feel of your app consistent with Windows Store app design as used in Windows 8.
Appropriate use of thumbnails
-
Displaying previews for many items (like files and folders)
For example, a photo gallery app would use thumbnails to give users a small view of each picture as the users browse their photos.
-
Displaying a preview for an individual item (like a file)
For example, the user may want to see more information about a file, including a larger thumbnail for a better preview, before deciding whether to open the file.
Inappropriate use of thumbnails
-
Don't request thumbnails larger than 1024 pixels (on the longest side)
Thumbnail images should be small; sizes over 1024 pixels are not supported.
User experience guidelines
Get thumbnail images that give users the best previews for the kinds of files they are browsing
Users often want to browse for particular kinds of files—they might want to look through their photos or music. You should provide thumbnail images that are optimized for displaying the kinds of files that your user wants to browse. To show thumbnail images for files, you need to specify a thumbnail mode.
This table shows the thumbnail modes that we recommend using for various kinds of files.
| Display previews for | Thumbnail modes | Features of the retrieved thumbnail images |
|---|---|---|
|
| |
|
| |
|
|
Tip The features of thumbnail images for different modes might become even more specific in the future. To account for this, we recommend that you specify the thumbnail mode that most closely describes the kinds of files you want to display previews for. For example, if you want to display video files you should use the videosView thumbnail mode.
This table shows examples of thumbnail images that you might retrieve for different kinds of items if you specified a particular thumbnail mode.
| Item | Specified thumbnail mode(s) | ||
|---|---|---|---|
| Picture file |
Retrieved thumbnail image: |
Retrieved thumbnail image:
|
Retrieved thumbnail image:
|
| Video file |
Retrieved thumbnail image that has an adornment:
|
Retrieved thumbnail image:
|
Retrieved thumbnail image:
|
| Music file |
Retrieved thumbnail image:
Note If the associated app is a Windows Store app, the app's tile background color is used. |
Retrieved thumbnail image:
Note If the associated app is a Windows Store app, the app's tile background color is used. |
Retrieved thumbnail image:
|
| Document file |
Retrieved thumbnail image:
Note If the associated app is a Windows Store app, the app's tile background color is used. |
Retrieved thumbnail image:
Note If the associated app is a Windows Store app, the app's tile background color is used. |
Retrieved thumbnail image:
|
| Folder |
Retrieved thumbnail image:
|
No thumbnail image is retrieved. |
Retrieved thumbnail image:
|
| File group |
Retrieved thumbnail image:
|
Retrieved thumbnail image:
|
Retrieved thumbnail image:
|
Displaying previews of pictures or videos
-
Get thumbnails using picturesView or videosView thumbnail mode
When you call a method to get the thumbnail, you should specify thumbnailMode.picturesView or thumbnailMode.videosView as appropriate.
Retrieved thumbnail images:
- Are cropped to make good previews. Windows tries to preserve the most meaningful part of the picture to use as the thumbnail image. For example, a portrait-orientated photo is cropped at 1/3 of the height in an attempt to preserve people's faces that might be in the picture.
- Size: Medium, preferably at least 190 x 130 pixels. When you try to retrieve a thumbnail of this size, specify 190 as the size of the image.
- Aspect ratio: Uniform, wide aspect ratio of about .7. The uniform aspect ratio is good for aligning thumbnail images in a grid.
-
Display multiple items (like files and/or folders)
Thumbnail images that are retrieved using the picturesView or videosView thumbnail modes are intended for letting users browse many files. Avoid using them to represent a single, individual file.
-
Represent files using previews, only
Avoid displaying additional file information alongside thumbnails. This lets users browse the files seeing just the previews (supplied by the thumbnail images) without the additional clutter of unneeded details about each file.
This lets users browse files in a layout that is similar to the way that files are displayed in a file picker when it is called in thumbnail display mode.
-
Differentiate folders and file groups from individual files by superimposing a text label over the thumbnail image
This text label should be either the name of the folder or the criteria used to form the group of files.
-
Display placeholder images while thumbnail images load
A placeholder image is a generic representation that you should display in place of a thumbnail image while the thumbnail image loads. Using placeholders in this way helps your app seem more responsive because users can interact with items even before the previews load.
We recommend that a placeholder be:
- Specific to the kind of item that it stands in for. For example, folders, pictures, and videos should all have their own specialized placeholders that use different icons, text, and/or colors.
- The same size and aspect ratio as the thumbnail image that it stands in for.
- Displayed until the thumbnail image is loaded, if a thumbnail can be retrieved.
-
If you can't retrieve a thumbnail for an item (like a file, folder, or file group), display a placeholder
There might be a problem retrieving the thumbnail for an item or the item (like a folder or a group of files) might not have a thumbnail. In either case, having a placeholder that you can fall back on helps make sure that users can browse smoothly and uninterrupted.
Displaying previews of documents or music files
-
Get thumbnails using musicView, documentsView or listView thumbnail mode
When you call a method to get the thumbnail, you should specify thumbnailMode.documentsView, thumbnailMode.musicView, or thumbnailMode.listView as appropriate.
-
Display multiple items (like files and/or folders)
The thumbnails that are retrieved by using one of these modes are intended for creating views that browse multiple files. Avoid using them to represent a single, individual file.
-
Represent files using previews and relevant file information
In addition to previews of the files, which are supplied by thumbnail images, you should display relevant file information for users while they browse. This lets users identify key information about a file that may not be readily available from a thumbnail image alone. For example, you might display the name of the artist for a music file, which users may not know just by looking at the album art for the file.
This lets users browse files in a layout that is similar to the layout used by a file picker when it is called in thumbnail display mode.
-
Represent folders and file groups by using a placeholder image and by superimposing a text label over the placeholder
We recommend that you display a placeholder image with superimposed text to differentiate system constructs like folders and file groups from actual files. A visual distinction between these types of items will help make it easier for users who are browsing files with your app.
We recommend that a placeholder should have:
- The same size and aspect ratio as the thumbnail image that it stands in for.
- A text label that is either the name of the folder or the criteria that was used to form the group of files
-
Display placeholder images while thumbnail images load
A placeholder image is a generic representation that you should display in place of a thumbnail image while the thumbnail image loads. Using placeholders in this way helps your app seem more responsive because users can interact with items even before the previews load.
We recommend that a placeholder be:
- Specific to the kind of item that it stands in for. For example, folders, pictures, and videos should all have their own specialized placeholders that use different icons, text, and/or colors.
- The same size and aspect ratio as the thumbnail image that it stands in for.
- Displayed until the thumbnail image is loaded, if a thumbnail can be retrieved.
-
If you can't retrieve a thumbnail for an item (like a file, folder, or file group), display a placeholder
There might be a problem retrieving the thumbnail for an item or the item (like a folder or a group of files) might not have a thumbnail. In either case, having a placeholder that you can fall back on helps make sure that users can browse smoothly and uninterrupted.
Displaying a preview for a single item
-
Get the thumbnail using singleItem thumbnail mode
When you call a method to get the thumbnail, you should specify thumbnailMode.singleItem.
-
Display a single item (like one file or one folder)
The thumbnail that is retrieved using this mode is intended for creating a detailed view of a single item. This detail view could be similar to the way that Windows Explorer displays a single file. Avoid using a thumbnail that is retrieved for single item to represent that item in a view that displays multiple items.
-
Display a placeholder image while the thumbnail image loads
A placeholder image is a generic representation that you should display in place of a thumbnail image while the thumbnail image loads. Using a placeholder in this way helps your app seem more responsive because users can interact with the item even before the preview loads.
We recommend that a placeholder be:
- Specific to the kind of item that it stands in for. For example, folders, pictures, and videos should all have their own specialized placeholders that use different icons, text, and/or colors.
- The same size and aspect ratio as the thumbnail image that it stands in for.
- Displayed until the thumbnail image is loaded, if a thumbnail can be retrieved.
-
If you can't retrieve a thumbnail for an item (like a file, folder, or file group), display a placeholder
There might be a problem retrieving the thumbnail for an item or the item (like a folder or a group of files) might not have a thumbnail. In either case, having a placeholder that you can fall back on helps make sure that users can browse smoothly and uninterrupted.
Related topics
Build date: 11/29/2012
