design principles for the iPadjavier cañada
Thursday, February 10, 2011
simplicity 2
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.
lego duplo
web iPad
Thursday, February 10, 2011
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.
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.
fitts2
Thursday, February 10, 2011
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.
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.
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.
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.
affordance 2
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.
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.
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.
affordance 2
scrolldownards
scrollupwards
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.
dimensionality2
Thursday, February 10, 2011
dimensionality 2
y
z
x
scroll
slide
zoom
overlap
Thursday, February 10, 2011
There are 4 basic dimensions to interact with onscreen content: scroll, slide, zoom and overlap.
dimensionality 2
y
zx
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.
dimensionality 2
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.
dimensionality 2
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.
dimensionality 2
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.
dimensionality 2
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).
content & visuality 2
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.
Thursday, February 10, 2011
Examples: episodes are recognized by stills or by logos, books are recognized by cover, people by avatars.
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.
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.
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.
thank you.Javier Cañada leads Vostok, an interaction design studio
committed to creating smart and elegant products.
[email protected] www.vostok.es
Thursday, February 10, 2011
Top Related