10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

674 views

Published on

The landscape of internet-ready devices is quickly growing, allowing people to access content from pocketable devices and big screen TVs alike. But designing usable interfaces for big and small is a challenge, especially when those devices are being used to compliment each other. Hear firsthand from two seasoned designers about the pitfalls and best practices of designing for these unique experiences and the Second Screen. They’ll talk about handling different methods of input and finding room for varying amounts of output, designing within existing UI constraints, and much more.

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

10-Foot 2 Inches: Designing Apps for Up-Close & Afar with Jenna Marino, Patrick Haney

  1. 1. brought to you by10 Foot, 2 InchesDesigning Apps for Up-Close & Afar
  2. 2. brought to you by10 Foot, 2 InchesDesigning Apps for Up-Close & Afarhanerino
  3. 3. http://goo.gl/maps/yxVoV
  4. 4. http://goo.gl/maps/yxVoV
  5. 5. milothedog
  6. 6. Designingfor up-close& afarnearfarhttp://youtu.be/iZhEcRrMA-M
  7. 7. Designing for Up-Close & Afar❖ The (Device) Landscape❖ Assumptions & Realities❖ Device & Design Patterns❖ The Design Process
  8. 8. Where we were
  9. 9. http://haner.in/firstcellphonecall
  10. 10. http://flic.kr/p/6esZpf
  11. 11. http://pic.twitter.com/HYzIa6YiPQ
  12. 12. Primary &Secondary Devices+ ++
  13. 13. Designing for Up-Close & Afar❖ The (Device) Landscape❖ Assumptions & Realities❖ Device & Design Patterns❖ The Design Process
  14. 14. Myth: Mobile devicesare for when peopleare mobile
  15. 15. 77%of mobile searchesoccur at home or workhttp://haner.in/mobilesearchmoments
  16. 16. Myth: Tablets are justan accessory
  17. 17. http://youtu.be/btfbIVGES1I
  18. 18. http://youtu.be/U7UlE-o8DQQ
  19. 19. 31%of American adultsown a tablet computerhttp://haner.in/deviceownership
  20. 20. Myth: Design for 1024 x768 or 320 x 480
  21. 21. Range of computer screens
  22. 22. Range of computer screens
  23. 23. http://haner.in/isresponsive
  24. 24. Myth: Television is justfor watching
  25. 25. 77%of TV viewers useanother device toohttp://haner.in/multiscreenworld
  26. 26. 22%of smartphone searchesprompted by TVhttp://haner.in/multiscreenworld
  27. 27. “Dont confuse contextwith intent”globalmoxieJosh Clarkhttps://vimeo.com/48327889
  28. 28. “…people are buying8,000 cars a week oneBay’s mobile app”John Donahoe, eBay CEOhttp://haner.in/8000cars
  29. 29. Sequential &Simultaneous
  30. 30. Sequential Usage
  31. 31. 90%use multiple screens tosequentially accomplisha task http://haner.in/multiscreenworld
  32. 32. Simultaneous Usage
  33. 33. Second Screen
  34. 34. http://zeebox.com
  35. 35. http://youtu.be/baFcUVyKZEw
  36. 36. Input Methods
  37. 37. http://haner.in/fingerfriendly
  38. 38. Other Input Methods
  39. 39. http://flic.kr/p/6hgDfB
  40. 40. Samsung Blu-rayremote control
  41. 41. Samsung Blu-rayremote control
  42. 42. http://youtu.be/5C1nADiC6OE
  43. 43. http://youtu.be/EgyIFjGOtVc
  44. 44. Resolution Differences
  45. 45. http://www.apple.com/macbook-pro/features-retina/
  46. 46. 164 326 264163PPI
  47. 47. What about TV?
  48. 48. http://haner.in/samsungtvselector
  49. 49. Calculating PPI
  50. 50. Calculating PPI
  51. 51. Calculating PPI
  52. 52. Calculating PPIhttp://members.ping.de/~sven/dpi.html
  53. 53. Designing for Up-Close & Afar❖ The (Device) Landscape❖ Assumptions & Realities❖ Device & Design Patterns❖ The Design Process
  54. 54. Device or Brand?
  55. 55. Following DeviceDesign Patterns
  56. 56. http://rdio.com
  57. 57. Being Unique
  58. 58. http://flipboard.com
  59. 59. Pathhttp://path.com
  60. 60. Designing for Up-Close & Afar❖ The (Device) Landscape❖ Assumptions & Realities❖ Device & Design Patterns❖ The Design Process
  61. 61. Research theLandscape
  62. 62. Competitive Analysis
  63. 63. Review CurrentStandards
  64. 64. Android DesignPatternshttp://haner.in/androiddesignpattern
  65. 65. Google TVDesign Patternshttp://haner.in/googletvpatterns
  66. 66. iOS Human InterfaceGuidelineshttp://haner.in/iosdevhig
  67. 67. Xbox DeveloperNetworkhttp://www.xbox.com/en-US/developers
  68. 68. Samsung TV UserExperience Guidelineshttp://haner.in/samsungguidelines
  69. 69. Gathering Assets
  70. 70. http://www.teehanlax.com/tools/iphone/
  71. 71. http://haner.in/sketchiphone
  72. 72. Cross-Platform Design
  73. 73. “The experience shouldtranscend the device.”notasausageMe, right now
  74. 74. Styleguides
  75. 75. Create SeamlessExperiences
  76. 76. Designers should knowhow to code.
  77. 77. Designers shouldunderstand what’spossible.
  78. 78. Talk to each other.
  79. 79. Testing
  80. 80. SouthHenriettaInstitute ofTechnology
  81. 81. Samsung Smart TVSDK & Emulatorhttp://www.samsungdforum.com/devtools/sdkdownload
  82. 82. Use Real Devices
  83. 83. http://clearleft.com/does/test-lab
  84. 84. http://opendevicelab.com/
  85. 85. http://reflectorapp.com
  86. 86. Documentation(and lack-therof)
  87. 87. Create your own
  88. 88. UndiscoveredTerritory
  89. 89. Thank you.http://flic.kr/p/7NYTor
  90. 90. brought to you byQuestions?Slides available on SpeakerDeck:http://speakerdeck.com/notasausage

×