Problem/Motivation

Navigation has two separate pages in 'User interface'. To enhance the Site Admin experience, merge both menu items into a single one and use local tasks to navigate between the generic settings form and the layout form.

Steps to reproduce

- Install Drupal dev version with standard profile.
- Go to 'Navigation settings' config page (admin/config/user-interface/navigation-settings). notice there's a lack of direction when using these pages.
https://www.drupal.org/files/issues/2024-05-02/navigation-managed_tabs-e...

Proposed resolution

  • Add Local Tasks and remove the individual menu item for layout page.
  • Adjusts both routes and title/h1
  • Set 'Manage Settings' as default tab.


Remaining tasks

User interface changes

Combine pages from 'user interface' group.

API changes

None.

Data model changes

None.

Release notes snippet

Issue fork drupal-3443556

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

SKAUGHT created an issue. See original summary.

skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

[old comment sample removed to cleanup]

skaught’s picture

StatusFileSize
new141.48 KB
skaught’s picture

Have reviewed this initial issues in the Weekly UX meeting. We also talked about using drop-button as the safe with the 2 options. The general feeling was toward showing these footer links.

- also on page: h1 title is too verbose.
- when editing layout, user does not see the Zone names/labels.
- related: actual menu item to get here is still 'navigation block'. not 'layout.
- IMO: we should always show the logo when editing the layout.. this is also an 'escape' button users would recognize.
- 'footer'. can not see a 'add block' button' during review.


We did talk about some of the wider points around the setting tray labels could be more verbose (when selecting blocks to place)
- what do we have 'create content block' in the header. we do not seem to have any scope for this.
- 'add block' type should expend title 'menu' 'menu blocks' -- if uses has small screen/screen-reader then a fuller label is present.

@ckrina
A more complete review for Screen readers is recommended for this new UX.

only a quick run through on slack:
https://drupal.slack.com/archives/C1AFW2ZPD/p1714153294153379?thread_ts=...

skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
ckrina’s picture

Project: Navigation » Drupal core
Version: 1.x-dev » 11.x-dev
Component: Code » navigation.module
rkoller’s picture

while i was testing the new navigation page functionality i had an idea for the "lock in" problem this issue is about. on second thought it is difficult to have a button like "save and go to page x" (the pattern we've ideated in todays meeting - you will never find one single page it would makes sense to go to from here). but since layout builder is used here why not orient towards the pattern used on the manage display page on a content type when layout builder is activated?

when the user gets to /admin/config/user-interface/navigation-block present the help text and a "manage layout" button (the button label is still debatable). at this point the sidebar is still functional. as soon as the "manage layout" button is pressed the page goes into the "layout mode" and the sidebar switches being just a none functional preview. and by pressing the save button in that "layout mode" the user returns to the previous page with the "manage layout" button. that way the user would remain in the context of the navigation block page and the context switch would be also comprehensible and the user wouldn`t be forwarded into a sort of "detached" page where one is being trap in at the moment.

SKAUGHT changed the visibility of the branch 3443556-layout-navigation-user to hidden.

skaught’s picture

Issue summary: View changes
StatusFileSize
new117.6 KB
skaught’s picture

#11
'managed layout' tab idea:
Currently, the config for 'logo' is in an independent form/path in the menu. Combining these form/routes 'one tab set' would start a base for us as this time for this path. then we can add 3rd links to front and admin index. user is directed around more in a more normal drupal flow.

skaught’s picture

Issue summary: View changes

update summary options 1 vs 2.

skaught’s picture

Issue summary: View changes
skaught’s picture

StatusFileSize
new206.46 KB

change notes (solution 2) in progress:
- title/h1 adjusted
- routes adjusted

wip. action links feel too heavy. (: I maybe overthinking this aspect now.

skaught’s picture

Status: Active » Needs review
Issue tags: +Needs usability review
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
Related issues: +#3443557: (layout navigation) hook help is used to provide layout form content
StatusFileSize
new237.74 KB
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Title: (layout navigation) user get trapped on layout form » Enhance Navigation admin workflow with Managed Tabs.
Issue summary: View changes
skaught’s picture

skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
rkoller’s picture

Unifying the two pages into a single page and using local tasks is a good idea, I like that as well, good idea. A few thoughts:

  1. I am usually for shorter menu item labels. So i wonder if it would make sense to strike settings and rename navigation settings to navigation. On one hand several menu items in the configuration submenu are using the addition of "settings" but on the other hand the first page / tab within the navigation settings also is called managed settings. plus the prefix "manage" is sort of redundant, for screenreader users, and there are also several issue to remove the verb manage from page/tab titles (for example #2521780: The 'Edit', 'Manage display' and 'Manage form display' tabs were hard to understand #2677102: Word Manage at beginning of multiple admin page names make them hard to distinguish.. So I wonder why not go with Navigationfor the menu items and Settings and Layoutfor the local items. that way all three would be nouns.
  2. I still don't like the concept of having two links, one pointing to the frontpage the other to the administration (personally none of the two would be a desired destination i would think of in the context of after adding the navigation block layout). For one having primary buttons for links doesn't feel semantically correct and still it is the same concept like for the database updater. Me as a user dislike ending up somewhere else at the end of a task other than the page i've started at. it still feels like i reached dead end. and the concept of a navigation sidebar and the preview blur on this page. with the suggestion in #11 it would be sort of like a toggle/switch button. the user is deliberately switching between the layout /preview mode and the actual navigation sidebar. one more click upfront but clearer and the user would remain in the context. but maybe there might be also a third option how to tackle this?
skaught’s picture

#32
1. Have added 'Remaining task' to this issue started this other a11y aspects. I am hoping to keep some scope to this scope of adding the managed tab itself.
2. yes. agree 2 links is too much. After some thought around this i realized adding only 1 normal link and placed beside the 2 submits buttons 'Return to site' would be that steady escape path. Also, also show logo on this form! Image attached in summary now.

@rkoller, I know I also was putting a few ideas on slack around action buttons too. these where also too much on page. Thanks.

skaught’s picture

#3442188: Improve links to "Navigation settings" pages please add cred for @matthieuscarset

skaught’s picture

Status: Needs review » Active
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
Issue tags: -Needs usability review
skaught’s picture

Status: Active » Needs review

Ready with tests for managed tabs flow!

skaught’s picture

Issue summary: View changes
skaught’s picture

Issue summary: View changes
StatusFileSize
new711.63 KB
new68.77 KB

updated summary images

skaught’s picture

Issue summary: View changes
StatusFileSize
new95.3 KB
plopesc’s picture

Status: Needs review » Reviewed & tested by the community

Code looks good and the administrative UX has been improved.
Also provides tests.

Thank you!

ckrina’s picture

Status: Reviewed & tested by the community » Needs work

I just came across this issue and this seems like a big UX change and I need to think a bit about it: the Navigation will handle many more things beyond what we have now (like Top Bar settings), so we need to plan for that before merging pages and hiding them in deeper levels. I'd like to hold big UX changes like this until we all have had time to discuss and agree on them. This needs some time and with DrupalCon planning going on I can't keep up with all issues.

So moving to Needs work not because the code isn't OK, but because we need to discuss the changes :)

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

mgifford’s picture

In discussion with @mherchel @rkoller & @kat-shaw we decided that this was not a barrier. So not a stable profile blocker, but we should get this fixed.

This is using Layout Builder which is going to be deprecated. Hopefully this gets resolved in the next version.

plopesc’s picture

Revisited this issue to try to improve the the admin workflow.

Could you please indicate the current requirements for this issue? Navigation has evolved since the creation of it and I think some of the points mentioned in the IS have been already addressed.

Made some research about the possible tabs and the creation of the local tasks should not be a big deal.
However, their URLs (/admin/config/user-interface/navigation/settings & /admin/config/user-interface/navigation-block) are not following the generic folder structure. I would suggest to use /admin/config/user-interface/navigation/settings & /admin/config/user-interface/navigation/layout instead. That would lead to broken links in existing sites, and might not be a good idea.

To avoid those broken links we could create a controller that redirects to the new URL as an alternative, and remove it in 13.0.0.

mherchel’s picture

I would suggest to use /admin/config/user-interface/navigation/settings & /admin/config/user-interface/navigation/layout instead. That would lead to broken links in existing sites, and might not be a good idea

This makes sense from my point of view. I think this is mainly a UX improvement.

ckrina’s picture

+1 to get all Navigation related stuff under Navigation and then use tabs.

mgifford’s picture

Sounds good to me.

plopesc changed the visibility of the branch 3443556-navigation-layout-ui-flowout to hidden.

plopesc’s picture

Issue summary: View changes
plopesc’s picture

Status: Needs work » Needs review

Created new MR according to last comments, created a Change Record and updated the IS to make it more accurate.

Ready for review.

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.