Mobile Full Screen Search Results

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

This document describes the design of a full screen search for the developing Wikipedia Mobile site.

Rationale
A full screen search allows more space for search terms, and a certain visual clarity. The implementation of the full screen search on the current mobile site beta could use some refinement for a user experience more in line with other Wikipedia products.

To address Bugzilla 34233

Goals

 * To outline a simple full screen search.
 * To make the visual elements elegant and appealing.
 * To make interaction simple, smooth and intuitive.
 * To discuss and solidify useful features and their behavior.
 * To remove unnecessary components.

Interface Behavior
This interaction begins when the search box is selected from any page.

Transformation to full screen search
After the search box is selected, it "expands" in all directions to take up the remaining top row of the page.

The icons (W and search button) fade out and the entire top row is white.
 * This brings into question the appearance and existence of the search icon button.

The page scrolls to remove the browser heading from view.

Search rows fade in and down from this white row, completely covering the remaining page content.

The fixed state of the white search box row is emphasized by a shadow.

While the page is transformed, search icons appear along with a blinking blue cursor in the search row.
 * The cursor should be enough to indicate the typing action, but can be supported by a faint 'Type your search here' if necessary.

Initial full screen search appearance

 * The propagation of the full screen search rows includes,
 * 1) back arrow to the left (in the top row)
 * 2) flashing blue cursor (in the top row)
 * 3) alternating gray values in the search rows, with a left to right gradient.
 * 4) white search icon/magnifying glass to the left (in each gray row)
 * 5) darker gray + sign to the right (in each gray row)

The back arrow and search icons in the rows below should align.

Icons should be more than one self-width from the edge of the screen.

The search rows share the screen with the keyboard.

The back arrow takes the user back to the previous page.

The keyboard should not have an additional row of features like "previous/next" and "done".

The SEARCH!
The user tries to type something. (What will it be?!)


 * When a user begins to type,
 * 1) 'x' appears in the top row
 * 2) search terms appear in the gray rows

The 'x' aligns with the '+' signs below.

Touching '+' adds that term to the search box.

Touching 'x' clears the search box back to the blue cursor, and the search rows empty.

Touching the search icon in each row takes the user to that article page.

Touching the middle of a row selects the row.
 * When selected, a search row turns blue.

Scrolling the search rows makes the keyboard collapse.
 * While scrolling, the white search box should remain fixed, not scroll off of the screen
 * Touching the search box makes the keyboard return.

Pressing the native search button takes the user to that article page, or to a more complete Wikipedia search if a specific article does not match search terms.

Questions
Do all devices have a 'touch' interface or should we be using a more general term to include other types of selection?