Mobile design/Reference reveal

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

References window, gray references.

References window, gray references 2.

References window, gray window overlay.

References window, gray window overlay, simple inline reference number, example of shortened URL (www.pondturtle.com).

References window, light yellow window overlay.

References window, light blue overlay.

References window, alternative—smaller reference indicator/button.

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, or clicking on the article.

The reference overlay should take up a maximum of 50% of the bottom of the screen, interior scrolling may need to be implemented.

If a reference number is below the 50% point of the screen, the page should scroll up to keep numbers revealed above the reference overlay window.

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,
   1. White page with gray references, x-in-a-circle to dismiss.
   2. Gray page with black reference text, (x) to dismiss.
   3. Light yellow page with black reference text, (x) to dismiss.
   4. Light blue page with black reference text, (x) to dismiss.

Possible alternative to the "Reference" indication and reference number,

1. A single button which indicates Ref, number and (x) to dismiss.

This layout maximizes vertical space saving.

URLs

Philippe mentioned that it is important to show a URL in those references that have one. Since these can be quite long, we can limit what is shown to a certain number of characters, or to the domain name only. It is helpful to see the domain name.