Beyond the UISplitViewController

What is a UISplitViewController?
This view controller is only available on the iPad. In landscape mode, it is the reunion of two views: the left one often called the master view and the right one often called the detail or subordinate view. The relationship between the two is entirely done in code. In portrait mode, the master view becomes a pop over.

This view controller was created to take advantage of the iPad big screen compared to the iPhone. I guess it was created with the navigation interface in mind: the master - detail navigation found on the iPhone. The Split View Controller in landscape mode does not always produce visually great displays: cells on the subordinated view look often over sized horizontally.  This can be looked as "space filling" by a designer.  But did Apple go far enough? Looking at design trends since the iPad came in, I think the answer to this question is no. 

Table cells on the right look a bit over stretched

The Twitter client case

When Twitter released their client for the iPad, we all discovered a very special designed application. As you know, the official Twitter client on the iPad employs a screen that can be split in three different views. On the left, the usual master view is followed be what I would call the mid-view that displays the content of a tweet message and on the right the more detailed view which often is the content of a followed URL. I would call this screen organization the Master/Detail/More model.

Twitter pioneered the use of the Master/Detail/More display model

The case of Reeder for iPad

Reeder is one of my favourite iPad app. In Reeder, the left most view is a toolbar. This is a variation of the Master/Detail/More model. 

Remember The Milk case

Recently the web service Remember The Milk came out with their wonderful iPad client. The first thing I noticed about their application was the use of a similar screen organization like the Twitter client. In some situations, the application presents a forth view which is shown on the following screen shot.

In landscape orientation, Remember The Milk client will present of to four views at the same time

In portrait orientation, Remember The Milk client keeps the four view in place while keeping focus on the forth view

A closer look to the Master/Detail/More model

Here is a more complete and formal description of this new visual model. The master part display the root of the data model. The middle part is related to the selected object in the master view. The third part that I intentionally call "More" is very application and context specific. But in general it contains the content of an object selected in the middle view. By selected I mean an sub-object displayed in a cell-based organization (i.e an URL most of the time). There can be more than one "More" view (like in Remember The Milk). The major characteristics of this new content organization are:

1. The two right views are movable to allow the user to adjust how much information to display in the Mode part. 
2. The middle view can be tossed on the right in order to make the More view less apparent or even disappear. This is how the Twitter client behave.
3. The More part can take up to two third of the screen in landscape mode in order to maximize content display without completely losing track of the relationship to the underlying data model in effect.
4. In portrait mode, the More view can disappear to make more room available to the middle view.
5. There is no title bar because it wouldn't make any sense.
6. The left most view can be a toolbar in some cases (like in Reeder).

Conclusion

Apple came out with the split view on the iPad but they did not go as far as they could in providing ways to display more content on the iPad while keeping is elegant. Developers came out with solutions that are both visually nice while being a very effective model of user interaction. This what I call the Master/Detail/More model. Twitter was the first to innovate, followed by Reeder. Then came Remember The Milk implementation. All of them are example of innovation while staying on the side of simplicity and nice design. Bravo.

Do you have other application examples that uses the Master/Detail/More model? Post them in this post comment section!