==== Background
In our analysis of the "add a link" funnel, we saw that in a user's first session through "add a link", only 28% of desktop users and 11% of mobile users choose to do another task from the "post-edit dialog". The most common action was to close the dialog by clicking or tapping outside of it (or clicking the "X" on desktop).
We think that many users may be closing the dialog because they want to look at the edited article to confirm/admire the changes they made to it. Once they close the dialog, they can't open it back up, and so have lost the opportunity to edit the next article.
{F34949139}
==== Hypothesis
If we affirmatively design for that "admiring" behavior by encouraging it, but then still allow users to return to the dialog to choose a next article, they will //both// admire their work //and// edit another article.
==== Proposed design B: Separate success message & next edit
This proposal firstly decouples the post-edit message from the next task. The second main change is that the next suggestion takes the form of a collapsible drawer akin to the ‘inspector’ component in structured tasks.
* **Pros**
** Removes likelihood of accidentally closing the dialog
** Collapsed version of next edit inspector doesn’t obscure any article content.
** Removing the modal and separating the success is more in consistent with “normal” edits (where only the success message appears as a toast)
** Separating the success message enables more flexibility with other Positive reinforcement experiments related to “celebration” vs specific recommended next actions.
* **Cons**
** Separating the two makes the review my edit aspect less overt as a an action for users
** Physical removal of the “close” button makes it less obvious how one could minimise the view to see the article they have just edited
* **Other notes on design**
** Users will not be able to remove this next edit UI unless they refresh the page.
** The random/reload new suggestion action will be replaced with navigation buttons to flip through solutions as per T302335
** **On Desktop**, the next suggestion dialog is transformed into the same bottom drawer as the Desktop Add image card. The success message will be more separated at the top of the screen similar to other other Visual editor success messages.
| Mobile {F34970123} | Desktop {F34970422}
===== Additional animation/transition details
**Mobile**
1. Submit edit
2. Success/Completed message appears (fade up and animate in from bottom of screen) [200ms]
3. Message remains in place for [400ms]
4. Next edit animates in from bottom, “pushing” up the message toast. [400ms]
5. If the message toast is not tapped/clicked on by the user to dismiss it immediately, it will remain in place for [5s]
6. Message toast fades out in [200ms] duration – either after the normal period, or if the user selects it to dismiss it.
| Mock showing sequence {F34970121} | Recording of [[ https://www.figma.com/proto/fOa1x7hw6EM9VnaMJv7vib/Positive-reinforcement?page-id=820%3A33312&node-id=901%3A42247&viewport=241%2C48%2C0.29&scaling=min-zoom&starting-point-node-id=901%3A42247&show-proto-sidebar=1 | prototype ]] {F34970413}
**Desktop animation**
1. Submit edit
2. Success/Completed message appears (fade in and animate downward from top of screen) [400ms] simultaneous to the page transitioning from the Edit to Read mode.
3. Message remains in place for [400ms]
4. Next edit animates in from bottom [400ms]
5. If the message toast is not tapped/clicked on by the user to dismiss it immediately, it will remain in place for [5s]
6. Message toast fades out in [200ms] duration – either after the normal period, or if the user selects it to dismiss it.
{F34970426}
Desktop animation available [[ https://www.figma.com/proto/fOa1x7hw6EM9VnaMJv7vib/Positive-reinforcement?page-id=820%3A33312&node-id=910%3A40119&viewport=241%2C48%2C0.29&scaling=min-zoom&starting-point-node-id=910%3A40119&show-proto-sidebar=1 | here ]]