Using Screen Estate

One of the more interesting UI features that the iPad exposes is its use of screen orientation. A good example of this is in the e-mail application. In Portrait mode your screen is long and narrow, so you see one e-mail. This is convenient for reading longer pieces of text:

However, when you’re more in a browsing mode “let’s see what e-mail we got today”, you flip the device around and get a view with a message list on the left and e-mail at the right:

If find this a rather fascinating user interface idea and wonder if we can not apply it more iPhone applications as well. There’s one iPhone application that I know of that really uses this, and that’s the Calculator application, which in portrait mode looks like this:

And when you flip it:

In the framework for the development of mobile web applications that I’m developing, I have support for orientation events. Here’s a simple todo application I’m working on (looks best on an iPhone or desktop webkit browser) that takes advantage of this feature. I’m not entirely sure this is the best way to use the feature, but it’s cool nonetheless. In portrait mode the application looks as follows:

You can swipe any of the items to show a delete button:

However, if you’re in a destructive mode you can also flip the device around and switch to edit mode, in which all items become immediately deletable:

(You can emulate this behavior in a desktop browser by resizing the window, making it wider than it is long or vice versa).

A user interface design concept to think about.