tom haynes

Vertical overlap

I’ve recently noticed a new design pattern appearing in mobile applications, and I haven’t seen anyone write about it yet. That said, I don’t really know it would be called so I can’t search to make sure. While all of these examples are slightly different, they all have one thing in common: overlapping content panes, used to convey hierarchy and provide a way of navigating it. For lack of a better name, I’ll call this the Stacked Hierarchy pattern.

The new Gmail and Facebook apps use a navigation that hides behind the main content, and can be summoned by a tap in the upper left — on a “Menu” button and row of lines icon, respectively — or by dragging the content out of the way using the menu bar.

Facebook’s also serves a place to list search terms (Gmail’s search is included in the main interface).

Facebook on iPhoneGmail on iPhone

Another place I’ve seen this stacked hierarchy is in Asana’s HTML5 mobile app, Here there are three levels of hierarchy, and the main menu is always visible, even if only slightly. There’s no dragging here (probably partly because it’s a web app living in Safari) but the cards do slide left and right, strengthening the sense of overlap.

Asana on iPhone

I also found some screenshots (on Behance) of a Russian application called Beeline that also appears to be using this strategy.

Beeline on iPhone

Update (9/20) Some readers told me about Twitter’s iPad app, which was apparently the first to implement the pattern (in both portrait and landscape views):

Twitter on iPad

At first this stacking pattern struck me as weird because all of these screens are more constrained horizontally than they are vertically, so a smallish sliver of vertical content is actually quite a lot of screen real estate. This doesn’t seem to be a problem, however. Facebook doesn’t need the entire screen width for navigation, and Asana’s task card looks fine with a little less space on the left.

Lastly, the fact that these interfaces use card-like is vaguely reminiscent of Palm OS, except Palm only uses cards to represent entire applications. The hint of off-screen (or “teaser”) content also reminds me of the Windows Phone 7 UI, except I don’t believe Windows uses it for hierarchy.

Are there other examples out there? Has anyone else written about this or given it a name? Let me know.

I’m interested in seeing how this pattern evolves over time.