iPad devsugar: Letting go of iPhone visual design patterns

Take the traditional UINavigationController class for example. Its entire role on the iPhone is to provide the same kind of tree view used in Mac OS X's Finder windows (View > As Columns, Command-3). The animations as you select and push view controllers and the back button are both there because you can't reasonably see an entire tree structure at once, in columns, the way you do on a Mac.
On an iPad, the rules change. You have enough space to reasonably present that kind of tree based view, whether you use two columns, or three columns, or more. An iPhone-style view controller begins to make less sense, unless it is embedded into a larger visual design where it needs to conserve space on that layout.
Another iPhone space conservation approach is the tab bar. The UITabBarController class allows you to see up to five tabs at once, each tab hosting a separate view. Applications from YouTube to the iPod music player use this class (and its built in "More.." and customization features) to expand an application into multiple view modes. Users can flip between tabs by manipulating the buttons at the bottom of the screen.
On the iPad, with its extra space, tabs may not be needed at all. Instead of a settings tab, for example, you might use some sort of pop-up element or flip part (instead of all) of your interface to reveal details. With the iPad, you can present more complicated interfaces, although I'm sure both Apple and your users would appreciate if they are well designed and not cluttered. Things that needed to be separated due to space limitations on the iPhone might just work together on a single presentation on the iPad.
There's another visual design consequence for working on the iPad that stands out from Steve Jobs' speech last Wednesday. Over and over, he repeated the mantra: "Any orientation. Landscape or portrait or portrait or landscape," as he turned the iPad around and around in his hands. Apple wants you design your applications to work, regardless of how the user picks up the physical device. The interface should always "point up".
So what does this mean to you as a developer? First of all, it's time to give up what I'll call the "Cover Flow mentality". On the iPhone, when you flip the iPod music application to its side, the presentation changes. It goes from a standard UITableView navigation controller to a Cover Flow view, where you can select an album and browse through it. The iPad kills this design convention. When every way is up, every interface must be consistent. (Update: Apple software demonstrated at the media event shows differences between landscape and portrait presentations.) Sure, you can still use Cover Flow but it's time to switch to that view by introducing a button or gesture rather than by reorienting the device.
It also means that it's time to really start paying attention to those UIView resizing and stretching rules that are presented both at the class level and in Interface Builder. Uncle Steve wants your application to forget about orientation and the best way to do that is to ensure that the geometry stays consistent regardless of device orientation. Your app needs to work consistently whether the horizontal space offers 1024 pixels or only 768.
The key to today's lesson is that you need to step back from your ingrained iPhone visual design patterns. Re-evaluate how you might need to adapt your applications to the new iPad design rules. Sure, most App Store apps will work out of the box on the iPad -- but does that mean you won't want to make your application work better on the iPad? Maybe there are some iPhone habits and design elements that it's time to move away from.
Thanks Emanuele Vulcano, Scott Lawrence, ashH, sneakiness, raingrove
Share
The new iPad has lots of space. The screen offers 1024x768 pixels. That's way more room to work with than the iPhone gave you. And because...
Add a Comment
Out of the 128 apps on my iPhone, here are the top 10 Apps that I REALLY want for iPad:
- Labyrinth 2
- Photoshop
- Geared
- ReelDirector (+1)
- Quickoffice
- eBay
- Craigspro+
- Words with Friends (+1)
- Chopper
- Charadium (Pictionary app +1)
Oops - disregard ReelDirector since iPad has no vidcam. In it's place I'll substitute:
Pastebot
i'm still feeling bummed about my future ipad. my current thoughts, on this most poetic of circumstances - http://web-poet.com/2010/02/01/ipad/
February 01 2010 at 7:43 PM Report abuse Permalink rate up rate down ReplyI hate to bite on the troll bait, but that eros tablet isn't what I'd show someone in defense of a Win > Mac argument. It didn't present a usable interface until almost 1:05 after it was turned on. Once it did come on, the UI elements were ridiculously, painfully small. In lieu of continuing I'll just say I couldn't stomach more than 4:00 of that video... it's just dumb. garysturn, if you honestly think that tablet is doing "everything that Steve Jobs did on the iPad", then please, for the sake of the safety of others around you, do not ever operate a motor-vehicle or a microwave oven. If you DO think it's "great", then I'd recommend finding a different (better) example of a Win7 device to show off. There are plenty.
February 01 2010 at 7:43 PM Report abuse Permalink rate up rate down ReplyIt's still recommended to have different UIs based on orientation, case example being Mail:
* When in landscape I can view my mail and scroll the list of messages at the same time
* When in portrait I'm more focussed, everything else just goes away (although still available via pop-ups), and I just have the email with no distractions
This was a selling point in the keynote, and I agree that it's still important to allow this.
"When every way is up, every interface must be the same. Sure, you can still use Cover Flow but it's time to switch to that view by introducing a button or gesture rather than by reorienting the device."
I beg to disagree. You saw an example of why your view is incorrect in the keynote presentation iself. Steve Jobs was demonstrating the mail application, and when he rotated from portrait to landscape, the view of the mail app changed, from displaying a list of mail items, to viewing the content of a specific item. Effective, and appropriate.
Having said that, there many be many cases where a layout show simply re-flow when you change orientation, in the same way that a document reflows when you pinch or zoom.
Right? I don't know how this logic escaped the writer. I think EVERY app Apple showed had a different UI depending on orientation, save for the photo app. iWork, Calendar, Mail, iTunes, etc. I'm not sure why, but TUAW has been getting... bad lately. It's getting more and more like Engadget's cousin-once-removed's site, rather than their sister site.
February 02 2010 at 12:28 AM Report abuse Permalink rate up rate down ReplyThe interfaces in all of those apps demonstrated *are* the same in both orientations, except in landscape orientation there is a column to the left, and in portrait orientation that column is moved to a popover called up by a button in the upper left. So while it may visually look slightly different, it is, for all intents and purposes, the same interface. It doesn't change any conventions of the interface, the way that CoverFlow does in the iPod app on the iPhone/iPod touch.
February 02 2010 at 9:58 AM Report abuse Permalink rate up rate down ReplyI think it would be wise to create Apps that would take advantage of any screen size regardless what you do with portrait or landscape views. I don't think this will be the only Apple device running on this operating system and programming to a specific screen size would mean rewriting your app every time Apple upgrades the screen or adds a new product. I would not be surprised if the next iPhone has a higher resolution screen than the current model. It should come out this summer. And there are several articles stating that Apple is working on a 22" touch screen computer. Don't you think it will also be iPhone OS compatible if it is a touch screen. People would love to get a iMac which runs MAC OS and iPhone OS both on the same machine.
February 01 2010 at 7:03 PM Report abuse Permalink rate up rate down ReplyDoesn't Mail's display change when viewed vertically? (Change to a vertical orientation to focus on a single message). I understand that the approach of "one interface regardless of orientation" frequently makes sense with this much real-estate, but I'm not convinced that that was intended to be a take-away message from the presentation.
February 01 2010 at 6:47 PM Report abuse Permalink rate up rate down ReplyThere is a great video of a Windows 7 tablet doing everything that Steve Jobs did on the iPad over at Egadget. Its the eros tablet.
http://www.engadget.com/2010/02/01/eros-tablet-video-is-a-lesson-in-why-windows-7-isnt-strictly-me/
Wow, did you actually read the commentary OR watch the video?
February 01 2010 at 7:50 PM Report abuse Permalink rate up rate down ReplyThis video is so poignantly revealing of WHY the iPad will be a HUGE SUCCESS and will truly change the way people use "mobile" computers.
It's 100% the Operating System and the User Interface.
Fast forward to Jan 2012
If Windows and Linux do not begin a complete re-write, from the ground-up, of what a "native touch operating system" IS (ex. iPhone OS), Apple will have a five year head-start on All other operating systems (as it pertains to "a true, intuitive, mature, simple, yet Powerful touch UI). I am no genius but I'll bet my house that what you see in that video will NEVER EVER succeed "touch-wise"....EVER!!
Android looks like it might be the only remaining competitor to Apple, OS-wise, but which company is even setup to deliver the the complete product?
I like that "Cover Flow Mentality". The ability to alter the function of the device by reorienting it was one of the breakthroughs of the iPhone interface, and it would be shame to jettison it just because Steve was spinning Safari around on stage the other day (to compensate for the lack of Flash animation? ;) ).
For a web browser, rotating and resizing/reflowing the page to fit the new orientation makes sense. But for a video-playing app, rotating and scaling a widescreen movie to fit a vertical iPad would just be stupid; that app should have a fixed orientation (except maybe flipping over if it's upside-down). For other apps, the ability to instantly switch modes back and forth by turning the device (e.g. from HTML code view to browser preview, from street view to map view, or yes: from list to cover-flow), can be very handy, especially when on-screen gestures are already dedicated to other functions.
The size of the iPad makes some of iPhone UI innovations unnecessary, but "you don't need to do it that way" is no reason to remove a useful UI option from the toolkit. I encourage developers to use it if it suits their project, and let their users decide whether they like it, not Steve.
Damn. The more I see that thing the more I wanna go buy one on launch day. I'll likely wait until the summer though, it will be my birthday present to myself.
February 01 2010 at 6:25 PM Report abuse Permalink rate up rate down ReplyHot Apps on TUAW
Deals of the Day
more deals- Altec Lansing Octiv Duo iDock for $48 + free shipping
- Used Apple iMac 17" Core 2 Duo 1.83GHz for $430 + $28 s&h
- Lounge Deluxe Stand for iPhone / iPod touch for $28 + $8 s&h
- Brookstone Surround-Sound Earbuds for $14 + $7 s&h
- Refurbished Skullcandy Tokidoki Smokin' Buds Mic'd Headset for $5 + $2 s&h
- Stitchway Backup Battery for iPod / iPhone for $5 + free shipping
Software Updates
more updates- EFI Firmware Update brings Lion Internet Recovery to 2010-model Macs
- OS X Lion 10.7.3 released with Safari 5.1.3, Wi-Fi bug fix
- Aperture updated to 3.2.2, addresses Photo Stream issue
- Apple updates Keynote to address Lion issues
- Google Search app gets new look on iPad
- Apple releases Apple TV Software Update 4.4.3



19 Comments