Organizing Mobile

When it comes to organizing the content and actions on mobile, solid information architecture principles like clear labeling, balanced breadth and depth, and appropriate mental models remain important. But the organization of mobile web experiences also needs to:

Align with how people use their mobile devices and why.
Emphasize content over navigation.
Provide relevant options for exploration and pivoting.
Maintain clarity and focus.
Align with mobile behaviors

In the previous part, we talked about the constraints and capabilities that make designing for mobile unique. Similarly, the desktop web also has a set of limitations and possibilities that make it distinct. So simply porting over what worked for you on the desktop to mobile often doesn’t make sense. Instead, you need to think about what mobile is uniquely good at and align it with the needs of your customers.

Looking at this intersection at a high level can illuminate how people are typically using their mobile devices and why. In his book Tapworthy, author Josh Clark focused on three critical mobile behaviors: micro-tasking, “I’m local,” and “I’m bored.” These align pretty well with Google’s breakdown of mobile users into three behavioral groups: urgent now, repetitive now, and bored now. Regardless of how you chose to label these behaviors, mobile usage generally consists of a couple of interaction types:

Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Because they directly align with why people pull out their mobile devices, these behaviors often determine how your mobile experience can be structured and organized to meet people’s needs. For example, the Flickr photo sharing mobile web experience has four primary actions. Recent activity and uploads from your contacts let people check-in on what’s new with their friends and photos; today’s interestingness and photos taken nearby give people a way to fill idle time by looking at great pictures

Similarly, the Basecamp project management mobile web experience emphasizes the ability to check-in, edit, and create new messages, to-dos, and more. While people’s reasons for using Flickr and Basecamp are different, both sites have thought through how they’ll be used on mobile and adjusted their organization accordingly.

Aligning with mobile behaviors also naturally aligns your website with real-world needs. Since a mobile experience can be accessed anywhere and everywhere, you need to think through how it can be useful to people wherever they may be. That means lots of real-world use cases that ground your site’s organization in what people actually want to do. I recently found a great example of this in action. On the Mobile in Higher Ed blog, Dave Olsen responded to an xkcd comic with:

…as I was looking at the right side of the Venn diagram I thought, “That looks like a lot of the current and planned content for our mobile site.” […] removing unnecessary fluff and cruft to fit in the constraints of both the device real estate as well as network limitations, helps craft a better and more useful user experience.

I couldn’t have said it better myself.

Content over navigation

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.

Too many mobile web experiences (like the Flickr and Basecamp examples we just looked at) start the conversation off with a list of navigation options instead of content. Time is often precious on mobile and downloads can cost money, so get people to what they came for as soon as you can.

The YouTube and ESPN mobile web experiences do just that. A simple header tells you whose site you are on and relegates navigation options to a single action. The rest of the page is filled with timely content to check-in on (ESPN) and popular time killers to explore

Pivot and explore

But wait—if content always takes precedence over navigation, how can I find my way around mobile web experiences? Don’t we need a way to navigate and discover what’s available? Of course, but allowing people to explore and pivot to relevant content doesn’t have to mean piles of navigation bars that bury content.

For example, it’s great that Facebook puts relevant content I can frequently check-in on front and center in their mobile web experience; but because of the three navigation bars at the top of their pages, I can only see one update on my screen. The Google Finance mobile web experience also has relevant, timely content—but it’s sandwiched below five navigation bars. That’s a lot of precious screen space spent on navigation options people might not need—space that could have been devoted to useful content instead

Facebook recently redesigned their mobile web experience and actually reduced the number of navigation options. If you don’t count the Top News and Most Recent filters on their news feed, they cut the number of navigation choices in half (from ten to five). That’s a pretty good start!