Button order is backwards (mostly)

[ygoe]

Description

In almost every dialog, the order of the action buttons is backwards. I always struggle finding the correct button to click on. Usually, from what I've seen, the primary action always comes first. In a left-to-right reading direction, that would be the left-most button. The reason is that we're reading in that direction and don't want to read the titles of all the buttons before finding the one we want in most cases. That's a waste of time. So the most relevant or likely button comes first, then the others in somewhat decreasing order of importance.

Examples:
OK - Cancel
Yes - No
Save - Delete - Cancel
Comment - Close

Also, sometimes the cancel button has a colour, sometimes it's white. This also adds to the confusion. I can't find the pattern behind the colours. Until now I've seen green, blue, red and white. Green seems to be the default/primary colour, white the cancel option and the others are random and confusing.

Also, there's a Close button below commenting issues, but none below commenting a pull/merge request. Is there a scheme in Gitea?

Screenshots

I haven't found a place where the button order is normal, but I'm sure I stumbled upon one today.

Gitea Version

1.16.8

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Windows

Browser Version

Firefox 101 (current stable)

[caesar]

@ygoe I guess this looks "backwards" to you because you're used to the Windows platform conventions, but there is no "right" or "wrong" here; it's very platform-dependent. I prefer the way it is now, but that's probably because it corresponds with the convention of my primary platform, macOS.

Here are some examples from macOS:


And one from Firefox (on macOS, it's probably different on other platforms):

[caesar]

For what it's worth, GitHub has the buttons in the same order as Gitea:

This article by someone who built a cross-platform app has some interesting notes on the subject:

Users expect the apps on their system to behave similarly to other apps they use daily. There are specific norms and idioms on each platform that an app developer can easily follow and replicate, and improve the user’s experience with the app.

A classical example of this is how on Windows, the “confirm” button is traditionally placed on the left side, while it’s the opposite on macOS:

[ygoe]

That doesn't make Gitea any easier to use for me. And I do think that Gitea is a good product, but its interface is its biggest problem, and in fact preventing me from using it.

All of the screenshots you showed use a separate colour for the primary button and no special colour for the other button(s). At least the second of my screenshots massively suffers from this. Its cancel button ("Abbrechen") really should not be blue but white.

AFAIK, the mobile platforms argue that the primary button needs to be right-most because most people use their right hand to operate the device and since screens got too big, they can't reach the left end of the screen with their right hand thumb while holding the device with the right hand. So the most-used buttons are at the right. Still out of reading order for most right-handed people, but at least accessible. I don't believe we have that issue on a mouse-operated screen. Is there any other reason behind this "backwards order" or was it just a dumb decision that can never be corrected anymore?

If the buttons are placed in a flex-box, maybe it'll help to reverse their order by CSS when on Windows (or by user pref for the confused users using multiple desktop OS)?

[wxiaoguang]

After #24289 ,almost all dialogs have this order: negative button, positive button.