Async ('Upload and Publish') MVP Design and Copy Review

[aforcier]

This is a list of changes needing a design and copy review, ahead of merging the feature/async-media branch into develop.

The async design to-do list is here: #6130. This design/copy review issue focuses on the post+media aspect, and not the media browser.

These screenshots reflect the latest BuddyBuild build of that branch.

Post list

Uploading a single post

New elements:

• The snackbar at the bottom, and its text
• The cloud icon and 'Uploading post' text
• The progress bar (it's indeterminate)

Uploading multiple posts

If multiple posts have media to upload, they'll proceed in parallel, but we currently upload the text body of posts one at a time - any additional posts with no remaining media to upload enter this queued state.

New elements:

• The cloud icon and 'Queued post' text

Uploading posts with media

New elements:

• The 'Uploading media...' text
• The determinate progress bar
• The card element for the post is no longer grayed out, since the user can re-edit posts that are uploading media (posts that are uploading their content, however, are still unavailable for edit)

Completed post upload

New elements:

• The 'Post published' snackbar

Upload error in post content

This is the state if a post failed due to errors in the post content (and not in the media for that post - this case is shown below).

New elements:

• The error icon and text style (this got a design pass in Async media: Tweak media error messaging in post list #6375)
• The 'Retry' button

Upload error in post media

New elements:

• Same as above, the error icon and text style (this got a design pass in Async media: Tweak media error messaging in post list #6375)

Scheduled post

New elements:

• The scheduled post icon (some relevant discussion in Posts list: upload status text and icon changes #6294)

Notifications

Most of the states in the post list have a matching notification state.

Uploading post content

Shown when uploading the content of a post only - if there are media to be uploaded, the below notification is shown first, and then this one is shown when the media uploads complete.

Uploading media for post

Published post

This is unchanged from what we had before, it's just here for context.

Upload error in post content

Upload error in post media

[aforcier]

cc @iamthomasbishop 🙇

[iamthomasbishop]

My first thought is on the snack bar that says "Your post is being sent online", I would prefer something more descriptive like "Your post is being uploaded", but I'm not 100% sure if there is a specific reason behind this.

[aforcier]

My first thought is on the snack bar that says "Your post is being sent online", I would prefer something more descriptive like "Your post is being uploaded", but I'm not 100% sure if there is a specific reason behind this.

I like "Your post is being uploaded" too - let's update to that unless Editorial has a different suggestion 👍.

[michelleweber]

The "sent online" bit was the first comment I was going to make -- I totally agree that it should be changed, either to "Your post is being uploaded"/"Your post is being published" or the more active "Your post is uploading"/"Your post is publishing."

"Publishing" is nice because it's even more specific and doesn't duplicate the "uploading post" text, but I don't know if it's always accurate (i.e., if sometimes people will be saving drafts or scheduling rather than publishing immediately?). If it is accurate, I'd go with "publishing."

Looking through the rest of the screenshots now; will drop any other notes here in a few.

[michelleweber]

Upload error in post content

• We need a period at the end of the error message.
• This confuses me, because how could you have attempted to publish a post that you can't view or edit? It seems like it should be impossible to get this error message at this point? Is this the right error -- shouldn't it say something about the unacceptable content?

Upload error in post media

• I'd love if this error could be a little more natural-speech sounding: "We were unable to upload this post's media. Please try publishing again."
• When we say "edit post to try again," do we mean "edit the actual post content and try to publish again" or "click the edit option to access the publish button and try to publish again"? "Edit post to try again" sounds like I have to edit the actual content.

Notifications - uploading post content

• This is a lot of uses of "post" in a very short set of messages. Suggest: "Publishing "media post."
• If you have a "..." after "Uploading media content," you should also have it after "Uploading post content."

Notifications - published post

• I know this is not a new screen, but if it's possible, it'd be great to change it to say ""Name of Post" has been published!"

Notifications - upload error in post content

• "Post upload failed" -- upload does not need a capital letter.
• We don't need "Upload failed" immediately followed by "Post upload failed"; one's enough :)
• This needs to be rephrased a bit; there are too many colons. Suggest: "There was an error uploading this post: you don't have permission to view or edit posts."
• Content-wise, this error confuses me the same way the first one does.

Notifications - upload error in media

• Suggest: "There was an error uploading the media in this post. The media uploads have been canceled."
• Does this need an addition telling people what to do next?

[iamthomasbishop]

Most of the design looks pretty solid, and think we're really close.

Completed Post Upload

• Should we show "Post Successfully Published" on the post itself (perhaps in place of where the status messages/timestamp show)? At least when for a couple seconds or while the snackbar is shown? Might not be necessary bc we do have the snackbar, but I don't think it'd hurt.

Upload error in post content

• Like @michelleweber I was also a little confused. Why would this be shown to a user if they're unable to do anything with it?

Upload error in post media

• Agree with Michelle that It would be ideal if we could make this alert message tappable to re-trigger the action. But I'm guessing that isn't really doable here bc it probably just outputs a string here.

Notifications

• I like this approach to 'soft notifications', as they can be descriptive but are tucked away. In a perfect world, we could show a persistent UI element that could stay fixed and show progress of actions as users move elsewhere, but probably not doable at the moment.

• In general, it'd probably be nice to alert of success and or error (with actionable items) within the UI via a snackbar or similar.

• I also agree w/ the grammar suggestions/issues Michelle has raised.

• If there are actions that can be taken from these notifications, we should add them to the footer of the notification when expanded, similar to this (from the material design guidelines): https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bzhp5Z4wHba3VE12ZUFkVTRtZmc/notifications_templates_01_standard.png

[aforcier]

Thank you @michelleweber and @iamthomasbishop! I'll draw up a checklist of changes to be made - first clearing up a few questions:

Uploading posts

"Publishing" is nice because it's even more specific and doesn't duplicate the "uploading post" text, but I don't know if it's always accurate (i.e., if sometimes people will be saving drafts or scheduling rather than publishing immediately?). If it is accurate, I'd go with "publishing."

Unfortunately it's not always accurate, we'll show this snackbar for saving drafts, or uploading a scheduled post - I'll go with "Your post is uploading" in this case then 👍.

Upload error in post content

We need a period at the end of the error message.

I'm not certain about this, but wouldn't that contradict the material design guidelines for single-sentence labels? (We have many error strings that follow this same guideline that we'd also need to make consistent.)

This confuses me, because how could you have attempted to publish a post that you can't view or edit? It seems like it should be impossible to get this error message at this point? Is this the right error -- shouldn't it say something about the unacceptable content?

Like @michelleweber I was also a little confused. Why would this be shown to a user if they're unable to do anything with it?

Sorry - by "post content" here I meant "unrelated to the media", that wasn't very clear. This represents an error we got after media were uploaded. This could be because your posting privileges were removed from that site, or the remote post you're trying to edit was deleted, or a connectivity error - pretty much always unrelated to the actual content of the post.

The example is a bit contrived (I simulated the error situation so I could demonstrate the UI), normally you'd see an empty screen with an error about not being able to view posts for the site as soon as you entered the post list

I think it would be worth doing a detailed copy review of all our media/post error messaging, most of which predates the async project - I'm adding an item to our error cleanup project (separate from async, but part of the ongoing mobile media project). Not to say we can't address/discuss things here, but it's worth making sure we do a detailed audit of our error messaging as there are more error cases that will be handled as part of that project.

Upload error in post media

When we say "edit post to try again," do we mean "edit the actual post content and try to publish again" or "click the edit option to access the publish button and try to publish again"? "Edit post to try again" sounds like I have to edit the actual content.

So we'd like to eventually classify the type of media error we got into 'retryable' and 'not retryable', and either offer a Retry button or prompt for the post to be edited. This isn't going to be part of the first version of this feature though. So, in case of a media error, you need to open the post. From there, it depends on the error. If there was a connection error, just retrying the media from inside the editor should do it. If there was a 'file size too large'-type error, you would need to remove that media item and add a resized one. In either case, just hitting publish won't work, you'll need to interact with the media items in the post in one way or another. So I suppose "Edit post to try again" was the most generic thing we could think of to cover what needs to be done.

Notifications - upload error in media

Does this need an addition telling people what to do next?
Agree with Michelle that It would be ideal if we could make this alert message tappable to re-trigger the action. But I'm guessing that isn't really doable here bc it probably just outputs a string here.

This relates to the above point, that we currently don't support automatically retrying posts with failed media. Right now, tapping the notification will take you to the post list, where you'll be shown a dialog. The dialog is something we planned on removing since we're also displaying an error label in the actual post list now, with the 'Edit the post' suggestion. I missed this in my original post here, feedback appreciated:

I don't know whether tapping the notification needs to be communicated as the next thing to do - as an Android user, I would expect tapping the notification to take me to a screen where I can fix the problem, which we almost do (we take them to the post list for now instead of directly opening the post). What do you think?

Completed Post Upload

Should we show "Post Successfully Published" on the post itself (perhaps in place of where the status messages/timestamp show)? At least when for a couple seconds or while the snackbar is shown? Might not be necessary bc we do have the snackbar, but I don't think it'd hurt.

I'll look into it - showing the message should be straightforward enough, it's the 'for a couple seconds' part which will be tricky.

If there are actions that can be taken from these notifications, we should add them to the footer of the notification when expanded, similar to this (from the material design guidelines):

I agree - could we lump this in with the general update to notifications we've been talking about? Or do you think we should figure out this part ahead of the rest?

[iamthomasbishop]

Unfortunately it's not always accurate, we'll show this snackbar for saving drafts, or uploading a scheduled post - I'll go with "Your post is uploading" in this case then 👍

👍

So, in case of a media error, you need to open the post. From there, it depends on the error. If there was a connection error, just retrying the media from inside the editor should do it. If there was a 'file size too large'-type error, you would need to remove that media item and add a resized one.

Ok, that makes sense. Thanks for clarifying. In general, if there is an issue that can be fixed by simply retrying the action (aka not an action that requires trying a different file or whatever), can we attempt to show a simple "retry" action?

I don't know whether tapping the notification needs to be communicated as the next thing to do - as an Android user, I would expect tapping the notification to take me to a screen where I can fix the problem, which we almost do (we take them to the post list for now instead of directly opening the post). What do you think?

I think in terms of showing actions, we could follow the expanded notification pattern in the Material guidelines, where tapping the body of the notification brings you to the actionable screen, but also show a caret/dropdown arrow which can expand the notification to show Actions.

Example (collapsed - default): https://cloudup.com/cV7_uj-WT8U

Example (expanded - after tapping caret): https://cloudup.com/cMyXJcFrAT0

(Note: this could be part of a future iteration to notifications, as you asked about below).

I'll look into it - showing the message should be straightforward enough, it's the 'for a couple seconds' part which will be tricky.

Could we show it until the user navigates away from the list page?

[aforcier]

In general, if there is an issue that can be fixed by simply retrying the action (aka not an action that requires trying a different file or whatever), can we attempt to show a simple "retry" action?

In general, yes - we just haven't implemented support for retrying individual media for the post and then the post itself automatically yet. This is something @mzorz and I discussed adding in a bit later. We didn't have an issue for this, so I opened #6407.

I think in terms of showing actions, we could follow the expanded notification pattern in the Material guidelines, where tapping the body of the notification brings you to the actionable screen, but also show a caret/dropdown arrow which can expand the notification to show Actions.

Totally on board with this 👍

I'll look into it - showing the message should be straightforward enough, it's the 'for a couple seconds' part which will be tricky.

Could we show it until the user navigates away from the list page?

Sounds good, I'll add that to the TODO list I'm making for this issue 👍.

[michelleweber]

wouldn't that contradict the material design guidelines for single-sentence labels

Ah, in that case, it's fine. I don't love those guidelines, but I definitely don't want to render anythinng inconsistent.

Sorry - by "post content" here I meant "unrelated to the media", that wasn't very clear. This represents an error we got after media were uploaded. This could be because your posting privileges were removed from that site, or the remote post you're trying to edit was deleted, or a connectivity error - pretty much always unrelated to the actual content of the post.

So does that mean there are a variety of messages that are (or could be) shown here? Otherwise, seems like it should just be a more generic message that there was an error during the upload.

I think it would be worth doing a detailed copy review of all our media/post error messaging, most of which predates the async project

Happy to help out there; I've already done a lot of messaging for Matt, and we can bring all the messaging into alignment.

In either case, just hitting publish won't work, you'll need to interact with the media items in the post in one way or another. So I suppose "Edit post to try again" was the most generic thing we could think of to cover what needs to be done.

Understood. In that case, I think the generic message is a little frustrating, because something specific needs to be done to solve the problem, but we're not telling the user what it is. Can we say something like "Please make sure your files are smaller than XXmb, then edit your post and re-publish."?

[aforcier]

So does that mean there are a variety of messages that are (or could be) shown here? Otherwise, seems like it should just be a more generic message that there was an error during the upload.

Yes, there are a few, based on what we're able to determine from the type of error we got from the server. They are currently:

"Unknown post, local copy of this post may be out of sync with the server"
"Unknown post format" (this is extremely unlikely to happen)
"You don't have permission to view or edit posts" (or "pages")

When we can't classify the error we got into any of those three, we show the raw error we got from the server, which is sometimes not helpful (connection errors currently show GENERIC_ERROR, I'm going to fix that ASAP).

Understood. In that case, I think the generic message is a little frustrating, because something specific needs to be done to solve the problem, but we're not telling the user what it is. Can we say something like "Please make sure your files are smaller than XXmb, then edit your post and re-publish."?

This makes sense to me, but will require a few deep changes. Do you think as-is would be workable for a first iteration (with the natural-speech sounding suggestion you made of "We were unable to upload this post's media. Please try publishing again.", and we could add it to the list for the error messaging update sub-project I mentioned?

[aforcier]

Here's what I have so far as far as items to be immediately updated:

Post list - Uploading posts

• Replace "Your post is being sent online" with "Your post is uploading" in the snackbar

Post list - Upload error in post content

• Report connection errors properly --> relies on a deeper change in the network layer: Identify and report network failure errors WordPress-FluxC-Android#506, will fix separately

Post list - Upload error in post media

TBD

Post list - Completed post upload

• Show "Post Successfully Published" on the post itself (perhaps in place of where the status messages/timestamp show), until the user navigates away from the list page --> Filed here for later consideration as per conversation with @iamthomasbishop

Notifications - Uploading post content

• This is a lot of uses of "post" in a very short set of messages. Suggest: "Publishing "media post." (using "Uploading "media post."")
• Add "..." after "Uploading post content"

Notifications - Published post

• Change it to say ""Name of Post" has been published/updated/schedule/saved as a draft!"

Notifications - Upload error in post content

• "Post upload failed" -- upload does not need a capital letter.
• Drop one of the duplicated "Upload failed" messages
• This needs to be rephrased a bit; there are too many colons. Suggest: "There was an error uploading this post: you don't have permission to view or edit posts."

Notifications - Upload error in media

• Rephrase to "There was an error uploading the media in this post. The media uploads have been canceled."

Possible addition:

• Auto-scroll to failed post in the list when coming from an error notification, and drop the pop-up dialog --> Async media: Scroll to failed post from error notifications #6424

[aforcier]

@michelleweber for the "Uploading post content" notification, you suggested:

This is a lot of uses of "post" in a very short set of messages. Suggest: "Publishing "media post."

(Instead of 'Posting "media post"'.) However, this notification will also show if we're saving a remote draft, or updating/scheduling a post and not publishing it - would it make sense to use 'Uploading "media post"', like we did for the snackbar ("Your post is uploading")?

Also, for the 'published post' success notification, should we use different forms of ""Name of Post" has been published!", like:

'"Name of Post" has been published/updated/scheduled/saved as a draft!'?

[michelleweber]

would it make sense to use 'Uploading "media post"', like we did for the snackbar ("Your post is uploading")?

Sounds good.

Also, for the 'published post' success notification, should we use different forms of ""Name of Post" has been published!", like: '"Name of Post" has been published/updated/scheduled/saved as a draft!'?

Yes, that'd be great.

[aforcier]

Issues addressed in #6420 and #6424.