design principles for the ipad by vostok

design principles for the iPadjavier cañada

Thursday, February 10, 2011

simplicity 2


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

fitts2


BIGGER AND NEARERFitts'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 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.

affordance 2


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


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.

affordance 2

scrolldownards

scrollupwards


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.

dimensionality2


dimensionality 2

y

z

x

scroll

slide

zoom

overlap


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

dimensionality 2

y

zx


SCROLLABLE CONTENT (up and down):

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

dimensionality 2


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.

dimensionality 2


ZOOMABLE CONTENT (far/close):

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

dimensionality 2


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.

dimensionality 2


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

content & visuality 2


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

thank you.Javier Cañada leads Vostok, an interaction design studio

committed to creating smart and elegant products.

[email protected] www.vostok.es


http://www.vostok.es

















design principles for the ipad by vostok

Technology

actual content

onscreen content

swipeable content

scrollable content

zoomable content farclose

actual shape

design principles

direct contact