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. brought to you by
10 Foot, 2 Inches
Designing Apps for Up-Close & Afar

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

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

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

6. milothedog

8. Designing
for up-close
& afar
near
far
http://youtu.be/iZhEcRrMA-M

9. Designing for Up-Close & Afar
❖ The (Device) Landscape
❖ Assumptions & Realities
❖ Device & Design Patterns
❖ The Design Process

10. Where we were

12. http://haner.in/firstcellphonecall

13. http://flic.kr/p/6esZpf

14. http://pic.twitter.com/HYzIa6YiPQ

15. Primary &
Secondary Devices
+ +
+

16. Designing for Up-Close & Afar
❖ The (Device) Landscape
❖ Assumptions & Realities
❖ Device & Design Patterns
❖ The Design Process

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

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

19. Myth: Tablets are just
an accessory

20. http://youtu.be/btfbIVGES1I

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

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

23. Myth: Design for 1024 x
768 or 320 x 480

24. Range of computer screens

25. Range of computer screens

26. http://haner.in/isresponsive

27. Myth: Television is just
for watching

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

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

32. “Don't confuse context
with intent”
globalmoxieJosh Clark
https://vimeo.com/48327889

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

35. Sequential &
Simultaneous

36. Sequential Usage

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

39. Simultaneous Usage

40. Second Screen

42. http://zeebox.com

46. http://youtu.be/baFcUVyKZEw

47. Input Methods

48. http://haner.in/fingerfriendly

49. Other Input Methods

50. http://flic.kr/p/6hgDfB

51. Samsung Blu-ray
remote control

52. Samsung Blu-ray
remote control

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

55. http://youtu.be/EgyIFjGOtVc

56. Resolution Differences

57. http://www.apple.com/macbook-pro/features-retina/

58. 164 326 264163
PPI

60. What about TV?

61. http://haner.in/samsungtvselector

62. Calculating PPI

63. Calculating PPI

64. Calculating PPI

65. Calculating PPI
http://members.ping.de/~sven/dpi.html

66. Designing for Up-Close & Afar
❖ The (Device) Landscape
❖ Assumptions & Realities
❖ Device & Design Patterns
❖ The Design Process

67. Device or Brand?

68. Following Device
Design Patterns

73. http://rdio.com

75. Being Unique

76. http://flipboard.com

78. Path
http://path.com

79. Designing for Up-Close & Afar
❖ The (Device) Landscape
❖ Assumptions & Realities
❖ Device & Design Patterns
❖ The Design Process

80. Research the
Landscape

82. Competitive Analysis

87. Review Current
Standards

88. Android Design
Patterns
http://haner.in/androiddesignpattern

89. Google TV
Design Patterns
http://haner.in/googletvpatterns

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

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

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

93. Gathering Assets

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

96. http://haner.in/sketchiphone

100. Cross-Platform Design

101. “The experience should
transcend the device.”
notasausageMe, right now

102. Styleguides

104. Create Seamless
Experiences

105. Designers should know
how to code.

106. Designers should
understand what’s
possible.

108. Talk to each other.

110. Testing

112. South
Henrietta
Institute of
Technology

120. Samsung Smart TV
SDK & Emulator
http://www.samsungdforum.com/devtools/sdkdownload

121. Use Real Devices

122. http://clearleft.com/does/test-lab

123. http://opendevicelab.com/

124. http://reflectorapp.com

125. Documentation
(and lack-therof)

126. Create your own

127. Undiscovered
Territory

128. Thank you.
http://flic.kr/p/7NYTor

129. brought to you by
Questions?
Slides available on SpeakerDeck:
http://speakerdeck.com/notasausage