WordPress.org

Making WordPress.org

#4901 closed enhancement (fixed)

Handbooks: Improve menus design

Reported by: felipeloureirosantos Owned by: coffee2code
Milestone: Priority: normal
Component: Handbooks Keywords: has-screenshots has-patch
Cc:

Description

The menus are not really clear, and that is something that really could be improved.

I put some CSS just to make it easier, and it has got really better, but it would be nice if we could have a professional design proposal on it.

.menu-table-of-contents-container ul ul{
      border-left: 6px solid #0073aa;
      margin-left: 6px;
}

.menu-table-of-contents-container ul ul ul{
      border-left: 6px solid #0073aa;
      margin-left: 2px;
}

Attachments (4)

before.png (611.7 KB) - added by felipeloureirosantos 15 months ago.
Before
after.png (702.5 KB) - added by felipeloureirosantos 15 months ago.
After
Screen Shot 2020-01-15 at 10.47.37 AM.png (214.0 KB) - added by dufresnesteven 14 months ago.
Yeah, I agree. It's pretty hard to understand the hierarchy. For me the borders seem unnecessary. Here's another option:
Screen Shot 2020-01-17 at 10.31.20 AM.png (409.6 KB) - added by dufresnesteven 14 months ago.
Here is how Microsoft does it for their Fabric UI documentation.

Download all attachments as: .zip

Change History (17)

@felipeloureirosantos
15 months ago

Before

@felipeloureirosantos
15 months ago

After

#1 @felipeloureirosantos
14 months ago

  • Priority changed from low to normal

@dufresnesteven
14 months ago

Yeah, I agree. It's pretty hard to understand the hierarchy. For me the borders seem unnecessary. Here's another option:

#2 @dufresnesteven
14 months ago

I also think having the 'arrows' on the right is troubling because usually they help to define hierarchy but on the right they don't support that function and just identify whether the section is open and closed.

#3 @felipeloureirosantos
14 months ago

Thank for the contribution! :)

I agree that the border is not great. We would still need to create a better hierarchy.

About putting the arrows on the left side, I don't think that it would fix the problem because some of the navigation items don't have descendent items (like 'Filesystem' from your image), so these items wouldn't have the arrow and the hierarchy problem would be the same.

#4 @felipeloureirosantos
14 months ago

Something that could be great is structuring elements to be numbered sequentially like in the WBS coding scheme.

@dufresnesteven
14 months ago

Here is how Microsoft does it for their Fabric UI documentation.

#5 @coffee2code
14 months ago

In 9412:

Developer: Improve handbook sidebar menu design.

  • Eliminate per-item top/bottom borders.
  • Use WCAG-compliant color (as used for links) for left border
  • Increase thickness of left border for menu sub-items.

Props felipeloureirosantos, dufresnesteven, coffee2code.
See #4901.

#6 @coffee2code
14 months ago

In 9413:

Developer: Fix alignment of same-depth menu items in handbook sidebar.

See #4901.

#7 follow-up: @coffee2code
14 months ago

I've introduced a bit of a compromise to the two proposals above. I removed all but the left borders, so that reduces some of the visual clutter in the menu while providing a visual indicator of hierarchy in addition to indentation.

Bear in mind the changes have currently only been applied to the handbooks on https://developer.wordpress.org and not to the team P2 handbooks.

Thoughts on these changes?

Replying to felipeloureirosantos:

Something that could be great is structuring elements to be numbered sequentially...

I would be against numbering menu items for two reasons:

  1. The handbooks are constantly in flux. Numbering each menu item would produce a means of referring to a given item, e.g. "click on 4.2.2", which could quite easily change.
  2. The current screen width devoted to the menu can be tight in some cases, especially long names nested in the hierarchy, which would be the ones most affected by having numbering prepended to them.

Replying to dufresnesteven:

I also think having the 'arrows' on the right is troubling because usually they help to define hierarchy but on the right they don't support that function and just identify whether the section is open and closed.

To be fair, the intent of the arrows was never to indicate hierarchy at all, simply to indicate the item has subchildren and to toggle the display of the sub-children (with the arrow indicating if they are currently expanded or not). For the same reason given above (#2), I'm not in favor of moving the arrows to the left—they'd require more horizontal space for display and menu name alignment, and we don't have the space to spare in the current design.

#8 in reply to: ↑ 7 @felipeloureirosantos
14 months ago

That's great, thank you! I believe that it fixes the hierarchy problem, and I personally think that it was the biggest matter here.

I can understand the problem numbering menu items now, I have not considered these factors before.

#9 @felipeloureirosantos
14 months ago

  • Keywords has-patch added; needs-patch needs-design removed

@coffee2code do you think that we could also have it on p2 (including local sites) handbooks?

#10 @coffee2code
14 months ago

  • Owner set to coffee2code
  • Status changed from new to accepted

@felipeloureirosantos: Indeed. I'm in the midst of making a few more menu-related tweaks and then I'll sync the changes to the P2 handbooks.

#11 @felipeloureirosantos
14 months ago

Thank you for that awesome work!!! :)

#12 @coffee2code
13 months ago

In 9428:

Developer theme: More handbook sidebar menu design improvements.

  • Decrease padding-right for menu items which do not have children
  • Embolden the name of the current page in the menu

Props rilwis, coffee2code.
See #4901, #4467.

#13 @coffee2code
13 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 9430:

Breathe theme: Improve handbook sidebar menu design.

  • Eliminate per-item top/bottom borders
  • Use WCAG-compliant color (as used for links) for left border
  • Increase thickness of left border for menu sub-items
  • Reduce padding-left to align widget title with leftmost text within widget
  • Decrease padding-right for menu items which do not have subchildren
  • Embolden the name of the current page in the menu

Props rilwis, felipeloureirosantos, dufresnesteven, coffee2code.
Fixes #4901, #4467.

Note: See TracTickets for help on using tickets.