≡ Menu

Notes for a talk on designing for the iPad

Last week, I gave quick talk to some of the designers at Redwood about the challenges and opportunities that designing magazine-style content for the iPad presents. These are my notes. They’re rough, but they represent where my thinking is going.

1. Slates like the iPad change the model for how we interact with content to something that’s much more in tune with how we interact with magazines – personal, not “distanced”.

Think of the way you that you interact with something on screen. You’re looking up. You interact by reaching over to your right (or left) and moving a weird little thing around in a completely different plane – forward is up, back is down.

Have you ever stopped to think about how weird that is? The only other example I could come up with that has the same model of interaction is the loom – which, given the loom’s relationship to early computers, is kind of funny.

In other words, you’re interacting with something in a way which is unnatural, you’re weirdly distanced from what you’re actually focussing on. It’s acting at one step removed from the action.

Because of this, I think, we design things on screen which are also one step removed. We think of “interaction” on screen in very one-dimensional ways. Click here. Click twice. You interact with the mouse, not the content on screen.

To get an idea of how odd it is, imagine if in order to turn the pages of a magazine, you had to hold it up like this [Hold up magazine at arms length] and click something else like a mouse [click and hold]

Slates change this, because the content is all of a sudden literally sitting back in your lap, in your hands. You’re interacting with the content in a way which is physically much more like a magazine. It’s personal – for the reader, it’s really “theirs”.

2. Touch changes everything – but don’t be afraid of the change.

With mouse-based design, it’s all very, very dull. It’s point. Click. Double click. Drag. Dull, dull dull.

With touch, you have ten fingers to play with. Moving one finger on screen can mean one thing, and two things another. Place three fingers on there and do something different again if you want.

Imagine a magazine that responded to the reader differently depending on how you touched it. Well, now you can do more than just imagine it – you can build it too!

You can see the beginning of this with something like the way the iPad version of “Popular Science” works. If you tap and drag with a single finger, you scroll content. Tap and drag with two fingers, and you show a set of tools instead.

The key thing is to use your imagination – begin with the principles of magazine design, and build out from there.

3. We’re at the very start of something new – now’s the time to play if you want to get ahead.

Here’s the really good news: we’re at the start of learning about this stuff, and as yet there’s no right or wrong way to do it. It’s like the early days of web design, when the only limitations were the technology and your imagination. It’s 1995 all over again, only this time there’s much, much more we can do in terms of design.

The really good bit is that although we can start impressing clients with what we can do now, in real terms the penetration of tablet devices isn’t likely to be that great for a couple of years. Heck, some clients are only just getting their heads around the idea they should do apps for smartphones – and there’s far, far more smart phones than tablets, and will be for quite some time!

So this is the best time to play. If there were three things that I’d suggest you do, it’s this:

1. Look at what other people are doing. As soon as you can, get an iPad into your hands, look at GQ, Popular Science and everything else. Don’t copy what they’re doing – they’re just as likely to be doing things wrong at this point as right – but look and learn.

2. Learn. You don’t need to be a coder, but understanding about what can be done with different platforms, because it will give you ideas. For example, knowing that the iPad can locate you to within a few hundred meters means that a style guide could tell you that the nearest stockist for something is just down the road, and – if it’s really clever – check with the client’s stock control system and find out if that product is in stock there too.

3. Play. There’s time right now to play with this stuff, to get inspired by what’s possible. Again, you don’t need to learn to code, but the more you play the more ideas you’ll have. So dig in.

Reblog this post [with Zemanta]

1. Slates like the iPad change the model for how we interact with content to something that’s much more in tune with how we interact with magazines – personal, not “distanced”.

Think of the way you that you interact with something on screen. You’re looking up. You interact by reaching over to your right (or left) and moving a weird little thing around in a completely different plane – forward is up, back is down.

Have you ever stopped to think about how weird that is? The only other example I could come up with that has the same model of interaction is the loom – which, given the loom’s relationship to early computers, is kind of funny.

In other words, you’re interacting with something in a way which is unnatural, you’re weirdly distanced from what you’re actually focussing on. It’s acting at one step removed from the action.

Because of this, I think, we design things on screen which are also one step removed. We think of “interaction” on screen in very one-dimensional ways. Click here. Click twice. You interact with the mouse, not the content on screen.

To get an idea of how odd it is, imagine if in order to turn the pages of a magazine, you had to hold it up like this [Hold up magazine at arms length] and click something else like a mouse [click and hold]

Slates change this, because the content is all of a sudden literally sitting back in your lap, in your hands. You’re interacting with the content in a way which is physically much more like a magazine. It’s personal – for the reader, it’s really “theirs”.

2. Touch changes everything – but don’t be afraid of the change.

With mouse-based design, it’s all very, very dull. It’s point. Click. Double click. Drag. Dull, dull dull.

With touch, you have ten fingers to play with. Moving one finger on screen can mean one thing, and two things another. Place three fingers on there and do something different again if you want.

Imagine a magazine that responded to the reader differently depending on how you touched it. Well, now you can do more than just imagine it – you can build it too!

You can see the beginning of this with something like the way the iPad version of “Popular Science” works. If you tap and drag with a single finger, you scroll content. Tap and drag with two fingers, and you show a set of tools instead.

The key thing is to use your imagination – begin with the principles of magazine design, and build out from there.

3. We’re at the very start of something new – now’s the time to play if you want to get ahead.

Here’s the really good news: we’re at the start of learning about this stuff, and as yet there’s no right or wrong way to do it. It’s like the early days of web design, when the only limitations were the technology and your imagination. It’s 1995 all over again, only this time there’s much, much more we can do in terms of design.

The really good bit is that although we can start impressing clients with what we can do now, in real terms the penetration of tablet devices isn’t likely to be that great for a couple of years. Heck, some clients are only just getting their heads around the idea they should do apps for smartphones – and there’s far, far more smart phones than tablets, and will be for quite some time!

So this is the best time to play. If there were three things that I’d suggest you do, it’s this:

1. Look at what other people are doing. As soon as you can, get an iPad into your hands, look at GQ, Popular Science and everything else. Don’t copy what they’re doing – they’re just as likely to be doing things wrong at this point as right – but look and learn.

2. Learn. You don’t need to be a coder, but understanding about what can be done with different platforms, because it will give you ideas. For example, knowing that the iPad can locate you to within a few hundred meters means that a style guide could tell you that the nearest stockist for something is just down the road, and – if it’s really clever – check with the client’s stock control system and find out if that product is in stock there too.

3. Play. There’s time right now to play with this stuff, to get inspired by what’s possible. Again, you don’t need to learn to code, but the more you play the more ideas you’ll have. So dig in.

Reblog this post [with Zemanta]

Comments on this entry are closed.

  • http://twitter.com/tomp Tom

    Great post. As someone working in UI design I really like the idea that this is a new area to explore.

    The only thing I’d question is your point about the (almost) unique unnaturalness of the mouse interface. Driving a car also requires a very specific and odd set of interactions which don’t necessarily map ‘naturally’ to the resulting outputs, but once we’ve learned the interactions they get encoded in our muscle memory and we don’t even think about them. No matter how odd the process of using a mouse might seem when considered from a distance, the reality is that for people who’ve been using a mouse for any length of time it doesn’t matter, that part of the interaction with the system is invisible. The brain is excellent at doing the kind of spatial transformation required to map mouse movements to movements on a screen (there are some really fascinating experiments where people have been shown to very quickly adapt to wearing glasses which reverse the whole world left/right or up/down). I think the most important thing about the touch screen interface is not the naturalness per-se but that fact that that naturalness changes the learning curve i.e. it’s /much/ shorter and shallower than that for a mouse; in the same way that the wii-mote made it easy for non gamers to pickup and play, the iPad (and its successors) offer the opportunity to present much more novel and application specific interactions to a more casual set of users.#

    Exciting times for UI designers/developers! As you say it feels like the mid 90’s again, really looking forward to seeing all the messy creative stuff that happens over the next few years.

    PS. I don’t know if you’ve seen this Information Architects article on their experiences with iPad design http://informationarchitects.jp/designing-for-ipad-reality-check/ definitely worth a read.

  • Ian Betteridge

    Hi Tom – you’re right about the car driving. Perhaps owing to being a non-driver I hadn’t thought about it! :)

    I’ve been thinking about the role of “place” in interaction a lot lately, in the context of how we think ourselves into physical (and virtual) spaces, interacting with objects. It’s very interesting to imagine a virtual world like Second Life that you interact with via touch rather than mouse, as I suspect that would be quite different to the third-person view and interaction model we currently have.

    And absolutely – exciting times. All bets are off!

  • Pingback: iPad at take21.org/blog

  • Pingback: iPad « take21