Sunday 26 June 2011

Tablet UI patterns - Split View


Pattern card

Problem
Tablets have much more screen real estate than their smartphone counter parts. To use the space well but still maintain consistency between the smartphone and tablet app a different design approach for showing information is needed.

Solution
Split View is a design approach that is often used on many desktop and web applications. Left side of the screen displays higher level categories and selecting one of them brings detailed info of the selection to the right side of the screen.



Consequences 
  1. Full utilisation of the screen
  2. Consistent information architecture between smartphone and tablet app

Implementation options
Apps use two different implementations of the Split View depending on their data structure.

The simpler approach is to have a constant left side that always shows the same data and only the right side changes based on the selection. This approach is good when the app only has two levels of data, for example, categories and content.

The more complex approach is when the data hierarchy is deeper than two levels. Let's look at minus app as an example. Here is the smartphone UI:


The table app shows contents of two smartphone views at the same time. When user navigates deeper into the data hierarchy the top most view is bumped out from the left and replaced by the content that previously was presented on the right.



Implementing Split View
Split view should be implemented using Android Fragments API. The API manages activity stack automatically and can be used on both smartphones and tablets.

For more info:


Split View gallery





4 comments:

  1. Hi, can you tell us how to implement a functionality such this http://rondroid.tumblr.com/post/44833373070/finding-ways-to-implement-a-splitview-with-divider ?

    ReplyDelete