designing for ipad
DESCRIPTION
A presentation on Designing for the iPad by Pek Pongpaet for the WindyCity Go ConferenceTRANSCRIPT
DESIGNINGFOR iPad
Pek Pongpaet
WindyCityGo, April 9, 2011
Outline1.Intro2.Statistics3.The Talk4.Quick & Dirty Wireframing
Pek
@pekpongpaetVP of Product, SpotOn Inc,
Founder of ShelfLuv
6 Mortal Kombat Games
“Design is the application of intent - the opposite of happenstance, and an antidote to accident.”
- Robert L. Peters
The Story of ...
2 Dudes
No iPad Experience
< 6 Hours
Best Entertainment AppiPadDevCamp Hackathon
Chicago, May 2010
The iPad
Statistics
15M iPads sold
- Apple, Jan 2011
75,000 iPad apps
- Apple, Mar 2011
Almost 2 years to sell
1Million iPods
74 days to sell
1 Million iPhones
28 days to sell
1 Million iPads
http://www.businessinsider.com/apple-2-million-ipad-sales-in-context-2010-5
Massive Adoption
http://www.flickr.com/photos/kominyetska/4524717824/
“...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
Who’s Buying?
http://www.flickr.com/photos/kylewith/4494321564/
iPad Users by Gender
0
17.5
35
52.5
70
iPad
Male Female
http://ymobileblog.com/blog/2010/05/06/apple-ipad-user-analysis/
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/
Just aGiant iPhone?
Laptop with no Keyboard?
3rd Category of Device
“But it can just run my iphone apps”
New Design Considerations for New Type of Device
More Surface Area
Less on the run
http://www.flickr.com/photos/wien/4785433512
More on the couch
http://www.flickr.com/photos/caribb/1415206174/
3rd Display
http://www.flickr.com/photos/48126477@N05/4861917488/
mostly a consumption device
Mockups
http://www.flickr.com/photos/pixelhalunke/4691112187/
Photos is your friend
Lighting
Original Version
Too Dark on the iPad
New Version
Just Right on the iPad
No More Mouse
Goodbye Hovers
No more tooltips
Direct Manipulation
Earlier version had navigation buttons
new version: just swipe
Make it Tactile
People wanted to touch it(even the mockup)
Handle DifferentOrientations
Eye Candyhttp://www.flickr.com/photos/stillmemory/438601340
Bland & Functional
Hot & Spicy
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
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
The Devil’s in the Details
BEFORE
AFTERTrim Shadow to show taper
lighting for added realism
shadows on stitches
Original Bookmark
Flat
Pops Out More
New Bookmark
Ergonomics
Pixel Size
width of finger
10x10 pixels
not usable
Minimize Fatigue
http://www.flickr.com/photos/26112504@N05/3031027248/
Original Design
Hands Need to Move to Reach Far
impossible to reachwithout
lifting hand
New Design
Everything is within reach
Controls on the bottom
Lunascape browser
Naming Your Baby
http://www.flickr.com/photos/jinglejammer/2239434419/
Short & Sweet
http://www.flickr.com/photos/edp-pics/4530170352/
Name gets cut off
complimentary to the name of the app
Wireframes Quick & Dirty
http://www.flickr.com/photos/pixelhalunke/4691112187/
Regular Notebooks
Step 1: Draw
Step 2: Take Picture
Step 3: Enjoy
“Design is not just what it looks like and feels like. Design is how it works.”
- Steve Jobs
blog.pekpongpaet.com
follow me on twitter
@pekpongpaet