designing for ipad

102
DESIGNING FOR iPad Pek Pongpaet WindyCityGo, April 9, 2011

Upload: pek-pongpaet

Post on 15-Jan-2015

11.429 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 2: Designing for iPad

Outline1.Intro2.Statistics3.The Talk4.Quick & Dirty Wireframing

Page 3: Designing for iPad

Pek

Page 4: Designing for iPad

@pekpongpaetVP of Product, SpotOn Inc,

Founder of ShelfLuv

Page 5: Designing for iPad
Page 6: Designing for iPad
Page 7: Designing for iPad
Page 8: Designing for iPad

6 Mortal Kombat Games

Page 9: Designing for iPad

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

- Robert L. Peters

Page 10: Designing for iPad

The Story of ...

Page 11: Designing for iPad
Page 12: Designing for iPad
Page 13: Designing for iPad

2 Dudes

Page 14: Designing for iPad

No iPad Experience

Page 15: Designing for iPad

< 6 Hours

Page 16: Designing for iPad
Page 17: Designing for iPad

Best Entertainment AppiPadDevCamp Hackathon

Chicago, May 2010

Page 18: Designing for iPad

The iPad

Page 19: Designing for iPad

Statistics

Page 20: Designing for iPad

15M iPads sold

- Apple, Jan 2011

Page 21: Designing for iPad

75,000 iPad apps

- Apple, Mar 2011

Page 22: Designing for iPad

Almost 2 years to sell

1Million iPods

Page 23: Designing for iPad

74 days to sell

1 Million iPhones

Page 24: Designing for iPad

28 days to sell

1 Million iPads

http://www.businessinsider.com/apple-2-million-ipad-sales-in-context-2010-5

Page 25: Designing for iPad

Massive Adoption

http://www.flickr.com/photos/kominyetska/4524717824/

Page 26: Designing for iPad

“...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

Page 27: Designing for iPad

Who’s Buying?

http://www.flickr.com/photos/kylewith/4494321564/

Page 28: Designing for iPad

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/

Page 29: Designing for iPad

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/

Page 30: Designing for iPad

Just aGiant iPhone?

Page 31: Designing for iPad

Laptop with no Keyboard?

Page 32: Designing for iPad

3rd Category of Device

Page 33: Designing for iPad

“But it can just run my iphone apps”

Page 34: Designing for iPad
Page 35: Designing for iPad
Page 36: Designing for iPad

New Design Considerations for New Type of Device

Page 37: Designing for iPad

More Surface Area

Page 38: Designing for iPad
Page 39: Designing for iPad
Page 40: Designing for iPad

Less on the run

http://www.flickr.com/photos/wien/4785433512

Page 41: Designing for iPad
Page 42: Designing for iPad

More on the couch

Page 44: Designing for iPad

3rd Display

http://www.flickr.com/photos/48126477@N05/4861917488/

Page 45: Designing for iPad

mostly a consumption device

Page 46: Designing for iPad

Mockups

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

Page 47: Designing for iPad

Photos is your friend

Page 48: Designing for iPad

Lighting

Page 49: Designing for iPad

Original Version

Too Dark on the iPad

Page 50: Designing for iPad

New Version

Just Right on the iPad

Page 51: Designing for iPad

No More Mouse

Page 52: Designing for iPad

Goodbye Hovers

Page 53: Designing for iPad

No more tooltips

Page 54: Designing for iPad

Direct Manipulation

Page 55: Designing for iPad
Page 56: Designing for iPad

Earlier version had navigation buttons

Page 57: Designing for iPad

new version: just swipe

Page 58: Designing for iPad

Make it Tactile

Page 59: Designing for iPad

People wanted to touch it(even the mockup)

Page 60: Designing for iPad
Page 61: Designing for iPad

Handle DifferentOrientations

Page 62: Designing for iPad
Page 63: Designing for iPad
Page 64: Designing for iPad

Eye Candyhttp://www.flickr.com/photos/stillmemory/438601340

Page 65: Designing for iPad

Bland & Functional

Page 66: Designing for iPad
Page 67: Designing for iPad
Page 68: Designing for iPad

Hot & Spicy

Page 69: Designing for iPad

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

Page 70: Designing for iPad
Page 71: Designing for iPad
Page 72: Designing for iPad
Page 73: Designing for iPad

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

Page 74: Designing for iPad
Page 75: Designing for iPad
Page 76: Designing for iPad
Page 77: Designing for iPad

The Devil’s in the Details

Page 78: Designing for iPad

BEFORE

Page 79: Designing for iPad

AFTERTrim Shadow to show taper

lighting for added realism

shadows on stitches

Page 80: Designing for iPad

Original Bookmark

Flat

Page 81: Designing for iPad

Pops Out More

New Bookmark

Page 82: Designing for iPad

Ergonomics

Page 83: Designing for iPad

Pixel Size

Page 84: Designing for iPad

width of finger

Page 85: Designing for iPad

10x10 pixels

not usable

Page 86: Designing for iPad

Minimize Fatigue

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

Page 87: Designing for iPad

Original Design

Hands Need to Move to Reach Far

impossible to reachwithout

lifting hand

Page 88: Designing for iPad

New Design

Everything is within reach

Page 89: Designing for iPad

Controls on the bottom

Lunascape browser

Page 90: Designing for iPad

Naming Your Baby

http://www.flickr.com/photos/jinglejammer/2239434419/

Page 91: Designing for iPad

Short & Sweet

http://www.flickr.com/photos/edp-pics/4530170352/

Page 92: Designing for iPad

Name gets cut off

Page 93: Designing for iPad
Page 94: Designing for iPad

complimentary to the name of the app

Page 95: Designing for iPad

Wireframes Quick & Dirty

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

Page 96: Designing for iPad

Regular Notebooks

Page 97: Designing for iPad

Step 1: Draw

Page 98: Designing for iPad

Step 2: Take Picture

Page 99: Designing for iPad

Step 3: Enjoy

Page 101: Designing for iPad

blog.pekpongpaet.com

Page 102: Designing for iPad

follow me on twitter

@pekpongpaet