Navigation Bar

Original Foreign Affairs Navigation Bar

After the first few initial interviews, we knew that the navigation bar had to be redesigned. The old navigation bar had only two channels but the browse channel took between 3 to 5 clicks to navigate to a particular article or media. Most news navigation bars only have 1 to 2 clicks. At it's best, the navigation bar made the users think a little more, at it's worse it caused users to get completely lost in the site.

1st Roll Out

We decided to do the roll out in two steps. First we broke out the channels and adjusted a few sub-channels. We also engineered it to be a hover nav.

2nd Roll Out

For the 2nd navigation, we are changing the aesthetics and adding a few more channels.

Competitor Usability Test

To understand the direction that we should take, we had to do a little testing to see what worked. I typically work in a lean style, but it would have been a time suck to prototype 4 robust navigation bars. Instead I looked at our competitors navigation bars to see what was and wasn't working. There were areas that we were particularly curious about such as the hover navigation, having articles in the navigation, logo placement, a junk drawer and how many channels should be in the navigation bar. We selected four different news sites based on whether they could answer these questions.

What we wanted to test on Huffington Post:

A roll over menu

Had articles in the drop down menu

Left sub-channels were stagnate

Logo on the top

Detailed channels

All section

What we learned

Pros

Users thought that there was a lot of content but it seemed logical

Users liked the hover navigation

Easy to find things in ten seconds

Noticed that users would browse through the articles in the navigation bar but when told to find something, they would look at the sub-channels and completely ignore the articles

Cons

Some users were indifferent to the navigation’s design. “Okay but not amazing” was a common comment.

What we wanted to test on Foreign Policy:

Roll over menu that was more sensitive

Sub-channels were roll over

A lot of articles in the navigation bar

Wanted to see how long it took the users to see the subchannels

Logo was on the side

Less channels

The type of content is very similar to Foreign Affairs

What we learned

Pros

Liked the hover navigation

Cons

Users couldn't figure out the sub-channels on the drop down menu

Users were overwhelmed by the amount of content

Users were confused by the organization

It took a long time for users to learn how to use it. At the end of the test, users were still frustrated so overall it has a steep learning curve.

Users stated that it seemed unprofessional

What we wanted to test on The Wall Street Journal:

Hover navigation

It has a lot of content

A lot of channels

Classic newspaper heading

Top logo

White/minimalist

What we learned

Pros

Users found that the layout and aesthetics made it easy to scan

Not a lot of clicks in the wrong direction

Liked how that categories were separated

The amount of content didn't create a problem when navigating

One user stated that it was worth the cost of subscription based on the design

Cons

A few users were confused by the cross sections (some sub-channels were located in two areas)

What we wanted to test on The Economist:

Most minimalistic navigation bar that we could find

Had to click on the channels (non-hover)

Ambiguous more section

Left logo

What we learned

Note before the pros and cons: The Economist had the most polarized results. Half of the users thought it was clear while half of the group that it was disorganized.

Pros

The simplicity helped people find things

Variety of categories

Cons

Not a lot of options/dissatisfied with the lack of channels

Content was confusing

Overall Conclusion

Add hovering

People loved that you could hover over the navigation and then the sub navigation would appear.

Benefits

It is easier to scan

I gave users things to search for that could be under multiple categories. Users stated that they would make their first guess, quickly realize it wasn’t there and seamlessly moved to their 2nd.

It helped them understand all of Foreign Affairs Content faster

Avoid the catch all channel

I tested Huffington’s posts’ ‘All Sections’ channel and The Economist’s ‘More’ channel by asking users to find something that was in those channels but also in a less intuitive channel. Overall users tended to not go to a catch all channel and preferred a more specific channel. There were overall arching comments about liking clearly defined channels.

Aesthetics

Users loved the WSJ aesthetics. They described it as clean and minimalistic and stated that it contributed to the fact it was easy to scan. The white or light background with black font makes it feel cleaner and modern.

The classic layout enables a 'Home' channel

The Wall Street Journal has a 'Home' option on its nav bar. 5 out of 9 people clicked it to go back to the home screen. Even though no one actually had a trouble returning to the home screen, it is smart for Foreign Affairs to add one because it is an easy fix for those who get lost. The only way that it can harm the site is for it to cause too much clutter in the nav bar. The benefit is those who are lost will have an emergency exit to the home page.

Revisit the idea of adding articles to the sub navigation

Users tended to look at the articles when they were casually browsing. When I gave them a direct task, the majority went straight for the sub-channels and didn’t even look at the articles in the nav bar.

We should not add articles into every sub-channel but we should explore the idea of making a breaking news section that has articles in it. Most of our users enter the site through the newsletter, Google search or a link, and they go directly to the articles. By have a breaking news section in the navigation bar it reduces the need to click back to the homepage to search for more articles.

Our Roll Out

We are going to completely change the navigation bar, from the aesthetics, to the layout, to new sub-channels. We wanted to start with a few changes for the first roll out. This way the A/B testing will tell us exactly what areas were improved. Also, our users are not a fan of change. There was a backlash when Foreign Affairs put images on the magazine covers, so we want to implement changes slowly.

First Phase

Above is the first navigation bar to be tested and has passed the A/B test with stunning results. The new navigation bar increased page views by 15,000 a week. Increased CTR by 2% and decreased article bounce rate by 1.8%.

2nd Phase

This is the navigation that we want to strive for for the next round of testing. We decided to go with a lighter background because it is both easier to read and it makes the site feel more modern. There is more space so that we were able to add a 'Home' channel and a 'New' channel that will have the most current articles in the drop down.