The Challenges of Moving to Horizontal Navigation

Joshua Porter

April 26th, 2006

Thanks to Bohdan Zograf for providing a Belorussian translation.

Thanks to Valeria for providing a Czech translation.

Thanks to Anna Chekovsky for providing a French translation.

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:

CNN homepage

And here’s what an interior page looked like:

CNN subpage

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.

  1. 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.

  2. # 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.

  3. 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?

16 Responses to “The Challenges of Moving to Horizontal Navigation”

  1. Ashley Gadd Says:

    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?

  2. Terry Gardiner Says:

    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?

  3. Joshua Says:

    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.

  4. Dave Lowe Says:

    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.

  5. links for 2006-09-01 « I do Says:

    [...] 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) [...]

  6. Andrea Wieland Says:

    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.

  7. Martin B. Says:

    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?

  8. Hank H. Says:

    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.

  9. hekim group Says:

    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?

  10. Anthony Ettinger Says:

    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.

  11. The Case Against Vertical Navigation - Smashing Magazine Says:

    [...] [...]

  12. The Case Against Vertical Navigation | TipTe.com Says:

    [...] The Challenges of Moving to Horizontal Navigation [...]

  13. 10 отличий сайтов от их мобильных версий Says:

    [...] пользовательских интерфейсов, под названием «Трудности перехода к горизонтальной навигации» и опубликованным Джошуа Портером, говорилось о [...]

  14. 10 Ways Mobile Sites Are Different from Desktop Web Sites « Other « GtuResult.in Says:

    [...] left to right, then click a link to go to a different section of a site. A UIE blog post titled “The Challenge of Moving to Horizontal Navigation,” by Joshua Porter, talked about the benefits of using a horizontal navigation bar at the top [...]

  15. 手机站点和桌面站点设计的10个区别 - 网旮旯里 | 把握最新动态,关注IT前沿 Says:

    [...] 如图三Urban Outfitters站点所示的那样,在呈现数据结构和数据内容时,水平导航是一种广泛采用的导航方式。用户可以从左到右,点击不同的站点链接来浏览。Joshua Porter在一篇名为“The Challenge of Moving to Horizontal Navigation“的博客中,讨论了在页面顶端而不是页面两侧使用水平导航的好处。至于顶端时,用户可以更容易聚焦于页面的内容,而在两侧时,会很容易干扰用户视线。在我的研究中,90%的移动站点采用垂直导航的方式取代水平导航,包括如下图所示的Urban Outfitters移动站点。 [...]

  16. Fifteenth – the importance of navigating horizontally « From Text To Design Says:

    [...] sidebar navigation to the top of the page and turn it into the header. Joshua Porter’s “The Challenges of Moving to Horizontal Navigation” details the transformation and underlines that it involved many word choices and choices of [...]

Add a Comment