Shifting Navigation — Applying Mobile Design Practices to Desktop Experiences


By: Cameron Ley

Clear, intuitive navigation is critical for a good user experience. The main job of any global navigation system is to provide users with the ability to comprehend where they are in an app or site, where they can go, and how they can navigate elsewhere. In the past, designers and product managers used an “everything, everywhere” approach to accomplish these objectives. Active states, secondary navigation menus, and expansive “mega menus” were often used to position users in the site and expose all possible paths through the experience.

“Mega menu” example Home Depot: http://www.homedepot.com

However, people are relying less and less on these tools, and instead consumers are expected to interact with the content itself. The explosive growth of mobile apps and touch-first design languages have brought to the forefront contextually aware navigation systems: ones that change and adapt to where a user is in the experience, and that surface information that users will likely need at that point to succeed.

Let’s take a look at one such example, Air BnB’s native iOS application. Air BnB’s use cases are rich — those looking for a place to stay are able to search for and discover new locations, browse individual listings, and view details for each listing. They can save and favorite listings for later, share their favourite locations with friends, communicate with hosts, and last but not least, book accommodations.

When taken as a whole, these use cases look quite daunting. Searching for listings alone requires several features and modes. If not designed thoughtfully, features including browsing by list view or map view, comparing two or more properties, and filtering a listing by a broad range of criteria can feel cumbersome.

Air BnB’s solution was to create a simple goal orientated menu, and to only surface relevant features when it makes sense for the user. This is done based on the where the user is in the experience. AirBnB relies less on a global menu to facilitate navigation, and instead invites users to define the task they want to accomplish. Following this, the experience is tailored to meet these user’s needs. The result is a smooth, smart experience that responds to the user’s presumed intent.

My objective in this post is to explain how applying this same philosophy to conventional desktop experiences can make discovering content more natural. It can also make completing actions feel easier, and can better motivate users down a desirable path. Overall, these improvements will create a more intuitive and fluid user experience.

Global navigation systems ground users throughout their experience. They provide a clear organizing scheme and allow users to align their mental model with the opinion of the system. Static global navigation puts the onus on the user to parse the whole system at once and to figure out where they sit in the architecture of the site or app. Only then can users reflect on their own needs and choose the best path forward.

Toronto Star: http://www.thestar.com/

Compare this to The New York Times digital property, where the global navigation morphs several times to better support users depending on where they are in the experience. How the navigation is presented differs based on whether users are on the home page, a category page, or an article page, and even depending on whether the user is at the top of an article, or below the fold.

The New York Times: http://www.nytimes.com/

The New York Times recognizes where a user is, and what they are doing, and reprioritizes the navigation to suggest next steps when in this context. Looking at the article page specifically, the header contains a list of related articles from the same section when at the top of the page. This makes sense, as they want users to visually browse the section. When a user scrolls below the fold it assumes they are engaged with the article and then it shifts focus to provide details on what it is they are reading to suggest they share it.

Designing global navigation this way allows The New York Times to situate their users in the site architecture with less effort, and maintain focus on content. It does not distract users when they are reading an article, it “quiets down” and lets the reader enjoy the article in peace. By showing less, it affords an opportunity to suggest a series of next steps for users and keeps them engaged rather than forcing them to return to a 50,000 ft. view just to dive back into the weeds.

The constraints of mobile devices have caused designers and product managers to find creative solutions to new design problems. As mobile design matures, there are many techniques and solutions that can be applied to the desktop. The mindful design of a global navigation system is one of them. Instead of showing “everything, everywhere”, time should be taken to better define how the system expects users to navigate content, and to develop states of a global navigation to best suit users depending on their context. The result is a better rapport between the system and the user, and an improved overall experience.

Cameron Ley is the Senior Manager of User Experience at GALE. With 8 years of experience designing web and software interfaces, he brings an expertise in cross platform, multi-device experience design. He has worked on brands including FIAT Chrysler, BMO, CitiBank, Chapters/Indigo, and Microsoft.

Interested in working at GALE? We’re hiring. Check out our job openings here!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.