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.