Mobile design/Contact

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



This document describes the design of the Contact us landing page for the developing Wikipedia Mobile site.

Rationale
The current mobile Contact us page is difficult to navigate.

Goals

 * Ongoing effort to implement a UI step between the current interface and Glaucus/Athena
 * To make interaction simple, smooth and intuitive.
 * To outline a simple contact form
 * To discuss and solidify useful features and their behavior.
 * To remove unnecessary components.
 * To capture some information automatically, such as platform, browser/app and device
 * To direct comments to the appropriate destination, such as a feedback wiki page or email alias

Interface Behavior

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

This interaction begins when Contact us is selected from the footer of any page.

Feedback Page
After the Contact us link is selected, the feedback page drops from the search/icon header to cover the screen, the footer remains. The text boxes and buttons should match the style selected for the header.

Search box remains at the top.


 * The feedback page includes,
 * 1) Title
 * 2) Comment box with Send a comment in very light gray
 * 3) Existing contact subsections with expand icons
 * 4) Important information
 * 5) Top questions
 * 6) Who are you? (Or some other way to indicate different user types.)

Contact form
Search box remains at the top, footer remains at the bottom.

The text boxes and buttons should match the style selected for the header.


 * The contact form includes,
 * 1) Box with Your email address in very light gray
 * 2) Comment category menu (categories TBD)
 * 3) Feedback
 * 4) I am having a problem
 * 5) General
 * 6) Larger box with Type your comment here in very light gray
 * 7) Send button

Send button only becomes visible when it can be used. It can be used when the user has entered an email address and some characters in the comment box.

All text boxes will have a symbol to clear.

Email and comment fields should not clear by clicking away.

After selecting a category, the category button should reflect that category.

The larger comment box should have an in-box gesture scroll to allow longer messages.

After sending a comment
The user device and platform information should be automatically included with comments that are forwarded to WMF.

Send is selected and the comment is forwarded. The page returns to the original feedback landing and the email box now says, Thank you! the comment box says ''Your comment has been sent. Send another?'' (Is that proper grammar?)

After sending, the Send button is grayed-out until a new comment is entered.
 * Should the email address remain in the top box so it does not need to be re-entered?