iPad Design Headaches (Take Two Tablets and Call Me in the Morning)

SXSW is such a big conference that you could essentially see 10 panels on the exact same subject. So it makes it a bit difficult to decide between them.  Throw in the fact that the iPad 2 launched officially the same week as SXSW, it was a free for all when it came to designing for the iPad and tablets in general.

So how did I decide? I went to the panel by the guy who wrote the book (or is writing at the time of this) on iPad design. Josh Clark wrote Tapworthy for iPhone development and is now writing the same type of book for the iPad.  So I KNEW he would have some great tips on designing and developing for the device.

Josh Clark was able to break it down into five easy guidelines for designing and devoloping:

1. Avoid the “greedy pixel syndrome”
What that means is regardless of the real estate available to use for design features, white space is very beneficial in terms of screen simplicity. A good example was that of two weather apps.  The first: Weather Station Pro is clean and simple while the second: is busy and complicated.

The main takeaway from the greedy pixel syndrome is that while complexity is acceptable, it should be managed and offered when needed versus causing complication.
To avoid complication, use big chunky elements, use generous space, clarity trumps density and when it comes to taps, quality is better than quantity

2. Avoid “media hypertrophy”
In essence this means that when you are designing on the iPad, don’t get too fancy. While there is a desire to try something brand new and creative, it can actually become a barrier to entry for users.  An example of complicated design is the ABC news application.  It illustrates a new and unique way to view current stories with a revolving globe, but comes across as busy and does not organize the stories in a meaningful and helpful way.  On the contrary, the New York Times application is a great example of an application that is intuitive for users as it mimics an actual newspaper.

So how does a designer avoid media hypertrophy?
Designers should try to feature the content versus inventing a new interface, stay true to the brand, old and tested does not necessarily mean old fashioned and ALWAYS ask: Is different actually better?

3. Do not create a frankeninterface
The iPad calendar is a perfect example of this. Visually it looks like an agenda or paged calendar, but does not allow for page flips.  It has essentially changed the behavior that users have become accustomed to for a design that looks like book pages. Another example of a frankeninterface is an app called “Manage”. On the page you see pens that do nothing more than change the color of the font when you type.  A very good quote from Josh says:

“If it looks like a physical object, people will try to interact with it like one.”

In order to avoid any confusion, try to avoid any mixed metaphors within your app. Choose one, and make it feel natural. IF you are going to have a visual cue of a real world object, make sure it does what that object does.  The iPad has many digital advantages.  Don’t avoid them, embrace them and use touch cues to get to additional content quickly and easily.

4. Avoid popover pox
Too many popovers become a nuisance and can complicate the app.

Popovers should only be used for quick peeks and to act on content. Do NOT use them for navigation or exploration

5. Try not to get “iPad Elbow”
Avoid implementing the back button on the top left of the iPad.  “Back buttons are a hack”.

The iPad is centered around touch.  Use that to your advantage.  Whether it is swipes or using multi-finger taps, there are many different ways to achieve the same result as a back button.

Some tips for iPad elbow: seek alternatives to buttons.  Embrace big gestures. Let main controls drift to the top corners of the iPad, and avoid them in the top center.

ONE BIG THING HE STRESSED: Begin to explore multitouch gestures. We have two hands and 10 fingers to use.  Find creative approaches to using two hands to our advantage on the iPad.

Posted In
Share This Story
Back to News
  • Employee Photo for rolandoromero
  • Employee Photo for mwang
  • Employee Photo for drodriguez