Reading/Multimedia/Media Viewer



Here are our proposed feature requirements for the Media Viewer, a new tool under development by the Wikimedia Foundation's new multimedia team. This tool aims to improve the multimedia viewing experience, to address issues outlined in this planning page.



We invite comments from community members on this discussion page. This page focuses on features for the first release version. To learn about other features under consideration for future releases, check this archive page.

See more user feedback from this first multimedia roundtable, this IRC chat and this third multimedia roundtable, held at Wikimania on August 8th in Hong Kong.

Purpose
The purpose of this tool is to:
 * Provide a richer multimedia experience, to match user expectations
 * Display images in larger size, on the same page as the thumbnail you click on
 * Reduce confusion when users click on thumbnails (bypass duplicate file info page)
 * Offer new ways for viewers to take action (e.g. feedback or tags - future versions)

It aims to serve all users of Wikipedia, Commons and other MediaWiki sites (including 500M ‘readers/viewers’, but also active and very active editors).

Note that this media viewer would initially only be for still images, as we are now using the Kaltura video player for audio and video. But over time, we would like to use the same UI across players, and eventually use a single viewer for all file formats.

Minimum Viable Product
Features for our first minimum viable product include:
 * Show images in larger, media viewer panel when you click on them
 * Modal panel opens up as overlay (on same page where you clicked)
 * Large image appears without clutter (lightbox view)
 * Information about the image can be accessed easily (in lightbox view)
 * Image can be shown in full-screen mode (full screen view)

Workflows
The thumbnails to the right show the reader workflows we are looking to support:
 * Current workflow for viewing images (shown above for reference)
 * Proposed workflow for viewing images with Media Viewer
 * Overview of reader workflows

Lightbox View


The 'lightbox view' for this tool will shows a large image in a white lightbox that extends across the browser window, as well as information in three tiers and related images, as proposed below.

Image
The image should be shown in larger size, as an overlay over the page where the user clicked on the thumbnail, against a white, slightly translucent background. The intent is to makes the image pop up and remove some of the visual clutter typically found on a text article page. The image should be shown at the highest possible size and resolution for the user's current screen and browser.

In the image view, the browser window will be lightened up to hide its contents, but not the entire screen (unlike the Full-screen view where the entire screen will be darkened).

Primary Info
Here are the most important information fields that need to be shown prominently near the image, as requested by our community (see attached wireframe):


 * File name (Zonotrichia atricapilla)
 * Author (e.g. Alejandro Erickson)
 * Source (e.g. Bird Institute)
 * License (e.g. CC-BY-SA-2.0) - or link to license info, if hard to parse
 * Site name (e.g. Wikimedia Commons, with logo icon and explicit link to the file info page)
 * Creation Date (e.g. 12 April, 2012)
 * Uploader name (e.g. Smallbones) - to be moved below the image

This mockup detail shows one way this important information could be presented to the user, to minimize clutter near the image, but still keep important information as prominent as possible.



Secondary Info
Here is the next tier of additional information fields that can be shown below the primary information (with a smaller font):


 * Description (e.g. A Golden-crowned sparrow in British Columbia, Zonotrichia atricapilla … more> )
 * Location (e.g. place name and/or geotag coordinates, if any)
 * Categories (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * File format / size (e.g. JPEG, 4928 x 3264 px (more), 3.8 Mb)

We are also considering showing some information about file usage and feature info:
 * File usage info (e.g. 'This file is being used by 5 other pages. ')
 * Assessment credit (e.g. 'This file was a  on Wikipedia')
 * Tool used for upload (e.g. 'Via Flickr')

Tools
For the first release, we are looking to provide these simple tools:
 * Close button (goes back to article view)
 * Full screen button (expands into full-screen view)
 * Lightbox button (returns to smaller image in browser lightbox)

In future releases, we are looking to provide more tool and features, based on feasibility and desirability (see archive page of features discussed so far).

Full-screen View
The 'full-screen view' for this tool will shows a large image across the entire screen, with minimal information and buttons available on hover, as proposed below.

This is the view that lets you focus exclusively on the image, with no other distractions.

Full image
When you click on the full screen icon, you would see the largest version of the image that fits within the user's screen. The image would be displayed across the entire screen (not just the browser window), set against a pure white background color that only shows the image (instead of a translucent background that reveals the page below).

Information
You would see the file name and the author/source/license below the image, as well as link to Commons.

Note that we would never make that info overlap the image, even in full screen, because it could obscure important map or diagram labels; so we may want to consider a black section at the bottom of the screen for that information, as proposed in the full screen mockup below.

If desired by users, it may be possible to include more information below the image, available by scrolling down. But to reduce clutter, that info would only need to appear when they hover over the bottom of the screen.

Tasks
Here are some of the development tasks we are working on for the first release of the Media Viewer. They are listed in order of priority. We expect that only the first half of these tasks will be included in the first release, though we plan to keep adding more features in subsequent releases.

Get CommonsMetaData API to work
As a developer, I want to get the CommonsMetaData extension to work, so that I can implement key features of Media Viewer. (See Mingle ticket #37)

Improve CommonsMetaData Extension
As a developer, I want to improve the CommonsMetaData extension, so that I can implement more key features of Media Viewer. (See Mingle ticket #48)

Show Title
As a user, I want to see the file's title, so I can know what it's about. (See Mingle ticket #31)

Show Site Name
As a user, I want to know the site where the file is hosted, so I can view its file info page and edit it as needed. (See Mingle ticket #30)

Show Author and Source
As a user, I want to read the author and/or source for this file, so that I can know how it was created. (See Mingle ticket #40)

Show License Info
As a user, I want to see the license info about this file, so that I know its sharing status. (See Mingle ticket #34)

Show Description
As a user, I want to read the description for this file, so that I can learn more about it. (See Mingle ticket #33)

Show Date
As a user, I want to see the date of this file, so I can know when it was created (or uploaded). (See Mingle ticket #47)

Show Location
As a user, I want to see location information for this file, if any, so that I can know where it was created. (See Mingle ticket #42)

Show Categories
As a user, I want to see category names for this file, so that I can see more related files, as well as curate this file. (See Mingle ticket #41)

Show File Usage
As a user, I want to know if this file was included in other articles, so that I can see how it was used. (See Mingle ticket #44)

Show Assessed Files
As a user, I want to know if this file was assessed, featured and/or rated, so that I can evaluate its quality. (See Mingle ticket #45)

Show Site Icon
As a user, I want to see at a glance where the site where the file is hosted, so I can view its file info page and edit it as needed. (See Mingle ticket #39)

Rename 'Multimedia Viewer' to 'Media Viewer'
As a user, I prefer short names for my extensions, so that they don't take up too much space. (See Mingle ticket #46)

More tasks may be added here, as needed -- as well as on our Multimedia team's Mingle project management site.

Wishlist for second version
For the next version in fall 2013, we are considering these features (see archive page of features discussed so far):
 * Next/previous arrows (step through related files in same gallery/category)
 * Related files button (show thumbnails of files in same gallery/category)
 * Discussion button (goes to Commons talk page)
 * Edit button? (goes to Commons edit page)
 * Category button (for adding categories for this file on Commons)
 * Slideshow button (very simple slideshow mode initially, no music, just images)

Wishlist for future versions
For future releases, we are considering these features: (see archive page of features discussed so far)
 * thanks (send notification to uploader to show appreciation, through notifications)
 * flag (reports this file as inappropriate on Commons)
 * tag (tag this file with a new category, geolocation or intersecting tags)
 * add (insert this file in an article, or into a gallery)
 * share (share this file on FB, TW and other networks)

These tools would help users take action on the media they are viewing. For example, a user might want to add a file to their watchlist, or thank the person who uploaded the file, flag a file as inappropriate, tag it with a new category, add this file to an article or share it on social networks, etc. These tools could be offered in a toolbar above or below the image, with a few icons for tools such as Watch, Thank, Flag, Tag, Add, or Share.

Some of these tools would require modal displays of user options when you click on them, so it might also be worth it to think of the default 'Info' view as the first tab in the toolbar, which could be replaced by a different view if you click on another tool. For example, clicking on 'Tag' could display a couple text fields, one for categories, another for geo coordinates, and eventually one for intersecting tags.

Although we will not be able to implement these tools in the first release in September, we would like to develop some of them incrementally in the coming year. So it makes sense for us to start a design exploration of where these tools would appear in the Media Viewer, and take that in account in our first design, so we don't have to redesign everything from scratch when we are ready to start adding these tools in coming months.

Mockups
Here are larger versions of the latest mockups from our design team, for discussion purposes.

Full-screen View


See earlier mockups on this MediaWiki see archive page of features discussed so far and on this draft page.

Code
We are now in early stages of development on this feature and the current alpha is not yet ready for testing.

Our work in progress can be viewed here (Gerrit 78341).

See also:
 * Prototype:, source at, depends on gerrit:72844. --by MarkTraceur (talk)

Research
For this product, we would like to track basic usage patterns, so that research can inform our next steps.

Here is a preliminary list of research questions we hope to answer, for discussion purposes.
 * How many times did users click on a thumbnail to open the media viewer?
 * How many of these clicks were from an article page thumbnail? a gallery thumbnail? a category thumbnail?
 * How many times did users click on the full screen button? (total and percentage)
 * How many times did users click on the Commons link? (total and percentage)
 * How many times did users click on the close button? (total and percentage)
 * How many unique users opened the media viewer? how many were logged in?
 * How many users enabled this beta feature? (pull data from beta features research)
 * How many users disabled this beta feature? (pull data from beta features research)

These metrics would be collected with EventLogging and related technologies, and visualized with LIMN dashboards (see example). We would track this data on a daily basis, as well as on a cumulative basis.