Mobile design/System messages

This document describes some ideas for a consistent set of system messages on mobile Wikipedia.

Rationale

edit

Messages that provide guidance, instruction, and feedback are important for making users feel comfortable with the mobile interface, and they should be styled consistently, so that they don't confuse and distract readers. Since some features will look and behave differently on mobile than they do on desktop Wikipedia, notices and instructional messages are important even for experienced editors who generally know how the features work.

User research

edit

There is evidence that providing new users with a confirmation message immediately after saving an edit on desktop Wikipedia significantly increases their productivity. Since all users, both new and experienced, will be "new" to the mobile experience we are building, this suggests confirmation and other system messages are an important elements to consider for new features built on the mobile site.

User stories

edit
Watchlist
  • As an editor who is used to the desktop watchlisting workflow, I want to know that the same workflow is in place on mobile.
Editing
  • As a user making an edit on mobile, I want to know if my change was saved or if I'm about to navigate away from a page and lose my edit.

Design requirements

edit
  • Create messages that are minimally distracting but capture a user's attention enough to deliver the salient information
  • Style messages consistently if possible, but don't break with intelligible UI patterns
  • Use the appropriate colors, where necessary

Project phases

edit

In progress

edit
Watchlist
a message to alert the user that an article has been added to or removed from their watchlist
  • e.g., Added "Foo" to your watchlist
  • e.g., Removed "Foo" from your watchlist

Planned

edit
Editing
a message to alert the user of the state of their edit
  • e.g., Your edit has been saved
  • e.g., Leave this page? Your edit won't be saved
Other
TBD

User experience

edit
 
Watchlist add/remove notice
Watchlist

Pages that have been added to the watchlist on both desktop and on mobile will appear in the mobile watchlist view. On mobile, users can add articles in the same way as on desktop: by tapping the watchlist star. They will receive a notification that their article has been added to the watchlist. If they tap an activated watchlist star again, the article will be removed from their watchlist, with a corresponding message.

Flow
  1. User is logged in and reading Wikipedia
  2. User sees an article she would like to add to her watchlist
  3. User taps watchlist star in the top righthand corner of the chrome
  4. Watchlist star icon activates (visually marked by a fill) and a notice appears, letting the user know that the article was added to her watchlist
  5. Notice disappears after 2 seconds, or when the user taps on the dismiss button in the corner of the notice or taps outside the notice
  6. User taps the watchlist star again
  7. Watchlist star icon deactivates (returns to previous state with no fill), and a notice appears letting the user know that the article was removed from her watchlist
Editing

TBD

Mockups

edit

Developer card wall

edit