Swapping Out Navigation Bars

Get Started
1

Unfortunately my website’s Content has outgrown my website’s design - and even before I got v2.0 done?! :wall:

Each page of my website has a horizontal navigation bar with “Tabs” on it. (All of this is done with CSS with no images.)

One idea I had to make my website fit my Content is this…

Is there a way I could make my right-most navigation tab be “Other”, and when a person clicks on that, I use PHP to swap out my default Navigation Bar with an additional Navigation Bar with more options?

I’m not sure if that is possible, or more so, if it would be “desirable” or not?

Any thoughts?

Sincerely,

Debbie

2

There is no real right answer in how to handle multiple sections and it does depend on the structure. Most would say that the menu item should lead to a sub page where more relevant items are available. It can be disconcerting to have too much choice on a main navigation but in some cases you may not have a lot of choice. It may be that if you have too many items then there is something wrong in the structure of the site and perhaps that should be addressed. However, all sites are different and their can be valid reasons for requiring more navigation items.

I suppose the easiest option is to have a “More” (or “other”) button as you say and then allow users to click it top open a sub menu of sorts for the additional items. Indeed that is the way that most responsive sites are going and as the window gets to mobile width the navigation collapses into one button that says “menu” and you need to click to open it to reveal the original menu items. I wouldn’t re-load the page with PHP to add the menu as that would be a bit slow but use some JS instead to open it (PHP could be used as a back up if JS is disabled of course).

Or of course you could use the standard CSS hover dropdown (or dropline) for the additional items. It does depend on the structure but something along those lines could work.

I suppose the question you have to ask is “are these extra navigation items really main sections of are they sub sections of something else”?

3

I like what some mobile sites are doing these days: there is just a single “menu” button, and this is a link that takes you to a dedicated menu page. I guess it’s like a table of contents in a book. I don’t see the problem with doing this on a desktop site either. OK, maybe not for each site, but it’s worth considering for a site with a lot of content, and it takes the pain out of trying to design the ultimate menu.

4

Therein lies my problem…

I feel I have 15-20 legitimate Sections, and they really stand on their own and it wouldn’t make sense collapsing most of them into other Sections.

When I started earlier this week, I had a list of maybe 40-50.

My Navigation Bar now has 13 Sections in it, and while it looks pretty good, there are 4-5 more Sections that leaving out makes me feel like I’m cheating my users?! :-/

The need to have numerous Sections isn’t a lack of organization, it is that my topic is broad AND that I am doing a good job and trying to provide comprehensive coverage of the topic at hand.

Last night I was looking at the NY Times and LA Times and the Washington Post, and I feel I am on a similar level as they are with Content and numerous Sections.

Each handles things somewhat differently, but the one thing they all have in common is that they probably have over 100 Sections that can easily stand on their own…

My biggest fear is not being to “advertise” certain Sections, and then never getting exposure that they need. For example, “Outsourcing” or “E-commerce” or “Women In Business” might not be as obvious and dominant as Section like “Finance” or “Legal”, however they apply to important populations of visitors that I want to highlight.

If I bury these Sections under a catchall section like “Other”, then someone might see them, but a lot of people never will get there before leaving. (Maybe the only reason a visitor would stay at my website is not that it is about “Small Business”, but because it is about “Small Business” AND focuses on “Women in Business”…)

Because my website is not specifically about “Women”, if forced to choose between “Finance” and “Women” because of a lack of real-estate, then “Finance” would win. However, in an ideal world, my main navigation would have both Section so that I could “hook” both types of visitors!!

Make sense?

Of course, if and when my website ends up taking off, this may become less of an issue because people know my site, and they know where to find things. For example, there are LOTS of things buried at SitePoint, but because I love the website and I know the website, I don’t mind navigating to areas of interest, that a new user might not.

I have been pouring over my Content and Sections and trying to condense things. And while I have successfully done that is some areas, I still feel like I have 12 feet of rope when I need 16 feet… :wall:

Sincerely,

Debbie

5

I’ve already mentioned in another thread that you have all sorts of options, such as featuring these sections on your home page, either with feature boxes on the page (perhaps that reorganize on each page load, just for fun?) or via a content slider. What’s on your home page now? Usually it has not much use other than to highlight things in the site.

6

Perhaps navigation itself should be a single ‘button’ from which a ‘super sub menu’ drops down. this way you could even lay out your 15+ choices in columns…

NAV_______________________________+

Item1 Item2 Item3 Item4 Item5 |

Item6 Item7 Item8 Item9 Item10 |

Item11 Item12 Item13 Item14 Item15 |

________________________________________+

mY ASCII rendering is not posting quite right, but hopefully you get what I am saying.

Incidentally, from a marketing strategist persoepective, not everything can be out front, not because of the space available, but because , as Ralph said, you start to daze the viewer to the point where he/she chooses nothing over any one choice. This is especially relevant on the web.

7

Yes, I remember you saying that. The only problem with that strategy is it only works when users are on the Home Page. (That is why I want to try and squeeze things into my navigation - because they will be on ALL pages.)

What’s on your home page now? Usually it has not much use other than to highlight things in the site.

I have a screen-shot posted in the Other Thread…

(I haven’t put a lot of time into my Home Page yet, so I could certainly take your advice there. I am just worried about when they navigate off of the Home Page.)

Sincerely,

Debbie

8

Wow, a second person who mentions this. Must be a new fangled thing I’m not up on the times with?!

(You think that would actually work???)

Incidentally, from a marketing strategist perspective, not everything can be out front, not because of the space available, but because , as Ralph said, you start to daze the viewer to the point where he/she chooses nothing over any one choice. This is especially relevant on the web.

Okay, maybe that is something I am not taking into account.

(At the same time, look at what most online newspapers do… You can access 80%+ of their entire content from the menus at the top of every page.)

One solution I have been thinking of is creating a “Left Nav Column”. (Either in addition to the Top Menu, or all by itself.)

If I did that, then things could expand indefinitely. (And I could put the Top-10 most important things at the top, so they remain “above the fold”.)

The only catch to doing this is that it would kill A LOT of real-estate in my layout. (I hate clutter, and tried to design a website that feels “unencumbered”…

Here is a screen-shot of my Home Page, Finance Articles Home Page, and an actual Article…
(BTW, obviously, these screen-shots are of how my Top Menu looked before I tried to cram in the 15-20 Sections that I came up with…)

I could probably live with a Left Nav Column in the first two screen-shots, but I would not be crazy about how it would CRAMP my nice article… :tdown:

Sincerely,

Debbie

9

True, but there’s only so much you can do. Even a long menu doesn’t say much about the site itself. Often if I stumble upon something interesting and want to know more about the site, I head to the home page, expecting it to introduce me to the whole site. If it doesn’t, woe betide the site … as I’m probably off to something else.

Of course, another popular option is to make good use of the footer area. Down there, you can have as big a menu as you want—a whole site map—on every page. That’s worth considering too. Down there, you have endless room to lay out sections, subsections etc.

10

Your home page doesn’t offer an introduction to the site, something I’m quite critical of generally. When I come to a site, I want an introduction that clearly lays out to me what I can find here, things I might be interested in, calls to action etc. These days, without that I don’t hang around, as I figure I’ll be able to find something better.

11

Again, you make some valid points.

Okay, Ralph, so thinking in abstract terms, “Which of my 16-20 children should get the boot??”

1.) Should I only keep maybe 5-8 Tabs?

2.) Should I rank-order things, and chop things off when I run out of space? (e.g. maybe the last 4-5)

3.) Is there some other “formula” I should use?

What do you think about my idea for a Left-Nav Column??

And what did you think of the screen-shots I posted?

Of course, another popular option is to make good use of the footer area. Down there, you can have as big a menu as you want—a whole site map—on every page. That’s worth considering too. Down there, you have endless room to lay out sections, subsections etc.

That’s a really interesting idea!! (Come to think of it, I have seen some site use those before.)

However, the question is, “Does anyone ever look down in the Footer?!” :-/

Sincerely,

Debbie

12

[ot]I would love to talk more about this, but don’t want to get off on a tangent and not get my Navigation Issue resolved first.

Here is a related thread…

What is “Call-To-Order” and how to do it properly?!

Debbie[/ot]

13

I guess an option would be to make the final main menu link read “More options” or something like that, which jumps the user down the page to the footer links. Just a thought, anyway. I usually find all those footer links pretty obvious anyway, but if it’s a concern, that’s a possible solution.

14

The side nav is not a bad idea either, albeit old fashioned (again nothing wrong with a classical approach)

But you might be interested in looking up screen shots of the original amazon.com site. Not only did they ‘originate’ the tabbed menu, but as I recalled at some point their menu looked somewhat like an auditorium of tabs! Too menu choices leads to the same user reaction as too few. your aim should be to GUIDE the user in choosing. After all you know your site, he/she doesn’t.

I guess an option would be to make the final main menu link read “More options”
Of course that will lead to the Q which options first? lol

15

What about my comment in Post #8 of a Left Nav Column “cramping” things?

And what about my questions in Post #11?

Debbie

16

What about my comment in Post #8 of a Left Nav Column “cramping” things?

Some thing taught to me in art school, in design it’s only an error if it doesn’t APPEAR INTENTIONAL. If your look and feel is made to look and feel like you meant to have the nav on the side then it wont “cramp” things. It also touches on UX, if you have 15+ nav choices for the sake of adverts it wont be a pleasant UX no matter what you do, but if your site really has 15+ main directions to go to from the homepage then an EASILY ACCESSIBLE sidebar with nav links improves the UX. In the days before wide monitors weer popular wost web navs were on a sidebar. form follows function.

However, the question is, “Does anyone ever look down in the Footer?!”
Depends how web savvy they are. I can see your trepidation on this , tho. Still you cant expect to hit everyone. Someone who has never used a website might not even get Hz. nav bar (really… this was another reason why vertical nav’s were popular… they resembled PAPER BOOKS, which people were familiar with)

a light bulb just went off… why not have the abridged nav I suggested and a an anchor link to the footer which would have the full nav? That way all links are on the same doc, but bellow the main content, they are all visible, to web experienced users who look at the footer this would be a short cut and to noobs it would be indispensable ( as well as a learning exp)

17

I have 15+ LEGITIMATE, Content-Only based Sections I need the world to know about!!! :wink:

In the days before wide monitors weer popular wost web navs were on a sidebar. form follows function.

True.

I was just so proud of my mega wide, and white, gutters on the sides of my narrow Articles… :cool:

Depends how web savvy they are. I can see your trepidation on this , tho. Still you cant expect to hit everyone. Someone who has never used a website might not even get Hz. nav bar (really… this was another reason why vertical nav’s were popular… they resembled PAPER BOOKS, which people were familiar with)

I guess.

a light bulb just went off… why not have the abridged nav I suggested and a an anchor link to the footer which would have the full nav? That way all links are on the same doc, but bellow the main content, they are all visible, to web experienced users who look at the footer this would be a short cut and to noobs it would be indispensable ( as well as a learning exp)

Let me paraphrase what you just said…

Are you saying that I could have my right-most Navigation Tab be labeled “Other”, and that when people click on that, I could use an old-fashioned HTML Anchor to drop people down to the Footer - on the same page - which would in turn have all the gory details of my 15+ Sections??

If that is correct, then can I do all of that WITHOUT JavaScript?? (I’m a JavaScript Virgin and plan to keep it that way…) :smiley:

Also, if I am understanding you, what would be the layout/structure of my 15+ Sections in the Footer?

Purely Vertical?

Purely Horizontal?

Horizontal, but wrapping like a “Z”?

Vertical, but wrapping like an “N”?

Other?

Sincerely,

Debbie

18

If that is correct, then can I do all of that WITHOUT JavaScript??

… well unless you wanted some sort of fancy scroll down effect ( the anchor link would simply JUMP) to the footer.

The idea came to me because do the opposite for screen readers ALL THE TIME (“skip links” hidden from the sighted users but the FIRST link the nav , so that people with screen readers dont have to sit though 58 links of a drop down menu being read to them.

Also, if I am understanding you, what would be the layout/structure of my 15+ Sections in the Footer?

since it’s the footer , arrange it in the way it looks best…:). I usually go with ‘columns’ tho in this case they would be purely aesthetic since there is no hierarchy in your menu

Although… I might other them alphabetically, order is good for user, regardless.

19

Would it be an evil UX to just jump down to below the fold and the Footer?

Would people get confused as to what was going on?

I’m sure a slow scroll would ultimately look better, but I’m not ready for JavaScript yet…

The idea came to me because do the opposite for screen readers ALL THE TIME (“skip links” hidden from the sighted users but the FIRST link the nav , so that people with screen readers dont have to sit though 58 links of a drop down menu being read to them.

Okay, so I could make “Other” the FIRST Tab…

since it’s the footer , arrange it in the way it looks best…:). I usually go with ‘columns’ tho in this case they would be purely aesthetic since there is no hierarchy in your menu

Although… I might other them alphabetically, order is good for user, regardless.

So all of this is another interesting approach.

I’ll need to chew on this for a while…

Once good thing, is that I think I was able to reduce and combine a lot of my former 40 Sections down into 15 really important ones, with maybe another 10 secondary ones.

That is good news, because for the most part, I seem to be able to get the “Top-15” to fit on my Horizontal Navigation Bar.

And that combined with your latest idea, might be enough to satisfy me and make sure that “No Section goes unturned” while also not blowing users away with 40 Sections in the Top Nav?! :smiley:

Progress, albeit slow…

Thanks,

Debbie

20

Would it be an evil UX to just jump down to below the fold and the Footer?

Would people get confused as to what was going on?

I don’t think so if you label it correctly. there are sites (some are even beautiful looking) that occur entirely in one page, and scroll you down section by section. This is conceptually no different.

That is good news, because for the most part, I seem to be able to get the “Top-15” to fit on my Horizontal Navigation Bar.

And that combined with your latest idea, might be enough to satisfy me and make sure that “No Section goes unturned” while also not blowing users away with 40 Sections in the Top Nav?!

My job here is done! “Up, up and…”