The next navigation system to talk about is
the secondary navigation This represents the subsections of our site.
Now, some sites are so simple and small that they get
away without any subsections and secondary navigation.
But most sites do have them.
Again, you can look at your sitemap and see pretty
clearly which pages belong to the secondary navigation.
In this example, the shop and about sections have sub-pages that
will need a secondary navigation and how could this look in our wire frame?
Well, we could have a drop-down menu when the user hovers over a primary menu item.
This would allow the user to get to the secondary pages
without having to visit the primary landing page first.
On the secondary pages,
we could also have a secondary menu.
In this case I added it to the left side of the screen going down vertically.
This would allow the user to quickly navigate between
different secondary pages and it also provides
a quick overview of what other pages exist in this section.
The Marciano Art Foundation does not employ drop-down menus.
The user clicks on one of the primary menu links and any secondary pages are listed here.
At the bottom of each secondary page is
a list of other secondary pages that are part of this section.
The MAK center side makes use of simple drop-down menus,
and advantage here is that the user can get to any
of the secondary pages very quickly and they
also get an overview of
all the secondary content by just hovering over the primary links.
There are two sections: visit and bookstore that
don't have sub-pages so these don't have a drop-down menu.
The secondary navigation on the secondary pages is handled horizontally across the top.
The Pasadena Conservatory side employs
something that we at the time christened fat menus.
When you click on a primary menu,
you get a very large drop down that not only includes links but also images,
buttons and small text blurbs.
Relate how we could employ typographic hierarchy and create visual excitements.
Of course these fat menus are not tenable on mobile devices,
there's just not enough room for them on a small screen.
Here we have a more straightforward text only menu.
Let's quickly also look how the other two sides steered the mobile size.
On the Marciano side,
the navigation collapses and we get a menu link that opens up the navigation.
On the MAK Center website the navigation is also hidden
first and can be opened with the hamburger menu icon.
You can also open and close the secondary navigation items by tapping on the main links,
the ones that have secondary items indicate this via a small triangle on the right.
So, besides the primary and secondary navigation,
we also have something called utility navigation.
There's no strict rule of what to place inside
a utility menu or whether you even need one,
but often important parts of the site that are not directly
part of the site's main content will be grouped here.
So, that could be the help section or the shopping carts or
the login or account links or the social media links.
In our fictitious example here,
we could argue that the card and account links while
important options are somewhat different from the site's main contents.
They are utilitarian in nature.
So, these would be good candidates for the utility navigation.
This navigation is often placed in
the top right corner beside and above the primary navigation.
The other two links we'll include here are links to our social media,
Instagram and Facebook in this case.
They will be available on every single screen,
but they're pretty discrete and do not get in the way of the contents.
Let's check in how the three example side steel by the utility navigation.
Well on the Marciano side,
the links bookstore mailing list and contact are treated differently, they are smaller.
They almost look like an utility menu and
the reason we treated them differently here was that they
were somewhat less important and we wanted the other six main links to stand out more.
We basically created different visual hierarchies for two sets of navigational items.
The same for the Pasadena Conservatory sites.
Here contact, meaningless and donate are treated differently than
the primary navigation links below and we also
have links to Facebook and the RSS feed here.
On the Mac center side the menu items about contact,
links, press and mailing lists are part of the utility navigation.
If you count all the links in the header here,
you'll get to 12.
That's more than the rule will be discussed in a previous week
of not having more than five to nine choices at a time.
If you imagine the orange primary navigation here to have a total of 12 items,
that would be visually really overwhelming and it wouldn't even fit horizontally.
Instead we have two menus,
one with seven options, one with five.
The different visual hierarchy,
for the two sets of links makes the scanning of those choices much easier for the user.