Design principles for the iPad by Vostok

design principles for the iPad
javier cañada

Thursday, February 10, 2011

2
simplicity


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.

lego duplo

web iPad


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.


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.

2
ﬁtts


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.


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.


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.


LANDSCAPE Vs PORTRAIT

View modes will deﬁnitely 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.

2
affordance


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.


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 identiﬁable.


Another example: the book is a book, pages are shaped as pages. The way you move through
content is by ﬂipping pages and not scrolling.

2
affordance

scroll scroll
downards upwards


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.

2
dimensionality


2
dimensionality

y scroll

z zoom

x slide

overlap


There are 4 basic dimensions to interact with onscreen content: scroll, slide, zoom and overlap.

2
dimensionality
y

z
x


SCROLLABLE CONTENT (up and down):

Use it when you want to show several items per screen that are usually ordered chronologically/
consecutively.

2
dimensionality


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.

2
dimensionality


ZOOMABLE CONTENT (far/close):

Use it when you want to show content with details that are not visible at a glance.

2
dimensionality


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.

2
dimensionality


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).

2
content & visuality


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.


Examples: episodes are recognized by stills or by logos, books are recognized by cover, people by avatars.


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

to know less


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.


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 inﬁnite 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.

thank you.
Javier Cañada leads Vostok, an interaction design studio
committed to creating smart and elegant products.

javier@vostok.es www.vostok.es


Design principles for the iPad by Vostok

More Related Content

Similar to Design principles for the iPad by Vostok

Recently uploaded

Design principles for the iPad by Vostok