iPhone’s cinematic UI

July 03, 2007

I had the chance to play with an iPhone earlier today. Last week a bunch of us at Laszlo geeked out over lunch and watched the movie, but it is qualitatively different to interact with it for real. Way before I joined the company, the folks at Laszlo coined the term “cinematic user experience” to describe the kind of UI enabled by OpenLaszlo, including animated transitions and other innovative effects that contribute to a more usable, more learnable application. It has been great to see that this seems to be an industry trend with innovations in latest Apple and Window operating systems releases, as well as some desktop apps, and now the iPhone.

iPhone does a nice job with animated transitions: smooth scaling in the web browser, transitions from the menu to specific application, deleting notes, etc. The ability to rotate the phone and see the visual adapt to landscape or portrait is wonderful in the web browser, although it was a little disappointing that the ability to rotate was not consistent across the apps. The calculator felt broken and the music player had a non-transformative snap to a completely different UI, which was a bit disconcerting.

I was very impressed with the responsiveness of the panning and scrolling. I have always felt that performance is a design element. This is dramatic in a device with a touch screen. The fact that the interface is so responsive and the display so crisp removes the need for any additional feedback other than the direct response of the action. There is also a wonderful nuance to how the panning/scrolling is implemented. When you go too far (past the edge of the content) there is a little bounce animation, which tells you that it isn’t broken, but that you’ve just reached the edge. This is especially important in a device with novel interaction to reassure you that you are doing the right thing, but you have just reached the edge of the data. I love the take on this from Creating Passionate Users who describes it as a dog ears experience referring to the fluidity and follow-through of real life, where when the dog shakes, the ears follow the head! I didn’t witness it myself, but I was interested to read from Daring Fireball that the iPhone prioritizes feel over look, “if the iPhone can’t keep up and render what you’re dragging in real-time, it won’t even try, and you get a checkerboard pattern reminiscent of a transparent Photoshop layer until it catches up (typically, an instant later).”

For me, a phone has always been for making phone calls. I don’t own an iPod and I’ve always said that I would buy a PDA when they offer one with the resolution and battery life of paper, but I must admit that this latest gadget causes me to reconsider.

I would love to know the people behind the design. This stuff doesn’t happen automatically. Are any of the UI design team or engineers who wrote the code blogging about it? Creating great user experiences is all about getting the details right, I’d love to hear some of the stories from the folks who made it happen.

---