iPad Nav Strategies for presenting deeper levels

Question

Does anyone have examples or suggestions of iPad/tablet interfaces that present more than a couple of levels of content? I'm struggling with how to properly present this information without either 2 back buttons being visible or some other UI clunkiness. Here's a rough structure of the data in SECTION B:

1. Section A
   • Flat Content
2. Section B
   • Subsection 2.1
     • Item 2.1.1
     • Item 2.1.2
     • Item 2.1.3
     • Item 2.1.4
     • Item 2.1.5
     • Item 2.1.6
   • Subsection 2.2
     • Item 2.2.1
     • Item 2.2.2
     • Item 2.2.3
     • Item 2.2.4
     • Item 2.2.5
     • Item 2.2.6
   • Subsection 2.3
     • Item 2.3.1
     • Item 2.3.2
     • Item 2.3.3
     • Item 2.3.4
     • Item 2.3.5
     • Item 2.3.6
3. Section C
   • Flat Content
4. Section D
   • Flat Content
5. Section E
   • Flat Content

So my assumption was I could use tabs to silo the high level sections, then use a right-side listview for the subsections similar to how the Facebook iPad app shows your friends on the right. Are there pitfalls I'm missing with this? Has anyone come across a different approach? Any help is greatly appreciated.

Answer 1

I think separating the 2 lists like that muddies the fact that they represent a hierarchy. That separation is unconventional and counterintuitive.

One possibility is to simply show the hierarchy (as you have at the top of your post) on the left. An optional feature would be to enable hiding/showing nodes of the hierarchy like some file browsers allow directories to be expanded/collapsed.

Any approach that uses 2 columns for the hierarchy is taking up valuable width, which might not be an issue in landscape orientation but might be in portrait.

Answer 2

I would suggest that you test this as a prototype to understand if the audience actually comprehend that the third level content exists. From case studies and discussions I've seen it's quite common particularly on tablet devices for hierarchical, tree based navigation such as this to be lost via the interface as the touch interaction model is quite different.

Take a look at this presentation that covers the thinking and changes made as a result of user testing carried out during the design of the week's ipad app