Popover Dropdown Navigation

[j00k]

The shared header service has started rolling out a new navigation style to customers. It looks like this:

This nav was the result of a research effort from UX to solve issues with the existing primary navigation structure.

I know there are multiple people working on navigation changes in another project

I have opened a pull request that implements these styles in a Canon way, and am looking for feedback.

So, is this something we want in Canon?

[bradgignac]

I really like this change, especially the action-oriented nature of the second column. I have two main questions that I think we should answer before moving forward:

1. Who is this navigation intended for? Should the secondary navigation be deprecated and all teams immediately move to this navigation style?
2. Are there design changes we can make to make this more visually consistent with the existing primary navigation dropdowns? This could be changes to this navigation and/or the existing dropdowns.

[j00k]

1. I don't think this design necessarily deprecates the subnav. The cloud control panel and cloud backups control panels will be removing their subnavs as those items are moving into the popover in the ccp.

   I think there's some trade offs in using the popover without a subnav. For instance, it may be more difficult to tell at a glance what page you are on without some other cueing.

   I think if you are using the popover, you likely shouldn't use the subnav bar, but I could see someone choosing to use the primary nav (without popover) and preferring the subnav bar. @alainacoppa and @mazzifer may be able to share their thoughts.

2. There are absolutely some design changes that can make this more consistent with the current primary drop down styles. @eddywashere mocked up a cross between the popover design and the current primary dropdown design. It replaces the popover pointer with a red line.

[eddywashere]

I'd like to propose some amendments to the design. I don't think we should use the popover style to apply the mega dropdown. The research was done to test the concept not necessarily the visual implementation.

Option A)

or at the very least something like wrapping the active nav menu within the mega dropdown

Option B)

I think option A has aesthetic appeal, gives credit to our users ability to use the nav and understand what is active.

Option B is very explicit. The popover is also very explicit, but I don't think the consequences are terrible for Option A.

[bradgignac]

Additionally, we should consider modifying the existing primary nav dropdown styles to better match the the styles used by the mega dropdown.

[eddywashere]

fyi I adjusted the spacing and shadows on option a).

[j00k]

I am down for either of those changes. We can also adjust the existing dropdown nav items to match the styles.

[mazzifer]

@eddywashere I like the red line version. Looks very nice!

@j00k: UX needs to write up some explanation on usage. A quick response to the subnav question - subnav isn't needed in Reach because 1) it has a very flat nav structure like this one and 2) we don't see people toggling back and forth between pages on the same level.

[alainacoppa]

One thing to consider if we go with option A -- in the new version we are using red for active and black for hover. Would we want to reverse them or use red for both?

[brianhartsock]

One thought, before we choose option A or B, should we see if we have any feedback from the roll out to deal with?

[j00k]

@brianhartsock It does not matter to me whether we wait for the rollout to be validated.

@mazzifer Alrighty, will UX be leaving that explanation on this issue or in some other place?

[mazzifer]

@j00k: I would think it would go on the canon website

[araiford]

The red line looks nice. One consideration though:

Lets say you start using an app, and you can choose from two text options that describe which clarity of experience you will have as you use the app.

Option A) The consequences are not terrible Option B) Very explicit

Which option would you pick?

[mazzifer]

@araiford: do you think that "the consequences are not terrible" really describes option A? I think the relationship between nav and dropdown is clear in both.

[araiford]

Both options are clear, but one is explicitly clear. I'd opt for explicitly clear over just clear. Anything we can do to require a few less cognitive clicks is good.

[araiford]

not a deal breaker though, if we do go with the red line version. I just don't like that we are actually drawing a line separating the thing you click on from the nav it represents. Never have liked that...

[bradgignac]

@araiford We used to to have underlines on the primary navigation items on hover. When the dropdown opened, the line on top of the dropdown became an extension of the navigation underline. Would changing that behavior alleviate your concern?

[mazzifer]

ah, that makes sense. So I'm not set on any particular visual direction, but we did just add Hal to the team. I'm going to propose that we continue rollout with the popover style, but I will bring Hal into the conversation. I'd like him to have a chance to get familiar with reach and canon, and then weigh in with his thoughts.

[bradgignac]

@mazzifer FYI, this doesn't in any way stop the rollout going on in Reach.

[bradgignac]

@brianhartsock Feedback from the rollout is a good idea.

[araiford]

@brianhartsock and @bradgignac - Definitely gotta get feedback from the rollout to inform our visual design decision.

Also agree with @mazzifer - it's pretty important we get Hal involved in the visuals for Canon.

[araiford]

@bradgignac the old nav style that showed the red underline on hover bothered me when the dropdown showed. The red line causes a natural visual division. If you use the old style primary nav dropdowns with red line, and then you log into MyRackspace and use those dropdowns, I think you'd feel the difference the subtlety of the red line actually causes.

[mazzifer]

@j00k @eddywashere - Hal Saville recently joined Ty's team and is leading visual design for all of Product. I just talked to him about this issue and we would both like to hold off on any visual changes to the nav. We feel that the current design is sufficient in that it's simple and clear. It's not the sexiest visual experience, but the goal here is for people to be able to find things quickly. The popover/arrow drop down is not a permanent design, as we're working towards some great improvements in 2015. Feel free to reach out to him if you have any questions. Also, your suggestions are much appreciated, so keep them coming!

[j00k]

@mazzifer I think these changes are pretty small effort improvements. Should we put off small changes for some part of a year?

[bradgignac]

@mazzifer The issue isn't whether the existing design is sufficient. In a bubble, it may very well be clear and simple. The issue is that it creates visual inconsistencies with the existing Canon codebase and with other teams who are using Canon. If this is a temporary change anyway, is there really any harm in switching to the new pattern?