{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/7602","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7602/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7602/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7602/events","html_url":"https://github.com/WordPress/gutenberg/issues/7602","id":336570393,"node_id":"MDU6SXNzdWUzMzY1NzAzOTM=","number":7602,"title":"Enhance the Publishing flow","user":{"login":"karmatosed","id":253067,"node_id":"MDQ6VXNlcjI1MzA2Nw==","avatar_url":"https://avatars3.githubusercontent.com/u/253067?v=4","gravatar_id":"","url":"https://api.github.com/users/karmatosed","html_url":"https://github.com/karmatosed","followers_url":"https://api.github.com/users/karmatosed/followers","following_url":"https://api.github.com/users/karmatosed/following{/other_user}","gists_url":"https://api.github.com/users/karmatosed/gists{/gist_id}","starred_url":"https://api.github.com/users/karmatosed/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karmatosed/subscriptions","organizations_url":"https://api.github.com/users/karmatosed/orgs","repos_url":"https://api.github.com/users/karmatosed/repos","events_url":"https://api.github.com/users/karmatosed/events{/privacy}","received_events_url":"https://api.github.com/users/karmatosed/received_events","type":"User","site_admin":false},"labels":[{"id":644027985,"node_id":"MDU6TGFiZWw2NDQwMjc5ODU=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design","name":"Needs Design","color":"0e8a16","default":false}],"state":"open","locked":false,"assignee":{"login":"sarahmonster","id":376315,"node_id":"MDQ6VXNlcjM3NjMxNQ==","avatar_url":"https://avatars2.githubusercontent.com/u/376315?v=4","gravatar_id":"","url":"https://api.github.com/users/sarahmonster","html_url":"https://github.com/sarahmonster","followers_url":"https://api.github.com/users/sarahmonster/followers","following_url":"https://api.github.com/users/sarahmonster/following{/other_user}","gists_url":"https://api.github.com/users/sarahmonster/gists{/gist_id}","starred_url":"https://api.github.com/users/sarahmonster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sarahmonster/subscriptions","organizations_url":"https://api.github.com/users/sarahmonster/orgs","repos_url":"https://api.github.com/users/sarahmonster/repos","events_url":"https://api.github.com/users/sarahmonster/events{/privacy}","received_events_url":"https://api.github.com/users/sarahmonster/received_events","type":"User","site_admin":false},"assignees":[{"login":"sarahmonster","id":376315,"node_id":"MDQ6VXNlcjM3NjMxNQ==","avatar_url":"https://avatars2.githubusercontent.com/u/376315?v=4","gravatar_id":"","url":"https://api.github.com/users/sarahmonster","html_url":"https://github.com/sarahmonster","followers_url":"https://api.github.com/users/sarahmonster/followers","following_url":"https://api.github.com/users/sarahmonster/following{/other_user}","gists_url":"https://api.github.com/users/sarahmonster/gists{/gist_id}","starred_url":"https://api.github.com/users/sarahmonster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sarahmonster/subscriptions","organizations_url":"https://api.github.com/users/sarahmonster/orgs","repos_url":"https://api.github.com/users/sarahmonster/repos","events_url":"https://api.github.com/users/sarahmonster/events{/privacy}","received_events_url":"https://api.github.com/users/sarahmonster/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/WordPress/gutenberg/milestones/22","html_url":"https://github.com/WordPress/gutenberg/milestone/22","labels_url":"https://api.github.com/repos/WordPress/gutenberg/milestones/22/labels","id":2748620,"node_id":"MDk6TWlsZXN0b25lMjc0ODYyMA==","number":22,"title":"Merge Proposal: Editor","description":"Tracks progress and tasks towards a merge proposal candidate.","creator":{"login":"mtias","id":548849,"node_id":"MDQ6VXNlcjU0ODg0OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/548849?v=4","gravatar_id":"","url":"https://api.github.com/users/mtias","html_url":"https://github.com/mtias","followers_url":"https://api.github.com/users/mtias/followers","following_url":"https://api.github.com/users/mtias/following{/other_user}","gists_url":"https://api.github.com/users/mtias/gists{/gist_id}","starred_url":"https://api.github.com/users/mtias/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mtias/subscriptions","organizations_url":"https://api.github.com/users/mtias/orgs","repos_url":"https://api.github.com/users/mtias/repos","events_url":"https://api.github.com/users/mtias/events{/privacy}","received_events_url":"https://api.github.com/users/mtias/received_events","type":"User","site_admin":false},"open_issues":38,"closed_issues":129,"state":"open","created_at":"2017-09-06T18:00:33Z","updated_at":"2018-07-12T08:06:59Z","due_on":null,"closed_at":null},"comments":3,"created_at":"2018-06-28T10:50:00Z","updated_at":"2018-07-12T09:42:20Z","closed_at":null,"author_association":"MEMBER","body":"Right now on publishing the experience comes to an abrupt end. For example:\r\n\r\n![2018-06-28 at 11 42](https://user-images.githubusercontent.com/253067/42029718-630e882e-7ac8-11e8-8986-5b80b8d018f0.png)\r\n\r\nWhilst the content of the post may not mean we want to celebrate with balloons and ribbons the publishing, having something that doesn't just stop at this empty end is needed.\r\n\r\nPreview looks like this....\r\n\r\n![2018-06-28 at 11 55](https://user-images.githubusercontent.com/253067/42030282-2f69218a-7aca-11e8-847f-4551df63f58b.png)\r\n\r\nA few ideas could be to have an animation such as here: https://www.wired.com/2013/12/a-sandbox-for-experimenting-with-animated-typography-built-by-a-google-designer/.\r\n\r\nThis has been talked about in other issues and it's worth creating one here to just focus on this and explore. Along with adding some flourish to this page of engagement also looking at the format. This is pretty flat as an end to the experience. Beyond any animation this screen showed above could do with some iterations itself.\r\n\r\nCould perhaps bringing in a better previewing to this all also be wrapped in? Thinking about this in stages may be the best, what can we get in for phase one. Then maybe having a preview modal or something on preview could be brought in later phases. I think it's worth in designs exploring freely then distilling back.\r\n\r\nWorth noting that exploring things like having this across all devices is important. What could be created that adapts well?"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/404454377","html_url":"https://github.com/WordPress/gutenberg/issues/7602#issuecomment-404454377","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7602","id":404454377,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNDQ1NDM3Nw==","user":{"login":"sarahmonster","id":376315,"node_id":"MDQ6VXNlcjM3NjMxNQ==","avatar_url":"https://avatars2.githubusercontent.com/u/376315?v=4","gravatar_id":"","url":"https://api.github.com/users/sarahmonster","html_url":"https://github.com/sarahmonster","followers_url":"https://api.github.com/users/sarahmonster/followers","following_url":"https://api.github.com/users/sarahmonster/following{/other_user}","gists_url":"https://api.github.com/users/sarahmonster/gists{/gist_id}","starred_url":"https://api.github.com/users/sarahmonster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sarahmonster/subscriptions","organizations_url":"https://api.github.com/users/sarahmonster/orgs","repos_url":"https://api.github.com/users/sarahmonster/repos","events_url":"https://api.github.com/users/sarahmonster/events{/privacy}","received_events_url":"https://api.github.com/users/sarahmonster/received_events","type":"User","site_admin":false},"created_at":"2018-07-12T09:42:20Z","updated_at":"2018-07-12T09:42:20Z","author_association":"CONTRIBUTOR","body":"# Suggested improvements to our flow\r\n\r\nFor comparison, here's Gutenberg's current publishing flow in action:\r\n\r\n![2018-07-12 09 30 10](https://user-images.githubusercontent.com/376315/42621774-9ee017b6-85b6-11e8-95ee-1a40e2598f8b.gif)\r\n\r\nHere's my current thinking for how we can improve this flow:\r\n\r\n## Pre-publish\r\n- I've already submitted a number of small changes and bugfixes here, mostly attached to #7426\r\n- We could shorten the header text to read \"Ready to publish?\" instead\r\n- The pre-publish panel should be dismissible (either a pre-checked \"Show this every time I publish\" box or a \"Don't show this again\" checkbox) for power users who don't want to be forced to click twice to publish a post. I could see this being frustrating for people who publishing multiple times a day and just want to get on with it.\r\n- Giving a prompt to add tags is nice, but it could also be moved to post-publish, since it's not critical to the pre-publishing experience, which should be geared toward making users feel confident that they're ready to go for it and post.\r\n- We could improve the animation states of the publish button to show what's going on. (Ghost's is super nice, with the changing colours and icons.)\r\n- Double-clicking the button is a bit unintuitive. It looks as though there was originally a drop-down in the button here, so I may be missing some historical reasoning for the decisions here, but coming at this from a relatively green perspective, I think a better pattern here could be to have a visual indication that the publish button doesn't trigger an action, but rather pulls down a sidebar with additional actions. (So, a little drop-down icon.) Converting the sidebar here into an actual drop-down may help distinguish it from the settings sidebar, as well as connecting it more closely to the button from which it originates. (See also #7879.) Livejournal, Medium, and Ghost all follow this pattern and it feels the most elegant. \r\n- There should also be a secondary \"Publish\" button at the *bottom* of the the pre-publish panel, so you check all your settings, looks good, and then the final step is to press the publish button. At the very least, the interim Publish button should change state more noticably, so that it's clear a second click is required (see WordPress.com example).\r\n\r\n## Post-publish\r\n-  It seems as though, for most users, their next steps after publishing would be either to look at the post, or to go back to their post list and write another post. In either case, there's no value in abandoning the user on their edit post page—they're finished with this screen, at this stage. Since 50% of users want to see their post in situ, let's try taking them there directly, and saving them the click. In my benchmark testing, the flows that redirected to the post itself after publishing were the ones that felt the most inherently satisfying—it felt like I'd really done something, and I could see immediate evidence of that.\r\n- We could potentially use animation to highlight the shift from the edit screen to viewing the actual post. See Svbtle's flashing green border—I think this is a bit intense, but having a transition between pressing publish and being shown your new post could be really nice. We could show a short message \"Great work! Let's take a look at your new post....\" and have a brief\r\n- We could also use the post-publish area to help users get the most out of WordPress. I did a skim through articles with titles like \"what do I do after publishing a blog post\" to get a quick sense of what users want to do after publishing, and it seems like the biggest concern here is with getting that post out to others: optimising for SEO, sharing on social media, sending via email, checking stats, reading comments, etc. Since these functionalities are provided by plugins rather than core, we can't directly link to them here, but we can help nudge users toward them.\r\n- We could provide a checklist for \"What's next?\" to offer people some suggested steps to promote their post. (And a link to write a new post, as well!)\r\n- We could also feature a series of (potentially rotating, always dismissible) tips or ideas for promotion here. ie, \"Did you know? The best time to send out an email is 4pm. [Read more]\"\r\n\r\n## On \"hurray!\"\r\n\r\nThe *first* time you publish a post is very different from the *hundredth* time you publish a post. How do we account for these varied experiences? \r\n\r\nShould WordPress commemorate this in some way? We could consider congratulatory milestones: published first post, published six posts this month, written x words, etc. Nothing too confetti-laden, but perhaps a simple message in the post-publish screen: \"Great work on your first post!\" \r\n\r\nThis would be a nice way of putting a bit more emotion in the interface, but we don't want to annoy or disrupt users. Can we note important milestones without potentially seeming tone-deaf if someone's writing a blog for therapeutic purposes, or about a traumatic subject?\r\n\r\n## Research\r\n\r\nI've tried to approach this with the intention of being as *helpful* as possible. How do we help users get the most from their new post? What do they want to do immediately after publishing a post? I looked for research into this but couldn't find anything specific to \"what do users want to do after publishing a post?\" Thus, my recommendations here are mostly based on guesswork, assumptions, and/or looking to what others are doing in this space.\r\n\r\nI think it could be super beneficial to do some user testing here, both of the before flow and the after flow. My thinking is that it would be ideal to test it with the following types of users:\r\n\r\n- someone who posts many times a day\r\n- someone who is new to WordPress\r\n- someone who works for a news organisation\r\n\r\nDo we have a pool of users anywhere to test with, or have usability testers typically been recruited on a per-test basis?\r\n\r\n## Next steps\r\n\r\nI'll work on some mockups for this suggested flow next, but I'd welcome any ideas or thoughts on the suggested approach here!"}}
{"actor":{"display_login":"sarahmonster"}}