Change Details

### Why are we doing this? Suggested edits V4 is currently in the making and is scheduled to be released in the beginning of 2020 (FY FY 19/20). This week, we’re going to perform usability tests in order to improve the suggested user flow ([Link to V4 prototype](https://late-cloud-2881.animaapp.io/)). The suggested user flow that’s going to be tested in usability testing: | {F31455048} | {F31455050} | {F31455052} | {F31455054} | {F31455056} | {F31455058} | {F31455060} This task focuses on the aspect of loading and publishing tags to images: | {F31455056} | {F31455058} Joy of use, clarity and gratification after publishing image tags are limited in the prototype. ### What do we need? **A)** We would like to explore ways to make the experience of adding tags to images more satisfying and confirming. Usage of animation / illustration helps in accomplishing this. The phases when publishing image tags: 1. Loading indication when tags are being published (indefinite), e.g. tags that are being added to the [onboarding illustration](https://phabricator.wikimedia.org/F31455050) as an animation loop. 2. Animated success illustration when tags are published (not a loop). Constraint: “Tags published“ is added below the illustration/animation. 3. Transition to the next suggestion in the feed, e.g. how should it feel like? Should it switch instantly or timed, a prototype transition to the next image can be helpful here. **B)** Another area to explore for this is **sound**. Could usage of sound/some kind of jingle help to in emphasizing that tags have been published. Also it contributes to satisfaction when tags have been published. **C) Bonus:** Explore if onboarding screen could profit from a subtle animation to communicate what the feature is about as well, e.g. a variation of the illustration in [A1](https://phabricator.wikimedia.org/F31455050) with tags that turn into blue. ### Guidelines to create illustrations / animations and useful links related to Suggested edits - **👉[[ https://www.dropbox.com/sh/41n6ush6hoguu1x/AABpFIecNTFSQn6_qqjRoDrAa?dl=0 | Sketch source and font files to get started ]] 👈** - [Wikimedia illustration guidelines](https://design.wikimedia.org/style-guide/visual-style_illustrations.html) - [Wikipedia Android theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) - [Google Material Design](https://material.io/components/) - [Wikimedia Design Style Guide](https://design.wikimedia.org/style-guide/) - [Suggested edits FAQ](https://www.mediawiki.org/wiki/Wikimedia_Apps/Suggested_edits) - [Wikipedia Android on Zeplin](http://zpl.io/bPL0RX6) - [Suggested edits V4 prototype](https://late-cloud-2881.animaapp.io) (made with [Anima](https://www.animaapp.com), a Sketch plugins)

### Why are we doing this? Suggested edits V4 is currently in the making and is scheduled to be released in the beginning of 2020 (FY FY 19/20). This week, we’re going to perform usability tests in order to improve the suggested user flow ([Link to V4 prototype](https://late-cloud-2881.animaapp.io/)). The suggested user flow that’s going to be tested in usability testing: | {F31455048} | {F31455050} | {F31455052} | {F31455054} | {F31455056} | {F31455058} | {F31455060} This task focuses on the aspect of loading and publishing tags to images: | {F31455056} | {F31455058} Joy of use, clarity and gratification after publishing image tags are limited in the prototype. ### What do we need? **A)** We would like to explore ways to make the experience of adding tags to images more satisfying and confirming. Usage of animation / illustration helps in accomplishing this. The phases when publishing image tags: 1. Loading indication when tags are being published (indefinite), e.g. tags that are being added to the [onboarding illustration](https://phabricator.wikimedia.org/F31455050) as an animation loop. 2. Animated success illustration when tags are published (not a loop). Constraint: “Tags published“ is added below the illustration/animation. 3. Transition to the next suggestion in the feed, e.g. how should it feel like? Should it switch instantly or timed, a prototype transition to the next image can be helpful here. **B)** Another area to explore for this is **sound**. Could usage of sound/some kind of jingle help to in emphasizing that tags have been published. Also it contributes to satisfaction when tags have been published. **C) Bonus:** Explore if onboarding screen could profit from a subtle animation to communicate what the feature is about as well, e.g. a variation of the illustration in [A1](https://phabricator.wikimedia.org/F31455050) with tags that turn into blue. ### Guidelines to create illustrations / animations and useful links related to Suggested edits - **👉[[ https://www.dropbox.com/sh/41n6ush6hoguu1x/AABpFIecNTFSQn6_qqjRoDrAa?dl=0 | Sketch source and font files to get started ]] 👈** - [Wikimedia illustration guidelines](https://design.wikimedia.org/style-guide/visual-style_illustrations.html) - [Wikipedia Android theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) - [Google Material Design](https://material.io/components/) - [Wikimedia Design Style Guide](https://design.wikimedia.org/style-guide/) - [Suggested edits FAQ](https://www.mediawiki.org/wiki/Wikimedia_Apps/Suggested_edits) - [Wikipedia Android on Zeplin](http://zpl.io/bPL0RX6) - [Suggested edits V4 prototype](https://late-cloud-2881.animaapp.io) (made with [Anima](https://www.animaapp.com), a Sketch plugin)

### Why are we doing this? Suggested edits V4 is currently in the making and is scheduled to be released in the beginning of 2020 (FY FY 19/20). This week, we’re going to perform usability tests in order to improve the suggested user flow ([Link to V4 prototype](https://late-cloud-2881.animaapp.io/)). The suggested user flow that’s going to be tested in usability testing: | {F31455048} | {F31455050} | {F31455052} | {F31455054} | {F31455056} | {F31455058} | {F31455060} This task focuses on the aspect of loading and publishing tags to images: | {F31455056} | {F31455058} Joy of use, clarity and gratification after publishing image tags are limited in the prototype. ### What do we need? **A)** We would like to explore ways to make the experience of adding tags to images more satisfying and confirming. Usage of animation / illustration helps in accomplishing this. The phases when publishing image tags: 1. Loading indication when tags are being published (indefinite), e.g. tags that are being added to the [onboarding illustration](https://phabricator.wikimedia.org/F31455050) as an animation loop. 2. Animated success illustration when tags are published (not a loop). Constraint: “Tags published“ is added below the illustration/animation. 3. Transition to the next suggestion in the feed, e.g. how should it feel like? Should it switch instantly or timed, a prototype transition to the next image can be helpful here. **B)** Another area to explore for this is **sound**. Could usage of sound/some kind of jingle help to in emphasizing that tags have been published. Also it contributes to satisfaction when tags have been published. **C) Bonus:** Explore if onboarding screen could profit from a subtle animation to communicate what the feature is about as well, e.g. a variation of the illustration in [A1](https://phabricator.wikimedia.org/F31455050) with tags that turn into blue. ### Guidelines to create illustrations / animations and useful links related to Suggested edits - **👉[[ https://www.dropbox.com/sh/41n6ush6hoguu1x/AABpFIecNTFSQn6_qqjRoDrAa?dl=0 | Sketch source and font files to get started ]] 👈** - [Wikimedia illustration guidelines](https://design.wikimedia.org/style-guide/visual-style_illustrations.html) - [Wikipedia Android theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) - [Google Material Design](https://material.io/components/) - [Wikimedia Design Style Guide](https://design.wikimedia.org/style-guide/) - [Suggested edits FAQ](https://www.mediawiki.org/wiki/Wikimedia_Apps/Suggested_edits) - [Wikipedia Android on Zeplin](http://zpl.io/bPL0RX6) - [Suggested edits V4 prototype](https://late-cloud-2881.animaapp.io) (made with [Anima](https://www.animaapp.com), a Sketch plugins)