The Challenges of Moving to Horizontal Navigation
April 26th, 2006
The designers of CNN.com recently redesigned their home page, changing from a left-hand, vertical navigation scheme to a top-of-the-page, horizontal one. They even created a page that highlights their new changes.
Interestingly, the designers didn’t change (or haven’t yet changed) the interior pages of the site, driving consistency-minded designers nuts everywhere. Fortunately, however, this gives us the opportunity to look closely at the decisions they made, and to highlight several issues involved in making such a change.
Here’s what their homepage looked like this recently:
And here’s what an interior page looked like:
As you can see, the layout has changed dramatically. The content has been shifted left, where navigation used to be. The navigation is now in a thin blue bar across the top of the page. This has the positive effect of moving the visual weight away from the navigation and toward the actual story. When the navigation is on the left, our eyes are instinctly drawn to it, even when we already know what it is. This distraction, however small, is less noticable in the new horizontal design.
To get this change, the designers didn’t simply put the left-hand nav buttons end-to-end across the top of the page. No, they had to make several design choices. Most of these choices were influenced by the width of the page and the number of links they were working with.
- Link length shrinks
One of the first things to change when navigation goes horizontal is the length of links. In the CNN design, the designers shortened several links. “Business at CNN Money” became “Business”. “Sports as SI.com” became “Sports”. “Autos with Edmunds.com” became “Autos”. And “Special Reports” became simply “Specials”.Our research here at UIE has shown that the longer the link, the better it works. In this case, however, it doesn’t seem like much was lost when the links were cut down. Was “at CNN Money” really adding any relevant information to the “Business” link? Probably not much. Even so, reducing the “Special Reports” link to just “Specials” seems to have lost something.
Navigation bars, however, are a special case of links. In general, we’ve seen short, one-word navigation links work at the top navigation level on sites when the subsections are relatively distinct. However, as you delve deeper into the site, links tend to work better when they are longer because they need to contain more information that differentiates them from their siblings. For instance, “Sports” and “Business” are two relatively distinct categories, so creating top-level navigation links with just those words might be appropriate. But when on the “Business” subsite, everything has to do with business, so the links need to clearly differentiate what those differences are. The more words there are in the links, the easier it is to do that.
- # of navigation choices changes
In the vertical nav configuration on the CNN subpages, there are 17 navigation choices. In the horizontal nav configuration on the homepage there are only 12. The designers have cut down on the choices in order to save space. There would not have been enough room to put all 17 on the horizontal nav bar at the same page width.In order to keep the same navigation choices as before, the designers chose to utilize a dropdown box to hold the remaining links. This is a common method that designers use when they don’t want to place all the links on the page at the same time. However, our research has shown again and again that dropdowns and flyouts don’t work very well. Our classic article Users Decide First, Move Second talks about this in more depth.
As a result, I would bet dollars to doughnuts that those links in the dropdown have fewer people clicking on them than they did when they were in the vertical nav bar. The reason is simple: people have to work to see them now.
- Prioritization of choices
The designers at CNN didn’t simply take the last five links and put them into the dropdown. If they had done so, they would have chosen “Travel”, “Education”, “Special Reports”, “Videos”, and “Autos”. Instead, they chose “Law”, “Science & Space”, “Travel”, “Education”, and “Videos”. Obviously, the designers thought that “Autos” was more important than “Law” and “Special Reports” was more important than “Science & Space”. They made an explicit decision to prioritize some over others.This is a common problem issue we see with the move to horizontal navigation. At some point, things have to be cut. Instead of losing value, however, design teams can use this as an opportunity to make a site stronger focusing on what is most important on the site. We’ve seen many design teams try to include everything under the sun into their web site, when in almost all cases the vast majority of visitors come for a small sliver of content.
Those are three obvious design challenges that the team had to face when moving to a horizontal navigation scheme. Most teams deciding this very question will face these and more. Do you have any interesting challenges from a recent move to horizontal navigation? Are you considering such a move?
April 26th, 2006 at 11:21 am
You suggest that horizontal nav is a good way to force a site to focus on their core content. CNN decided to use a combo to hold the lower-priority stuff rather than refocus their site. Presumably as a news provider they can’t just drop sections from the paper — certain people come to expect “Science & Tech” and will take the effort to search for it. How would you recommend CNN refocus so that they don’t have to use the combo? Is there a better way to implement horizontal navigation?
April 26th, 2006 at 3:41 pm
In addition to making the change to a horizontal navigation, CNN made the jump from a lowest common denominator resolution of 800×600 to 1024×768.
I would be very interested in learning about the research that went into this decision (both visitor metrics and usability findings).
Did the visitor metrics show that only a very small percentage of users visiting CNN have their resolutions set to 800×600, justifying the leap to 1024×768?
The advertisers must have been consulted, since any users visiting CNN at a resolution of 800×600 no longer see the advertisements in the right pane.
Were the old and new versions usability tested and the results compared? If so, what were the findings?
April 27th, 2006 at 10:12 am
Great question, Ashley. One option, of course, would be to get rid of the dropdown altogether. CNN allows multiple access to points on the site from all pages, and so you wouldn’t be losing too much there.
More specifically, this issue digs at the notion that a certain subset of options needs to be in the navigation bar to begin with. This would be a good idea, if the navigation bar was the primary means of getting to content. This would be a bad idea if designers tried to put everything in the navigation bar…remember the two-level Amazon navigation bars of years ago? Those didn’t last long.
So the real question, I think, is this: what purpose does the navigation bar serve? Our research has suggested that navigation bars are actually support systems for sites and not the primary way people get to content. The primary way is to look in the body of whatever page they’re on. Failing that, users fall back onto navigation bars and search to help them out. This suggests that navigation bars tend to be a less optimal solution than their name suggests.
So to that end I would suggest exploring putting section-specific content somewhere on the page, perhaps in a sidebar on the right of the page(for example). This way, the designers could even include story headers in addition to the section name, very much like what they do at the bottom of pages now. ( http://www.cnn.com/TECH/ ). However, the problem with putting it at the bottom of pages like in this example is that there is a tremendous amount of non-content between the story blurb and the section-navigation. Whitespace and ads take up several hundred pixels of room that probably won’t induce people to scroll…users need a reason to scroll! Making a smoother transition through this area on the page might help that happen more easily.
May 1st, 2006 at 12:55 pm
I’m working with a team on a redesign right now of the prospective undergraduate section on a university site, and a key change has been moving from a left-hand nav to horizontal. Similar to CNN, we had to make some choices and select only a few of the existing links. In our case this was actually a good thing, as the existing nav isn’t representative of merely main sections but also includes action links like ‘Apply’ and some links to lower-tier content too. It was a good opportunity to really evaluate the site structure. We trimmed 12 links down to 6.
We’ve identified two significant challenges in addition to the ones mentioned in the article. First, how does the navigation respond when the user increases the text size? Second, where does the secondary navigation belong?
To address the first, we’re probably going to go with an em-based layout so that the nav container grows along with the text size, ensuring the links don’t force a line-break or push a choice off the screen entirely. For the second issue, we decided that it’s important that users be able to quickly access secondary pages from anywhere on the site, so a drop-down menu of links will appear on hover/activation. We’re still trying to decide whether that second list should be vertically- or horizontally-oriented. And of course we need that secondary nav to be displayed on section pages. A right-hand column will be used for that, letting us use much longer link titles than the horizontal nav will allow.
September 1st, 2006 at 2:53 am
[...] UIE Brain Sparks » Blog Archive » The Challenges of Moving to Horizontal Navigation examining CNNs redesign from vertical to horizontal global navigation (no clear conclusions) (tags: navigation ia ux) [...]
August 29th, 2007 at 11:17 am
A recent blog posting at: http://www.journerdism.com/index.php/2007/08/19/four-trends-in-newspaper-website-navigation-design/ provides a commented overview of how horizontal nav bars are evolving on newspaper Web sites. But, every method tried still has limits and problems.
We all need to decide on site navigation methods/techniques for the sites we design and maintain. So, how do we determine the “current best practices” for site navigation? Eventually, repeat visitors figure out the navigation logic used on the levels within a site. This is immediately apparent when we change that logic.
Is it possible to have “current best practices” for site navigation? Does that also depend on the type of site (i.e., newspaper, large government, retail, etc.)?
Thanks for any feedback on this question.
September 5th, 2007 at 3:26 pm
You seems to say that left vertical menu (like internal pages of cnn) is not the best since it puts the real content away. What about having the menu to the right side?
I sometime do include a horizontal menu with only a few (3-5 items) that are very broad. I also put some content area that are about the same 3-5 items that are in the horizontal menu. Once the user arrives at an internal page, I have the horizontal menu show which item the user is in and I also put a “secondary” menu on the right side.
What do you think about that?
September 6th, 2007 at 4:50 pm
Per Martin B.’s comment: Years ago I joined a firm with a site that had categories on the left and subcategories on the right. That is, you’d select “rugs” in the left and it would be highlighted, and then types of rugs would appear in the right column.
Lots of times people never even noticed the right column. We even tried tricks like promulgating a light yellow background in the right column if there were navigational elements in it, in the hopes of getting people to notice it. Didn’t work.
(Boy, I’d loved to have had eye tracking technology back then!)
Seems like we were working against the expectations of users, of course, who expected major navigation elements to be on the top or left and “soft” items to be in the right. So all in all, I’d shy away from navigational elements on the right, especially those that are coupled to navigational elements on the left. You also get into accessibility issues with screen magnifiers, tab orders and the like.
So that’s my 2 cents.
May 13th, 2008 at 7:11 am
I sometime do include a horizontal menu with only a few (3-5 items) that are very broad. I also put some content area that are about the same 3-5 items that are in the horizontal menu. Once the user arrives at an internal page, I have the horizontal menu show which item the user is in and I also put a “secondary” menu on the right side.
What do you think about that?
May 15th, 2008 at 4:03 pm
Definitely a trade-off with switching between the two…benefits too though. Making the story the focus, instead of the leftnav was worth it, even if the link labels had to be shortened.
Specials vs. Special Reports though….man, I thought that was going to be a link to buy a CNN t-shirt or coffee mug.
I don’t know if they did, but adding title attributes would have helped some.
July 3rd, 2008 at 11:08 am
What about having the menu to the right side?