Designing for Multiple Devices - Sarit Arora
Embed Size (px)
Transcript of Designing for Multiple Devices - Sarit Arora
- 1. Designing for Multiple DevicesSarit Arora, Yahoo!
2. Evolving Nature of UX ComplexityUser Profiles are vast and wide. 3. Evolving Nature of UX ComplexityMany Languages, Many Cultures 4. Evolving Nature of UX ComplexityIn the consumer space, just rational and emotional design is not enoughDesigns should be meaningful.MeaningfulEmotional Rational 5. Evolving Nature of UX ComplexityChanging consumer behaviorSocial Networks preferred over email for informal communication 6. Evolving Nature of UX ComplexityThese users are using multiple devices, sometimes to do the same tasks 7. Evolving Nature of UX ComplexityPeople start their Online lives with a Mobile, not a PC 8. How do we achieve a seamless experienceacross devices? 9. Study the daily activities and the tasks of thepeople, in their context 10. Uncover how technology can improve localconditions 11. See what technology and solutions are inplace and how its being used 12. Validate that unique solutions are properlydesigned 13. Detailed DataUser ConceptualDesign & Analytics andResearchDesign PrototypingFeedback Evaluation ConceptandEvaluationTesting 14. However, to design for the multiple deviceworld a few more considerations have to betaken into accountChanging Technology TrendsPlay on Device Strengths 15. Changing Technology TrendsDevices, Apps, HTML 5 16. Changing Technology TrendsDesign for devices is more than just apps 17. Changing Technology TrendsDesign for devices is more than just apps Think Platforms 18. Changing Technology TrendsBut for apps consider..Native vs. web vs. hybrid apps?Web apps are accessed via the browser & updated automatically (from usersperspective)Native apps are downloaded & updates must also be downloaded (unless theyare hybrids.)Native apps have greater access to the device hardware & content (though thatschanging.) 19. Changing Technology TrendsWeb App ExamplesIt is easier to make a cross-pla0orm applica1on if it is on the web. It is also easier to migrate an exis1ng web-app to mobile pla0orms through a mobile-friendly web version, rather than by making a bunch of dierent na1ve apps. GyroscopeGame (Occipital)(BeatTouch) 20. Changing Technology TrendsWeb App Fluid GridA web grid system that allows designers to use the screen real estate on largemonitors and retain great design on smaller ones. 21. Changing Technology TrendsHowever, if you need device access, multi-tasking, or micropayments, in mostcases youll want to create a native app. Take callsListen to music (Skype) (Pandora) Tapparatus 22. Changing Technology TrendsiOS, Android, Web OS, Windows 7 23. Changing Technology TrendsiOS PrototypingApples iOS Interface Builder http://www.zambetti.com/ http://giveabrief.com/projects/liveview/ 24. Changing Technology TrendsPrototyping for Androidhttp://appinventor.googlelabs.com/about/index.html 25. Changing Technology TrendsPrototyping for Windows 26. Changing Technology Trends and not to forget 27. However, to design for the multiple deviceworld a few considerations have to be takeninto accountChanging Technology TrendsPlay on Device Strengths 28. Play on Device Strength 29. Design for iPhoneIt is a small 320x480 pixel screen (163ppi), 640x960 in case ofiPhone 4The size of a fingertip is 44x44 pixelsMind your gestures and animationDelight with stunning graphics, add realismMinimum required inputExpress information briefly 30. Yahoo! Finance Yahoo! Deals Yahoo! MessengerThursday, May 24, 12 31. 1. Small ScreenOne of the longest standingissues in Web design has beenthe "everything including thekitchen sink problemOn a 1024x768 screen thereslots of pixels to fill! 32. 1. Small ScreenWith 80% less screen space, youshould knowwhat matters mostThe app should have alaser-like focus on what customersneed andno room for anything else 33. 1. Small Screen 34. 1. Small Screen 35. 1. Small ScreenApp should be instantly understandableMain function should be immediately apparentMinimize the number of controls 36. 2. Fingertip TargetsThe average cursor size is 16x16pixels, but the average size of yourfingertip is 44x44 pixelsGive tappable elements in yourapplication a target area of about44x44 pixelsThursday, May 24, 12 37. 2. Fingertip TargetsThursday, May 24, 12 38. 3. Animation & GesturesAnimation is a great way tocommunicate effectively, as long asit doesnt get in the way of usersAnimation can communicate status,provide useful feedback, and helppeople visualize the results of theiractions 39. 3. Animation & GesturesThursday, May 24, 12 40. 3. Animation & GesturesUse complex gestures as shortcuts to expedite a taskAvoid associating different actions with the standard gesturesusers knowIn general, avoid defining new gestures 41. 4. Graphics & RealismThursday, May 24, 12 42. 4. Graphics & Realism When appropriate, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.Thursday, May 24, 12 43. 5. Minimum Required Input Small screen requires lot of attention to input information Text field vs. pickersThursday, May 24, 12 44. 6. Express Information Briefly Short and Direct Real life/world metaphorsThursday, May 24, 12 45. Example: Yahoo! Cricket 46. Example: Yahoo! Cricket 47. Example: Yahoo! Cricket 48. The Future is hereWebsites looking and behaving like apps 49. The Future is hereWebsites looking and behaving like apps 50. The Future is hereCompanion Apps 51. A Special Thanks toHarshad Kulkarni, Biju Damodaran and Sandeep Datar 52. Thanks !Questions?