Skip to Content

iPad devsugar: Letting go of iPhone visual design patterns

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 of that room, it's time to re-think the way you designed iPhone applications. Things that worked well with the iPhone's limited space -- things that were meant to expand the device's virtual world beyond the screen's tiny reality -- are the things that you need to readdress and confront. Why keep using visual tricks when you can expand into real pixel space?

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

Categories

Software Apple Developer

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

*0 / 3000 Character Maximum

19 Comments

Filter by:
starq

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)

February 01 2010 at 7:54 PM Report abuse rate up rate down Reply
1 reply to starq's comment
starq

Oops - disregard ReelDirector since iPad has no vidcam. In it's place I'll substitute:

Pastebot

February 01 2010 at 8:04 PM Report abuse rate up rate down Reply
Web Laureate

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 rate up rate down Reply
mmp

I 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 rate up rate down Reply
tim.walters

It'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.

February 01 2010 at 7:16 PM Report abuse rate up rate down Reply
stewart

"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.

February 01 2010 at 7:15 PM Report abuse rate up rate down Reply
2 replies to stewart's comment
Byran

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 rate up rate down Reply
Flanagan

The 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 rate up rate down Reply
garysturn

I 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 rate up rate down Reply
Blite

Doesn'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 rate up rate down Reply
garysturn

There 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/

February 01 2010 at 6:39 PM Report abuse rate up rate down Reply
2 replies to garysturn's comment
Aaron

Wow, did you actually read the commentary OR watch the video?

February 01 2010 at 7:50 PM Report abuse rate up rate down Reply
iGO

This 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?

February 01 2010 at 11:53 PM Report abuse rate up rate down Reply
JAQ

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.

February 01 2010 at 6:32 PM Report abuse rate up rate down Reply
Joey

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 rate up rate down Reply
Buy an ad here

Hot Apps on TUAW

Tweets

© 2012 AOL Inc. All Rights Reserved.