Designing for Multiple DevicesSarit Arora, Yahoo!
Evolving Nature of UX ComplexityUser Profiles are vast and wide.
Evolving Nature of UX ComplexityMany Languages, Many Cultures
Evolving Nature of UX ComplexityIn the consumer space, just rational and emotional design is not enoughDesigns should be m...
Evolving Nature of UX ComplexityChanging consumer behaviorSocial Networks preferred over email for informal communication
Evolving Nature of UX ComplexityThese users are using multiple devices, sometimes to do the same tasks
Evolving Nature of UX ComplexityPeople start their Online lives with a Mobile, not a PC
How do we achieve a seamless experienceacross devices?
Study the daily activities and the tasks of thepeople, in their context
Uncover how technology can improve localconditions
See what technology and solutions are inplace and how its being used
Validate that unique solutions are properlydesigned
Detailed         Data  User     Conceptual                          Design &     Analytics andResearch    Design          ...
However, to design for the multiple deviceworld… a few more considerations have to betaken into accountChanging Technology...
Changing Technology TrendsDevices, Apps, HTML 5
Changing Technology TrendsDesign for devices is more than just “apps”
Changing Technology TrendsDesign for devices is more than just “apps” – Think Platforms
Changing Technology TrendsBut for apps consider…..“Native” vs. “web” vs. “hybrid” apps?Web apps are accessed via the brows...
Changing Technology TrendsWeb App ExamplesIt	  is	  easier	  to	  make	  a	  cross-­‐pla0orm	  applica1on	  if	  it	  is	 ...
Changing Technology TrendsWeb App – Fluid GridA web grid system that allows designers to use the screen real estate on lar...
Changing Technology TrendsHowever, if you need device access, multi-tasking, or micropayments, in mostcases you’ll want to...
Changing Technology TrendsiOS, Android, Web OS, Windows 7…
Changing Technology TrendsiOS PrototypingApple’s iOS Interface Builder   http://www.zambetti.com/   http://giveabrief.com/...
Changing Technology TrendsPrototyping for Androidhttp://appinventor.googlelabs.com/about/index.html
Changing Technology TrendsPrototyping for Windows
Changing Technology Trends… and not to forget
However, to design for the multiple deviceworld… a few considerations have to be takeninto accountChanging Technology Tren...
Play on Device Strength
Design for iPhoneIt is a small 320x480 pixel screen (163ppi), 640x960 in case ofiPhone 4The size of a fingertip is 44x44 p...
Yahoo! Finance   Yahoo! Deals   Yahoo! MessengerThursday, May 24, 12
1. Small Screen                  One of the longest standing                  issues in Web design has been               ...
1. Small Screen                  With 80% less screen space, you                  should know                  what matter...
1. Small Screen
1. Small Screen
1. Small ScreenApp should be instantly understandableMain function should be immediately apparentMinimize the number of co...
2. Fingertip Targets                            The average cursor size is 16x16                            pixels, but th...
2. Fingertip TargetsThursday, May 24, 12
3. Animation & Gestures                          Animation is a great way to                          communicate effectiv...
3. Animation & GesturesThursday, May 24, 12
3. Animation & GesturesUse complex gestures as shortcuts to expedite a taskAvoid associating different actions with the st...
4. Graphics & RealismThursday, May 24, 12
4. Graphics & Realism     When appropriate, add a realistic, physical dimension to your application.     The more true to ...
5. Minimum Required Input                       Small screen requires lot of attention to input                       info...
6. Express Information Briefly                       Short and Direct                       Real life/world metaphorsThurs...
Example: Yahoo! Cricket
Example: Yahoo! Cricket
Example: Yahoo! Cricket
The Future is here…Websites looking and behaving like apps
The Future is here…Websites looking and behaving like apps
The Future is here…Companion Apps…
A Special Thanks to…Harshad Kulkarni, Biju Damodaran and Sandeep Datar
Thanks !Questions?
Upcoming SlideShare
Loading in …5
×

Designing for Multiple Devices - Sarit Arora

896 views

Published on

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
896
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing for Multiple Devices - Sarit Arora

  1. 1. Designing for Multiple DevicesSarit Arora, Yahoo!
  2. 2. Evolving Nature of UX ComplexityUser Profiles are vast and wide.
  3. 3. Evolving Nature of UX ComplexityMany Languages, Many Cultures
  4. 4. Evolving Nature of UX ComplexityIn the consumer space, just rational and emotional design is not enoughDesigns should be meaningful. Meaningful Emotional Rational
  5. 5. Evolving Nature of UX ComplexityChanging consumer behaviorSocial Networks preferred over email for informal communication
  6. 6. Evolving Nature of UX ComplexityThese users are using multiple devices, sometimes to do the same tasks
  7. 7. Evolving Nature of UX ComplexityPeople start their Online lives with a Mobile, not a PC
  8. 8. How do we achieve a seamless experienceacross devices?
  9. 9. Study the daily activities and the tasks of thepeople, in their context
  10. 10. Uncover how technology can improve localconditions
  11. 11. See what technology and solutions are inplace and how its being used
  12. 12. Validate that unique solutions are properlydesigned
  13. 13. Detailed Data User Conceptual Design & Analytics andResearch Design Prototyping Feedback Evaluation Concept and Evaluation Testing
  14. 14. However, to design for the multiple deviceworld… a few more considerations have to betaken into accountChanging Technology TrendsPlay on Device Strengths
  15. 15. Changing Technology TrendsDevices, Apps, HTML 5
  16. 16. Changing Technology TrendsDesign for devices is more than just “apps”
  17. 17. Changing Technology TrendsDesign for devices is more than just “apps” – Think Platforms
  18. 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. 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. 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. 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. 22. Changing Technology TrendsiOS, Android, Web OS, Windows 7…
  23. 23. Changing Technology TrendsiOS PrototypingApple’s iOS Interface Builder http://www.zambetti.com/ http://giveabrief.com/ projects/liveview/
  24. 24. Changing Technology TrendsPrototyping for Androidhttp://appinventor.googlelabs.com/about/index.html
  25. 25. Changing Technology TrendsPrototyping for Windows
  26. 26. Changing Technology Trends… and not to forget
  27. 27. However, to design for the multiple deviceworld… a few considerations have to be takeninto accountChanging Technology TrendsPlay on Device Strengths
  28. 28. Play on Device Strength
  29. 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. 30. Yahoo! Finance Yahoo! Deals Yahoo! MessengerThursday, May 24, 12
  31. 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. 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. 33. 1. Small Screen
  34. 34. 1. Small Screen
  35. 35. 1. Small ScreenApp should be instantly understandableMain function should be immediately apparentMinimize the number of controls
  36. 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. 37. 2. Fingertip TargetsThursday, May 24, 12
  38. 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. 39. 3. Animation & GesturesThursday, May 24, 12
  40. 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. 41. 4. Graphics & RealismThursday, May 24, 12
  42. 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. 43. 5. Minimum Required Input Small screen requires lot of attention to input information Text field vs. pickersThursday, May 24, 12
  44. 44. 6. Express Information Briefly Short and Direct Real life/world metaphorsThursday, May 24, 12
  45. 45. Example: Yahoo! Cricket
  46. 46. Example: Yahoo! Cricket
  47. 47. Example: Yahoo! Cricket
  48. 48. The Future is here…Websites looking and behaving like apps
  49. 49. The Future is here…Websites looking and behaving like apps
  50. 50. The Future is here…Companion Apps…
  51. 51. A Special Thanks to…Harshad Kulkarni, Biju Damodaran and Sandeep Datar
  52. 52. Thanks !Questions?

×