Personal image filter

Notes:

This document is a submission to the Wikimedia Foundation Board of Trustees regarding personal media filters. It does not describe any project currently under development by the Foundation. It has been created by the request of the Board to help better frame understanding of the technologies required.
This document is a proposal. It does not describe an ideal system; rather, it describes a system that could be developed with minimal effort.
Comments on the talk page are welcome.

This document describes a proposed system for a personal media filter.

This document and the technology described applies only to multimedia content (images, video, and audio). Text documents and pages are not included or considered.

Background

In the 2010 Harris report, two of the recommendations (7 & 9) were to produce a way that readers could hide images they did not want to see; and that there be an option for a reader to hide all potentially-controversial content. The Board asked the technical staff at the WMF to determine if such a feature was possible, and if so what it might look like.

General principles for such a system include:

No image is actually removed from a page, only hidden;
Readers choose what they want to see (or not see) for themselves (the principle of user choice); the system does not affect editorial policy on the projects or image choice in any particular article, nor does it affect other people's viewing experience.

There is at present no simple way for a reader to collapse or hide an image (there are CSS hacks and browser settings, but neither is particularly intuitive for any but the most technical users). This document describes a way to hide either individual images or classes of images by the reader (anonymous or logged in).

Overview of this system

This document describes a way in which readers (anonymous or logged in) can hide classes of images that they may not wish to see: for instance, images depicting graphic violence, such as scenes from wartime. In order for this to work, a few things must happen:

the image must be categorized as an image that depicts violence -- this would likely happen on Commons
the reader must click a 'hide' link on the image itself, or set a preference ahead of time (available somewhere in the UI or in their preferences) that they do not wish to see violent images
hiding the image (or setting a preference) sets that reader's preferences that they do not wish to see any violent images -- thus preventing the reader from stumbling on another violent image after they leave the first one
at any time, they can click to show the image again. It's always loaded in the page; simply collapsed in a frame.

Because of the way categories work (or don't work, as the case may be), this system will only work:

if it has to deal with a limited number of categories -- somewhere between 5-10 -- which are placed into a global content filter category (see below). This means, practically speaking, this handful of meta-categories needs to be developed, likely focusing on types of images that readers might not want to see (images of violence, images of nudity, medical images, pictures of the prophet Mohammed, etc.) and images on Commons need to be categorized into them.
the feature is implemented on the projects, so that when a reader comes across a violent image used in a Wikipedia article, she or he is able to enable their preference for viewing (or not) violent images. The notes about category localization below refer to the fact that of course category names would have to be translated for all of the various projects.

Flagging Mechanism

Flagging content as being filterable is handled by placing the content within one or more sub-categories of a global "Content Filter" category. These sub-categories are automatically recognized by the system as being content that can be potentially hidden (filtered).

For example, a wiki's "Content Filter" category could contain the following sub-categories: "Sexually Explicit", "Graphic Violence", "Medical", and "Other Controversial Content".

Images illustrative of sexual techniques could be placed in the "Sexually Explicit" sub-category while images of Mohammed could be placed in "Other Controversial Content" (or even "Images of Mohammed").

Content can be placed within multiple categories. For example, a graphical depiction of an aborted fetus could be placed in both "Medical" and "Other Controversial Content" (or any number of additional categories).

Category Equivalence Localization

Individual wikis will be required to maintain a "Category Equivalence Mapping." This is a system that will allow the local wiki to create Content Filter Categories in their local language which are then able to be mapped back to Content Filter Categories enabled on the Commons.

This will enable users of the local language to utilize the Personal Media Filter in their own language. Images served from Commons will appear using the local Content Filter Category name.

Thus, a user on the German Wikipedia could choose to filter media in the "Sexuell explizite Darstellungen" category. Doing so will filter all content served from de.wikipedia.org in the "Sexuell explizite Darstellungen" filter category and content served from commons.wikimedia.org in the "Sexually Explicit" filter category there (de.wikipedia.org is unlikely to have a category named "Sexually Explicit", using the English words).

Commons Category	DE.wp Category	NL.wp Category
Graphic Violence	Gewaltdarstellungen	Gewelddadige beelden
Sexually Explicit	Sexuell explizite Darstellungen	Seksueel expliciet materiaal

This feature is important due to the variable sources that media content can be served from.

Flagging Source

On any single wiki, media content can be served from one of two possible locations: the local wiki or from the Commons. Content flagging is only possible to be done on the wiki that the content is served from.

This creates a complication: if a local wiki wishes to tag an image served from Commons in a different manner (say, to handle local controversial content customs), that wiki will have to host a local copy of the image file and tag it themselves if the image does not have the same tags on Commons.

Media served locally will utilize the local wiki's Content Filter Categories; media served from Commons will use the Category Equivalence Mapping.

Show/Hide Decision Tree

If a piece of content is within any category that is marked as "filtered" by the user (either through preferences or by default filtering), the content will be hidden. Only one of the content filter categories needs to be set to "Denied" for this to happen.

Display Preferences

Users will be able to set their filter preferences on individual filter content categories. They will not be able to set permanent preferences on individual content items (files). For logged-in users these preferences will be stored in a database; for anonymous users the preference will be stored in a cookie.

For logged-in users, access to this preference dialog is available as a tab on the user's preferences screen.

For anonymous users, access to this preference dialog is available via a new link, "Display Settings", located near the "Log in/Create account" link on the screen.

The dialog is generated via JavaScript.

Additionally, the preferences dialog can be activated (for all users) by interacting with an image that falls under filtered protection (from both hidden and displayed content).

Workflows

In general, the workflows for anonymous users and logged-in users are effectively the same (except for direct activation of the filter preferences dialog for anonymous users). To save space, this document describes three workflows from the perspective of an anonymous user:

Adjusting Filter Settings from Navigation
Adjusting Filter Settings from a Displayed Image
Adjusting Filter Settings from a Hidden Image

Additional detail is given about various dialogs elsewhere in this document. This section concerns itself with workflow-specific details and not global details.

Adjusting Filter Settings from Navigation

For anonymous users, a new link is created on all pages for anonymous users, "Display Settings". This link appears in the upper-right, to the left of the "Log in/Create account" link. This link does not appear for logged-in users; they can access the dialog through their preferences.

Clicking on the "Display Settings" link will activate a JavaScript dialog, titled "Content Filter Settings". Note that the dialog is tabbed - this is "future-proofing" in case additional types of display settings are created in the future.

The user then enables or disables content filters according to their personal preference:

If a toggle is modified (changes from "Enabled" to "Disabled" or vice-versa), a smalled notification appears next to it ("changed") to help the user remember what changes they made.
The "Save Settings" button is disabled until a change is made. Once a toggle has been modified, the "Save Settings" button is enabled.

Clicking the "Save Changes" button has the following effects:

The user's settings are saved.
The dialog is immediately dismissed.
Any images present on the page that will change visibility based on the new settings are hidden or shown based on those changes (this is immediate, and occurs in the background)

The dialog may then be dismissed, revealing the page with any display settings changes having already taken effect.

A screenshot showing the first step of adjusting display filters for anonymous users (location of "Display Settings" link).
A screenshot showing the second step of adjusting display filters for anonymous users (active content settings dialog).
A screenshot showing the third step of adjusting display filters for anonymous users (modified settings dialog).
A screenshot showing the fourth step of adjusting display filters for anonymous users (saved settings and dismissed dialog, showing shrouded image).

Adjusting Filter Settings from a Displayed Image

This workflow is identical for anonymous and logged-in users.

The user begins with an image that is currently displayed but is managed by filter settings. A small "hide image" control is visible beneath the image.

Hovering over the control will cause a tooltip to appear that lists which filter categories the image is contained in.

Clicking on the control at this point will activate the "Content Filter Settings" dialog. When activated from an image, the dialog has a slight behavior change:

Instead of all filters being listed together, filters that are applicable to the image that has been interacted with are collected separately.
All other filters are visible as well, under a different heading.

At this point, the workflow is the same as with "Adjusting Filter Settings from Navigation": the user makes their desired changes, saves the settings, and the dialog is dismissed.

A screenshot showing the first step of hiding an image for anonymous users ("Hide Image" link below image).
A screenshot showing the hover action over a "Hide Image" link.
A screenshot showing the second step of hiding an image for anonymous users (activated filter settings dialog).
A screenshot showing the third step of hiding an image for anonymous users (modified filter settings dialog).
A screenshot showing the fourth step of hiding an image for anonymous users (saved settings and dismissed filter settings dialog, showing shrouded image).

Adjusting Filter Settings from a Hidden Image

This workflow is identical for anonymous and logged-in users.

The user begins with an image that is currently hidden and is managed by filter settings. A message on this "shroud" indicates to the user that the content has been filtered.

Hovering over the "filter settings" link within the message will cause a tooltip to appear that lists which filter categories the image is contained in and which ones are currently enabled for the user.

Clicking the "Show Image" button or either of the "Filter Settings" links will activate the "Content Filter Settings" dialog.

When activated from an image, the dialog has a slight behavior change:

Instead of all filters being listed together, filters that are applicable to the image that has been interacted with are collected separately.
All other filters are visible as well, under a different heading.

At this point, the workflow is the same as with "Adjusting Filter Settings from Navigation": the user makes their desired changes, saves the settings, and the dialog is dismissed.

A screenshot showing the first step of showing a hidden image for anonymous users (a shrouded image).
A screenshot showing the filter settings hover for a shrouded image.
A screenshot showing the second step of showing a hidden image for anonymous users (activated filter settings dialog).
A screenshot showing the third step of showing a hidden image for anonymous users (modified filter settings dialog)..
A screenshot showing the fourth step of showing a hidden image for anonymous users (saved settings and dismissed filter settings dialog, with image now visible).

Interface Behavior

This section concerns itself individual sections of the interface and their behaviors.

"Shown" Content Behavior

For content that is shown by default (either through a user's filter settings or by wiki-wide preferences), the content is displayed with a small control beneath it to allow the user to hide the content temporarily.

The control is greyed out until it is hovered over. When hovered over, the control gains color and a tooltip appears that displays the categories that this image is included in.

If clicked, the "Content Filter Settings" dialog is activated and displayed.

"Hidden" Content Behavior

For content that is hidden on load (either by user settings or by wiki-wide preference), the image shroud will already be in place.

Hovering over the words "filter settings" will display the categories that the image falls into that are possibly hidable.

Clicking on either of the "filter settings" links or the "Show Image" button will activate and display the "Content Filter Settings" dialog.

Filter Settings Dialog

This dialog behaves slightly different for anonymous users and for logged-in users.

If the dialog is activated from an image, it will default to emphasise the filters applicable to the specific content item (shown at the top) with all other filters in a separate section below.

If the dialog is activated from navigation (anonymous users) or a preference pane (logged-in users), all filters are visible in one section, alphabetically.

Note that the interface can comfortably support around 10-12 filters before becoming unwieldy (this limitation also exists for anonymous user cookie preference).

For each category of content, an "Enable/Disable" control is displayed. Since checkboxes could be easily misunderstood (does checking it mean that it is hidden or shown?), a toggle control is used that explicitly states what the behavior will be regarding the individual categories.

Changing the setting of any specific toggle will cause a notification to appear indicating that the toggle has changed state.

Once any changes are made, the "Save Settings" button will become active (green).

Upon clicking the "Save Settings" button, changes are saved (either to the database or via cookies), and the dialog is dismissed.

Note: If the dialog is found through the logged-in user's preferences pane, the dialog will not be dismissed and a "successful save" message will be displayed.

The dialog may be dismissed by clicking the icon in the upper right corner or by clicking on the "Cancel and Close" link.

Anonymous Users

Anonymous users will be informed that they are not logged-in and that their filter preferences may expire (e.g., the cookie may get deleted). There will be a prompt for them to log in.