Reading/Multimedia/Media Viewer



Here are our project hub for the Media Viewer, a new tool under development by the Wikimedia Foundation's new multimedia team. For a quick overview of this project, visit 'About Media Viewer'.

Media Viewer aims to improve the multimedia viewing experience by showing large images when you click on their thumbnails.

You can now test the first version v0.1 of Media Viewer on all wikis worldwide. A newer version v0.2 can now be tested on MediaWiki.org, on this demo page (don't forget to enable Media Viewer in your Beta Features preferences page). For a sneak peek at this new version 0.2 of the Media Viewer, check out the next section below.

Please let us know what you think of this program on this discussion page.

Goals




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 on Wikipedias)
 * (future versions) Offer more tools for users to take action (e.g. feedback, add a category or use this file)

It aims to serve all users of Wikipedia, Commons and other MediaWiki sites (including new users, as well as 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
Goals 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)

Features for the minimum viable product include:
 * Views
 * Lightbox view
 * Full screen view
 * Tools
 * Full screen button
 * Lightbox button
 * Close button
 * Info
 * File name
 * Author
 * Source
 * Description
 * License Info
 * Site name
 * Uploader
 * Date
 * Location
 * Categories

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

Lightbox View


The 'lightbox view' for version v0.1 of this tool shows a large image in a white lightbox that extends across the browser window, as well as tools and information in three tiers, as proposed below.

Image
The image is 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 make the image stand out and remove some of the visual clutter typically found on a text-heavy 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 obscured to hide its contents, but not the entire screen (unlike the Full-screen view where the entire screen will be darkened).

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 other features discussed so far).

Primary Info
Here are the most important information fields that will be shown prominently near the image, as shown in the first version of this tool (see mockup):

1. Above image
 * File name (Zonotrichia atricapilla)
 * Author (e.g. Alejandro Erickson)
 * Source (e.g. Bird Institute)
 * License Info (e.g. CC-BY-SA-2.0) (or link to license info, if hard to parse in the first release)

2. Below image
 * Site name and link (e.g. Wikimedia Commons, with logo icon and explicit link to the file info page)
 * Description (3 lines or so, with 'more' button if needed)
 * Uploader name (e.g. Smallbones) (note current mockups incorrectly show this above the image)
 * Creation Date (e.g. 12 April, 2012)

The mockup to the right shows how this important information could be presented to the user, to minimize clutter near the image, but still keep important information as prominent as possible.

Note that in the next version v0.2 of Media Viewer, all the information will be moved below the image.

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


 * Location (e.g. place name and/or geotag coordinates, if any)
 * Categories (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * File usage (e.g. 'This file is being used by 5 other pages. ')
 * Assessment credit (e.g. 'This file was a  on Wikipedia')
 * File format / size (e.g. JPEG, 4928 x 3264 px (more), 3.8 Mb)
 * Tool used for upload (e.g. 'Via Flickr')

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.

First Release
Our goal is to release a first barebones beta version of Media Viewer by the end of November, with at least a couple features to start with, but not all of the features listed above.

It will be released as part of Beta Features, a new experimental program under development, which will enable users to opt-in to test new beta features before they are released widely.

Schedule
Here are our target dates for the first release:
 * 21 November - Release to all Wikipedias
 * 22 November - IRC chat and on-wiki discussions

The current goal is to try to ride the platform train, if possible -- so most dates above are Thursdays. However, special deploy windows may be needed along the way.

We may adjust this schedule as needed, based on our progress with deliverables, and subject to team review.

File Formats
In the first release, the Media Viewer will only support the most widely used image file formats (e.g.: JPEG, GIF, PNG, TIFF, SVG). In subsequent releases, we will gradually add support for other file formats (e.g.: PDF), as well as audio and video file formats.

How can I help?


Can you help us test Media Viewer in coming days? The first version of this beta feature is now available for testing by logged-in users on all wikis, but we already have a lot of feedback and known bugs about it. So we invite you to test the newer version v0.2 on MediaWiki.org, on this demo page (don't forget to enable Media Viewer in your Beta Features preferences page). For a sneak peek at this new version 0.2 of the Media Viewer, check out the next section below.

To test either version of Media Viewer, click on the small 'Beta' link next to 'Preferences' in your personal menu. Then check the box next to 'Media Viewer' in the new BetaFeatures section of your user preferences — and click 'Save' (see screenshot). You can turn off any this options anytime, by reversing these steps. To test a variety of images in different file formats, you might like to check this lightbox demo page.

Try out Media Viewer and let us know what you think on this discussion page. If you find any technical bugs, please report them here on Bugzilla. Based on your feedback, we will improve this feature in coming weeks.

You can test Media Viewer with different file formats on this special test page.

Next Version


The next version 0.2 of Media Viewer will focus on a 'full-width design' as the default view, to provide a more immersive user experience. When you click on a thumbnail, you would see a larger image than you do now, with only a small sliver of meta-data at the bottom of the page, as shown in this mockup, also shown to the right.

The goal is to display images to fill the browser window as much as possible, aiming for up to 100% of the browser window width and up to 90% of its height. To speed up this display, we will try to fetch the thumnbnail size that is closest to 100% of the screen width but no more than 90% of the screen height (instead of asking the server to pre-render custom sizes, which is too time-consuming). Note that may propose different display rules for portraits and images with special aspect ratios.
 * Image Display

The meta-data would be shown below the image, and only include a few items above the fold (file name, license, author, source and uploader). But you would be invited to scroll down to see a lot more meta-data below, with a clear affordance letting know how to get more info. The mockups below show examples of how this might work.
 * Meta Data

Tools would be shown below the image (thank, flag, share, full-screen) (except for the 'X' close icon and next/previous arrows, which could be shown over the image on hover, as suggested by best practices from other media sites). Next, we will also mockup audio-video playback as well in this context (play/pause, rewind, fast-forward, volume, scrollable timeline).
 * First Tools

Desktop Mockups
Here are some preliminary mockups of designs we're exploring for desktop computers.

These mockups will be adjusted based on community feedback.

Mobile Mockups
Here are some preliminary mockups of designs we're exploring for mobile devices.

These mockups will be adjusted based on community feedback.

Again, this new version v0.2 can be tested on MediaWiki.org, on this demo page. Don't forget to enable Media Viewer in your Beta Features preferences page. Enjoy!

Wishlist for version 2.0
For the next version in winter 2013, we are considering these features:
 * Integrate more image file formats in the Media Viewer
 * 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)
 * Add Category button (for adding categories for this file on Commons)
 * Slideshow mode (very simple slideshow mode initially, no music, just images)

Wishlist for future versions
For future releases in 2014, we are considering these features:
 * Integrate audio/visual file formats in the Media Viewer
 * 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, 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.

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 not all of these tasks will be included in the first release, though we plan to keep adding more features in subsequent releases.

Next Tasks
We are aiming to complete these next tasks in November and December 2013.

As a user, I want to see images faster when I click on thumbnails, so I don't have to wait so long. One possible solution might be to use a background script to 'pre-generate' many different thumbnail sizes for all images on Commons -- so that we can immediately load the thumbnail size that's the closest to the user's screen size for faster display. Right now, we ask the server to generate a custom size of each image to match the user's screen, which takes up 5 to 10 seconds and is an unacceptable user experience for a top 10 site like Wikipedia. This is not a trivial task, which needs to be solved before we can move Media Viewer out of Beta in coming months, and it will require an engineering research spike to determine how to solve it incrementally, alongside the thumbnail pipeline already under way. (See Mingle ticket #62 and ).
 * Display Images Faster

As a user, I want to see larger images by default, with only a bit of meta-data below, so that I can have a more immersive user experience. When I click on a thumbnail, I want to see images that fill my browser window as much as possible, as shown in this mockup. For landscape images, we would aim for a 'full-width display', with the image extending up to 100% of the browser window width and up to 90% of its height. (Note that for portrait images, we may implement a different rule than 100% of width and 90% of height, to be recommended by the design team). We would only show a small strip of meta-data at the bottom 10% of the page (which means moving the title, license, source and author down below the image, rather than above, as we currently do). And I should be able to scroll down below the image to see more info, and there should be a clear affordance to let me know there is more meta-data below the fold. (See Mingle ticket #66)
 * Display Larger Images

As a user, I can use 'next' and 'previous' arrows to browse through all media files in an article, gallery or category, so I don't have to keep opening and closing each file individually. (See Mingle ticket #63)
 * Browse Next or Previous Images

As a user, I want to see the license info about this file, so I know if it can be shared. Complete outstanding portions of Mingle ticket #34, in order to display all 188 Creative Commons license types, as well as public domain licenses and any other license info we can support.
 * Show License Info (ctd.)

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 Location

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 Categories

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 File Usage

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 Assessed Files

As a manager or community member, I can view a metrics dashboard of usage data for the Media Viewer, so that I can learn how it is being used. (See Mingle ticket #54).
 * Show Metrics Dashboard

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

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)
 * Show Site Icon

Completed
We completed most of these tasks for the first release of version 0.1 in November, 2013.

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

Code
] Our work in progress can be viewed on this alpha site, where it is ready for preliminary testing (see also thumbnail to the right -- and Gerrit 78341). (You'll need to create a test-account to log-in and use the Beta Features preference.)

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

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 -- as well as first mockups on this draft page.