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.

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) Technical problem
 * 4) Feedback about this article
 * 5) Regarding me, a person or a company I represent - goes to info-en-q@wikimedia.org
 * 6) Factual error - reveals a link in the comment box: http://en.wikipedia.org/wiki/Wikipedia:Contact_us/Article_problem/Factual_error
 * 7) Another problem - goes to info-en-c@wikimedia.org
 * 8) General - goes to info-en@wikimedia.org
 * 9) Larger box with Type your comment here in very light gray
 * 10) Send button

Other requirements:


 * The sender's email address must be the reply-to address in the messages that are generated from this form.


 * Email address could be pre-populated if the user is logged in and the email address is in his or her profile. If the email address is not in the user's profile, show an option to have it saved.


 * 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?