Your SlideShare is downloading. ×
0
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for Multiple Devices - Sarit Arora

545

Published on

Talk by Sarit Arora, Yahoo, at the STC India UX Conference on Saturday, August 27, 2011, conducted at WE School, Bangalore. …

Talk by Sarit Arora, Yahoo, at the STC India UX Conference on Saturday, August 27, 2011, conducted at WE School, Bangalore.

https://sites.google.com/site/stcindiaux/speakers#Sarit

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
545
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Meaningful Emotional 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 Data User Conceptual Design & Analytics andResearch Design Prototyping Feedback Evaluation Concept and Evaluation Testing
  • 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 user’sperspective)Native apps are downloaded & updates must also be downloaded (unless theyare “hybrids.”)Native apps have greater access to the device hardware & content (though that’schanging.)
  • 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  different  na1ve  apps. Gyroscope Game (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 you’ll want to create a native app. Take calls Listen to music (Skype) (Pandora) Tapparatus
  • 22. Changing Technology TrendsiOS, Android, Web OS, Windows 7…
  • 23. Changing Technology TrendsiOS PrototypingApple’s 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 Screen One of the longest standing issues in Web design has been the "everything including the kitchen sink problem” On a 1024x768 screen theres lots of pixels to fill!
  • 32. 1. Small Screen With 80% less screen space, you should know what matters most The app should have a laser-like focus on what customers need and no 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 Targets The average cursor size is 16x16 pixels, but the average size of your fingertip is 44x44 pixels Give tappable elements in your application a target area of about 44x44 pixelsThursday, May 24, 12
  • 37. 2. Fingertip TargetsThursday, May 24, 12
  • 38. 3. Animation & Gestures Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users Animation can communicate status, provide useful feedback, and help people visualize the results of their actions
  • 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 here…Websites looking and behaving like apps
  • 49. The Future is here…Websites looking and behaving like apps
  • 50. The Future is here…Companion Apps…
  • 51. A Special Thanks to…Harshad Kulkarni, Biju Damodaran and Sandeep Datar
  • 52. Thanks !Questions?

×