Page MenuHomePhabricator

Apply intuitive Agora styles to Flow buttons
Closed, ResolvedPublic

Description

The buttons in Flow should use intuitive Agora/ mediawiki.ui styles (especially colors), e.g.:

Create topic / Reply (when answering) / Submit changes (when editing):
-> green button

Preview:
-> blue button

  • Cancel:

-> red button

Currently all buttons on ee-flow.wmflabs.org are grey making it very hard to find the action one wants.
The "Create topic" / "Reply" / "Submit changes" buttons are so pale that they look as if they were disabled buttons.
The "Cancel" button is not a button at all but only a text link making it inconsistent with the other buttons.


Version: unspecified
Severity: enhancement

Details

Reference
bz57695

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 2:27 AM
bzimport set Reference to bz57695.
bzimport added a subscriber: Unknown Object (MLST).

bingle-admin wrote:

The WMF core features team tracks this bug on Mingle card https://mingle.corp.wikimedia.org/projects/flow/cards/538, but people from the community are welcome to contribute here and in Gerrit.

Thanks, Eduard - good feedback. I agree that the plaintext reply link is too pale and not eye-catching enough, and we've confirmed that many new users and even some experienced users don't see it. The designers are working on some alternative treatments.

It's important to keep in mind, though, that Agora/mediawiki.ui aren't fully finished design libraries – Agora is still very new and experimental, and the design team is continuing to iterate on the elements that make it up based on user feedback, so things like button shape, color, and state are going to be evolving (both in Flow and Agora) as we go.

When Flow adopts the latest Agora CSS from MediaWiki core (bug 62297), we should revisit this feedback.

  • The [Reply/Submit/Create topic] button will look different from [Preview] even when disabled (it turns green after you enter something in the text field).
  • Agora design wants only one primary "call to action" to avoid rainbow appearance, so [Preview] will stay neutral.
  • Quiet buttons like Cancel will have slightly better feedback.
  • Cancel should indeed be mw-ui-destructive (appears red on hover and click); more precisely it should get that style after you've entered something (bug 62290).
  • The new Reply • Edit buttons after each post are very obvious, but even "quieter" than Cancel. They seem to be working OK.

Thanks for your feedback on my feedback.

I already noticed some Agora styles were applied differently than I imagined it in the first place but I assume this is a more fundamental problem since consistency should be the first priority.

Anyhow I don't understand why buttons are supposed to be quiet: You've given that up by using non-native styled buttons in the first place. Apart from that I find it more confusing to have different buttons inheriting different styles (except from color). Especially that "cancel" has not bordering at all by default makes it look as if it doesn't belong to where it is.