Design Lessons from iPad

Comparison of iMac and iPad screens at informationarchitects.jp.

It’s only Wednesday but we already have our link of the week. Although they call it merely a “quick write-up” (and it is a fast read), iA’s mini-compendium of design insights before and after the appearance of the iPad at their office should be required reading for all web, app, and/or interaction designers.

In the equivalent of a breathlessly quick seminar presentation, iA discusses typographic resolution and feel; the effect of the device’s brilliant contrast on readability; the kitsch produced by rigorously adhering to Apple’s “make it 3D” guidelines; whether metaphors work; and more—all of it well worth far more than the little time it will take you to absorb.

In particular, I call your attention to the section entitled, “Interaction Design: So What Works?” Although intended as a guideline to producing well-tuned iPad apps, it also works splendidly as a mini-guide to creating better websites, much like Luke Wroblewski’s brilliant “Mobile First” presentation at last week’s An Event Apart, which carried a similar message:

  1. The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
  2. Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
  3. We found that the iPad applications we designed, made it relatively easy to be translated back into websites. The iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Via iA » Designing for iPad: Reality Check.

19 thoughts on “Design Lessons from iPad”

  1. I came to the realization after getting mine that Apple wasn’t adhering to their own ‘make it 3d’ suggestion and subsequently started changing direction this week on an app we’ve began working on since the SDK became available. Things definitely changed after working with the physical device.

  2. I am surprised. We have to focus on the essential elements? Gor. Somehow, I feel that a nasty equivalent of the browser wars will be upon us now, one fought across design departments. I don’t think that platform polarisation is a good development for us. Who cares what *tool* you use, as long as the design is well thought out? Designing for a specific platform will not make you a better designer. *Think*, like Neville Brody used to say.

  3. Blago:

    Designing for a specific platform will not make you a better designer. *Think*, like Neville Brody used to say.

    I’d argue that we always design with the constraints of a given platform in mind (even when we knowingly break the rules). And if you plan to design applications for the iPad platform, then it helps to discuss the design issues involved. In any case, the section of the article I highlighted contains great principles for interaction design on just about any platform, including the web, and that’s mainly why I found it of interest.

    When you design an extremely focused experience that hones in on what users want to do and avoids stakeholder-itis (“We want everything on the home page and everything in the nav and more nav and another nav and fly-outs and we need to sell lots of ad space and don’t forget to make it visually impactful”), then you are thinking and creating good design—on the web and likely anywhere else you apply these simple principles.

  4. It’s funny how websites might be designed to work with the iPads restrictions making the regular computer screen secondary. I’ts somewhat like a reverse IE6 where the new (iPad) puts restrictions on the design and the old (regular computers) will have to adapt.

  5. Mikael:

    It’s funny how websites might be designed to work with the iPads restrictions making the regular computer screen secondary. I’ts somewhat like a reverse IE6 where the new (iPad) puts restrictions on the design and the old (regular computers) will have to adapt.

    Arguably, this began happening a few years ago with the release and success of the iPhone, stimulating a new wave of catch-up touch-screen smart phones and finally waking American developers to the importance of mobile.

  6. Designing for the iPad and mobile first strikes me as a brilliant way to approach web design. Navigation and important elements of designs should end up being big and easy to understand. With some luck the iPad and similar devices will usher in a new wave of cleaner and more usable websites.

  7. Oh, I see.. everything is in reverse.

    Kinda like Steve Jobs using ‘Tapulous’ in his last keynote on OS4 .. an app that should be banned according to the Terms of Service. LOL. Most of the top rated games use Lua .. so that means all those should be banned from the App Store. Hmm.. No wonder there are lawsuits coming.

  8. I agree with Blago on this one. Designing for one specific platform, or worse, one specific company’s (A$) platform is concerning. Look at what they are doing with their new iPhone policy prohibitions on:

    Cross-platform development tools (like Appcelerator’s Titanium framework)

    Third-party app analytics embeds (like those from Flurry and Medialets)

    Cross-compilers (e.g, Adobe’s Flash-to-iPhone compiler) that allow non-native code to run on the iPhone

    The use of location data for anything other than location-based offer (i.e., coupon) delivery

  9. Wow…lots of negative reactions.

    I think many people are forgetting something very important: this is advice for optimization. Remember that you can essentially pretend that the iPad doesn’t even exist, and your designs will still work just fine on it.

    This is not the same as IE6.

    In effect, you could think of this as a further extension to progressive enhancement. Design as you always would, and then go step-by-step and add enhancements according to your target audience.

    …or so I think. Am I right?

  10. I think designing / developing for multitouch interaction without using ‘hover’ as a function in javascript is the most important thing to remember.. that’s about it.. otherwise iPad people can cope with pages designed for the ‘web’ as usual.. my 2 cents.

  11. @Stephanie – Good memory! @Tony – Agreed.

    Its another component to consider in the design scheme. We’ve all at one time chosen to overlook many components and focus on the task at hand and we leave it at that…

  12. #3 is straight out of Luke’s talk at An Event Apart :)

    So are #1 and #2!

    I heard somewhere that the iPad still cannot do muti-tasking?

    No, the iPad multi-tasks.

    People, if you have a problem with the iPad, think “mobile” instead.

  13. Oliver:

    “Straight out of Luke’s tak” — definitely not. Never heard or read Luke’s talk. But I guess that he came to the same conclusion is a good sign. Can that particular talk be read or seen somewhere?

    No one was accusing you of theft! Very clearly, you came separately to similar conclusions. Luke’s talk can be seen at An Event Apart this year.

  14. I hate all the arguments about bringing the web backward. Even today, many people are viewing sites on small screens. I’m on a netbook, which is only 1024×600 at full-screen size (which I hate using, because I’ll have an IM program or TweetDeck open to the side).

    The whole screen-size argument is a false dichotomy: even as we create larger screens, we create smaller ones. Frankly, all our websites should work on screens forty pixels wide. And six-thousand pixels wide.

Comments are closed.