Mobile design/Reference reveal

'''This document is a work in progress. Comments are appreciated but this is not a final draft.'''



This document describes the design of the References window overlay for the developing Wikipedia Mobile site.

Rationale
The current mobile references are difficult to navigate and take you away from the page you are reading. This is a UI technique for showing references in an article in a convenient way.

Goals

 * Ongoing effort to implement a UI step between the current interface and Glaucus/Athena
 * To make interaction simple, smooth and intuitive.
 * To surface a reference when the footnote number is clicked in an article, in a small window that overlays the bottom of the screen.
 * To discuss and solidify useful features and their behavior.

Interface Behavior

 * (Here is an imagined minimal interface to go along with this feedback page.)

This interaction begins when a reference number is selected from within the text of any page.

The reference overlay slides up from the bottom of the page.

The reference remains until it is dismissed by selecting the cancel symbol.

References overlay

 * The reference overlay includes,
 * 1) Slight shadow to indicate separation from the article and to match other mobile design elements.
 * 2) "Reference" indication and reference number.
 * 3) A fine line separating the reference number from the text.
 * 4) The reference text including links that can be selected.
 * 5) A look which separates the overlay from the article visually. Several choices are given for the look of the overlay,
 * 6) White page with gray references, x-in-a-circle to dismiss.
 * 7) Gray page with black reference text, (x) to dismiss.
 * 8) Light yellow page with black reference text, (x) to dismiss.
 * 9) Light blue page with black reference text, (x) to dismiss.