Design principles for the iPad by Vostok


Published on

Traditional information architecture concepts are useless when designing for the iPad. Our sources of information, our sources of inspiration, must evolve. Here are 5 design principles that must be applied not once but twice-over.

Published in: Technology, Business

Design principles for the iPad by Vostok

  1. 1. design principles for the iPad javier cañadaThursday, February 10, 2011
  2. 2. 2 simplicityThursday, February 10, 2011We introduce 5 design principles that can be used in all sorts of contexts and for all sorts ofobjectives. When it comes to iPad design these principles must be applied not once buttwice-over.
  3. 3. lego duplo web iPadThursday, February 10, 2011IF 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 easierto 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 easilyunderstand what to do and how to do it.
  4. 4. Thursday, February 10, 2011DO NOT REPLICATE PRINTThe 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 newmedium in an entirely different way. Structures must be simpler, structures must be coherent.
  5. 5. 2 fittsThursday, February 10, 2011BIGGER AND NEARERFittss law is a model which predicts that the time required to reach a target is directly proportional to the distance toand the size of it.
  6. 6. Thursday, February 10, 2011EACH TARGET SHOULD BE AT LEAST 1 CM2Tactile 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 pointsof contact and you should allow at least 1cm surface area for each one.
  7. 7. Thursday, February 10, 2011PLACE THE MOST USED BUTTONS CLOSER TO THE THUMBS AND HANDSPosition is relevant. One must determine what the click priority zones are and understand why you’redeciding to place this element here and not there, understand what other elements surround it, and decidewhether the placement and setting you have chosen make sense.
  8. 8. Thursday, February 10, 2011LANDSCAPE Vs PORTRAITView 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 landscapeview as default.
  9. 9. 2 affordanceThursday, February 10, 2011SHAPE DETERMINES FUNCTIONAffordance 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 hadnothing to do with the real world. We can now play around and represent what we want to representwith its actual shape and colour.Tactile devices are targeted to both hard-techie users and non-techie users. Metaphors should lessabstract, they must be closer to reality. The more it looks like the original, the more people will be able tounderstand it.
  10. 10. Thursday, February 10, 2011PRODUCTS ARE FAITHFUL REPRESENTATIONSFor 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. Thishelps replicate our environment more realistically, and our titles are easily identifiable.
  11. 11. Thursday, February 10, 2011Another example: the book is a book, pages are shaped as pages. The way you move throughcontent is by flipping pages and not scrolling.
  12. 12. 2 affordance scroll scroll downards upwardsThursday, February 10, 2011HANDS-ON DIRECT MANIPULATIONInteraction with the content (direct, without intermediaries) responds much more faithfully to our owngestures.Take scrolling, for example:In a computer, you scroll down, content goes up, you scroll up, content goes down. While in the iPad, youscroll 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. 13. 2 dimensionalityThursday, February 10, 2011
  14. 14. 2 dimensionality y scroll z zoom x slide overlapThursday, February 10, 2011There are 4 basic dimensions to interact with onscreen content: scroll, slide, zoom and overlap.
  15. 15. 2 dimensionality y z xThursday, February 10, 2011SCROLLABLE CONTENT (up and down):Use it when you want to show several items per screen that are usually ordered chronologically/consecutively.
  16. 16. 2 dimensionalityThursday, February 10, 2011SWIPEABLE 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. 17. 2 dimensionalityThursday, February 10, 2011ZOOMABLE CONTENT (far/close):Use it when you want to show content with details that are not visible at a glance.
  18. 18. 2 dimensionalityThursday, February 10, 2011OVERLAPPING ITEMS:Contextual menus overlap the actual content. They get in between the user and the content because theyexpect him/her to make an action.
  19. 19. 2 dimensionalityThursday, February 10, 2011Example: 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. 20. 2 content & visualityThursday, February 10, 2011Our 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. 21. Thursday, February 10, 2011Examples: episodes are recognized by stills or by logos, books are recognized by cover, people by avatars.
  22. 22. Thursday, February 10, 2011Again, we recognize comic books by identifying the comic by its character, instead of readingthe copy. You don’t read, you see.
  23. 23. to know lessThursday, February 10, 2011Want to know more?...well no, not really. We actually want to know less.Traditional information architecture concepts are useless when designing for the iPad. Wecan’t use the same concepts that worked for the old Web and apply them to this newenvironment. Our sources of information, our sources of inspiration, must change.
  24. 24. Thursday, February 10, 2011Although these books were great, they had their time, they don’t help us to create in this newenvironment.Other approaches might be more useful: product and industrial design, for example.Move away from the inheritance of graphic design, complex and infinite structures andframes.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. 25. thank you. Javier Cañada leads Vostok, an interaction design studio committed to creating smart and elegant products. www.vostok.esThursday, February 10, 2011