A presentation on Designing for the iPad by Pek Pongpaet for the WindyCity Go Conference

1. DESIGNING
FOR iPad
Pek Pongpaet
WindyCityGo, April 9, 2011

2. Outline
1.Intro
2.Statistics
3.The Talk
4.Quick & Dirty Wireframing

3. Pek

4. @pekpongpaet
VP of Product, SpotOn Inc,
Founder of ShelfLuv

8. 6 Mortal Kombat Games

9. “Design is the application of intent -
the opposite of happenstance,
and an antidote to accident.”
- Robert L. Peters

10. The Story of ...

13. 2 Dudes

14. No iPad Experience

15. < 6 Hours

17. Best Entertainment App
iPadDevCamp Hackathon
Chicago, May 2010

18. The iPad

19. Statistics

20. 15M iPads sold
- Apple, Jan 2011

21. 75,000 iPad apps
- Apple, Mar 2011

22. 2
Almost years
to sell
1Million iPods

23. 74 days to sell
1 Million iPhones

24. 28 days to sell
1 Million iPads
http://www.businessinsider.com/apple-2-million-ipad-sales-in-context-2010-5

25. Massive Adoption
http://www.flickr.com/photos/kominyetska/4524717824/

26. “...the iPad had cannibalized sales
from laptop PCs, especially
netbooks, by as much as 50%.”
-Brian Dunn, CEO Best Buy
http://online.wsj.com/article/SB10001424052748703376504575491533125103528.html

27. Who’s Buying?
http://www.flickr.com/photos/kylewith/4494321564/

28. iPad Users by Gender
Male Female
70
52.5
35
17.5
0
iPad
http://ymobileblog.com/blog/2010/05/06/apple-ipad-user-analysis/

29. Other Statistics
• 58.0% have bachelor’s degrees or higher
• 44.3% with household income > $100,000
• 48.7% own iPod touches
• 43.0% own iPhones
• 27.2% own Blackberry devices
http://designtaxi.com/news/31438/AdColony-Releases-iPad-User-Survey-Demographics/

30. Just a
Giant iPhone?

31. Laptop with no Keyboard?

32. 3rd Category of Device

33. “But it can just run my
iphone apps”

36. New Design Considerations
for New Type of Device

37. More Surface Area

40. Less on the run
http://www.flickr.com/photos/wien/4785433512

42. More on the couch

43. http://www.flickr.com/photos/caribb/1415206174/

44. 3rd Display
http://www.flickr.com/photos/48126477@N05/4861917488/

45. mostly a consumption device

46. Mockups
http://www.flickr.com/photos/pixelhalunke/4691112187/

47. Photos is your friend

48. Lighting

49. Original Version
Too Dark on the iPad

50. New Version
Just Right on the iPad

51. No More Mouse

52. Goodbye Hovers

53. No more tooltips

54. Direct Manipulation

56. Earlier version had navigation buttons

57. new version: just swipe

58. Make it Tactile

59. People wanted to touch it
(even the mockup)

61. Handle Different
Orientations

64. Eye Candy
http://www.flickr.com/photos/stillmemory/438601340

65. Bland & Functional

68. Hot & Spicy

69. Add Physicality and
Heightened Realism
Whenever possible, add a realistic, physical dimension
to your application. The more true to life your
application looks and behaves, the easier it is for people
to understand how it works and the more they enjoy
using it.
- iPad Human Interface Guidelines

73. Delight People with
Stunning Graphics
One way to increase the perceived value of your
application is to replicate the look of high-quality or
precious materials. [ ex. leather, metal, wood]
- iPad Human Interface Guidelines

77. The Devil’s in the Details

78. BEFORE

79. Trim AFTER Shadow to
show taper
shadows on
stitches lighting for
added realism

80. Original Bookmark
Flat

81. New Bookmark
Pops Out More

82. Ergonomics

83. Pixel Size

84. width of finger

85. 10x10 pixels
not usable

86. Minimize Fatigue
http://www.flickr.com/photos/26112504@N05/3031027248/

87. Original Design
impossible
to reach
without
lifting hand
Hands Need to Move to Reach Far

88. New Design
Everything is within reach

89. Lunascape browser
Controls on the bottom

90. Naming Your Baby
http://www.flickr.com/photos/jinglejammer/2239434419/

91. Short & Sweet
http://www.flickr.com/photos/edp-pics/4530170352/

92. Name gets cut off

94. complimentary to the name
of the app

95. Wireframes
Quick & Dirty
http://www.flickr.com/photos/pixelhalunke/4691112187/

96. Regular Notebooks

97. Step 1: Draw

98. Step 2: Take Picture

99. Step 3: Enjoy

100. “Design is not just what it
looks like and feels like.
Design is how it works.”
- Steve Jobs

101. blog.pekpongpaet.com

102. follow me on twitter
@pekpongpaet