Highlight 'Save draft' button

Contribute UX

AI-generated summary

In a UX-focused discussion titled ‘Highlight ‘Save draft’ button’, Lhc_fl raises a usability concern: when users close the composer after writing a long post, a modal appears with three options, but the red “Discard” button (“btn-danger”) is visually dominant, risking accidental deletion of drafts. Lhc_fl proposes moving “Discard” to the end and using “btn-primary” on “Save draft” to guide users toward the safer, expected action. They share two mockups—the first with “Save draft” as primary, the second with “Save draft” in blue and “Discard” in grey—to illustrate the improved visual hierarchy. JammyDodger and Jagster express preference for the first and second designs respectively, agreeing both are better than the current layout. hoangphuctran93 hopes someone will implement the change via CSS. The thread reflects community consensus that visual emphasis should guide users toward preserving drafts, reducing accidental data loss.

1

Sometimes users write a long paragraph in the composer, but suddenly need to close the composer to do something else, or reply to some more important posts.

A modal will be displayed asking the user what they want to do with their existing posts.

But here’s a problem. The “Discard” button is btn-danger, which has a red background, so it becomes the most visually prominent button of the three.

image
image662×220 12.3 KB

Users have to expend extra brainpower to go around the corner, asking them to click the unobtrusive “Save draft” to save their drafts. Once they click the most prominent red button without thinking, their draft is gone forever.

I think maybe putting the delete button at the end of the three buttons, and using btn-primary to emphasize a button that the user is most expected to choose can reduce this danger and get a better user experience.

Like this…

image
image644×192 14.5 KB

6 Likes
2

Okay maybe that one just looked a bit like the blinking lights on a police car… so maybe this?

image
image663×227 14.8 KB

2 Likes
3

I actually quite liked your first suggestion. :slight_smile:

2 Likes
4

And I liked second one :wink:

But the conclusion made by majority is both are better than default :rofl:

2 Likes
5

hope someone can write a css to support this ^^