Useful Design Tips For Your iPad App

Advertisement

With tools like Appcelerator’s Titanium1 and some JavaScript programming skill, creating native iPhone and iPad apps is simple. The danger is in not being always on the look-out for the kind of design pitfalls that plague many products in the App Store. In this post, we’ll consider some design tips that will get you on the road to iPad success.

Design For People

Apps will define the iPad, it’s true. But in developing your app idea, which comes first, the idea or the device? Good news: neither. It’s people! When brainstorming and researching ideas for your app, step back and consider the context in which the device will be used by real live people. How does the iPad fit into our lives? In what situations would we prefer this device to a laptop or iPod Touch?

Who Are Your People?

Ideally, your target audience includes you, but using this as a reason to decide that “I know what people like me want” could lead you to miss out on opportunities to enrich the product beyond your imagination. Surprises await when you consider the variety of people who might use your product. Your target audience may be different than what you think; or in defining your target audience, you may find that your product is missing important features.

For example, with our application (a drawing tool), our initial target audience included early-adopter techies. But after some analysis, we saw that the interface needed to be greatly simplified so that the children of the techies would also enjoy the app.

Tip: Define your target audience. Who are they? Where do they live, work and play? What challenges do they face? Give one of them a name, a job, a family, a car; then see how your perspective changes.

What Is Your People’s Story?

Defining a target audience is only half of the equation. Now you have to put your audience into action! What do they do in their daily life? How will their daily life intersect with your product? Get into their minds. Try this, and I guarantee it will lead you down some expected and unexpected paths.

You don’t need fancy software to do this. Below is an example of our use case sketches for our application. After writing out a few use cases, we learned that people lose interest in drawing games when they’re forced to create original artwork. Many people will say, “I can’t draw,” but they still have a desire to create beautiful things. Originally, we planned for our app to ship with patterns, similar to the classic Lite-Brite toy, but it didn’t occur to us that people would play with the app more if we provided pre-fab patterns and templates for them to color. Pretty important feedback!

ipad-use-case
In developing the idea for an app, our use cases revealed that the replay value of such an app is low unless you provide patterns for the user to get started.

Tip: Think about the device in terms of lifestyle rather than features and technology. Will the iPad’s unique characteristics and environmental and sociological factors make your idea resonate with people?

  • It’s lightweight = “I’ll carry it more places than I would a laptop.”
  • It’s smaller than a laptop = “It’s discreet. Would I crack open my laptop to do some work in a waiting room? No. Would I switch on my iPad? Yes.”
  • It has robust utilities and multimedia capabilities = “I can work and enjoy books, movies and games.”
  • Its screen is larger than the iPhone’s = “I can consume more media with less eye strain. My kids will be entertained on a road trip.”
  • It has Wi-Fi and 3G Internet connectivity = “I can be online on a plane, train or car.”

Designing for people is critical to weeding out weak (i.e. unprofitable, untargetable or unmarketable) ideas quickly and to developing a product that not only meets but anticipates the target audience’s needs.

Minimalism Works Best on iPad

With robust, portable, location-aware devices like the iPad, the temptation is to throw in everything and the kitchen sink. If you’re an iPhone developer, you’re probably excited about the additional screen real estate. Resist the temptation to fill the space! Keep it simple. Display only the content and controls that are relevant to the user at that moment. This requires you to use the following two things in your interface design.

Contextual Menus

Contextual menus are a great way to keep your UI out of the way. We wanted to keep sharing and community features out of the primary navigation. We used a contextual menu (“Share this thang!”) to present actionable items at the appropriate time.

Example of a contextual sharing dialog
Example of a contextual sharing dialog, activated when you tap and hold on an image.

Modal Views (but Wisely)

With the increased real estate on the iPad, one can build in robust functionality that is impossible on an iPhone or iPod Touch screen. Modal views give you another way to organize your application; they give the user clear “modes” of operation; and they can be an elegant solution to UI clutter if executed wisely.

For example, “photos” on the iPad could operate similar to iPhoto on the desktop Mac. You have two “modes” of operation:

  1. View or edit an individual photo,
  2. Manage groups of photos.

In each scenario, packing the viewing, editing and managing functions into one view wouldn’t make sense. Think of how you could segment features in your app, while maintaining a smooth connection between the two modes.

modal view
iPhoto has two modes of operation: viewing and editing a photo or managing photos.

Tip: What is the bare minimum your app could provide and still be useful to users?

iPad’s Two Orientation Are A Big Deal

Being able to switch views—landscape to portrait and back again—is not unique to the iPad, but it’s a bigger deal on it. This is where paper prototyping will save you from wasting loads of time in Photoshop.

Having to consider every element of your app in these two sometimes radically different layouts is like designing for two devices… except that you’re not designing for two devices. The trick is to keep the experience consistent in each view, allowing for a seamless user experience when switching views.

Below is a color palette we tested for our app. The palette looks great in landscape mode but absolutely hogs the screen in portrait mode. Oops.

landscape

portrait
This palette looks okay in landscape mode but gobbles up the interface in portrait.

We reconfigured the color palette to have a smaller footprint in both landscape and portrait modes:

color-palette

color-palette
A streamlined color palette allows accessibility while staying out of the way in both landscape and portrait views.

Tip: Paper prototype all of your screens in portrait and landscape modes… a lot.

Use Touch And Real-World Metaphors

Touch changes how we interact with, edit and perceive on-screen elements. With the iPad’s larger screen, touch and gestures are turbo-charged. A quick run-down of unique UI elements on the iPad:

  • Select and take action on multiple items at once by dragging them to another area of the screen.
  • See both a list view and details of items in that list view (e.g. Mail).
  • Edit elements in place rather than from a global menu bar.

iphoto
Spread your fingers over a stack of photos to spread them out for viewing, as you might in the real world.

Tip: Think of how you interact with things in the real world. Think of the on-screen elements as tangible things.

Design For Dynamic Content

The iPad’s portability and bigger screen size gives users unlimited possibilities for quickly creating and sharing robust dynamic content on the go. Hybrid apps (i.e. native apps that draw from Web pages or that load real-time Web content) are becoming more common as users demand connectivity to Web-based tools. Designing for dynamic content means working through the challenges and opportunities of dealing with an Internet connection (e.g. slow downloads or lost connection). Think of what visuals you would present to users when they’re stuck in East Bum with no connection to be found!

Tip: Plan for problematic situations in your design.

Get Started!

The first step to getting started is downloading the iPad SDK2. For Web developers looking to get into iPad development with their current skills, products such as Appcelerator’s Titanium3 offer a good way to build native iPad, iPhone and Android apps in JavaScript.

Further Reading

  • Apple: Start Developing iPad Apps4
    Offocial user experience guidelines, iPad programming guide, testing and distribution guidelines and iPhone SDK 3.2 from Apple.
  • Preparing Web Content for iPad5
    Apple’s platform-specific considerations for web content in Safari on iPhone OS devices, with specific information for iPad.
  • iPad Detection Using JavaScript or PHP6
    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I’m underwhelmed with the device but that doesn’t mean I shouldn’t try to account for such devices on the websites I create.
  • Quick and (not so) Dirty iPad User Testing7
    The iPad has arrived, and now everyone wants to get on it. But for those of us involved with UX, it is far from business as usual. There’s a very particular challenge involved with user testing on the iPad. Luckily there is a solution to make any testing you do with an unfamiliar device a tangible, hands on experience for your team of testers.
  • iPad Orientation CSS8
    For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference that I’ve found is that Webkit on the iPad honors CSS media query declarations based on orientation.
  • Designing Websites for the iPad9
    Whatever you personally think of Apple’s iPad, the thing will probably sell like hotcakes. And with wi-fi web browsing as its main feature, you want the sites you design to look great on the iPad’s browser. If they look okay on iPhone screens, just “okay” won’t cut it anymore- not with the large screen on the iPad. Here, some things to keep in mind for iPad-friendly web design.
  • iPad web development tips10
    Semantics aside, there’s a lot of information about how your site can be made to best work with the iPad, and I’d like to add a few nuggets to that body of knowledge.
  • How iPad Affects the Way we Design Websites?11
    The iPad has received mixed reviews. While the geeks (people like you and me) have looked at it with disdain for being “just” what we expected, the media publishing industry (read print media) has seen it as the salvation they had been waiting for. Whether the iPad is able to change the world or not, is not the issue of this article. But the fact of the matter is that it is here and sooner or later we need to learn to design the web keeping it in our minds. So what are the things we need to consider?
  • iPad UX Interactions12
    Collection of interaction snapshots for the iPad. The idea of this collection is to capture the interesting moments during the various interactions (slow down time) to understand the nuances in their design.
  • Designing for iPad: Reality Check13
    The question Are we designing desktop programs, web sites or something entirely new? has been torturing us until that express package from New York finally crossed our door sill. A quick write up of design insights before and after the appearance of the iPad at our office.
  • Page Flips Are Better Than Infinite Scroll14
    If you’re going to use an animation, the page flip most be almost instantaneous. If you’re going to have to flip thousands of times, a too-slow animation is going to feel like a little papercut every time.
  • iPad Apps: Physicality and Heightened Realism15
    One of the more unique iPad User Experience Guidelines from Apple suggests that applications designed for the iPad should have a realistic, physical dimension.
  • iPad GUI PSD16
    Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad.
  • iPad User Experience Guidelines17
    Apple’s Human Interface Guidelines for the iPad outline how to create user interfaces optimized for the iPad device. According to Apple, the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.
  • iPad Inspiration18
    Showcase of User Interface Designs for iPad.
  • iPad Inspiration: News Sites19
    A comparison of the Associated Press and USA Today applications for the iPad reveals a few ways iPad design can be effective (or not).

(al)

Footnotes

  1. 1 http://www.appcelerator.com/
  2. 2 http://www.apple.com/ipad/sdk/
  3. 3 http://www.appcelerator.com/
  4. 4 http://www.apple.com/ipad/sdk/
  5. 5 http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
  6. 6 http://davidwalsh.name/detect-ipad
  7. 7 http://carsonified.com/blog/design/quick-and-not-so-dirty-ipad-user-testing/
  8. 8 http://www.cloudfour.com/ipad-css/
  9. 9 http://www.devlounge.net/design/designing-websites-for-the-ipad
  10. 10 http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
  11. 11 http://www.inspiredm.com/2010/02/09/ipad-design/
  12. 12 http://www.flickr.com/photos/designingwebinterfaces/collections/72157623252108597/
  13. 13 http://informationarchitects.jp/designing-for-ipad-reality-check/
  14. 14 http://designdare.com/-page-flips-are-better-than-infinite-scroll
  15. 15 http://www.lukew.com/ff/entry.asp?996
  16. 16 http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
  17. 17 http://www.lukew.com/ff/entry.asp?995
  18. 18 http://emberapp.com/explore/categories/user-interface-design/ipad
  19. 19 http://www.lukew.com/ff/entry.asp?1068

↑ Back to topShare on Twitter

Jen Gordon is a designer, writer and founder of mobile design training site, Tapptics. She teaches Idea People how to make apps here. She teaches fellow designers and developers how to create beautiful and usable apps here.

Advertising
  1. 1

    Nice article. Certainly gives some good information for a designer jumping into development for the iPad. Another part that was useful was the process in developing the workflow of the app. It can be easy to rush through the development and planning to slap a nice UI on a mediocre application.

    0
  2. 2

    For real? Are you guys on Apples payroll or something….why so much IPad posts? Are you guys a bunch of sell outs?

    Also if you are going to write about Flash at least know what you are talking about. The last couple of articles i saw here were just fanning the flames of idiocy.

    I can develop in both Javascript and ActionScript so it does not matter to me what technology wins in the end….but god….some of your writers are so clueless its embarrassing really. I am embarrassed for you guys.

    Flash will be around a lot longer than most will keep your jobs at SM because one basic thing you guys seem not to be able to grasp is that its not how fast new technology comes out…its how long it takes for it to get adopted. For christs sake most ad networks currently only run ActionScript 2…how long has ActionScript 3 been around?

    The real reason Flash runs poorly on Apple is because Apple wants to cut out a 3rd party for delivery of content. Flash runs fine on a lot less powerful devises…..hmmm that should tell you something…but I wouldn’t expect that much from you.

    0
    • 3

      Smashing Editorial

      April 16, 2010 12:32 pm

      I am afraid I don’t understand your concerns. This is the first article about iPad on Smashing Magazine. And we are not against or for Flash; our articles illustrate the opinions of our writers. We will publish an article advocating Flash soon, too.

      0
      • 4

        @Jack

        We love almost ALL articles published here. It will be appreciated if you will show up your positive concerns rather then negative. I analyze SM is going with hot and current trend of Web technology and maintaining quality…always. So, Enjoy the show.

        0
    • 5

      this guy must work for microsoft (or Adobe)…

      0
    • 6

      @ jack This article does not address flash at all. I did not express any opinion about flash or flash video for Apple devices. Not sure what you’re talking about – ?? jen :)

      0
    • 7

      @Jack

      How you justified writing that comment is beyond me. Not a single point you made had anything to do with this article (or SM in general).

      Learn to READ the content before commenting on it, that way you won’t make yourself look completely stupid next time.

      0
    • 8

      @Jack

      We love almost ALL articles published here. It will be appreciated if you will show up your positive concerns rather then negative. I analyze SM is going with hot and current trend of Web technology and maintaining quality…always. So, Enjoy the show.

      0
    • 9

      Great article Jen. Please don’t let my comments detract from posting. While I don’t agree with Jack on his rants in relation to this article I do however find it troubling that Smashing Magazine publishes a lot of apple related post. Where are the articles on developing for Windows, Android or other mobile platforms? Don’t get me wrong, I love Smashing Magazine but would love to see some more rounded content.

      0
    • 10

      @Jack

      Honestly, your remarks are a bit embarrassing. The fact that you can’t even spell correctly makes me wonder if you can actually program in either language. This article is merely discussing the product. Do you feel that SM should not talk about something just because a technology was left out of the development of this product. I too wish that Apple and Adobe would come to terms with the dispute over Flash, but regardless of their issue – this product is still an amazing product.

      Regardless of this, your post is a bit immature and childish. SM stays on top of things and I for one thank you SM for providing articles on every spectrum of web and technology. You should really think before you comment on a post. It just makes you look like a moron.

      0
  3. 11

    Instead of using tools like Appcelerator Titanium (Which may not be approved by Apple, and you’ll end up getting your app rejected – see Terms of Service 3.3.1), I recommend you learn Objective-C and use XCode.

    0
  4. 12

    I find it very concerning that you guys are posting an article that advocates using technology that will be banned from the device in a couple of months.

    0
    • 13

      And I find it very concerning that you don’t keep up with the news.
      The first Titanium Apps have already been approved with the new ToS 3.3.1, when you login to the Apple Developer Center you need to agree with the new terms before submitting anything (even updates). It’s counterpart (tho not native) PhoneGap has also been approved.

      On topic, thanks for this post :-).

      0
      • 14

        Rick,

        You fail.

        The “new” TOS 3.3.1, does not apply to applications written using the iPhone SDK 3.x series – it’s for those written using the iPhone OS 4 beta. Titanium could not have been approved under the “new TOS”, as Apple is not accepting iPhone OS 4 applications for the App Store.

        0
        • 15

          @Rick @ David – Rick you do not fail. Just back from 360idev and people are in fact getting Titanium apps approved on 4.0. This is current as of 48 hours ago.

          0
          • 16

            @Jen – I think it’s quite an interesting point that you raised, because now I’m a bit confused about what could be used in the future for iPhone OS4. When I first knew about the TOS 3.3.1, I thought it restricts all 3rd-party exporters. But now you’re saying it’s not… Maybe I misinterpretted it? Anyway, I just want to clarify, are you saying Apple will not restrict all 3rd-party exporters, or they will only restrict some exporters (ie: Flash) and allow others (ie: Titanium) to have their stuff in their app store? I don’t know about others, but I find this ambiguity very uneasy. I’d think they could change their mind one day at whim, which would mean a huge loss of money and time…

            Besides my concern about Titanium, I think you did a fantastic job in writing about the things we should consider when designing an iPad app.

            0
      • 17

        Hmm, when multiple iPhone developers tell me that Titanium is “definitely out” then I take their word for it. To find that the “what’s in and what’s out” question is so clouded is really concerning. It appears even the folks at appcelerator are unsure if Titanium fits in with Apple’s future goals. I think it’s at least worth pointing out that treading down the path of using these third party solutions for iPhone/iPad app development is a risky decision.

        0
  5. 18

    I for one appreciate all the recent articles focusing on iPhone and iPad. I’ve been heavily researching the topic recently in preparation of developing my own apps. Keep up the good work SM.

    0
  6. 19

    The replies to this post or spot-on. I also find it odd you would post an article on a process which according to the latest Apple Idiocy will most likely be totally useless. So how is this a useful design tip? Don’t get me wrong, I really wish it was, but Apple is busy trying to crush anything they don’t control, users and developers beware. You can’t develop anything using tools that are not approved by Apple, especially cross platform compilers. Sadly Titanium is not on the list, although everyone knows their crusade is really directed against Flash, they are also busy ruining their reputation among a lot of other developers. Apple really needs to jump on board and join the Open Screen Project before they seriously jeopardize alienating developers and other people who were formerly happily using their products. Of course all of the iPhone/iPad users would need to really open their eyes and see they are using products which can not/ will not display all of the content from millions of sites on the web. I’ll already be getting a Droid myself. There is especially no excuse for a tablet device which can not show all of the current content on the web. I mean, who falls for that? Obviously a lot of people, poor little blind iSheep.

    0
  7. 20

    Great Article truly, it lights up some good points developer should be aware.

    0
  8. 21

    “With tools like Appcelerator’s Titanium” ???

    Maybe you can change your article to talk about the new TOS and why not, explain how can we do the same thing with Apple’s tools

    thanks for this article

    0
  9. 22

    nice article. thanks.

    0
  10. 23

    Flash lite will not display all the websites these naysayers keep talking about. It is not the same as Flash for the desktop.

    0
  11. 24

    Ummmm…Enlightened single development multiple devices will not address platform specific advantages & leaves the company that owns the platform beholden to Adobe. “Why would anyone want another company to hijack their platform?

    “Of course all of the iPhone/iPad users would need to really open their eyes and see they are using products which can not/ will not display all of the content from millions of sites on the web. I’ll already be getting a Droid myself. There is especially no excuse for a tablet device which can not show all of the current content on the web. I mean, who falls for that? Obviously a lot of people, poor little blind iSheep.”

    So let’s all jump on board so we can have a generic app experience from a company that has always had a slow development process & regularly releases software with bugs it does not fix! Good luck with your Droid. Will it run the next version of Google’s splintered platform? Consumer devices should be about the consumer not the developer. What is the best consumer experience? Native apps. I don’t want ported junk that doesn’t take advantage of the unique underpinnings of a platform. Flash is proprietary & you are not getting the full Flash experience on any hand held device.

    0
    • 25

      Ummmmm….you would have had your “Native” app from CS5 and millions of Adobe developers who were looking forward to being part of (not hijacking as you put it) this platform. The fact is that the Flash CS5 compiler produced a NATIVE iPhone app, completely. If you looked under the hood, you would not be able to tell the difference. Producing a fully native app means they are well aware of the platform architecture, I assure you. In fact, there were already several iPhone apps on the store that were built from CS5, could anyone tell the difference? ummmmmmmm…..no. So what exactly makes an app developed in Flash a “generic app experience”? Because Steve Jobs says it is? I see you are feeding well from the Jobs trough, little iSheep, but you should know your facts first. You should be aware that this is a political and financial Jobs maneuver to lock down the platform, borderline antitrust, and has nothing to do with the quality of apps or integrity of Flash on the iPhone/iPad.

      0
  12. 26

    Can’t wait to get the ipad. It is really going to change how we look at media.

    0
  13. 27

    Apple – Masters of the universe.

    So sick of their crap.

    Hey Flash doesn’t work on a single thing we create, it even lags on a specced out Macbook pro, so in retaliation we will drop all support for it on chosen platforms because rather than catering for everything and trying our best we’ll just kick to the curb what is too hard and call HTML5 a web standard even though it’s years off being one.

    0
    • 28

      I don’t know what kind of MacBook Pro you are using – maybe one from several years ago, but I have never had a problem with Flash. I am a bit irritated they haven’t added Flash to the iPhone and now iPad. I would not say that HTML5 is far from being a web standard. It may not be adopted by every browser yet, but it’s growing quickly and the features offered by HTML5 are quite amazing. I do think that Flash has it’s use, but as technology changes, I think we will see the use of Flash drastically decrease as there are better ways to do the same thing that Flash can do (not everything so don’t take this the wrong way).

      0
  14. 29

    I don’t think iPad is the best tablet PC coming out today, basically it doesn’t allow you to do more than the iPhone. It follows Apple’s restrictive policy in terms of content management and running programs. For me, this is very important. I own the iPhone, because it fits into my pocket and for that, it is quite convenient (once you get used to the terribly slow iTunes workflow) and provides a fair amount of features.

    But for something that I have to carry around, I expect more flexibility, easier synching (wireless, no mediators like the Itunes), more memory and more general usefullness.

    Sidenote: As a designer I would like to use a tablet PC to easily collect ideas, develop them, combine all the media that I store on the iPad, create collections and see what happens. This process has to be fast and easy and free. I want to be able to create sophisticated drawings And this is what the iPad can’t provide. Apps don’t have acess to web or the media, you can’t download images etc. etc.
    I think it is the latter approach that would change the way we look at media, not just having a webpage in your hands, while sitting on your sofa (which is the main marketing claim of Apple for the iPad).

    0
  15. 30

    Why should we buy Ipad where we can’t open Coooool flash websites… No camera tooo… :(

    0
  16. 31

    Hey Jen – I’m working on an iPad application and you have shared some great information. I’m sure it will be helpful to me while designing the app. Thanks & keep posting such articles :-)

    0
  17. 32

    Glenn Sorrentino

    April 19, 2010 5:50 am

    Great article! I’m in the process of developing an app and this helped a lot!

    0
  18. 33

    Its great help for the beginners like me in the iphone- ipad compatible websites fields.

    0
  19. 34

    This is a post from Appcelerator the makers of Titanium. It gives a there stance as to why they are compliant.

    http://developer.appcelerator.com/blog/2010/04/update-on-apple-sdk-4-0-and-tos.html

    0
  20. 35

    found this new app for the iPad

    multiPad – enables support for multi user accounts for the iPad iPhone OS

    till apple will release it, its a nice way to go.

    see multiPad – themultipad.com

    0
  21. 36

    I was one of the lucky few to get my hands on an iPad last week and I must say, so far so good. It’s an incredible piece of technology and I think it will change the way we read, watch movies, listen to music and more. I just want to find more apps and sites related to iPad, which seem to be hard to trace online. I see on FriskyMongoose that the ipad review index http://www.dozenipad.com is the only place ranking ipad apps and blogs. The best thing about iPad is going to be video and HTML5. Most of the video sites such as youtube and vimeo can be accessed by the iPad and I think it’ll improve the ultimate viewing experience.

    0
  22. 37

    ipad got so many problems,but still can’t stop people buying.
    Why?
    I guess just outlooking attract many,and some Personalize setting make you more comfortable.
    Specially,it never similar with any others,so if you are conditioned to use Apple stuff,you are in.

    0
  23. 38

    Awesome! Can you create an Ipad apps on PC/Windows7? Any suggestions is much appreciated.

    Thanks

    0
  24. 39

    Great!!. This is make me know where to start

    0
  25. 40

    Further Reading:

    Apple: Start Developing iPad Apps
    Offocial user experience guidelines, iPad programming guide, testing and distribution guidelines and iPhone SDK 3.2 from Apple.

    It’s Official, not Offocial :)

    0

↑ Back to top