Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 Foot, 2 Inches: Designing Apps for Up-Close & Afar

Patrick Haney
September 13, 2013

10 Foot, 2 Inches: Designing Apps for Up-Close & Afar

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.

Patrick Haney

September 13, 2013
Tweet

More Decks by Patrick Haney

Other Decks in Design

Transcript

  1. brought to you by
    10 Foot, 2 Inches
    Designing Apps for Up-Close & Afar
    hanerino

    View Slide

  2. http://goo.gl/maps/yxVoV

    View Slide

  3. milothedo

    View Slide

  4. Desi nin
    for up-close
    & afar
    near
    far
    http://youtu.be/iZhEcRrMA-M

    View Slide

  5. Where we were

    View Slide

  6. Device Landscape

    View Slide

  7. Myth: Mobile devices
    are for when people
    are mobile

    View Slide

  8. 77%
    of mobile searches
    occur at home or work
    http://haner.in/mobilesearchmoments

    View Slide

  9. “Don't confuse context
    with intent”
    lobalmoxie
    Josh Clark
    https://vimeo.com/48327889

    View Slide

  10. View Slide

  11. “…people are buyin
    8,000 cars a week on
    eBay’s mobile app”
    John Donahoe, eBay CEO
    http://haner.in/buy8000cars

    View Slide

  12. Myth: Tablets are just
    an accessory

    View Slide

  13. http://youtu.be/btfbIVGES1I

    View Slide

  14. http://youtu.be/U7UlE-o8DQQ

    View Slide

  15. 31%
    of American adults
    own a tablet computer
    http://haner.in/deviceownership

    View Slide

  16. Myth: Television is just
    for watchin

    View Slide

  17. 77%
    of TV viewers use
    another device too
    http://haner.in/multiscreenworld

    View Slide

  18. View Slide

  19. Shop, social,
    amification, checkins

    View Slide

  20. 22%
    of smartphone searches
    prompted by TV
    http://haner.in/multiscreenworld

    View Slide

  21. Sequential &
    Simultaneous

    View Slide

  22. Sequential Usa e

    View Slide

  23. 90%
    use multiple screens to
    sequentially accomplish
    a task
    http://haner.in/multiscreenworld

    View Slide

  24. Seamless Experience

    View Slide

  25. “The experience should
    transcend the device.”
    notasausa e
    Me, ri ht now

    View Slide

  26. Simultaneous Usa e

    View Slide

  27. 57%
    of the time we use a
    smartphone, we use
    another device
    http://haner.in/multiscreenworld

    View Slide

  28. View Slide

  29. View Slide

  30. Check-in

    View Slide

  31. View Slide

  32. http://youtu.be/baFcUVyKZEw

    View Slide

  33. View Slide

  34. Second Screen Desi n

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. What about TV?

    View Slide

  44. http://haner.in/samsungtvselector

    View Slide

  45. 10 Foot Experience

    View Slide

  46. View Slide

  47. Calculatin PPI
    http://dpi.lv/

    View Slide

  48. Smart TVs
    2 million
    43 million
    Becoming more and more
    relevant every day

    View Slide

  49. View Slide

  50. View Slide

  51. Desi n for TV

    View Slide

  52. Safe Zones

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. ❖ Purpose of Application in Itself
    ❖ How useful the application is to users
    and how much pleasure it gives them
    should be considered
    ❖ Connection with the Use of TV
    ❖ Create new user experience through
    designing application linked with the
    experience in watching TV
    How to Desi n a Great
    User Experience

    View Slide

  62. Device or Brand?

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. Remotes

    View Slide

  67. Samsun Blu-ray
    remote control

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. http://youtu.be/5C1nADiC6OE

    View Slide

  72. View Slide

  73. http://youtu.be/EgyIFjGOtVc

    View Slide

  74. http://haner.in/nbckinect

    View Slide

  75. Layout

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. Colors

    View Slide

  80. View Slide

  81. Research the
    Landscape

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. Review Current
    Standards & Patterns

    View Slide

  88. Android Desi n
    Patterns
    http://haner.in/androiddesignpattern

    View Slide

  89. Goo le TV
    Desi n Patterns
    http://haner.in/googletvpatterns

    View Slide

  90. iOS Human Interface
    Guidelines
    http://haner.in/iosdevhig

    View Slide

  91. Xbox Developer
    Network
    http://www.xbox.com/en-US/developers

    View Slide

  92. Samsun TV User
    Experience Guidelines
    http://haner.in/samsungguidelines

    View Slide

  93. Gatherin & Creatin
    Assets

    View Slide

  94. http://www.teehanlax.com/tools/iphone/

    View Slide

  95. View Slide

  96. View Slide

  97. Create your own
    documentation

    View Slide

  98. View Slide

  99. Communicate

    View Slide

  100. View Slide

  101. Testin

    View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. Samsun Smart TV
    SDK & Emulator
    http://www.samsungdforum.com/devtools/sdkdownload

    View Slide

  109. Test on an Real Devices

    View Slide

  110. Undiscovered
    Territory

    View Slide

  111. brought to you by
    Thank you.
    [email protected]
    @hanerino

    View Slide