Fragmentation of capabilities across mobile platforms creates both difficulties and opportunities as designers craft experiences for the varied platform landscape. This discussion will look at how interaction patterns are changing and how designers will create experiences that take advantage them.

1. Multiscreen Design Strategies
FloatLearning 2011
Josh Campbell
Magic Might
Friday, June 10, 2011

2. Innovation through
Magic Might
Design strategy and execution at the intersection
of mobile, web and beyond
2
Friday, June 10, 2011

3. Multiscreen Design Strategies
Magic Might 3
Friday, June 10, 2011

4. Multiscreen Design Strategies
Magic Might 4
Friday, June 10, 2011

5. Multiscreen Design Strategies
Magic Might 5
Friday, June 10, 2011

6. Topics
• How to target experiences (market overview)
• Interaction Patterns
• Gestural Differences
• Coordinated screen designs
• Q&A
Magic Might 6
Friday, June 10, 2011

7. Considerations &
Constraints
Magic Might 7
Friday, June 10, 2011

8. Considerations
The decision points you weigh in your design.
Magic Might 8
Friday, June 10, 2011

9. Constraints
The known, fixed elements that you design for.
Magic Might 9
Friday, June 10, 2011

10. UX Landscape
For “Mobile” applications
Magic Might 10
Friday, June 10, 2011

11. Impact of
Product & Software design
on Application Designers
Magic Might 11
Friday, June 10, 2011

12. iOS
Easy right?
Magic Might 12
Friday, June 10, 2011

13. Which iOS?
iOS 3, 4 or the upcoming 5?
Magic Might 13
Friday, June 10, 2011

14. Retina-Display?
Retina or Original display?
Magic Might 14
Friday, June 10, 2011

15. iPad or iPhone?
Screen dimensions
Magic Might 15
Friday, June 10, 2011

16. Even iOS has
complications
Apple still requires you to think about their product
design in your application design.
Magic Might 16
Friday, June 10, 2011

17. Android
Much less focused.
Magic Might 17
Friday, June 10, 2011

18. Android Versions
Cupcake
6
Donut
Eclair
Froyo
Gingerbread
Honeycomb
Magic Might 18
Friday, June 10, 2011

19. Android Versions
70% 64.6%
52.5%
35%
21.2%
17.5%
0.092
1.9% 2.5% 0.006
Cupcake Donut Eclair Froyo Gingerbread Honeycomb
Versions
Data collected during a 14-day period ending on June 1, 2011
http://goo.gl/sgND
Magic Might 19
Friday, June 10, 2011

20. Android Resolutions
80% 75.2%
60%
40%
20% 17%
3.3% 2.8% 0.7% 1.1%
Small Normal Large Xlarge Small Normal Large Xlarge Small Normal Large Xlarge
HDPI MDPI LDPI
Data collected during a 14-day period ending on June 1, 2011
http://goo.gl/Ow8r
Magic Might 20
Friday, June 10, 2011

21. What’s your HDPI?
800x480
854x480
960x540
1280x800
Magic Might 21
Friday, June 10, 2011

22. Screen Dimensions
4.5” 800x480
4.3” 800x480
4” 800x480
4” 960x540
3.7” 854x480
Magic Might 22
Friday, June 10, 2011

23. not to mention...
Processor differences
Color Depth
Button Placement
UI themes
Magic Might 23
Friday, June 10, 2011

24. But that’s just iOS
and Android...
Magic Might 24
Friday, June 10, 2011

25. Others are just as varied.
Magic Might 25
Friday, June 10, 2011

26. ...
Blackberry
Symbian
Windows
Palm
Magic Might 26
Friday, June 10, 2011

27. Mobile OS-North America
All phones types
40%
36.23%
30% 27.86%
21.17%
20%
10% 8.22%
6.46%
iOS Android Blackberry Symbian Other
Versions
Data collected during a 3 month period March to May 2011
http://goo.gl/o1AJW
Magic Might 27
Friday, June 10, 2011

28. Mobile OS-Worldwide
All phones types
40%
31.9%
30%
23.2%
20% 16.55% 15.56%
13.49%
10%
iOS Android Blackberry Symbian Other
Versions
Data collected during a 3 month period March to May 2011
http://goo.gl/o1AJW
Magic Might 28
Friday, June 10, 2011

29. Mobile OS-North America
Smartphones
60%
51%
45% 42%
32% 32%
30%
24%
15% 12%
8%
3% 1% 1%
0% 0%
2010 2011 2010 2011 2010 2011 2010 2011 2010 2011 2010 2011
iOS Android Blackberry Symbian WebOS Windows Phone
Data collected from March to June in 2011 and 2010
http://goo.gl/yl8O
Magic Might 29
Friday, June 10, 2011

30. Mobile OS-Worldwide
Smartphones
50%
41%
37%
37.5% 35%
27%
25%
20%
17% 16%
12.5%
6%
0.59% 0.18%
2010 2011 2010 2011 2010 2011 2010 2011 2010 2011
Symbian iOS Blackberry Android WebOS
Data collected from March to June in 2011 and 2010
http://goo.gl/yl8O
Magic Might 30
Friday, June 10, 2011

31. The landscape is clearly
fragmented...
Magic Might 31
Friday, June 10, 2011

32. Your design should be too
Magic Might 32
Friday, June 10, 2011

33. Design with a Benchmark
in mind
Magic Might 33
Friday, June 10, 2011

34. Benchmark
• Screen Size (Dimensions)
• Screen Resolution
• OS & Version
• Tablet/Phone
• Processing Speed
• Input Requirements
• Upgradability?
Magic Might 34
Friday, June 10, 2011

35. Look for the largest
market and define a clear
benchmark
Try to serve the fewest number of people with each
benchmark
Magic Might 35
Friday, June 10, 2011

36. Don’t reinvent, reorganize
Use the paradigms that are people are most
familiar with and the OS provides to make it easier...
Magic Might 36
Friday, June 10, 2011

37. A simple example
Magic Might 37
Friday, June 10, 2011

38. Twitter for iPad
Magic Might 38
Friday, June 10, 2011

39. Twitter for iPad
Magic Might 38
Friday, June 10, 2011

40. Twitter for iPad
Magic Might 38
Friday, June 10, 2011

41. Twitter for iPad
A B C
Magic Might 38
Friday, June 10, 2011

42. Twitter for OS X
Magic Might 39
Friday, June 10, 2011

43. Twitter for OS X
A B
Magic Might 39
Friday, June 10, 2011

44. Twitter for iPhone
Magic Might 40
Friday, June 10, 2011

45. Twitter for iPhone
A B C
Magic Might 40
Friday, June 10, 2011

46. Twitter for Android
Magic Might 41
Friday, June 10, 2011

47. Twitter for Android
A
B C
Magic Might 41
Friday, June 10, 2011

48. Email Account
Bob Smith 8:12 AM
Very important Message
Amazon.com 7:32 AM
Your Amazon.com order has shipped
Built in Chicago 4:32 PM
Built in Chicago Weekly Update: Spot-
TT Chicago 3:45 PM
TastingTable CHI: The city's most exciting
W3C Newsletter 2:18 PM
W3C Public Newsletter
Scott Wilson 8:12 AM
Magic Might 42
Friday, June 10, 2011

49. Email Account
Bob Smith 8:12 AM
Very important Message
Amazon.com 7:32 AM
Your Amazon.com order has shipped
Built in Chicago 4:32 PM
Built in Chicago Weekly Update: Spot-
TT Chicago 3:45 PM
TastingTable CHI: The city's most exciting
W3C Newsletter 2:18 PM
W3C Public Newsletter
Scott Wilson 8:12 AM
Magic Might 42
Friday, June 10, 2011

50. Built in Chicago 4:32 PM
Email Account
Built in Chicago Weekly Update: Spot-
light on Obtiva, Startup City and Some
Bob Events
Great Smith 8:12 AM
Very important Message
Built in Chicago
Promoting digital innovation in the
Amazon.com
world's greatest city
7:32 AM
A message to all members ofshipped
Your Amazon.com order has Built in
Chicago
Built in Chicago
Dear Built in Chicago Members, 4:32 PM
Built in Chicago Weekly Update: Spot-
A quick note to thank everyone for such
a great month of activity--we are over
TT Chicago
3,200 members and almost 800 blog PM
3:45
posts, averaging 800+ city's most exciting
TastingTable CHI: The visits/day. Be
sure to Follow Us on Twitter so we can
start sharing your updates and celebrat-
W3C Newsletter
ing your successes. Also, check out a PM
2:18
W3C Public Newsletter
few great upcoming events below-you
won't want to miss the chance to hear
some of the best local entrepreneurs
Scott Wilson A final note remind-
share their stories. 8:12 AM
ing everyone to upload a profile picture
Magic Might 42
Friday, June 10, 2011

51. Email Account A Built in Chicago 4:32 PM
Built in Chicago Weekly Update: Spot-
light on Obtiva, Startup City and Some
Bob Smith 8:12 AM Great Events
Very important Message
Built in Chicago
Promoting digital innovation in the
Amazon.com 7:32 AM
world's greatest city
Your Amazon.com order has shipped A message to all members of Built in
Chicago
Built in Chicago 4:32 PM C
Dear Built in Chicago Members,
B
Built in Chicago Weekly Update: Spot-
A quick note to thank everyone for such
a great month of activity--we are over
TT Chicago 3:45 PM 3,200 members and almost 800 blog
TastingTable CHI: The city's most exciting posts, averaging 800+ visits/day. Be
sure to Follow Us on Twitter so we can
start sharing your updates and celebrat-
W3C Newsletter 2:18 PM ing your successes. Also, check out a
W3C Public Newsletter few great upcoming events below-you
won't want to miss the chance to hear
some of the best local entrepreneurs
Scott Wilson 8:12 AM share their stories. A final note remind-
ing everyone to upload a profile picture
Magic Might 43
Friday, June 10, 2011

52. Gmail for Honeycomb
Magic Might 44
Friday, June 10, 2011

53. Gmail for Honeycomb
A B
Magic Might 44
Friday, June 10, 2011

54. Gmail for Honeycomb
Magic Might 45
Friday, June 10, 2011

55. Gmail for Honeycomb
B C
Magic Might 45
Friday, June 10, 2011

56. Sparrow OS X
Magic Might 46
Friday, June 10, 2011

57. Sparrow OS X
A B
Magic Might 46
Friday, June 10, 2011

58. Sparrow OS X
Magic Might 47
Friday, June 10, 2011

59. Sparrow OS X
A B C
Magic Might 47
Friday, June 10, 2011

60. Screen constructs for
multiple devices
Magic Might 48
Friday, June 10, 2011

61. Multi Pane
Magic Might 49
Friday, June 10, 2011

62. Grid Layouts
Magic Might 50
Friday, June 10, 2011

63. Coverflow/Carousel
Magic Might 51
Friday, June 10, 2011

64. Use interaction patterns that
work well across screens.
Multi-Pane is great for tablets & tvs
Grid layouts work well for direct manipulation
Carousels work well for indirect manipulation
Magic Might 52
Friday, June 10, 2011

65. Keep the Idea & Intent of
the application the same
Magic Might 53
Friday, June 10, 2011

66. Optimize the interaction
and layout for the target
device benchmark.
Magic Might 54
Friday, June 10, 2011

67. But what about the
fragmentation?
Magic Might 55
Friday, June 10, 2011

68. Be Ruthless.
Pick a Benchmark.
Your users will thank you.
Magic Might 56
Friday, June 10, 2011

69. Gestures & Input
Magic Might 57
Friday, June 10, 2011

70. Direct Indirect
Magic Might 58
Friday, June 10, 2011

71. Direct Indirect
Magic Might 59
Friday, June 10, 2011

72. Try to use analogous
gestures:
swipe = scroll
tap = click
press & hold = right-click
Magic Might 60
Friday, June 10, 2011

73. Last.fm Kinect
Magic Might 61
Friday, June 10, 2011

74. Last.fm Kinect
Magic Might 61
Friday, June 10, 2011

75. Gestures are slightly
different for each
platform.
You apps should be too.
Magic Might 62
Friday, June 10, 2011

76. Multi screen interactions
Magic Might 63
Friday, June 10, 2011

77. Two of the Same
Magic Might 64
Friday, June 10, 2011

78. Two Different
Magic Might 65
Friday, June 10, 2011

79. 1+ devices working in
concert
Magic Might 66
Friday, June 10, 2011

80. Two Way Communication
Magic Might 67
Friday, June 10, 2011

81. One Way Communication
Magic Might 68
Friday, June 10, 2011

82. One Way Communication
Magic Might 69
Friday, June 10, 2011

83. Inform other Participants
Magic Might 70
Friday, June 10, 2011

84. Multiple screens can
enhance an experience by
making it a shared
experience.
Magic Might 71
Friday, June 10, 2011

85. Multiple screens can
provide better input
mechanisms.
iPhone remote app provides a keyboard for Apple TV
Magic Might 72
Friday, June 10, 2011

86. Final Advice...
Magic Might 73
Friday, June 10, 2011

87. In a fragmented market
your design probably
should be too.
Magic Might 74
Friday, June 10, 2011

88. Have a tight benchmark as
a starting point for the
user experience.
Magic Might 75
Friday, June 10, 2011

89. Use gestures that are
appropriate for each
device and platform.
Magic Might 76
Friday, June 10, 2011

90. Look for opportunities to
leverage multiple screens
together for new ways to
enhance learning.
Magic Might 77
Friday, June 10, 2011

91. The market changes fast,
always be ready to adapt.
Magic Might 78
Friday, June 10, 2011

92. Questions
Magic Might 79
Friday, June 10, 2011

93. Thank you
Josh Campbell
@magicandmight
Magic Might 80
Friday, June 10, 2011