Mega Drop-Down Navigation menus

14 Oct 2009 - 5:34am
5 years ago
16 replies
4916 reads
Nik
2009

Hi all,

I’m putting together some recommendations for using mega drop-down
navigation.

http://www.useit.com/alertbox/mega-dropdown-menus.html

I’m interested in the opinion of the iXDA list on whether the
top-level navigation items should lead to pathway (or landing) pages,
or whether they can simply act as non-hyperlink triggers to the
drop-down (so no hand cursor)?

Also, if there is no pathway page, how should this impact breadcrumb
trails?

For instance:

Home > Sports > Windsurfing

- Should ‘Sports’ be included in the breadcrumb trail (I’m thinking
yes).
- If a user crops the url, to http://domain.com/sports/ should this
be a 404, or a redirect to / ?

Look forward to hearing your thoughts and ideas.

Thanks,
Nik

Comments

14 Oct 2009 - 8:30am
mcaskey
2008

On a personal note, I love these menus. You have the potential to get
a great index of a site or an "area" of the site, capitalizing on
the scanning we do nowadays, without taking up an entire page for
navigation.

I have run into the same question on category indexes/introductions
and the relation of labels and containers within a hierarchy.

I agree that a 'breadcrumb' should include those labels since they
should include things that were used in the mind of the user to get
to where they are now.

The question on url makes me consider SEO as well...

I'm really interested in this discussion.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 9:19am
Charles Boyung
2009

If you are going to categorize pages in those drop downs based on the
parent item, then the pages for those categories should exist. And
likewise, if you choose to use breadcrumbs, that category should be
in the breadcrumbs and should be a link to the page. You can't make
the "/sports" a 404 or go back to the home page because the former
is just bad usability practice, since URLs that look like a folder
structure ARE going to get treated that way, and the latter is very
confusing to the user.

In addition, since you are creating the category pages, then you
should make those top level navigation items links as well. This is
actually good design practice because it makes things a lot easier
and accessible for those that have disabilities and even for those
(admittedly very few people at this point) that turn off javascript
or otherwise stop your menus from working.

You need to think of those landing pages as not just "category"
pages, but also as a means to increase your site's visibility and
also it's ability to help your users. A "sports" page can provide
a lot more information than just a list of subcategories or pages. If
you have a good strategy for your content, you can use that page to
drive search traffic to your site and also provide some great content
for your users that manage to get to that page by whatever means.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 10:06am
Oleh Kovalchuke
2006

The category pages might be useful for casual, "What else is there?"
browsing. I recommend skipping them, because you can support this behavior
from the target page.

If you decide to skip building category pages, incorporate categories in
breadcrumbs. For instance:
Home > Sports: Windsurfing

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Tue, Oct 13, 2009 at 11:34 PM, nik <nik.lazell at realadventure.co.uk>wrote:

> Hi all,
>
> I’m putting together some recommendations for using mega drop-down
> navigation.
>
> http://www.useit.com/alertbox/mega-dropdown-menus.html
>
> I’m interested in the opinion of the iXDA list on whether the
> top-level navigation items should lead to pathway (or landing) pages,
> or whether they can simply act as non-hyperlink triggers to the
> drop-down (so no hand cursor)?
>
> Also, if there is no pathway page, how should this impact breadcrumb
> trails?
>
> For instance:
>
> Home > Sports > Windsurfing
>
> - Should ‘Sports’ be included in the breadcrumb trail (I’m thinking
> yes).
> - If a user crops the url, to http://domain.com/sports/ should this
> be a 404, or a redirect to / ?
>
> Look forward to hearing your thoughts and ideas.
>
> Thanks,
> Nik
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

14 Oct 2009 - 12:01pm
Neil Cadsawan
2008

Why must navigation and structure be 1:1? They are separate, yet
admittedly related concepts. Users don't care about structure.
They care about finding the right content. Navigation is one of
those ways they do that.

Don't just think about the usability of the dropdowns but also their
accessibility. How would the information of the dropdowns be accessed
from a screen reader for example?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 7:28am
Jojest
2009

I think it is worth looking menu found in www.calderdale.ac.uk. Which
uses mega drop down with background images. I think mega drop down
could be used to showcase the user groups and give good visual appeal
and representation of its target users. And get more breathing space
for the site layout as well. From the usability point of view, it
appeals the user better than the text menu. What you guys think? I
may be wrong....

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 8:51pm
laurie kalmanson
2006

another nice use of these mega nav dropdowns is including callouts,
promos, featured items as part of the space

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 9:19pm
Charles Boyung
2009

"If you decide to skip building category pages, incorporate
categories in breadcrumbs. For instance:
Home Sports: Windsurfing "

What would your links be here? "Home" and "Sports: Windsurfing"
or "Home Sports:" and "Windsurfing"? I could potentially see a
case for what you are saying if you use the former, but not if you
use the latter.

I think you are skipping out on the potential value of those category
pages. Your argument about having the "what else is here" content
on the target page is not a good one, because it really clutters the
page. Yes, I know that Amazon does it all over the place, but in
that instance, it's one of the times where Amazon does things very
poorly from a user perspective. Amazon product pages are one of the
worst designs out there in my opinion. All I want is to see the
product I chose, not 50 other products.

As for the value of the category pages, I really do think it's
there. Check out this page:

http://www.tasteofhome.com/Recipes/

And then check out this child page:

http://www.tasteofhome.com/Recipes/Holiday---Celebration-Recipes

Yes, the former is probably the blandest of the bland when it comes
to category pages, but the holiday page actually has some additional
content. Not only is this useful to the users, but it will also help
your search engine optimization.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 9:22pm
Charles Boyung
2009

"Why must navigation and structure be 1:1?"

Um, because contrary to what you said after this, navigation and
structure are not just related, they ARE the same thing, at least in
terms of this discussion. You have a navigation tree to follow from
one page to the next. If that isn't structure, then what is? Pages
belong in a hierarchy, and that is how you get where you want to go.
Yes, navigation can have cross-links to go from one related area to
another, not necessarily in the tree, but you still need to have that
tree as the primary means to get around.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 9:25pm
Charles Boyung
2009

"another nice use of these mega nav dropdowns is including callouts,
promos, featured items as part of the space "

I guess your definition of nice is different than mine. I personally
hate it when my navigation has all of that extra junk there, both as a
user and as a usability analyst. It really does very little to add to
the user experience. It may be good from a marketing perspective, but
from a purely user-based perspective, they have little to no value.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

14 Oct 2009 - 11:05pm
Neil Cadsawan
2008

If you're going to use a mega drop down, take advantage of it. Take
rei.com for example. Look at the first dropdown for Camping &
Hiking. You can click on the main nav item and be taken to a landing
page. It also has 4 internal structures, Gear, Gadgets &
Electronics, Camp Kitchen, Health & Safety. There aren't any
landing pages for these groupings, they're organizational structures
to help shoppers locate equipment. There is no corresponding site
structure for these groupings. Items listed in these groupings
don't just lead to main section pages. There are deep links
included in these groups.

REI shows content based on what people are looking for, not on how
they organize their content. That's what good navigation does.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

15 Oct 2009 - 5:46am
Nik
2009

@Neil - I think structure should be clear and logical, having said
that I still undecided yet whether a category or url-segment such as
'sports' could return a 404 if the user chooses to chop the url to
get to it. No links within the site would point to /sports, only
/sports/windsurfing etc.. so is there an argument to say that any
user who chooses to navigate to /sports via amending the url, would
understand the 404 returned.

@Charles - I'm not sure the pages for the categories should always
exist. If you look at http://www.johnlewis.com/Electricals/Area.aspx
Could you argue the content they have pulled in to that page is a bit
superfluous and simply to populate the category page they have
created?

Interestingly the link http://www.johnlewis.com/Electricals returns a
404, but that's more to do with their dev setup I guess.

http://www.millfieldschool.com

In terms of accessibility, this site uses, what I consider, a very
good technique in that the tabs are not links to the category pages,
but anchor links to the large footer, which is hidden by JS.
Therefore if a users has JS disabled, the mega drop-downs won't
work, but the lack of JS will also reveal the large footer, where the
tabs anchor links now navigate to when the user clicks. This must be
good for SEO (pulling in second level content), accessibility (non JS
users still access the menu) and screen readers?

Thank you to everyone who has contributed so far.

Nik

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

15 Oct 2009 - 8:30am
Oleh Kovalchuke
2006

Hmm, the "greater than" sign has been lost in the web ether, I guess. It is
the former:
"Home" > "Sports: Windsurfing"

Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Wed, Oct 14, 2009 at 3:19 PM, Charles Boyung <
charles.boyung at nexustechnologiesllc.com> wrote:

> "If you decide to skip building category pages, incorporate
> categories in breadcrumbs. For instance:
> Home Sports: Windsurfing "
>
> What would your links be here? "Home" and "Sports: Windsurfing"
> or "Home Sports:" and "Windsurfing"? I could potentially see a
> case for what you are saying if you use the former, but not if you
> use the latter.
>
>

15 Oct 2009 - 9:01am
Neil Cadsawan
2008

Nik,

Yes, site structure should be clear and logical, but at what point in
the URL is the URL no longer important to users? I'd really like to
do a study to find out. But my guess is that if your navigation is
clear and logical, users won't care what the site structure is.
I'd say the only time a URL is important to the user is if someone
has copied it and sent it them via email or IM. And in that case
it's important in deciding if they want to click on it or not. Do
they trust the URL or not.

Going back to the REI example, does it matter that the URL for
"Camping & Hiking" is "http://www.rei.com/category/4500001" and
not "rei.com/campingandhiking/"? I don't think so. The navigation
shows that "Health and Safety" is a subset of "Camping & Hiking",
but there's no "/campingandhiking/healthandsafety/".

Decoupling the navigation from site structure allows you an amazing
amount of freedom. Yes, sometimes it is a 1:1 to structure, but it
doesn't have to be.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

15 Oct 2009 - 9:21am
Nik
2009

Neil,

Thanks for your reply.

I see what you mean, but I would think having category/sub-category
titles and product names in urls would be better for SEO.

It's only my personal preference, but having a 1:1 to structure
helps me get a 'feel' for the site, the content architecture and
generally how/where things generally sit in the site. Navigating
around pages /about/ and /camping-and-hiking/ would give me a good
feel for the site and confidence that I would likely find contact or
sitemap in /contact/ or /sitemap/ respectively.

URL's such as /category/45000001/ give me no real feel for the site.

-Nik

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

15 Oct 2009 - 2:22pm
Sam Menter
2008

Hi Nik
Ping an email all the way around the world and the only person to answer is
in the same town as you!

Just been talking through the same issue.Our take on it was that the top
level should link to orientation pages, i.e. pages which act as a category
page for the content below. This also helps for screen readers I believe,
and users with js disabled.

Doing it this way also solves the crumb trail issue, because a page exists
to link to. I think it's essential that the item is included in the crumb
trail, because it makes the crumb trail more logical.

Feel free to disagree - I've never done any testing around this particular
issue! John Lewis do it well I think, and they include a 'hub' page.

Cheers
s

--
www.pixelthread.co.uk

Pixel Thread Ltd
Spike Design,
133 Cumberland Road,
Bristol, BS1 6UX

Tel: 07985 979 852

16 Oct 2009 - 3:31am
Nik
2009

Hi Sam,

Good to receive a local reply!

I see the benefit of orientation pages in ecommerce sites, but when
looking at sites such as www.millfieldschool.com I'm not sure that
an orientation page would offer much benefit to the user.

The Millfield example allows the full drop-down content to be
available in the large footer, which is collapsed with Javascript, so
this would be graceful degradation to users with JS disabled and good
for SEO and screenreaders.

My thoughts anyway and we're stillvery much undecided. Maybe that
some form of A/B testing required.

Thanks for your reply, good to hear from a Bristol UX'er.

-Nik

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46723

Syndicate content Get the feed