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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Where we were

    View full-size slide

  5. Device Landscape

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Myth: Tablets are just
    an accessory

    View full-size slide

  11. http://youtu.be/btfbIVGES1I

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Myth: Television is just
    for watchin

    View full-size slide

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

    View full-size slide

  16. Shop, social,
    amification, checkins

    View full-size slide

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

    View full-size slide

  18. Sequential &
    Simultaneous

    View full-size slide

  19. Sequential Usa e

    View full-size slide

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

    View full-size slide

  21. Seamless Experience

    View full-size slide

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

    View full-size slide

  23. Simultaneous Usa e

    View full-size slide

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

    View full-size slide

  25. http://youtu.be/baFcUVyKZEw

    View full-size slide

  26. Second Screen Desi n

    View full-size slide

  27. What about TV?

    View full-size slide

  28. http://haner.in/samsungtvselector

    View full-size slide

  29. 10 Foot Experience

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Desi n for TV

    View full-size slide

  33. ❖ 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 full-size slide

  34. Device or Brand?

    View full-size slide

  35. Samsun Blu-ray
    remote control

    View full-size slide

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

    View full-size slide

  37. http://youtu.be/EgyIFjGOtVc

    View full-size slide

  38. http://haner.in/nbckinect

    View full-size slide

  39. Research the
    Landscape

    View full-size slide

  40. Review Current
    Standards & Patterns

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Gatherin & Creatin
    Assets

    View full-size slide

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

    View full-size slide

  48. Create your own
    documentation

    View full-size slide

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

    View full-size slide

  50. Test on an Real Devices

    View full-size slide

  51. Undiscovered
    Territory

    View full-size slide

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

    View full-size slide