The document outlines 5 design principles for the iPad: 1. Simplify structures and make elements bigger and easier to touch like Duplo blocks compared to Lego. 2. Do not replicate print designs and make structures simpler for touch interaction. 3. Follow Fitts's law and make targets at least 1cm2 for touch points. 4. Use affordances where shape indicates function and represent content realistically. 5. Interact with content through scrolling, sliding, zooming and overlapping rather than complex structures.

1. design principles for the iPad
javier cañada
Thursday, February 10, 2011

2. 2
simplicity
Thursday, February 10, 2011
We introduce 5 design principles that can be used in all sorts of contexts and for all sorts of
objectives. When it comes to iPad design these principles must be applied not once but
twice-over.

3. lego duplo
web iPad
Thursday, February 10, 2011
IF THE WEB WAS LEGO, THE IPAD MUST BE DUPLO
It was Oliver Reichenstein who actually said this.
Our frames and structures must be simplified. Why? Bigger elements are visually more appealing and easier
to touch.
The old Web was an environment with infinite layers and infinite levels of complexity. The new Web is app-
based: less complex, more constrained and way more manageable.
Users feel more comfortable in spaces where they can visualize everything at a glance, where they can easily
understand what to do and how to do it.

4. Thursday, February 10, 2011
DO NOT REPLICATE PRINT
The Web is no longer a broadcast media, it’s an interactive one.
Pages can no longer replicate graphic designs that made sense in print. People today interact with the new
medium in an entirely different way. Structures must be simpler, structures must be coherent.

5. 2
fitts
Thursday, February 10, 2011
BIGGER AND NEARER
Fitts's law is a model which predicts that the time required to reach a target is directly proportional to the distance to
and the size of it.

6. Thursday, February 10, 2011
EACH TARGET SHOULD BE AT LEAST 1 CM2
Tactile devices do away with the intermediary. The mouse has disappeared and our interaction with the content is direct.
The device is set in place using one hand while the other taps, swipes and scrolls. The iPad has 11 simultaneous points
of contact and you should allow at least 1cm surface area for each one.

7. Thursday, February 10, 2011
PLACE THE MOST USED BUTTONS CLOSER TO THE THUMBS AND HANDS
Position is relevant. One must determine what the click priority zones are and understand why you’re
deciding to place this element here and not there, understand what other elements surround it, and decide
whether the placement and setting you have chosen make sense.

8. Thursday, February 10, 2011
LANDSCAPE Vs PORTRAIT
View modes will definitely shape the design. Keep them in mind and play around with them.
For example, if you’re doing an app where the user has to write a lot it might be useful to set the landscape
view as default.

9. 2
affordance
Thursday, February 10, 2011
SHAPE DETERMINES FUNCTION
Affordance is the term that refers to the properties of objects (shape, colour or the material it’s made out of)
that help us interpret how that object should be used.
Visual characteristics of the iPad help us put aside metaphors that made sense in the PC world but had
nothing to do with the real world. We can now play around and represent what we want to represent
with its actual shape and colour.
Tactile devices are targeted to both hard-techie users and non-techie users. Metaphors should less
abstract, they must be closer to reality. The more it looks like the original, the more people will be able to
understand it.

10. Thursday, February 10, 2011
PRODUCTS ARE FAITHFUL REPRESENTATIONS
For example, the iBooks app in iTunes represents visually a library.
The book you own is not represented as a line of text (like in the Kindle), but as an actual book cover. This
helps replicate our environment more realistically, and our titles are easily identifiable.

11. Thursday, February 10, 2011
Another example: the book is a book, pages are shaped as pages. The way you move through
content is by flipping pages and not scrolling.

12. 2
affordance
scroll scroll
downards upwards
Thursday, February 10, 2011
HANDS-ON DIRECT MANIPULATION
Interaction with the content (direct, without intermediaries) responds much more faithfully to our own
gestures.
Take scrolling, for example:
In a computer, you scroll down, content goes up, you scroll up, content goes down. While in the iPad, you
scroll up and content goes up, you scroll down and content goes down. The content moves along with you,
not in the opposite direction.
Direct contact allows to map our actions more faithfully.

13. 2
dimensionality
Thursday, February 10, 2011

14. 2
dimensionality
y scroll
z zoom
x slide
overlap
Thursday, February 10, 2011
There are 4 basic dimensions to interact with onscreen content: scroll, slide, zoom and overlap.

15. 2
dimensionality
y
z
x
Thursday, February 10, 2011
SCROLLABLE CONTENT (up and down):
Use it when you want to show several items per screen that are usually ordered chronologically/
consecutively.

16. 2
dimensionality
Thursday, February 10, 2011
SWIPEABLE CONTENT (going from left to right):
Use it when items need to take-up the whole screen and are not necessarily related with each other.

17. 2
dimensionality
Thursday, February 10, 2011
ZOOMABLE CONTENT (far/close):
Use it when you want to show content with details that are not visible at a glance.

18. 2
dimensionality
Thursday, February 10, 2011
OVERLAPPING ITEMS:
Contextual menus overlap the actual content. They get in between the user and the content because they
expect him/her to make an action.

19. 2
dimensionality
Thursday, February 10, 2011
Example: the information of the episode overlaps the show itself. It overlaps it because it’s asking the user
“what do you want to do with this content” (again, possible actions to do with this content).

20. 2
content & visuality
Thursday, February 10, 2011
Our browsing experience is guided by content, we select items visually.
The way we identify content is visual, not text-based.
It’s your eye that guides you. Your eye that clicks. Not your brain.

21. Thursday, February 10, 2011
Examples: episodes are recognized by stills or by logos, books are recognized by cover, people by avatars.

22. Thursday, February 10, 2011
Again, we recognize comic books by identifying the comic by its character, instead of reading
the copy. You don’t read, you see.

23. to know less
Thursday, February 10, 2011
Want to know more?...well no, not really. We actually want to know less.
Traditional information architecture concepts are useless when designing for the iPad. We
can’t use the same concepts that worked for the old Web and apply them to this new
environment. Our sources of information, our sources of inspiration, must change.

24. Thursday, February 10, 2011
Although these books were great, they had their time, they don’t help us to create in this new
environment.
Other approaches might be more useful: product and industrial design, for example.
Move away from the inheritance of graphic design, complex and infinite structures and
frames.
Why? Designers are no longer dealing with abstract structures of information.
Forget web portals! Information is now visual, elements are concrete, tangible and interactive,
they want to be manipulated.

25. thank you.
Javier Cañada leads Vostok, an interaction design studio
committed to creating smart and elegant products.
javier@vostok.es www.vostok.es
Thursday, February 10, 2011