New PF4 Navigation

Hi all, I opened a pr to use the new pf4 navigation, and would like to hear feedback on the usage experience and the design!
You can see it here: https://github.com/theforeman/foreman/pull/8868

The flyout will open on focus, hover and click. Will close on a click outside of the flyout.

Here are some screenshots but those will change soon following suggestions on the pr comments.

2 Likes

In my experience with these kind of menus it’s always most important how it behaves around the edges. How easy is it to accidentally close the menu by hovering just outside of it.

Thinking back, I think we used to have non-full height flyouts. They made it easy to go just a bit too high with your mouse (say top right) and accidentally close it. The current menu is full height which deals with it.

You can’t really see these things on screenshots. I think it’s @amirfefer who often records a short video of the interaction as well (which I greatly appreciate). Can we have the same thing here?

I will add a video later today, but a user can’t close it by hovering out of bounds, only by clicking outside

So you can open it by hovering but only close it by clicking? That sounds inconsistent. I wonder if it’s possible to have a static HTML page somewhere (outside of a Foreman installation, without authentication) so we can easily interact with it since a video probably doesn’t cover the nuances in feel.

A quick demo, selected page: “All Hosts” :

Current issue with demo and pr that if the menu item is too low the user can’t see/select it

I just quickly clicked through the menu, and I have some notes / suggestions / questions:

  • I really like that clicking on 1. level items doesn’t reload page anymore!
  • Headline in 2. level looks almost same as text of links, bigger difference in contrast / size would be nice
  • To headlines above, do we actually need them? I mean if I click on “Hosts”, I don’t need additional headline “Hosts” in 2. level, right?
  • If I’m at “Infrastructure > Smart proxies” page, only “Infrastructure” item in 1. menu is highlighted, could we highlight “Smart Proxies” too?
  • Clicking on 1. level link is only closing the 2. level, but not reopening. If I want to reopen the 2. level, I have to move the mouse. People on tablets will cry
  • Infrastructure is not aligned with the icon
  • Clicking on 2. level menu is closing the menu, is this intentional? For example if I miss the “all hosts” link and I click on "Host"s headline instead, 2. level menu will close. That makes me angry.
  • Can we use pointer cursor for the 1.level menu?
2 Likes

Why are there >> << braces around everything? Is that intentional?

Also, my apologies, clearly I am not well versed in the material and need more context to understand what it is I am even looking at: What is PF4 Navigation, and what is the difference compared to what we have now?

I have “mark_translated” set to true, so it wraps every string in >> << :slight_smile:

Currently we use an old version of Patternfly (3) for navigatoin, and we want to move to the new version (Patternfly 4).
This is a code change and a look change.
As we are editing the code the navigation behaves and looks a bit different, so I’m asking for feedback on what changes to keep and what changes should be different.

1 Like

@MariaAga thanks for the changes u made here.
But I still have a couple of suggestions

  • If the first level item is just hovered (not selected), you currently visually display it the same way as a selected item. You need to remove the blue stripe on the left.

  • Hovered state should have a bit darker background than a selected one.

  • Text color shouldn’t change (it does right now). I would opt for regular white as I’m having trouble reading the grey text on the blue background

  • Change the color of the lines between items. Use rather greyish color as shown on the examples in PF4

  • As lstejskal mentioned, I would also recommend removing group names in the second level if there is just one group e.g. Administer.

I feel like the gray looks weird?


Also in screenshot: Made hover darker, removed titles, text color is always white

My first impression from that screenshot is that Hosts is selected/expanded (because that’s lighter) but from the items it looks like Monitor.

Just to clarify: Hosts is selected, but the Monitor is expended as a user just opened it. The page is “All hosts”

@MariaAga dark grey looks weird. I meant more like #F0F0F0 which is lighter and closer to white than to grey.

Reports (section name) look somehow bigger and bolded than other items. Group names should be smaller, look here.

The flyout is a menu so it takes this style: PatternFly 4 • Menu
Should I change it?
New white-grey divider: (accidentally missing one div in the monitor)

Thanks, it looks better. I agree that it’s a bit confusing from which first-level item stems the second-level menu but I was told that the interaction is clearer in a clickable prototype and not in a static screenshot. (@ekohl )
I contacted the designer that works on the nav design, she also suggested the usage of blue lines (the same color as a hovered state). So I’m playing now in the sandbox to see if that’s the solution.

Here the group name is 14 px, item name 16 px, and a bit different color so the group name doesn’t look more prominent than items.

I said it might. I haven’t tested it myself just yet.

Processing: Hardware Models.mp4…
Thanks @MariaAga for enabling the discussion, overall I really liked it, though there are few things that we need to adjust in my opinion, here are my 2 cents:

I like the older menu’s width which was smaller 200px vs 250px, and I kinda liked the arrow that used to be there though I can live without it :slight_smile:

new:
new-nav

old:
old-nav


another thing which might need a bit fixing is the margin / padding of the secondary-nav headers,
new one: 16+8+8 = 32px
old one: 18px

look at the secondary menu padding above “Monitor”:
new:
Screenshot (41)

old:
gnome-shell-screenshot-FPYPB1


Hovering items background, personally I prefer the dark one so it doesn’t mix with the page content.

Before, we used a dark background when hovering items:
gnome-shell-screenshot-Q9USB1

In the new version we use a white light background
gnome-shell-screenshot-OZ9XB1


The last thing, on my laptop screen the “Content” menu which is quite long, makes a scrollbar appear and it looks like you can never reach its ends, in the older version there’s no need for a scrollbar and the page didn’t “jump”.Maybe when fixing the padding there will be more space, or maybe we need to split this menu into more categories.

new:

old:

Hi, some of the parts you are referring to are out of date, can you look at the new screenshots in this thread? Also the arrow should appear after “npm i”.
And the scroll is broken currently.

Just adding my comment from Gchat, so we won’t lose it.
So I met with other designers and described our issues in the nav. They pushed rather for tertiary nav than overriding PF4 patterns.
So e.g. the host nav would look like this:

Primary > Secondary > Tertiary

Hosts > All hosts
Discovered hosts
Create Host
Content Hosts
Host Collection
Register Host
Provisioning Setup >
Templates >
Compliance >

There are content issues in the nav which we could address in the next release and make it better. (based on next year research in initiatives) Also there were voices for implementing menu search.

That formatting looks off. So it would be:

Hosts
  Hosts
    All Hosts
    Create Host
    Register Host
  Provisioning Setup
    Architectures
    Hardware Models
    Installation Media
    Operating Systems
  Templates
    Partition Tables
    Provisioning Templates

Would I need to expand the second level as well? That feels like a step back in usability. Is there any reasoning provided why a tertiary level would be better?