Content Previews

Embedded previews for various content types, including documents, music, video and images.


  • Allow inspecting a content item in order to identify it.
  • View two content items simultaneously.
  • Browse different content items from the preview, in order to allow comparison.
  • Integrate into the workflow for selecting items, when using the file selector (or content selection).

  • Allow quick inspection of content items from the Files application.

  • Preview content items from the replace files dialog?
  • Embedded previews in Web.


  • Embed previews in any application, anywhere.
  • Replace viewer/player applications.
  • Detailed inspection of content items, such as:
    • Search/find inside documents.
    • Fined-grained scrubbing/seek in audio/video.
  • View more than two content items simultaneously.

Relevant Art

Google Drive

Quick Look

Also allows viewing two items side by side:



GNOME / Sushi



Observations about relevant art:

  • In Google Drive and Finder, the primary action is to open a content item in a different application. Previewing is a secondary action.
  • There's a convention that left and right are used for browsing between different content items. This can be seen elsewhere in the web, such as when viewing images in Flickr or G+.
  • Quick Look and Sushi focus on quickly entering and exiting the preview, using the spacebar. A UI equivalent (such as a toggle button located in the same position) could be advantageous.
  • Google Drive, Chrome and Firefox allow actions from the preview - it's a jumping off point for further interaction. This isn't true for Quick Look and Sushi.
  • Most of the relevant art uses a dark lightbox style, similar to GNOME's dark theme.

Additional functionality to consider:

  • Zoom controls.
  • Rotate for images.
  • Show number of items in the current context (folder, selection), for example: "3 of 34".
  • Allow viewing metadata about a content item.

Tentative Design

Key Interactions

Content selection (single item mode):

  • Preview button shows a preview of the selected content item. Back button returns to the content view.
  • Floating back/forward buttons allow browsing from within the preview (these are shown when the mouse pointer moves over the preview).
  • The content chooser tracks the preview, so that returning to the chooser shows the last previewed item, which should be selected.

Content selection (multiple item mode):

  • The preview button displays the most recently selected item.
  • Previewed items can be selected/deselected by clicking the preview.
  • A drop down from the header bar shows a list of all selected items.


  • The preview button selects the currently selected item (this action should also be available from a context menu).
  • The preview window allows browsing between content items. The browse order follows the sort order in the Files window.
  • Files tracks the preview - if the preview window is closed, the view displays the most recently viewed previewed item.
  • Only one or two items can be previewed simultaneously (see notes on side by side previewing below).



Content Types


Information toggle displays additional metadata.


Information toggle displays metadata.


Information toggle displays additional metadata.


Information toggle displays additional metadata.

Side by side preview

Available from Files when two content items are selected for preview.


Only one item can be played at once.


Only displays the first page of each document (this could be changed in the future).


Each image is shown on either side, and the slider can be used to move the partition between them.


Videos play simultaneously, without sound (a toggle to control which video omits sound could be added here).

Open Questions

  • Zoom controls for images/documents?

See Also


Design/OS/ContentPreviews (last edited 2015-05-01 18:38:48 by AllanDay)