Content Previews

Contents

  1. Content Previews
    1. Goals
    2. Non-goals
    3. Relevant Art
      1. Google Drive
      2. Quick Look
      3. Chrome
      4. Firefox
      5. GNOME / Sushi
    4. Discussion
    5. Tentative Design
      1. Key Interactions
      2. Content Types
      3. Side by side preview
    6. Open Questions
    7. See Also
    8. Comments

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

Goals

  • 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.

Non-goals

  • 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

http://3.bp.blogspot.com/-Q4kGiCiIGIo/U91ABIA2ydI/AAAAAAAB-os/fVdTp7UmYAc/s1600/google-drive-viewer-new-ui.png

Quick Look

http://image.guardian.co.uk/sys-images/Guardian/Pix/pictures/2009/7/27/1248704400122/quicklook-playback-028.jpg

Also allows viewing two items side by side:

http://cdn.osxdaily.com/wp-content/uploads/2010/03/compare-two-pictures-side-by-side.JPG

Chrome

http://cdn.techdows.com/wp-content/uploads/2010/11/Chrome-PDF-Viewer1.png

Firefox

https://addons.cdn.mozilla.net/user-media/previews/full/78/78524.png?modified=1351536002

GNOME / Sushi

sushi-screenshot.png

Discussion

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):

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/content-selection-single.png

  • 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):

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/content-selection-multiple.png

  • 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.

Files:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/files.png

  • 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).

Web:

TO DO

Content Types

Audio:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/audio.png

Information toggle displays additional metadata.

Documents:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/document.png

Information toggle displays metadata.

Images:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/image.png

Information toggle displays additional metadata.

Video:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/video.png

Information toggle displays additional metadata.

Side by side preview

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

Audio:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/multiple-audio.png

Only one item can be played at once.

Documents:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/multiple-document.png

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

Images:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/multiple-image.png

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

Video:

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/content-previews/multiple-video.png

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

Comments

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