Multimedia:Meeting in Paris/Notes/User Experience

From Wikimedia Usability Initiative

We used the time period (approximately 90 minutes) to develop mock-ups of an alternative Wikimedia Commons frontpage from scratch, and to develop an alternative file description page / gallery pop-up. See explanations below.

Commons Main Page

Project of the main page of Commons
Associated wireframes

This mock-up presumes a revised skin with a widescreen mode, where the current sidebar is collapsed by default and can be expanded by clicking a slider on the left-hand side. The language links are collapsed into a single drop-down.

The objective here is to significantly reduce the information overload on the frontpage, and to feature compelling and relevant content and entrypoints. The top-left rectangle represents a dynamic gallery (advancing from one slide to the next after a certain number of seconds), which could feature various types of high quality content every day:

  • a featured photograph
  • a featured illustration
  • a featured sound file
  • a featured video
  • a featured restoration
  • a "valued image"


To the right are high-visibility entry points for the two primary types of engagements with Wikimedia Commons: searching media, or sharing files. We propose that the search be improved to autocomplete on category names even if no category namespace is specified.

The "Our Mission" button would lead to a friendly and compellingly designed portal page explaining the mission of Wikimedia Commons in terms of its social and cultural image, again using beautiful examples to illustrate the page. The exact order of the three buttons is still to be determined.

The bottom row of boxes, under the heading "Discover Wikimedia Commons" is used as follows:

  • Cultural Treasures: Featuring cultural partnerships by highlighting objects of high value and linking to the partnership page
  • Our Community / Our World: Linking to pages like "Meet our photographers", perhaps showcasing community members
  • Explore: Category tree (we need a nicer widget for this), explore by map, featured categories, etc.

Media description page

Project of the typical picture description page on Commons
Project of the typical picture description page on Commons

This mock-up presents a revised media description page, again in widescreen mode. Caption and media content are presented closely together as they are the most relevant information on the page. It may be desirable to either automatically determine reasonable screen real estate usage for the caption and media file, or to allow the user to drag the caption (resize or move to the right). Our objective is to provide a user experience that suits different needs (focus on description, focus on media content).

It may be desirable to have a single "View settings" button that makes it possible to switch between different modes (with caption, without caption, full-screen slideshow, etc.).

We discussed that it would be desirable to view all media files associated with a page (directly or indirectly) through a single pop-up gallery widget, as is common on many websites, rather than requiring users to manually click through to each media description page.

Check some JS of mine that uses the toolserver to show "related" Commons images on de.wikipedia. --Magnus Manske 16:10, 7 November 2009 (UTC)