1

I'm researching Material Design in how it's related to layer based navigation.

Navigational directions Based on your app’s information architecture, a user can move in one of three navigational directions:

Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.

Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.

Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.

Does anyone know of any online examples of a mobile and desktop app that demonstrates this?

We see it in mobile app design everywhere, that's prolific. But how those layers translate between mobile to desktop layout is what I cannot find examples of.

Update:
I thought I'd add the Book Lover App by Hoang Nguyen as a mobile-based example. enter image description here

You can see that these navigations are layers, where the back arrow is "upward" navigation to the page behind this book details layer. With the advent of PWAs we're going to see a LOT more of this in non-native design.

So how does this example translate to desktop size screens?

Update 2
I'm starting to believe that layered navigation, as it is explained in Google's spec, is meant for native mobile and installable web apps where the browser's back/forward buttons no longer exist and we developers are responsible for integrating them.

  • Interesting question, but it will be really hard to find one mainly because a desktop web is designed with domains and sub-domains in mind. The layered navigation will not provide the advantage of sub-domains and therefore is a little limited in terms of url navigation. – Ren Jul 9 at 9:25
  • 1
    Probably this Financial Times site app.ft.com/content/… – Ren Jul 9 at 9:33
1

This could be broken up into two pages. A category page for the book listings and a single page view for the book details with a back button at the top left.

You could maintain the category scrolling component as a carousel at the bottom/top of the details view for quick access to another book. This could be used to show related books or books customers also bought.

A good example of the two-page approach would be iTunes Charts page for books

Category View

enter image description here

Details View

enter image description here

Another option could be to use an accordion (https://jqueryui.com/accordion/) to reveal the book content if you want to keep everything on the same page.

A good example of this type of paradigm on Desktop would be Netflix.

Category View

enter image description here

Details View

enter image description here

  • Ok, so you think we would keep the SPA feel on desktop by maintaining the reverse navigation button when the user has entered the book details view? Basically no change between mobile and desktop is how I'm understanding this. – Ben Racicot Jul 10 at 15:29
  • Correct. You should try and keep the experiences as similar as possible so that users don't have to relearn how to navigate the content of your site. – David Saunders Jul 15 at 8:47
1

Navigation is normally designed based on the information architecture of your application, so I think you'll find that there are plenty of examples used in desktop applications due to the more complex information hierarchy afforded by the different types of interactions possible (e.g. mouse, touch, keyboard) and the larger screen space to cater for the interface design.

The most common example are transaction based applications that have either a classic 'wizard' style of forward and reverse navigation (through defined steps in a process) as well as the ability to jump out of the flow (by saving or cancelling) and into a different process (which is your lateral navigation).

enter image description here

This would be similar to web based applications that have e-commerce or shopping cart functionalities that people are familiar with on both mobile and desktop applications (which have similar look and feel).

enter image description here

Complex desk applications such as those used in specialist fields (UX design also being one of them) will have quite specialized workflow that also incorporate these types of navigation patterns, such as design tools that work by allowing you to select a particular feature from a 'toolbar' style menu panel in which you can navigate through hierarchies (usually by hovering or using shortcut keys) and forward or reverse in the menu the same way.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.