[4.0] Close or Cancel button - last in line

[PhocaCz]

Describe the solution you'd like

Hi,
Content - Article - New - Save.

Maybe it's a habit from version 3, but my brain and hands automatically look for the close button last in line. This is different in version 4.

The question is, is there a reason why it is different to version 3? Why the Close or Cancel button is not positioned last in line of buttons?

[coolcat-creations]

Agree that close should be right, not sure if it's possible because the other two buttons are modal buttons...

[brianteeman]

Closed see #28849

[brianteeman]

Re-opening.

It can be moved without any problem but it was not an error (as I assumed) but a deliberate act to move the button see #28033.

[jwaisner]

Question is, do we want to revert #28033 ?

[coolcat-creations]

I can imagine it had the reason for better usability in Mobile view?

[PhocaCz]

Hmmm, this should be a research question. I can imagine that we are subconsciously looking for these buttons at the end of the line, thanks to experienced behavior.

[coolcat-creations]

I think it's easier to say and explain / and for the user to scan "click the close button on the right" instead of the "at the third position. If we can do a research it would be great of course.

[mbabker]

I would say consistently being placed next to save is better UX for me versus consistently end of line. A lot of edit views have different combinations of buttons meaning a “standard” action jumps around based on what screen you’re on, and for mobile potentially becomes harder to access. Consistent positioning in the toolbar helps muscle memory, if you know close is always right next to save then you aren’t having to scan the screen to find the end of the toolbar list at it’s possible different locations but you can focus toward one area.

I mess up this last button thing all the time on a couple of sites that have the Cache Cleaner plugin installed and put its action in the toolbar. If the toolbar was a part of the system that was more flexible and open for third party integrations (remember components are supposed to be somewhat extensible, why shouldn’t someone be able to add a toolbar button for a custom AJAX action to do a unique title check as an example), I imagine it’d be more obvious why relying on “this button is the last one on the toolbar” as the clue to find position isn’t the greatest thing.

[PhocaCz]

Yes, it is very difficult and everyone will see it differently. The problem is, we've taught people in those few years that this button is just last in row, just as we taught them that the help button is on the right.

[mbabker]

Now turn on the multi-language associations and versions for different components at different configurations, or like I said install something like Cache Cleaner that adds items to the toolbar. You get the close button jumping all over the toolbar or not consistently the last item like you're expecting.

The standard 4 actions are better off being consistently placed with optional and add-on integrations coming after that. You know save is always on the left edge of the screen. If you don't have anything else turned on or installed, close will generally be at the end of the left side of the toolbar. If you've got versions and multi-language associations turned on for com_content, only versions on com_contact, then none of those on com_plugins, then close is in all sorts of different places in different parts of the admin UI. And because the Toolbar class only supports prepend and append (no custom ordering without Reflection or subclassing to get access to the protected $_bar property), if a plugin adds items to the end of the toolbar then it will destroy your assumption that "X item is always the last item on the toolbar" and make you think even more when looking for that button.

Don't make people think, if a button can be consistently placed on the screen that's better than a relative "well the button will be here but depending on what's on the toolbar it may be 25% from the left of the screen or 65% from the left of the screen on a wide enough viewport but on a smaller viewport where the buttons stack it may be the 4th item or the 8th item, you're going to have to scan and find the distinguishing icon or text or color to find it".

[PhocaCz]

Maybe I should better define my question. I'm talking about the default settings, the default state - Joomla! core. In J!3, it was customary that by default there was a Cancel or Close button at the end. In J!4 it's different. For now, I don't care about external extensions, I just speak about default options in core.

If it was changed due the mobile view, OK, but it is good to prepare explanation for users who will ask after J! 4 will be stable.

[coolcat-creations]

I think @mbabker named a valid reason why it's better to be next to the save button.
For me personally it's easier to find the close button when it's all the way right, I agree to you @PhocaCz but if we can't guarantee this because other extensions append, it should be on third position.

Only solution I can think of is to place the close button all the way on the right (where help and Option are right now) and put help and options as a link or small button above (like in one of the first drafts).

[ggppdk]

The decision to move the position of the close button near the save and close was a good choice for the reasons explained above .

If we would want a further improvement i would say to add a spacing to right (for LTR, left for RTL) of close button for non-small screens
This will make even easier to both finding the close button but also easier to locate the extra buttons at right (LTR) of the close button