0

I am using a content management system (CMS) to add, edit, and publish pages.

Question: If I create a page or make changes to an existing page, and save as a draft without publishing, then return to that page, how can I indicate that the page is a draft, or already live/published?

One obvious indicator would be if a Discard button exists – it means that it's a draft – but I am looking for an additional indicator. I don't know how it should look, or where to put it.

It would be great if answers could fit the below design.

Also if you have any additional remarks or corrections about UI/UX, please comment.

Edit Content page with Publish and Discard buttons

1
+50

I'm not sure the "Discard" word correlates with "draft". At least not for me, it just means "discard"

I think a good way would be to combine a banner or top bar on top of the page, letting the user know whatever message you want them to know. In this case, that the page is in a draft status.

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

Note: Material does a distinction between banners and top bars because they call top bar to a mobile element. However, some people calls this element a top bad because of its placement, and to diferentiate it from the typical advertisement banners

enter image description here

In the example above, you can see how it can be easily adapted to your existing UI,

You can also combine this notification with a color based message. You could adapt common alerts color coding (for example: red if you're about to delete the post, yellow if it's a draft, green if it's succesfully published, blue if you're editing an existing post), or create a custom color system based on your UI guidelines . You could use this for the bar or use the current button as indicator. In this case, you could use conditional labels based on the type of content

1

A Discard button could exist on a live, published page - a user might wish to delete a page that's no longer wanted, or discard edits made while updating. By itself, it's not a strong enough indicator that the page is in Draft mode.

Other CMSes make Draft status very obvious by spelling it out. Users of modern CMSes expect this. For example, in Wordpress:

Wordpress Publish block showing Draft status

"Save Draft" and "Publish" are two separate buttons, "Draft" is a status, and it's a default in the status change menu.

Other CMSes will change the color of a page that's in Draft mode to light pink or light yellow. There are many options, but it's important to not be too subtle.

1
  • +1 for changing the page colour
    – PhillipW
    Mar 31 at 20:12
1

You could basically have the following statuses for your content:

  • New
  • Published (Live)
  • Unpublished (eg; auto-expired)
  • Draft (possible that it was never published or it was unpublished and saved as a draft)

Furthermore, each content can be further taken action based on their status. For example:

  1. New Content - can be published or saved as a draft (Buttons on the Edit Page: Cancel, Publish, Save as Draft)
  2. Published - can be unpublished (Buttons: Cancel, Unpublish, Save)
  3. Unpublished - can be published or saved as a draft (Buttons: Cancel, Publish, Save as Draft)
  4. Draft - can be published (or discarded/deleted depending on the requirement) (Buttons: Cancel, Publish, Save)

That means based on the status, each content would have different call-to-action buttons on the edit page. And I would assume this would be enough for a user to know what content s/he is editing without having to display an additional status indicator for the page that is being edited. Because, we can assume that user would have a specific intent prior to editing a particular content. For example, to publish a previously saved draft content etc.

enter image description here:

0

Well, you just need to change terminology and abandon "draft" word.

Page can be saved and published. Those are two separate processes. Whatever you save changes it does nothing but saving. To make changes be visible, you publish page.

Seems simple.

To much attention to "discard changes" like it is a primary flow, stop that too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.