Reading/Multimedia/Media Viewer



This is the project hub for Media Viewer, a new tool developed by Wikimedia Foundation's mm>Special:MyLanguage/Multimedia|multimedia team. For a quick overview of this project, visit about>Special:MyLanguage/Extension:Media Viewer/About|'About Media Viewer'.

This new multimedia browser displays images in larger size, with useful information about their content, authors and related metadata. It also offers a number of features to enlarge, share, download or embed media files, as described below.

Media Viewer was tested extensively during development, through research>Special:MyLanguage/Media Viewer Research Round 2 (August 2014)|usability studies, community consultations and online surveys. Based on this user feedback, the multimedia team developed a set of improvements>Special:MyLanguage/Multimedia/Media Viewer/Improvements|new improvements, to make Media Viewer easier to use by readers and casual editors, the primary target users for this tool.

Lessons learned from the development and from observing Media Viewer in production are available in the form of a retrospective and a research report.

Learn more about Media Viewer on ext>Special:MyLanguage/Help:Extension:Media Viewer|this help page. Feedback is welcome in talk>Extension talk:Media Viewer/About|this discussion.

Goals




Purpose
Media Viewer aims to:


 * improve the viewing experience for readers and casual editors
 * make it easier to preview and browse images
 * provide a quick summary, with easy access to details
 * offer more features such as enlarge, download, share and embed

These features are expected to encourage casual users to contribute more to Wikipedia and Wikimedia sister projects over time.

Users
Primary users for Media Viewer are:


 * readers
 * casual editors

Other users include:


 * experienced editors
 * contributors

User Stories
We aim to support all these user groups, with an initial focus on readers in our first release. See user stories below for each user group.

Reader stories
As a reader, I want to:


 * view larger images
 * find basic information
 * browse related images
 * share a link to this file
 * use a simple, uncluttered interface
 * view images on the same page (not another site)
 * get back to the article easily

Casual editor stories
As a casual editor, I want to:


 * find more information
 * see original images
 * use this file in an article
 * download this file
 * view license terms
 * view/edit file page details

Experienced editor stories
As an experienced editor, I want to:


 * check meta-data
 * see license terms
 * download this file
 * copy attributions
 * view all the file details
 * edit file information

Contributor stories
As a contributor, I want to:


 * view my contributions
 * get attributions if I'm the author or source
 * find more details, such as where this file is used
 * add or correct information on the file page

See also this multimedia vision for examples of how Media Viewer could be used by different user groups in coming years.

Problem
User research suggests that the current file page brings up many issues for readers:


 * too much information
 * cluttered visual layout
 * emphasizes text over images
 * goes to a separate page (on other site, e.g. Commons)
 * or goes to a duplicate page (on same site, e.g. Enwiki)
 * longer load times

While this file page design works for advanced users, it is often confusing for casual users.

Solution
Media Viewer offers a practical solution for readers, by making it easier to:


 * preview larger images
 * enlarge images
 * browse related files
 * read image captions
 * see a short summary
 * do all this over the same page you're on

Readers can also get more details on the file page, with a prominent button that provides quick access to all the metadata.

Experienced users can easily bypass or disable Media Viewer, if they prefer to go straight to the file page.

How does Media Viewer work?


To open an image in Media Viewer, click on its thumbnail on any article, gallery or category page. This will display a larger image in Media Viewer, right over the page where you clicked. We call this the 'lightbox view'.

Image
The image is shown in large size against a black background, as an overlay that fills up the entire browser page where you clicked on the thumbnail. This makes the image stand out more and removes some of the visual clutter typically found on a text-heavy page.

Tools
These tools are provided to the side of the image:


 * Close button (goes back to article view)
 * Full screen button (expands into full-screen view, see below)
 * Disable / Enable button
 * Next and Previous buttons
 * Download button
 * Share / embed button
 * Enlarge function (click on any image to go to its full-resolution file)
 * 'More details' button (goes to the File: page)

The 'full-screen view' shows the large image across the entire screen (not just the browser window), with minimal information and buttons available on hover. This view lets you focus exclusively on the image, with no other distractions. In this mode, you only see the controls, the file name and the author/source/license if you hover over the image.

The Disable/Enable, Download and Share/Embed buttons open up small panels over the image. The Enlarge and 'More details' functions go to a separate page.

Primary Info
Here is the most important information that is shown prominently, right below the image:


 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/589 Image caption or description] (Golden-crowned Sparrow)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/40 Author] (e.g. Alejandro Erickson)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/40 Source] (e.g. Bird Institute)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/34 License Info] (e.g. CC BY-SA 2.0)

Secondary Info
Here is the information that is shown below the fold, once you open the metadata panel (by scrolling down or pressing up/down arrow keys):


 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/33 Description] (if not already shown)
 * [<tvar|url3>https://mingle.corp.wikimedia.org/projects/multimedia/cards/32</> Uploader name] (e.g. Smallbones)
 * [<tvar|url4>https://mingle.corp.wikimedia.org/projects/multimedia/cards/47</> Creation or Upload Date] (e.g. 12 April, 2012)
 * [<tvar|url5>https://mingle.corp.wikimedia.org/projects/multimedia/cards/42</> Location] (e.g. geo-tags, if any)
 * [<tvar|url8>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118</> License details] (e.g. special credits or restrictions)
 * More meta-data can be added to this panel, as needed (e.g.: file name).

These features are available every time you click on a thumbnail to open Media Viewer, as long as the tool is enabled. Media Viewer is now enabled by default on all Wikimedia sites, but can be disabled by any user, 1>Special:MyLanguage/Help:Extension:Media Viewer#How can I turn off this feature?</>|as described here. From a file description page, click on "2>Special:MyLanguage/Help:Extension:Media Viewer#How can I view an image without enabling Media Viewer?</>|Open in Media Viewer" below the image to view it with this tool.

To learn more, media-viewer>Special:MyLanguage/Help:Multimedia/Media_Viewer</>|read this help file.

New Improvements
The Wikimedia Foundation's multimedia team developed a range of new improvements, based on community feedback and usability research.

Here are some of the key improvements that were released in November:


 * an easier way to enlarge images
 * a more prominent button linking to the File: page
 * image captions right below the image
 * clearer icons for Download and Share
 * an easier way to disable the tool for personal use
 * a way to re-enable Media Viewer

Here are screenshots showing what some of these improvements look like:

How you can help
If you find a technical issue with Media Viewer, please file a bug here on Phabricator.

You can also post your report on talk>Extension talk:Media Viewer/About</>|this discussion page, with a screenshot and information on your browser and operating system :).

Before reporting a bug, check first that this issue is not already on this list of known bugs. In case it’s already been fixed, you may also want to test it on demo>Lightbox demo</>|this test page on MediaWiki.org -- where new features are released a week before the rest of the wikis.

Work in progress can usually be tested [<tvar|lbdemo>http://en.wikipedia.beta.wmflabs.org/wiki/Lightbox_demo</> on this beta site], where new features are rolled out before going to production.

Note: Media Viewer only supports the most widely used image file formats on Wikimedia sites (e.g.: JPEG, GIF, PNG, TIFF, SVG). In future releases, we plan to add support for more file formats, such as PDF, audio and video files.

Development
Media Viewer was developed by the Wikimedia Foundation's multimedia>Special:MyLanguage/Multimedia</>|multimedia team from July 2013 to November 2014. It was designed in collaboration with community members, in a series of discussions held over round2>m:Roundtables/Roundtable_5</>|video conferences, irc>m:Special:MyLanguage/IRC_office_hours/Office_hours_2013-07-18b</>|IRC, and round3>m:Roundtables/Roundtable_3</>|face-to-face meetings. This tool was then developed and tested as a Beta Feature through April 2014, when it was plan>Special:MyLanguage/Multimedia/Media Viewer/Release Plan</>|gradually released worldwide, over a three-month period.

Based on user feedback, a wide range of improvements>Special:MyLanguage/Multimedia/Media_Viewer/Improvements</>|improvements were developed to make Media Viewer easier to use, such as: an easier way to enlarge images, image captions, and an easier way to disable the tool for personal use.

Feature development has now ended for this project.

Feedback
Media Viewer was tested extensively with millions of readers and casual editors, the primary target users for this tool.

User feedback was collected through a variety of methods:

community consultations ]]
 * [[m:Special:MyLanguage/Community Engagement (Product)/Media Viewer consultation|
 * [[m:Special:MyLanguage/Community Engagement (Product)/Media Viewer consultation|
 * [[m:Special:MyLanguage/Community Engagement (Product)/Media Viewer consultation|
 * [[m:Special:MyLanguage/Community Engagement (Product)/Media Viewer consultation|
 * [[m:Special:MyLanguage/Community Engagement (Product)/Media Viewer consultation|

Please check the links above for more information about these different sources of user feedback.

Over 18,199 feedback responses about Media Viewer were collected as part of a wide online survey hosted in multiple languages, from April to July 2014. A majority of global respondents found the tool "useful for viewing images and learning about them" (56% "useful", 35% "not useful", 9% "not sure"), based on total unweighted survey results, as shown on [<tvar|url>https://docs.google.com/a/wikimedia.org/spreadsheets/d/14LnDVfgHrk4ZbFF1jm8GiI_qSolKxRYYhSZ3enJCgys/edit?pli=1#gid=0</> this spreadsheet].

When weighted to match global Wikipedia readership for each language, fewer respondents found the tool "useful" than "not useful" (39% "useful", 50% "not useful", and 10% "not sure").

Cumulative "useful" approval ratings by language: English 36%, French 70%, Spanish 78%, Dutch 59%, Portuguese 81%, German 30%, Hungarian 63%, Catalan 71%.

Readers tended to view the tool more favorably than advanced users.

These approval ratings increased over time in all languages, suggesting that users found Media Viewer more useful for viewing images over time, as new improvements were developed based on feedback.

Note that this was an optional survey, so approval rates should not be cited as a conclusive metric, as they are subject to self-selection bias (just like RfCs cited below).

Five requests for comments (RfCs) about Media Viewer were initiated by community members in the summer of 2014: two on the English Wikipedia, two on the German Wikipedia, and one on Wikimedia Commons. These RfCs typically involved up to a couple hundred contributors at a time, with low participation from readers, the target users for this product. Feedback from these RfCs shows that a majority of participants (including every single "reader" and "casual editor") believed that the "Media Viewer" should be disabled by default for all users, logged-in or not, and either left as an opt-in feature or scrapped altogether. Aside from any technical shortcomings, discontent was also shown with the manner in which the project was conducted and the lack of transparency shown by the team responsible.

Code
The code for Media Viewer is made possible by two separate extensions:


 * ext-mmv>Special:MyLanguage/Extension:MultimediaViewer</>|Multimedia Viewer Extension - the front-end extension that displays media files and information
 * ext-commonsmd>Special:MyLanguage/Extension:CommonsMetadata</>|Commons Meta Data - the back-end API that serves information to the Media Viewer

Future Versions
Feature development has now ended for this version of Media Viewer. In future versions, the multimedia team will consider adding more features requested by our community, such as a better zoom tool, a Mobile Media Viewer and/or support for more file formats (e.g. slides, video, audio, as shown in these slides).

Here are some features that may be considered for future versions:


 * [<tvar|url1>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/167</> Zoom on this file]
 * [<tvar|url2>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/172</> Show file collection panel]
 * [<tvar|url3>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/161</> View files in slideshow mode]
 * [<tvar|url4>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/160</> Show PDF slides]
 * [<tvar|url5>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/162</> Play Video files]
 * [<tvar|url6>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/163</> Play Audio files]
 * [<tvar|url7>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/167</> Support Developer Plugins]
 * [<tvar|url8>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/201</> Mobile Media Viewer]

Future versions could also include feedback tools below the image (e.g. thank, flag), as suggested by this vision2016>commons:Commons:Multimedia_Features/Vision_2016</>|2016 multimedia vision, as well as [<tvar|bp-othermedia>https://docs.google.com/a/wikimedia.org/presentation/d/1wZvLx_Q-bpCCMBjz2Y643uyye1RvYgAaaYFq02lDgxU/edit</> best practices from other media sites]. For an overview of other features that could be considered for these future versions, check the annual multimedia plan for 2014-15.

Thanks
Many thanks to all the community and team members who contributed to this project. Special acknowledgements to the project team: user0>User:Fabrice Florin (WMF)</>|Fabrice Florin, user1>User:GDubuc_%28WMF%29</>|Gilles Dubuc, user2>User:MarkTraceur</>|Mark Holmquist, user3>meta:User:Tgr</>|Gergő Tisza, user5>User:Pginer</>|Pau Giner, user9>User:Keegan (WMF)</>|Keegan Peterzell, user11>User:RobLa-WMF</>|Rob Lanphier, user12>User:Howief</>|Howie Fung and user14>User:Eloquence</>|Erik Moeller, to name but a few.

To learn more about other multimedia projects, visit this multim>Special:MyLanguage/Multimedia</>|Multimedia project hub.