Problem/Motivation

When merging Gin into core, the sticky actions were tucked into a feature flag. I think we should figure out how to handle this properly, because Drupal CMS will want to opt in to the sticky actions to keep the experience consistent.

I believe there are some issues and concerns with the sticky actions as they were implemented in Gin, but I am not sure what they are.

Steps to reproduce

  • Install Drupal 12
  • Add $settings['core_admin_theme_use_sticky_action_buttons'] = 'always'; to settings.php to see the sticky actions behaviour

Proposed resolution

Not sure yet. I definitely want to maintain this feature, so I think we first need to understand what the concerns are so we can decide how to address them.

Remaining tasks

  1. Identify the issues/concerns with sticky actions
  2. Try to address them
  3. Decide how to handle this feature longer term

User interface changes

TBC

Introduced terminology

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Screenshots

These first three screenshots show places where the action is always at the top right:

Then these are comparisons of the same pages with and without:



Comments

pameeela created an issue. See original summary.

pameeela’s picture

Issue summary: View changes
jurgenhaas’s picture

Unfortunately, the sticky action buttons have been deferred from being included in default_admin for now. The reason behind it is that (a) there is no UX approval yet, and (b) it's not working reliably as it had been implemented in Gin.

So, for now, that functionality is not even available, so we can't turn it on with config or setting either.

pameeela’s picture

@jurgenhaas oh, when was it removed? I was able to test it using the latest 11.4 release.

jurgenhaas’s picture

@pameeela it never made it into Core. Some buttons do appear in the top bar, which are primary tasks, but not action buttons.

pameeela’s picture

Ahh, I see what you mean. Well, that's better than nothing :)

So what would you see as a good way to move this forward? I am now a bit concerned about this as if it is not implemented that means a pretty major UX change for existing sites when they upgrade to 12. I would love to find a way forward that works for everyone!

jurgenhaas’s picture

Wait, I was wrong. Your hint about the feature flag was absolutely right, and that's in default_admin for all Drupal core versions.

# Default
$settings['core_admin_theme_use_sticky_action_buttons'] = 'never';

You can change never to either always or content_forms to use them just in content edit forms or always. And that's still in main and Drupal 11.x. So, that was the compromise back then to hide this until the UX approval was made available and to keep the code for it around, as it seems to be so close to being perfect.

Major concerns have been, AFAIK:

  • For very wide screens, the way to move the mouse to the far right is bad UX
  • Some people just don't like the idea at all
  • For forms with just one or two input fields, it can be confusing that the action button is not right underneath them

During the Gin-merge we agreed to let this merge finalize and then go through a proper UX-research to decide on how to move it forward.

pameeela’s picture

OK good, I thought I was losing it for a second because I was sure I tested it!

  • For very wide screens, the way to move the mouse to the far right is bad UX
  • Some people just don't like the idea at all

These two points are interesting because even without this enabled the following are still in the top bar:

  • The 'Edit' button when viewing nodes (and Canvas pages)
  • Local tasks
  • The main actions (Preview / Review changes) in the Canvas editor
  • The main actions (Preview / Publish) in the Display Builder UI

Even in Layout Builder the buttons are at the top of the form (under the title which I would say is worse, but still they are not at the bottom).

So I wonder if we can revisit this conversation in light of the current state, which is that many screens already use the top right as the primary call to action, and drill down into the specific concerns?

For forms with just one or two input fields, it can be confusing that the action button is not right underneath them

This is specific but I also find it a little strange. If all forms have their actions in the top right, I don't think this would be confusing?

jurgenhaas’s picture

StatusFileSize
new37.41 KB

I totally agree. I've always been an advocate for the sticky buttons only. My thought is that consistency is the best UX, but then, I'm not an expert.

The confusing bit may be for config forms, not content, e.g. this one:

But even then, I'd go for consistency.

Happy to move this forward again. Earlier this year, it's been @ckrina who was involved, but I'm not sure how much she's still around for this sort of things. Otherwise we would ask Emma to help us out?

emma horrell’s picture

Adding my thoughts here and echoing comments already made - good UX would advocate for consistent placement of the actions where Gin users have come to expect them to be (in the top right). I've watched people use Gin and have observed this expectation.
If there are concerns about clutter in the top right then 'More actions' can take care of that
I don't know the full details but wonder if the wide screen reach issue could be improved by the alignment of actions to to the content container (from the screenshot it looks like they're aligned to the viewport).

yannickoo’s picture

@jurgenhaas wouldn't it be nice to have a way to have both? I am expecting the form actions at the bottom but I am fine with the additional ones at the upper right corner. Is it time to restore the option in the theme settings?

pameeela’s picture

Issue summary: View changes
pameeela’s picture

Added some screenshots to the IS showing the current state with some comparisons.

I have no objection to making this configurable, but I do think it should be sticky by default since that's consistent and would make the most sense to a new user. I think existing users could reasonably prefer the old way so having that supported seems fine.

kentr’s picture

These two points are interesting because even without this enabled the following are still in the top bar:

The 'Edit' button when viewing nodes (and Canvas pages)
Local tasks
The main actions (Preview / Review changes) in the Canvas editor
The main actions (Preview / Publish) in the Display Builder UI

Having things way off to the side is an accessiblity problem for people who use zoom.

Here's a reference that @rkoller has used: https://scottvinkle.com/blogs/work/proximity-and-zoom

I can't speak to Canvas or the Display Builder, but moving the local tasks (which I believe includes the Edit button link) out of the top bar has come up: #3540337-10: Improve visibility of More actions menu button (recording).

In the frontend the More Actions button is required in any way due to the fact that local tasks got moved into the More Actions button to avoid any interferences between the front and backend theme in theming, but in the backend moving those local tasks into the More Actions button is unnecessary and leads to an additional click to reach the list of available options / local task. Moving the local tasks into the More Actions button is also inconsistent with the rest of the admin pages and it removes the ability to see with the glimpse of an eye if for example a content type has revisions enabled, if a node supports translations and so on. Local tasks provide the user the situational awareness and context, and they make those links directly accessible in close proximity to the node edit form where the focus of attention lies - and the local tasks are faster to reach by keyboard, mouse, or pointer device, consistent with the rest of the admin ui, and don't take up that much vertical space anyway.

So our recommendation for a followup would be to move those local tasks out of the More Actions button into local tasks on pages in the admin ui.

it should be sticky by default since that's consistent and would make the most sense to a new user.

I don't think it's consistent with a lot of non-Gin themes that a user could be coming from (for example upgrading core and switching from Claro).

I found the placement & format of the local tasks very confusing when I started using Default Admin. I struggled to 1) get to the Edit page, and then 2) go back to the View page from there.

There are reports of difficulty / confusion from others (one reported complaints from clients):

kentr’s picture

Issue tags: +Accessibility
pameeela’s picture

@kentr I don't want to get sidetracked into the local tasks issue, but I would say that in my experience, having the form actions in the same place makes a lot more sense and I find this much easier to use now. I understand it is a big shift but it's already done and will apply to Claro too once Navigation is enabled.

If people want the old local tasks they can continue to use Claro with Toolbar in contrib, so I don't think we should make this decision based on what people are used to, as they are not forced to change.

The current state is that default_admin already uses top right for actions in many cases, just not form actions yet. As far as I know there is no push to change this. So the suggestion is to make sticky form actions the default for consistency, but allow it to be configured. That is the only part of the behaviour that is relevant to this issue, unless there is push to overhaul this entirely, but we don't have much time for that now.

catch’s picture