matt's posterous pacygas

Advertisement

With tools like Appcelerator’s Titanium 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.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

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!

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

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.

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:

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.

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 SDK. For Web developers looking to get into iPad development with their current skills, products such as Appcelerator’s Titanium offer a good way to build native iPad, iPhone and Android apps in JavaScript.

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.
• Preparing Web Content for iPad
  Apple’s platform-specific considerations for web content in Safari on iPhone OS devices, with specific information for iPad.
• iPad Detection Using JavaScript or PHP
  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 Testing
  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 CSS
  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 iPad
  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 tips
  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?
  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 Interactions
  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 Check
  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 Scroll
  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 Realism
  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 PSD
  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 Guidelines
  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 Inspiration
  Showcase of User Interface Designs for iPad.
• iPad Inspiration: News Sites
  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)

Apple's 'AdLib' Framework Brings Native-Like Functionality to iPad Web Pages

Wednesday April 07, 2010 03:33 PM EST
Written by Eric Slivka

Demonstration of iPad User Guide utilizing 'AdLib' framework
Done21 reports on the curious discovery of a new Web-based framework used in the iPad that allows web pages to behave in ways much more akin to native applications than previously observed. The framework, dubbed 'AdLib' by the report's author after the name of the file containing the code, was first noticed in action when navigating to Apple's iPad User Guide using the iPad's mobile version of Safari. It allows the user guide, which is simply a web page, to be offered in a split-pane view with scrollbars and with a native app-like feel.

What's particularly interesting is that it does something that shouldn't really be possible in Mobile Webkit: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS "scroll bars" and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.

Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari's user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.

The framework, which weighs in at about 4,300 lines of code, permits Mobile Safari to display the native-like user guide simply using HTML, CSS, JavaScript, the basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described by John Gruber last December, although AdLib appears to be a more advanced version that incorporates iPad-specific references.

It remains to be seen whether Apple will release the custom API for use by third-developers, but despite an absence of documentation, the report notes that the framework is "extremely well thought out and complete" and could be of significant utility to developers.

Update: For those interested in the actual code, a commented version has been discovered on Apple's developer site.

Rating (65 Positives; 22 Negatives)
[ 54 comments ]

The availability of pre-orders isn’t the only new development in iPad-land. Apple also updated its site with a plethora of new details about its latest and greatest device, from information on the 3G networking capabilities to a more in-depth description of the iBooks application. Let’s take a look at what caught our attention.