Designing Apps for the iPad: It's Not Just a Big iPhone

User experience (UX) designers don't just make pretty icons, though that certainly can be part of the job. Figuring out how people interact with data and interfaces means understanding ergonomics, psychology, computer science, cognitive science, graphic design and a number of other fields.

If you've ever been frustrated or confused when working with an application or a Web site, blame the UX designers. If the application seems like it "just works," then you can thank them.

While it may not be obvious to most technology users, each new form factor -- desktop, Web, mobile device -- requires a whole new set of research, testing and design principles.

Apple's recently released iPad is no exception; despite some snark that "it's just a ginormous iPhone," developers of iPad apps have found that the size does matter -- and that's in addition to the iPad's unique multitouch functions and interface elements. A properly designed iPad app is not just a pixel-doubled iPhone app, nor is it a desktop app with the mouse replaced by a finger.

I spoke with UX designers and product managers at two companies -- The Omni Group and Zinio LLC -- to find out more about the challenges they faced developing for the iPad. In particular, I wanted to know more about whether it confounded their initial design plans, or whether they were surprised to find new possibilities for user functionality.

Room for Content

"First, we really found that it's not just a larger iPhone," said Ken Case, founder and CEO of The Omni Group. "There's room for content, and interaction with gestures, that you couldn't do on smaller real estate. It's a larger iPhone the way a swimming pool is a larger bathtub."

Initially, says Bill Van Hecke, Omni Group's UX lead, the company thought it would need to use every pixel on the iPad's 1024-by-768-pixel screen: "It was our first impulse to fill up the space, but we found in the design process that it was more important to see the content." As a result, he said, the user interface on the iPad for two Omni apps, OmniGraffle ($49.99) and OmniGraphSketcher ($14.99), takes up the same percentage of screen real estate as the company's iPhone apps.

For instance, initial interface designs for the apps included a sidebar that would show open documents and allow quick navigation among them -- a feature not unusual on desktop interfaces. But on the iPad, that felt like wasted space -- screen space was more valuable as free area for drawing.

"It was a good exercise in getting rid of our excess chrome [toolbar and window frames]," said Robin Stewart, lead developer for OmniGraphSketcher. "We think we ended up making this app more usable on the iPad than on a laptop."

Developers of The Omni Group's OmniGraphSketcher had to rethink user interface plans when designing for the iPad.

Developers of The Omni Group's OmniGraphSketcher had to rethink user interface plans when designing for the iPad.

62 Days to Wrap up the Job

Case noted that his team had just 62 days from the initial iPad announcement in late January to design and test the app and get it through Apple's App Store approval process. "For this round," he said, "we were looking first to bring our Mac apps to the iPad. We're looking to bring our iPhone apps also, but later."

That tight schedule, he said, made Omni really think through "the core things we're trying to do with the app, without introducing a lot of clutter."

That's in addition to making use of the iPad's multitouch capabilities, which expand on those of the iPhone. "There were some things we wanted to put in but backed off of -- and hope to put in later," Case said.

"When we first started, we had a large library of multitouch things, like a four-finger swipe for use like a key modifier, to put in," Van Hecke explained. But the designers found those gestures sometimes meant more cognitive work for the user, who might have trouble remembering which gesture did what.

"Even if it took two seconds or more to open an inspector and tap a button in it [to access a new tool, for example], this was more approachable to a new user than having to learn a new set of gestures," he said. That's true even though common iPhone gestures, such as double-tapping, pinching and others, are likely familiar to many users by now.

"Drawing with fingers is well suited to a touch interface," Case said. Developers found it was easier to "touch" back and forth between two points on a screen than to mouse back and forth.

That realization influenced how they thought of the mental "cost" of moving between areas on the iPad screen and how it would be different than the same movement on a desktop screen.

An iPad Mockup

Much of what the developers learned about how to create apps for the iPad came during the design process, which required many versions of their ideas. And it required them to build a mockup of the iPad, because they didn't have access to one at that time. "Since we didn't have a device, we felt it was important to have a physical thing to work with," said Stewart.

(For more information on that prototyping process, including photos of sketches and the physical prototypes Omni Group built using table saws and a 3D printer, see the company's blog post.)

"We had to think a lot about the social nature of the iPad," said Case. As a result of handling the mockup, he said, he realized that "you can use it easily in a group for showing things off -- a desktop is more of a solo experience. So we made the default sizes of things more readable, and larger than you'd think you needed for a single user," he said.

"Using a laptop, the screen is a barrier between people," he said. "The iPad can be used in a more level fashion, more collaboratively."

According to Stewart, the various mockups helped them realize that "many of our first instincts were wrong in regards to the iPad."

"We're really used to the Mac user interface paradigm: widgets, windows, etc.," he said. But for the iPad, they had to think about many things from scratch, including the fact they couldn't rely on precise cursor positioning (fingers are fatter and wobblier than mouse-driven cursors) and a menu bar.

1 2 Page 1
Shop Tech Products at Amazon