Lars Damgaard
strategic user experience designer
December 6th 2012

Are mobile users less interested in music, tennis and books?

Navigation on websites that have lots of content is tricky in the era of small screens. Proven design patterns from the old desktop world that we usually rely on in order to organize content, do not work very well in smaller contexts.

However, user experience designers tend to agree that content is more important than navigation when working on small screens:

As a general rule, content takes precedence over navigation on mobile. Whether people are checking on frequently updated data like stocks, news, or scores; looking up local information; or finding their way to articles through search or communication tools—they want immediate answers to their needs and not your site map.

Luke Wroblewski

This seems reasonable enough at first sight. Lets not waste and pollute the screen with lots of navigation if users just want to read content.

Full mobile content and simple navigation: a paradox

At the same time, some people argue that we should not fool ourselves and think that mobile user behavior is much different than desktop user behavior. In the beginning of the mobile web this was a very prevalent way of thinking, mobile users “always on the go” being one of the main fallacies if you ask me.

But after all it turned out that mobile users were not all that exotic. They were just normal users looking at content on a smaller screen. People actually just want content regardless of the device they might be using in a particular moment. So we shouldn’t leave content out just because people have smaller screens. What matters is probably that content is presented in a way that feels natural and pleasant on the user’s device regardless of screen size.

At least for large, content heavy websites this introduces a paradox: how do we present full content without full navigation?

Hierarchical navigation on small screens

Most content heavy websites that want to avail their content on small screens have to think about ways of presenting a hierarchical navigation. In the desktop world this usually means providing a 1-n level navigation with a clear indication of the current position in the hierarchical content structure, which means that the user will know that they are reading an article about music, which is in the category of culture which is one of the main sections of the site. More often than not, this kind of navigation also have a clear visual hierarchy so that first level items are visually bigger than second or tertiary level items.

This is a proven design pattern that provides the user with a good overview of the site’s content and navigational logic and furthermore establishes a rather clear meta communication about the site’s genre: you know what kind of site you are visiting by skimming and recognizing the main sections.

On small screens this does not work very well. Like I mentioned in the beginning, things that can be done elegantly in a desktop environment suddenly feels cluttered on a small screen.

The aim of this post is not to provide a comprehensive list of mobile or responsive navigation patterns, nor is it to claim that multilevel navigation is not possible on small screens, because it surely is, especially if it is just a matter of drilling down to a certain category instead of displaying readable content along the way, which is what we will usually want to do at a news website.

Rather I just want to address the fact that two very large brands have recently handled this challenge in an interesting way.

Time Magazine and Mashable: leaving out secondary navigation

Time Magazine presented a responsive redesign some weeks ago and so did Mashable.com just a few days ago. Both designs are really, really good, so this post is not really a critique, but rather my curiosity about the fact that both designs share a radical design decision.

Time Magazine
In the desktop environment of Time.com that you see underneath, the user is provided with a classic 1-n hierarchical navigation with a clear visual hierarchy just like I described above, which means that the user knows that she’s currently on Time.com in a section called politics, free to choose the different subsections that are available under that section.

Time.com desktop version

 

Using a smaller screen, you will notice that the navigation has been tucked into the “sections” panel and once you tap it, it looks like the screen dump underneath.

 

To sum it up, Time.com does not display secondary navigation on small screens.

Mashable
Mashable uses a more experimental desktop navigation, using megadropdowns that contains the subsections (eg. film, gaming, music and sport) of the section being hovered (in this case entertainment).

 

Once you view Mashable.com on a small screen, you will notice that you can no longer access film, gaming, music and sport. At all. You can access the parent level entertainment through the three lines, but film, gaming, music and sport are gone.

When Mashable did their redesign I wrote about it on twitter, asking:

New responsive #mashable redesign looks good, but like other recent, major #rwd it leaves out secondary navigation on mobile. Why?

which @robynpeterson from Mashable responded to saying that basically they wanted something that was simple on a small screen and including secondary navigation felt like it would be too much, but that they would probably include it at some point.

In my view, he addresses something crucial: It’s difficult to achieve simplicity and provide secondary navigation at the same time when working on a small screen.

Bostonglobe.com includes secondary navigation

But it’s not impossible, because Bostonglobe.com, which was one of the early pioneers in responsive webdesign, actually manages to provide a local navigation rather elegantly and even though they do some weird things to the visual hierarchy (putting subsections and their local navigation physically above) on the page, it works really well.

Above is the section arts with a clear visual indication of a toggle menu that can be tapped and as you might expect, it shows you this:

Even though it messes up expectations of the visual hierarchy, it looks like a very elegant solution to me.

It would be very interesting to actually know the stats for small screens and the percent of users that tap on local navigation (if you are reading this and know someone who knows about such stats, please share this post with them) since this would allow us as UX designers to make qualified decisions on what I am going to discuss in the next and final section of this post.

Are mobile users really less interested in music, tennis and books than desktop users?

The underlying assumption for the Bostonglobe.com approach is that users will have the same behavior on small screens as they do on bigger screens. We don’t need to do anything differently in terms of content structure. We just need to make sure it feels good on the device being used.

The underlying assumption for the design decisions on Time.com and Mashable.com seems to be that as long as the toplevel sectional navigation provides the user with a relevant aggregate of content from that category, the local navigation in that section is not important. Which again reveals an assumption about mobile users having different needs than desktop users.

Or perhaps it just reveals the pragmatic design decision that simplicity is the most important thing when working on small screen, like @robynpeterson stated as Mashables reason for ruling local navigation out (this time around at least).

The paradox

However, this is the paradox I cannot really come to terms with. On the one hand there is some truth to the Time & Mashable design decisions, especially in terms of simplicity. But at the same time it feels a bit silly because everyone can agree that a user who is interested in music, tennis or books (topics that are typically placed under main categories such as culture and sports in this case) all of a sudden becomes less interested in these topics (or needs to access them less) because he or she is using a device with a smaller screen.

Obviously, this is not a matter of navigational design only. The way the front pages of the main sections are designed can increase or decrease the relevancy of these quarrels, but still there is a design problem to be solved: if we believe that mobile users want the same content regardless of the device they are currently on, then how do we best provide them with meaningful navigation that avails content in a way that does not clutter the interface?

To me it seems that we are still in a very interesting, but also very experimental phase where no good, rock solid design patterns for multilevel navigation on small screens have been established yet.

But as more and more content heavy sites are moving towards responsive design, it will be interesting to see how the challenges I have described above will be handled.

Thanks for reading.

Related to what you were just reading
June 3rd 2013

The ergonomics of the three line navigation pattern: left or right

Providing good, clean and simple navigation on small screens is still a big challenge for interaction designers, especially when working on large websites with complex content hierarchies.

I have discussed this topic earlier, but this…

Read more