ux for developers
DESCRIPTION
TRANSCRIPT
![Page 1: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/1.jpg)
User Experiencefor Developers
Pek Pongpaet@pekpongpaet #cwc
ChicagoWebConf 2012 #cwc
![Page 2: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/2.jpg)
User Experiencefor Developers
Pek Pongpaet@pekpongpaet #cwc
ChicagoWebConf 2012 #cwc
(non-humans)
![Page 3: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/3.jpg)
Pek Pongpaet
![Page 4: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/4.jpg)
![Page 5: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/5.jpg)
![Page 6: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/6.jpg)
![Page 7: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/7.jpg)
![Page 8: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/8.jpg)
![Page 9: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/9.jpg)
![Page 10: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/10.jpg)
![Page 11: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/11.jpg)
![Page 12: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/12.jpg)
![Page 13: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/13.jpg)
![Page 14: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/14.jpg)
<Code/>
![Page 15: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/15.jpg)
UX
![Page 16: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/16.jpg)
Why Should I Care?
![Page 17: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/17.jpg)
http://www.slideshare.net/firstpinkgirl/the-importance-of-user-experience-for-developers
![Page 18: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/18.jpg)
“Every $1 invested in usability returns between
$10 and $100” - IBM
![Page 19: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/19.jpg)
Metrics UX Improves
• reduced support costs
• customer retention length
• higher customer satisfaction
• brand awareness
• category leadership
• higher price points
• industry accolades
• proliferation, integration (like Twitter)
• no cost marketing (word of mouth, free pr)
![Page 20: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/20.jpg)
What is UX?
![Page 21: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/21.jpg)
![Page 22: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/22.jpg)
User Needs
![Page 23: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/23.jpg)
User NeedsTechnical
Requirements
![Page 24: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/24.jpg)
User NeedsTechnical
Requirements
BusinessObjectives
![Page 25: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/25.jpg)
User NeedsTechnical
Requirements
BusinessObjectives
Sweet spot
![Page 26: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/26.jpg)
UX Lessons for Developers
![Page 27: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/27.jpg)
"Good artists copy, great artists steal."
- Pablo Picasso
![Page 28: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/28.jpg)
![Page 29: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/29.jpg)
![Page 30: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/30.jpg)
![Page 31: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/31.jpg)
![Page 32: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/32.jpg)
![Page 33: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/33.jpg)
Make it Faster
![Page 34: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/34.jpg)
0.5s increase = 20% drop in ad rev
![Page 35: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/35.jpg)
100ms+ = -1% sales
![Page 36: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/36.jpg)
![Page 37: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/37.jpg)
Reduce Friction
![Page 38: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/38.jpg)
![Page 39: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/39.jpg)
![Page 40: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/40.jpg)
![Page 41: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/41.jpg)
![Page 42: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/42.jpg)
![Page 43: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/43.jpg)
![Page 44: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/44.jpg)
Reduce Inconsistency
![Page 45: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/45.jpg)
![Page 46: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/46.jpg)
![Page 47: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/47.jpg)
![Page 48: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/48.jpg)
![Page 49: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/49.jpg)
![Page 50: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/50.jpg)
![Page 51: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/51.jpg)
Web
![Page 52: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/52.jpg)
iPad
![Page 53: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/53.jpg)
Kill Features
![Page 54: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/54.jpg)
![Page 55: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/55.jpg)
![Page 56: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/56.jpg)
![Page 57: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/57.jpg)
Be like Edison
“I tested no fewer than 6,000 vegetable growths, and ransacked the world for the most suitable filament material.”
- Thomas Edison
![Page 58: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/58.jpg)
http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
![Page 59: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/59.jpg)
Tell people what to do
![Page 60: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/60.jpg)
![Page 61: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/61.jpg)
![Page 62: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/62.jpg)
vs
![Page 63: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/63.jpg)
![Page 64: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/64.jpg)
“Force the user to take actions e.g. don't allow them to click the logo in the header and "escape
out the flow”- Andy Johns, Product Manager of User Growth at Quora
![Page 65: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/65.jpg)
First Encounter
![Page 66: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/66.jpg)
First EncounterImpression
![Page 67: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/67.jpg)
![Page 68: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/68.jpg)
![Page 69: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/69.jpg)
![Page 70: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/70.jpg)
![Page 71: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/71.jpg)
![Page 72: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/72.jpg)
![Page 73: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/73.jpg)
![Page 74: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/74.jpg)
![Page 75: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/75.jpg)
![Page 76: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/76.jpg)
![Page 77: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/77.jpg)
![Page 78: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/78.jpg)
How are people viewing your product?
![Page 79: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/79.jpg)
10x10 pixels
not usable
![Page 80: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/80.jpg)
![Page 81: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/81.jpg)
![Page 82: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/82.jpg)
![Page 83: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/83.jpg)
![Page 84: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/84.jpg)
Tools
![Page 85: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/85.jpg)
Step 1: Draw
![Page 86: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/86.jpg)
Step 2: Take Picture
![Page 87: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/87.jpg)
Step 3: Enjoy
![Page 88: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/88.jpg)
![Page 89: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/89.jpg)
![Page 90: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/90.jpg)
![Page 91: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/91.jpg)
![Page 92: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/92.jpg)
follow me on twitter
@pekpongpaet
![Page 93: UX for Developers](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b4887d4a7959da6c8b4569/html5/thumbnails/93.jpg)
Resources• http://www.mobile-patterns.com/
• http://inspired-ui.com/
• http://patterntap.com/
• http://productplanner.com/
• http://fieldtestapp.com/
• http://www.uistencils.com/
• http://www.pinstagram.co/
• http://itunes.apple.com/us/app/