Designing For the iPad Is Not Designing for a Big iPhone

ipad-iphone.jpg

Way long ago, in the yesteryear of 2010 when the iPad was just about to come out, many a joke was made about how it was a giant iPhone and wouldn’t do well.  

Why would we need a giant iPhone?  We already had the regular size iPhone, and that was good enough for us.

Similarly, a lot of people thought designing for the iPad would be like designing for a giant iPhone.  Sure, the screen is bigger, but the principles would be the same - put the header here, make sure it has the right buttons in the right spots, and you're good to go.  

It seemed like a reasonable conclusion, since Apple said all iPhone apps would work on the iPad, and Apple isn't a company to let bad design through.  We were entirely wrong.

Designing for the iPad is different.  The design principles are different, the layout is different, everything is different.  Unlike using your iPhone, using the iPad is a lengthy experience.  The iPad is a surface to bend to your will, displaying and creating content at the tap of a finger.  An iPhone is a brief foray into your content from which you quickly emerge, while an iPad is an extended visit into your favorite books, movies or more.

Design a deep, interactive experience.  What this means is that when designing for the iPad, you need to keep in mind that a user is going to stay inside your content and continually interact with it - People don't just pull out an iPad for five minutes to check something, like they do with an iPhone.

If you're curious as to how the design metaphors continue, laptops and desktops are used for deeper and deeper interactions with content creation - people who need computers but don't need to sit in front of them for more than 8 generally have a laptop, while those who spend upwards of 10 hours a day sitting at a computer tend to have a desktop with a large screen.  (Of course, this varies from profession to profession).

What do you do on your iPad?  Get it out for half a minute to play 2048 on it while you're waiting to get on the bus?  No way.  You get out your phone.  Do you even get it out to read while you're on the 10-minute bus ride?  Probably not, unless you're really excited about the book.  You get out your iPad when you're going to be spending a significant amount of time consuming content.

The iPad is designed to be used passively (or in Apple's words, "laid back"), so you need to consider what position the user will be in while on the iPad - and I mean physical position.  they're probably sitting back in a chair or a couch, or perhaps laying on their bed - situations where using a laptop for the same thing is difficult, if not downright ridiculous.

laptopbed2.jpg
laptopbed.jpg

Perhaps these people should just get iPads.

Make sure to design all aspects of the app to be able to be fully appreciated when a user is laying down or reclined, as well as when they're sitting at a desk using the iPad.  Don't make using the app contingent on being in a certain physical position.

Remember the high contrast.  The high pixel density and contrast of an iPad screen is something you need to keep in mind, since it causes color combinations like white-on-black to be harsh.  This doesnt happen on an iPhone (due to the small screen) or a computer (due to the distance between you and the screen).  

Less harsh color combinations like dark blue on sepia or dark blue on plain gray may be much more ideal for iPad app design because of it's lower-contrast nature.

Using noise is another tasteful way to get around the higher-contrast nature of the iPad screen, as Dribbble uses it.  Just don't make the noise background too noisy, or it will defeat the purpose by making the app an eyesore.  Think about the colors used in your favorite apps - they are pastels or dark hues, colors which have a tasteful contrast but nothing too alarming or hard on your eyes.

This is especially important to consider with flat design becoming such a fad, because it's easy to underwhelm with flat design, and a go-to for a lot of graphic designers is to change up the colors a bit.  Don't be afraid to play with slight texture or different iconography, as well, to avoid high or low contrast colors.

Design for both Orientations.  One of the new challenges in designing for the iPad was contending with the different screen orientations.  The iPhone had a landscape and portrait orientation, but differentiating between these orientations (and how they should be designed for) was much easier.  Messaging and some games sometimes used landscape, and most everything used portrait.  On the iPad, this was entirely different.

The two different orientations of an iPad, landscape and portrait, are markedly different from each other.  To see this, all you need to do is pull out an iPad and look at the Mail app.  In landscape, the side column's view of eMails is stuck there, and it isn’t an option to make it go away.  In portrait, the mail navigator is a tool bar, only to be seen when you don’t want to navigate eMails using the included arrows.  The visual focus remains entirely on the document at hand.

 

Designing for Both Orientations

Portrait Mode:  

  • Portrait allows for you to consume large amount of text in a streamlined way, and for you to get through work without breaking the flow.  The visual focus is narrowed only to the content at hand whenever possible.
  • Uses:  This is ideal for content consumption, such as reading or browsing social media, or studying and browsing references.  
  • Design: UIElements should be kept to a minimum on header and footer bars, and where appropriate, any menu elements should be removed while the app is in use.
    • e.g. the menu for iBooks being hidden when reading a book

 

Landscape Mode:

  • Landscape mode is more appropriate for content creation, and more interactive iPad apps (apps where the user takes a lot of independent action).  
  • Content-creating apps fall in landscape mode.  Pages, Keynote, or anything we’d associate with content creation is advertised in landscape mode.  The features are reduced and the buttons are not many, but in order to leave typing and content creation intact the app launches in landscape mode.  (If you are the rare creature who can type in portrait mode on an iPad happily, you can use it that way).
  • Uses: Apps such as text editors and writing apps are appropriate in landscape, because the writer is producing text and formatting it on the iPad.  It is also appropriate for business and work applications, where the user needs an array of tools to perform the desired task.
  • Design:  Tools and navigation should be exposed and easy for the user to get to (i.e. large enough, not unnecessarily crowded or hidden in any way, e.t.c.).  Landscape apps typically implement a lefthand toolbar, to house all of these tools and their description.  Also, the toolbar will house any in-app hierarchy or organization.
  • In a painting app, this could be a critical mistake.  If the tools are clunky to reach for and it seems unnatural, that’s a tick or three off of your design scoreboard.  If it seems natural for your app to be exclusively landscape or exclusively portrait, don’t be afraid to make it so.  The accelerometer is a nice feature and it seems intellectually like something you must take advantage of, but chances are if you're making a text editor that the user won't miss portrait mode.    

 

These rules are all true of all of Apple's native iPad apps, and they made it this way to mirror the natural use cases for the apps' real life counterparts.

  • iBooks is always displayed in portrait mode, and when you display it in landscape the text is split into columns to read like a typical book, with two portrait views (retaining the natural metaphor of a book).  
  • Since the computer monitor is in landscape and is associated with productivity and data; many business and IT apps out there are locked to landscape mode - or at least advertised in landscape.  
  • Content-creation apps don’t have much action in portrait mode, because that’s not the metaphor we’re used to.  Humans read left-to-right, top to bottom.  Tools for content creation can’t be at the end of how we read the screen - this affords them less importance.

 

How do I handle the other orientation?

The ideal orientation for your iPad app should come to mind fairly easily, but the bet is still out about what you should do about the other orientation.  Since Apple rejects poorly-designed apps, the best thing to do is leave your app without the other orientation altogether, unless you can do the other orientation just as well.  

Apple's Human Interface Guidelines would rather you lock your orientation for better design, and the app store is Apple’s universe.  If you do decide to support both orientations, make sure they both have an excellent user experience.