• blog
  • authors
  • archives

Oscar Llarena March 15, 2011
Posted by Oscar Llarena

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: Accuweather.com 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.

1 Comment

Posted Under Better World

1 Comments

MikeMike
March 16, 2011

I’ve just started iOS app development and I’m torn between two paths of UX design that have come to be. The first being the well polished, excessively graphics laden app that shows off everything the iOS device can do and the second being simplicity, usually black & white text, lines to delineate “groups” of data, etc. I believe the two weather apps you suggest are a perfect example of that.

The first line of code I wrote professionally was a Windows dialog in a Borland Pascal application. I spent many years building user interfaces on Windows before switching back to the shell prompt. iOS app development excites my inner UX being again.

Leave a comment

* = Required

    search

  •   about us
    Curiosity is GSD&M’s collective of thought, inspiration and discovery. It's a place where our people can share cool stuff with each other — what they’re thinking about and what they’re exploring both on- and offline. We’ve opened it up to people outside the agency, and we hope it satisfies your curiosity, too.
  • subscribe
    Enter your email address to subscribe to new posts.
  •   categories
    • Art
    • Austin
    • Better World
    • Branding
    • Connecting People
    • Creative
    • Curiosity
    • Design
    • Doodle
    • Experiential
    • Feature
    • Film
    • Food
    • Fun
    • Gaming
    • GSD&M in the News
    • Guest Post
    • Holiday
    • Infographics
    • Innovation
    • Inspiration
    • Instagram
    • Interactive
    • Interview
    • Media
    • Mobile
    • Music
    • Personal Enrichment
    • Play
    • Politics
    • Purpose
    • Reinvention
    • Social
    • Strategy
    • SXSurvival
    • SxSW
    • Technology
    • Uncategorized
    • UX
  •   connect
    GSD&M
    YouTube
    Twitter
    Facebook
  •   twitter
  •   facebook
  •   friends
    C3 Presents
    Austin Chronicle
    Austin City Limits
    Austin Theatre
    Bunkhouse Management
    Four Seasons Austin
    HAAM
    KGSR KLRU
    Livestrong
    Mamma Jamma Ride
    Mellow Johnny's
    SXSW
    Texas Tribune
    University of Texas
    Waterloo Records
  • © 2010 GSD&M

Avatars by Sterling Adventures