My new project: Tact, a simple chat app.

Mint for iPad navigation foundations

November 10, 2011

My big project at Mint, the iPad version, launched a few weeks ago.

I had the privilege of working with a great team of designers, engineers, QA and product people, and all the other functions that it takes to bring a product to the market.

I was the lead interaction designer. For better or worse, I’m responsible for some of the core decisions about the nature of the product, how it looks and works. The two main questions that I had to answer before drowning in the details were:

The second question, to me, was the more interesting one, and it was important to separate out the two. Regardless of what features got included in the app, it was important to design a solid scaffolding and framework upon which to hang the individual features and tie them together in a meaningful way. I wanted to make sure that I don’t “design myself into a corner” and make decisions that might pay off in the short-term, perhaps making the app easier to build, but cause long-term damage by limiting, say, the navigation depth, openness or affordances.

Apple and iOS don’t provide a whole lot of guidance to design deep app containers. There are useful technical primitives like tab bar controller, navigation controller and table view, and great examples of bundled apps like Safari, Mail and Photos. Overall though, there is no exhaustive list of what are the app navigation structures. I think rightly so, as the app landscape is still very new and rapidly evolving, and both Apple and others are still figuring it out.

I surveyed all the great iPad and iPhone apps out there and made this list for myself of navigation patterns.

List/detail. One of the most versatile patterns. You have a list of items, and can then drill down. Mail is a great example—you first select a mailbox, then a mail message, and then see all the details about that message.

Magazine. This is a great form factor for actual magazines and ebooks. You have a fixed page or section structure, and can easily navigate between the sections/articles, and read each item to great detail. As shown by Al Gore’s “Our Choice” app, there can be great interactivity and information graphics presented in that context, while still sticking to the fixed navigation structure.

Browser. A typical web page can contain any number of links in any format, which bring up new pages, and the cycle continues endlessly. At any point, you can go back any number of steps in the history, and you can set your home page to be anything you like. You can take detours through search and jump into a completely different place on the interwebs.

Tabs. All the important app features are represented in the top level as equal-weight tabs, and you can get into interesting arguments like “what’s the order of tabs, i.e which features come before other features.” Mint’s web product, and many other financial products on both the web and devices follow this pattern.

Widgets. All the app features can be represented as a full page, but also as mini-containers in the form of widgets, which represent key information in compact format. The user can rearrange the widgets as they like. I can’t think of a good app example, but the iOS Springboard is an “app” where the actual apps are represented as widgets (icons) that you can further organize into folders, that can carry extra info about the app state such as badges, and that the user can rearrange across multiple pages. Android has the widgets concept developed much further (on home screens, perhaps not so much in the context of individual apps), but somehow the implementation on Android does not feel super engaging. Windows 8 brings some new thinking into the widgets space.

Now, I carefully crafted this list, and you can see that Mint for iPad actually contains elements of all of them. As for the toplevel container approach, I would call Mint’s iPad paradigm “freeform drilldown with fixed home.”

The key properties of this navigation scheme are:

Pages as key units of the app. The iOS HIG somewhat discourages full-page transitions on iPad, and individual features can indeed stay within the page and offer richness and interactivity without leaving the current view. But for major feature transitions, I found the page as a separate unit to be quite useful.

A fixed home view. The first view that you see in Mint for iPad, and one you can always come back to, is what we call Overview (even though, interestingly, we never verbalize it as such in the app.) It contains key pieces of info that you can tap on to drill down further. It is sort of “panic mode”—whenever you get lost in the app, you can always come back to Overview and start all over.

Freeform linking. Any feature of app can invoke any other feature, which just gets pushed as a new page.

Easy navigation. Notable apps like Facebook and Twitter also use the freeform drilldown paradigm, but the UI is somewhat different. For the Mint app, ease-of-use, discoverability and fun were equally important to me. So if you are on a page in Mint, you can go back in three ways:

Global spine. Regardless of where you are, you can go back to previous page or overview, do a search, enter a transaction, or change app settings. The page layouts for Mint’s different features on iPad are quite dissimilar: the transaction list looks very different from, say, a chart of your spending across categories. The global spine provides familiarity and grounding across the transitions. It seems to be a pattern making its way into many apps: this week’s iPad app of the week, Yahoo Livestand, has a spine, complete with exactly the same back button approach as Mint. See how both in Yahoo and Mint, the touch target is bigger than the actual graphic. Although the implementation is different, the spine pattern feels in spirit to be quite familiar to Android Honeycomb’s “action bar.”

Initial feedback to the product and navigation scheme has been pretty good. I also know there’s a few things that I didn’t quite get right, and there are some other things that didn’t make it to the first version. I don’t expect to change the navigation fundamentals, but some tweaking may happen.