Reading/Multimedia/Media Viewer





Here are our proposed feature requirements for the Media Viewer, a new tool under consideration 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.

See more user feedback from this first multimedia roundtable, this IRC chat and this third multimedia roundtable, held at Wikimania's upcoming multimedia roundtable 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)

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 (image view)
 * Information about the image can be accessed easily in image 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
 * Proposed workflow for viewing images with Media Viewer

Image View
The 'image view' for this tool will shows a large image across the browser window, as well as information in three tiers, 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 dark, 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 darkened, 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 right below the image, as requested by our community (see attached wireframe):


 * File name (Zonotrichia atricapilla.jpg)
 * Author (e.g. Alejandro Erickson)
 * Source (e.g. Bird Institute)
 * License (e.g. CC-BY-SA-2.0)
 * Permissions (if any, for images with restricted rights)
 * Site name (e.g. Wikimedia Commons, with logo icon and explicit link to the file info page)
 * Uploader name (e.g. Smallbones)
 * Date (e.g. 12 April, 2012)

Here is one possible way that we could display these important fields right below the image:

''Zonotrichia atricapilla.jpg By Alejandro Erickson - Bird Institute - CC-BY-SA-2.0 (see rights) Posted on  by  on 12 April, 2012''

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


 * Special credit (e.g. Featured picture in Wiki Loves Monuments 2013 or required GLAM credit)
 * Description (e.g. A Golden-crowned sparrow in British Columbia, Zonotrichia atricapilla … more> )
 * Categories (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * File format / size (e.g. JPEG, 4928 x 3264 px (more), 3.8 Mb)
 * Tool used for upload (e.g. 'Via Flickr')
 * Location (e.g. place name and/or geotag coordinates, if any)

Details
A third tier of details that can be shown below the secondary information, but with an even smaller font (though not so small that you have to squint to read it). This would include some of the Exif data, such as camera, lens, focal length, shutter speed, aperture, ISO, etc. This could also be a good place to show curation categories and keywords, once we start implementing tags next year. I would also suggest that we add some of the other articles that are using this image, with a link to see more.

Tools

 * Full screen button
 * Close button
 * Info button? (if needed to switch modes)
 * Other buttons for next releases? (e.g.: Thanks)

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. When you click on the full screen icon, you would see a pure black background color that only shows the image, instead of a translucent background that reveals the page below. You would also see the file name and the author/source/license, as well as link to Commons. But that info would only need to appear when they hover over the bottom of the screen.

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.

Wishlist for second version
For the next version in fall 2013, we are considering these features:
 * 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:
 * thanks button (send notification to uploader to show appreciation, once notifications)
 * flag button (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.

Wireframes
Here are some first wireframes, for discussion purposes only. The final design will be provided by our design team, but this provides a general idea of what we are thinking of in these feature requirements.

Story Maps
See also first story maps.

Mockups
Here are some first design mockups from our design team, for discussion purposes.

Full-screen View


See more mockups on this MediaWiki draft page.

Code
We are now in early stages of development on this feature.

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

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