Mobile design/System messages
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on any information on this page. |
 | This page is currently a draft.
|
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
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
- User is logged in and reading Wikipedia
- User sees an article she would like to add to her watchlist
- User taps watchlist star in the top righthand corner of the chrome
- 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
- 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
- User taps the watchlist star again
- 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]
-
The reference reveal, currently in production on the mobile site, might potentially be reused for other system messages -
Watchlist add/remove notice
Developer card wall[edit]
- Card #232 - Watchlist add/remove notice