January 1, 2016 - No Comments!

Behind the Navigation Structure in Mail Pilot 2

One of the first major differences you’ll notice in Mail Pilot 2 is the navigation structure. The navigation structure is one of the first things we designed. On a mobile application, we feel that the navigation structure is the foundation of any app, and if it’s not right, nothing else will be. When we’re using software, it is important that we know where we are, where to go, and how to get there.

In a navigation structure for a typical app, you get something like a decision tree.

0*LCAFHTHyIah7HpZl

The inbox is what we want to see when we launch the app, but that means that when we launch the app, there is already a back button, even though we haven’t gone forward at all yet.

0*OVxLTRUEsyeLMU1O

More problems appear when you navigate to any other folder. It requires more levels of hierarchy than the mobile can handle, more than are represented here, so we end up tapping around way too much just to get back to the inbox.

Navigation is cumbersome, and communication from the interface breaks down. On the mobile, we live in the inbox. We primarily triage. So when I launch the app, I want to start in the inbox. But we need a back button to the list of accounts; we’re launching into the middle of a navigation stack. So when we first open it, we already have a back button, even though we haven’t gone forward at all.

Then, once you navigate to another folder, you usually just want to go back to the inbox. But in this navigation structure, that’s not easy. It requires far too many interactions just to go back to the inbox.

In Mail Pilot, we create a z-axis for the navigation structure. Instead of having to navigate something akin to a decision tree, you can simply slide the inbox to the bottom of the screen to access anything else. And when you slide anything else to close it, you’re right back at the inbox.

0*c6w75EI6uDfYUDAf-2

In Mail Pilot 2, the navigation structure uses the z-axis to allow you to simply slide the inbox down to open anything else, and to slide anything else off the screen revealing the inbox.

A typical mail app could take 9 taps to get from the inbox to an archived message and back. (Inbox > Back to accounts list > Open an account > Open a folder > Open a thread > Open a specific message > Back to thread > Back to folder > Back to accounts list > Open unified inbox)

In Mail Pilot, it takes 4. Or rather, it takes 2 taps and two swipes. (Slide to backscreen > Select category > Open message > Slide inbox back up).

This is the perfect design for the mobile because we spend most of our email time on the mobile in triage: we’re in our inbox most of the time, but when we’re not, we usually just want to go back to it. So in Mail Pilot, it takes one swipe to get to everything that’s not in the inbox, and one swipe to get back to the inbox, no matter where you are.

In the message lists, there is a friendly down arrow to remind you that to close the folder, you can slide it down, but you can actually use this gesture no matter where you are — another folder, a message, the compose window, etc. In fact, in compose, you use this gesture to instantly save a draft of the message you’re typing and close the window, returning to the inbox.

Learn to make world-class products that sell themselves.

Get actionable insights on product design and product ideation each Thursday morning, so you can become a pro at creating products people will love.

Powered by ConvertKit

Get new articles before they're published.

Get actionable insights on product design and product ideation each Thursday morning, so you can become a pro at creating products people will love.

Powered by ConvertKit

Published by: Alex Obenauer in Product Design

Leave a Reply