NU.nl, the biggest news network in the Netherlands, redesigned it’s website this year. The main objective of the redesign was to improve the overall user experience and retaining the clear presentation of content, which the website is known for. One specific goal was to direct more visitors from the homepage to the content that the news network offers on different topics. Annemarie Boon, usability specialist at Sanoma Media, used Usabilla in the process to achieve this goal. Thank you Annemarie, for being so kind to share your findings with us.
NU.nl presents an enormous amount of information. The website has categories on different topics, like NUsport.nl for sport news
and NUzakelijk.nl for business news. Web statistics showed that a relatively small group of people found the content categories through the sidebar menu. Here is a screenshot with the old menu:
Interviews and prototypes
In the first prototype, Sanoma Media replaced the sidebar menu with a tabbed horizontal navigation on top of the page. A navigation with tabs is a powerful design pattern and is appropriate for the main navigation of a website. By using this pattern, the design indicates that the content categories featured in the tabs are just as important as the homepage.
Annemarie Boon told us: “The new design has a better grid. The navigation falls in the ‘F’ scanning pattern and is closer to the relevant content.”
For interviews about the first prototype, Annemarie and her crew recruited regular visitors of the website. The new navigation received positive feedback, but the exact placement was still giving problems. Annemarie: “We think the reason for this is that people get used to banners. During the interviews we noticed that people did not always recognize the tabs as such—the surrounding banners were either too busy, too high in contrast, or both.”
To solve this problem, a second prototype was designed. Now the tabs were placed below the banner:
Remotely testing the prototypes
The team of Sanoma Media had enough material for quantitative testing by now. Annemarie: “The qualitative data we got from the interviews did not tell us enough about which version would score best and why. We decided to use Usabilla to further refine the design based on quantitative data. We randomly showed the original design and the two prototypes to the test participants and asked them where they would click to read more financial news. We measured how many participants clicked on areas that would bring them to the content category ‘NUzakelijk’ ['zakelijk' means business, JB], and how long it took them to fulfill the task.”
When testing the first prototype, more participants clicked on a link that would take them to the correct content category. However, it took them longer to decide where to click than with the original version. The second prototype did not have this problem and outperformed the original—participants registered more successful clicks that would take them to the correct category, and had faster reaction times overall.
This confirmed Annemarie’s expectations: “The positioning of the banner and the tabs made the first prototype confusing. The outcome of this test made the choice for the second prototype easy. This design is finalized and live on the current website. Web analytics show that more people find their way to the extensions, mostly through the added tab navigation”.
NU.nl quickly implemented a great improvement to their website. For the new design, an initial prototype was tested, revised, and tested again. Both qualitative interviews were combined with quantitative findings with Usabilla to ensure a user centered final result. Does this reflect your design process, or would you like to follow similar steps for your next redesign or iteration? Or do you prefer another route? In any case, please share your findings in the comments or through Twitter. We love real world examples like this one and welcome more of these with open arms.