Reading/Multimedia/Media Viewer

Translate this page

This is the project hub for Media Viewer, a new tool developed by Wikimedia Foundation's multimedia team. For a quick overview of this project, visit 'About Media Viewer'.

Media Viewer aims to improve the viewing experience for readers and casual editors on Wikipedia and Wikimedia sites.

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 usability studies, community consultations and online surveys. Based on this user feedback, the multimedia team developed a set of 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 this help page. Feedback is welcome in this discussion.

Goals

Media Viewer Slides

Multimedia Vision for Media Viewer and related tools.

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?

Media Viewer's 'lightbox view'

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:

Image caption or description (Golden-crowned Sparrow)
Author (e.g. Alejandro Erickson)
Source (e.g. Bird Institute)
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):

Description (if not already shown)
Uploader name (e.g. Smallbones)
Creation or Upload Date (e.g. 12 April, 2012)
Location (e.g. geo-tags, if any)
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, as described here. From a file description page, click on "Open in Media Viewer" below the image to view it with this tool.

To learn more, 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:

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 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 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 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 team from July 2013 to November 2014. It was designed in collaboration with community members, in a series of discussions held over video conferences, IRC, and face-to-face meetings. This tool was then developed and tested as a Beta Feature through April 2014, when it was gradually released worldwide, over a three-month period.

Based on user feedback, a wide range of improvements were developed to make Media Viewer easier to use, such as: an easier way to enlarge images, image captions, a prominent link to the File: page 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:

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

Multimedia Viewer Extension – the front-end extension that displays media files and information
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:

Future versions could also include feedback tools below the image (e.g. thank, flag), as suggested by this 2016 multimedia vision, as well as 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: Fabrice Florin, Gilles Dubuc, Mark Holmquist, Gergő Tisza, Pau Giner, Keegan Peterzell, Rob Lanphier, Howie Fung and Erik Moeller, to name but a few.

To learn more about other multimedia projects, visit this Multimedia project hub.