Under the Hood Fine-Tuning: Global Navigation
We recently made a few improvements to the global navigation on Symantec.com’s Enterprise Site.
Previously, interacting with the navigation bar did not provide users with an ample sense of distinction between the selected menu item and an item being momentarily hovered over. We wanted to make this difference clearer by adding a new background color for the hover state.
Secondly, on the homepage the global navigation flyout menu was displaying directly on top of the hero banner. The way it sat perfectly on top of the hero banner made it look like a hero itself. To solve this problem, we removed some borders on the flyout which previously was similar in color to the hero border. This made the nav flyout menu appear less of a perfect fit in the hero area and more of a separate item.
Thirdly, the submenu items in the global nav flyout were previously simply listed. The challenge we were finding with this is that users were experiencing difficulty differentiating one menu item from the other and understanding which menu items were grouped together. As a result, we added bullets to the sub-menu items and tightened-up the spacing between the all-caps section header and links beneath it.