Designing for ipad
-
Upload
onlyone0001 -
Category
Documents
-
view
1.275 -
download
0
description
Transcript of Designing for ipad
![Page 1: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/1.jpg)
Designing for iPadEvan Doll
![Page 2: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/2.jpg)
Who am I?
• Evan Doll
• Former Apple employee
• 3 years on iPhone
• Co-taught CS193P
![Page 3: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/3.jpg)
Who am I?
• Not an Apple employee
• Waiting in line outside the Apple Store just like you
![Page 4: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/4.jpg)
Today
• How iPad changes everything
• Where does it fit?
• Designing great apps
![Page 5: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/5.jpg)
Remember
I am not anApple employee!
![Page 6: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/6.jpg)
First Things First
• I don’t know any iPad secrets
• No SDK discussion today
![Page 7: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/7.jpg)
How iPadChanges
Everything
![Page 8: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/8.jpg)
Obligatory photo:
![Page 9: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/9.jpg)
“Make the screen five inches by eight inches, and you’ll rule the world.”
- Alan Kayhttp://bit.ly/dAXgsQ
![Page 10: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/10.jpg)
News Flash:Computers are
still too complicated
![Page 11: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/11.jpg)
Those who design & build computers are most likely to
forget this
![Page 12: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/12.jpg)
The Gulf of Knowledge
![Page 13: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/13.jpg)
HackersBloggers
Tech columnistsYou
![Page 14: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/14.jpg)
Keep this in mind when evaluating new technology
![Page 15: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/15.jpg)
What’s wrong with the status quo?
![Page 16: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/16.jpg)
Files
![Page 17: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/17.jpg)
“On Mac OS X, the /System/Library/ folder...
contains over 90,000 items, not one of which a typical user should ever need to see or touch.”
- John Gruberhttp://daringfireball.net/2009/12/the_tablet
![Page 18: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/18.jpg)
My mom has ~100 files on her desktop
![Page 19: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/19.jpg)
Mouse
![Page 20: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/20.jpg)
Geeks still argue about 1-button vs.
2-button mice
![Page 21: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/21.jpg)
http://bit.ly/b5q9mK
![Page 22: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/22.jpg)
The mouse is a bug, not a feature
![Page 23: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/23.jpg)
Your StanfordC.S. Degree
![Page 24: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/24.jpg)
To your family,this still means“tech support”
![Page 25: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/25.jpg)
Not just a generation gap
![Page 26: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/26.jpg)
Opportunity to fundamentally
rethink computing
![Page 27: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/27.jpg)
Where does it fit?
![Page 29: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/29.jpg)
While drivingAt a restaurant
During the opera
![Page 30: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/30.jpg)
While drivingAt a restaurant
During the opera
![Page 31: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/31.jpg)
http://www.flickr.com/photos/arvindgrover/3163495351/
![Page 32: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/32.jpg)
http://www.flickr.com/photos/missnita/2086268311/
![Page 33: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/33.jpg)
http://www.flickr.com/photos/isurusen/3435278992/
![Page 34: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/eneas/4028061789/
![Page 35: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/35.jpg)
Laptops and iPhones are often antisocial
![Page 36: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/36.jpg)
iPad is moreinviting and shareable
![Page 37: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/37.jpg)
![Page 38: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/38.jpg)
Multi-user interactions
![Page 39: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/39.jpg)
Presenter + Viewer
![Page 40: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/40.jpg)
Multiplayer games
![Page 41: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/41.jpg)
http://www.flickr.com/photos/poodleface/482570681/
![Page 42: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/42.jpg)
CombineiPhones + iPad?
![Page 43: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/43.jpg)
Multiple Touches
![Page 44: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/44.jpg)
Room for two(or more) hands
![Page 45: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/45.jpg)
http://www.flickr.com/photos/bekahstargazing/378678206/
![Page 46: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/46.jpg)
DesigningGreat Apps
![Page 47: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/47.jpg)
(My) Three Rules
![Page 48: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/48.jpg)
1. It’s not an iPhone2. Don’t break the flow
3. Make it feel real
![Page 49: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/49.jpg)
1. It’s not an iPhone
![Page 50: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/50.jpg)
“It’s just abig iPod touch!”
- Someone on the Internet
![Page 51: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/51.jpg)
Hardware? Maybe.Software? NO!
![Page 52: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/52.jpg)
Don’t just recompileyour iPhone app
![Page 53: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/53.jpg)
Apps that do this will not be well-received
![Page 54: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/54.jpg)
2. Don’t break the flow
![Page 55: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/55.jpg)
“One view onscreen”no longer the only way
![Page 56: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/56.jpg)
![Page 57: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/57.jpg)
![Page 58: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/58.jpg)
Use split views
![Page 59: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/59.jpg)
![Page 60: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/60.jpg)
Don’t abuse it
![Page 61: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/61.jpg)
Use popovers formodal content
![Page 62: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/62.jpg)
![Page 63: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/63.jpg)
Full-screen transitionscan be disorientingon a large display
![Page 64: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/64.jpg)
3. Make it feel real
![Page 65: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/65.jpg)
Direct manipulation
![Page 66: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/66.jpg)
![Page 67: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/67.jpg)
Tactile, physical interface design
![Page 68: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/68.jpg)
Postage Classics ConvertBot
![Page 69: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/69.jpg)
![Page 70: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/70.jpg)
Realisticsound effects
![Page 71: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/71.jpg)
Animations!
![Page 72: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/72.jpg)
Not just eye candy
![Page 73: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/73.jpg)
Help user to builda mental mapof your app
![Page 74: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/74.jpg)
Some specific tips:
![Page 75: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/75.jpg)
Read theHuman Interface
Guidelines
![Page 76: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/76.jpg)
Work with agreat designer
![Page 77: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/77.jpg)
4x the pixels=
4x the ugly
![Page 78: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/78.jpg)
Performance isa BIG DEAL
![Page 79: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/79.jpg)
Test on a real iPadfor performance
and usability
![Page 80: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/80.jpg)
Build a paper iPadhttp://mashable.com/2010/02/08/paper-ipad/
![Page 81: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/81.jpg)
Reading List
• http://flyosity.com/ipad/the-ipad-is-for-everyone-but-us.php
• http://joehewitt.com/post/ipad/
• http://www.tomloverro.com/2010/02/06/ipad-analysis-history-repeats-itself/
![Page 82: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/82.jpg)
In summary...
![Page 83: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/83.jpg)
New platforms don’t come along often
![Page 84: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/84.jpg)
We are living in exciting times
![Page 85: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/85.jpg)
The possibilitiesare endless
![Page 86: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/86.jpg)
Go forth & develop!
![Page 87: Designing for ipad](https://reader034.fdocuments.in/reader034/viewer/2022052522/5479a8c2b4af9fe2158b48c7/html5/thumbnails/87.jpg)
Thanks!@edog1203