Inspector groups apparently hidden for some elements such as navigation

In some elements, like the navigation element, inspector groups like ‘effects’ or ‘customize’ are now apparently hidden, and only could be viewed with shift+mouse scroll right. That’s a very poor way to navigate.

Bildschirmfoto 2022-10-18 um 08.19.27

Bildschirmfoto 2022-10-18 um 08.19.37

This is a very cumbersome navigation in daily use. In the previous version we had this in the breadcrumb bar with all groups accessing directly:

Bildschirmfoto 2022-10-18 um 08.25.36

2 Likes

At least you figured out how to scroll. I’ve been dragging the inspector wider as I couldn’t get it to scroll.

2 Likes

not to be another nay sayer, but I’m not a fan of the horizontal scroll either. I would even prefer a hover dropdown to the horizontal scroll

2 Likes

Ah, so that’s how it’s done. :slight_smile:

If it stays as is, many users will completely miss the fact that those controls are there. Those who know how to reach them might be annoyed with the way it is implemented. A change would definitely be recommended.

4 Likes

How about an actual, real, ugly scrollbar? It is a really good UX element, that somehow falls out of fashion more and more.

I also couldn’t figure out how to scroll through the items there…

Definitely needs some work. At the very least there should be a visual indication that it’s a scroll-able area, perhaps some arrows that appear on hover?

1 Like

That’s going to look absolutely horrible in that small space :sweat_smile:

1 Like

horrible will still be better than nothing…

@Regnalf, @urchindesign, @scotbaston, @Misho, @striata, and @JvP,

We hear you all on this. The primary purpose of shuffling the control navigation into this tab format was multi-fold:

  1. To bring more readily apparent visibility to the “sub-navigation” of Element control groups, which was previously found in a bar, often far away from the Workspace itself depending on how the screen was arranged by the user.
  2. To make navigation within a Workspace more efficient (instead of having to jump back and forth between the control nav bar and the Workspace constantly while working on an Element).
  3. To use for greater consistency across Workspaces (we now use this pattern on the Outline pane, Templates pane, Globals pane, et cetera).

Overall, we feel these are big improvements in both functionality and consistency. The problem outlined here is something that is more of an outlier seen in a very small percentage of cases considering everywhere these tabs are now used in the interface. Most Elements have their “Primary” group of controls, “Effects,” and “Customize” as a typical pairing.

That being said, we understand that in the few situations where there are more than these three groups, navigating to these nested tabs can be cumbersome for users who do not have some type of trackpad, and we also realize that it is not necessarily readily apparent to a new user that there is content there to get to.

Because of everything mentioned above, I have implemented the following navigational arrows, which should be available in the next release, which will function in a similar fashion to other navigational arrows we have implemented in this manner.

Firstly, only if there is additional content spilling beyond the bounds of the Workspace, you will see an arrow indicating that there is more content to explore beyond that scroll edge:

If you click the arrow, the tabs will scroll the length of their scroll container, allowing you to see the next set of available content. If you click this arrow or simply begin scrolling to the right if you have a trackpad-enabled device, anytime you are in “the middle” of the content, you will see an arrow at either side of the tabs, indicating there is more content in either direction:

Finally, arriving at the very end of the tabs will hide the right arrow, indicating that you can only move backwards at this time to the beginning of the tabs:

I believe this strikes a good balance as it will only show when necessary, and helps provide valuable feedback and navigation for users who need it.

5 Likes

As a slight tweak, I may use our chevron icons instead to keep it as minimally busy as possible when this pattern arises:

3 Likes

Either option looks great… Although I think I prefer the arrow.

I like this solution better, Thank you!

in a slightly tangent comment… I have been ‘forced’ to edit an old client’s site (pro v3.2.3) that I can’t upgrade currently due to I think the version of php being too low… but to my point, Oh my! I never want to go back to the v3 interface of Pro. in fact, for all the UI changes forced on us through the various Pro updates, it is definitely getting better and better.

for anyone that disagrees, try using an older version of Pro

@urchindesign, great! I will tinker with both and see which one feels better ultimately. Now that we have all of the “micro-actions” up top and the tabs, I’m trying my best to keep it feeling as clean as possible while still cramming all of the functionality into such a small space.

@scotbaston, :rofl: that’s hilarious! I had a similar experience a while back where I had to check something in an older version…I do hope I’ve grown as a designer since then! Haha. Thank you for your kind words, sir.

1 Like

Just for the trip down memory lane…

I was really into borders at that time. :slight_smile:

1 Like

the latest designs definitely feel cleaner

1 Like

That’s looking great.

Thanks, @JvP!

Still looking good though, even today. Pro’s interface has always been one of the nicest of the WordPress page builders.

1 Like

Very much appreciate the kind words, sir. :slight_smile:

2 Likes