ux for developers

93
User Experience for Developers Pek Pongpaet @pekpongpaet #cwc ChicagoWebConf 2012 #cwc

Upload: pek-pongpaet

Post on 13-Jan-2015

577 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: UX for Developers

User Experiencefor Developers

Pek Pongpaet@pekpongpaet #cwc

ChicagoWebConf 2012 #cwc

Page 2: UX for Developers

User Experiencefor Developers

Pek Pongpaet@pekpongpaet #cwc

ChicagoWebConf 2012 #cwc

(non-humans)

Page 3: UX for Developers

Pek Pongpaet

Page 4: UX for Developers
Page 5: UX for Developers
Page 6: UX for Developers
Page 7: UX for Developers
Page 8: UX for Developers
Page 9: UX for Developers
Page 10: UX for Developers
Page 11: UX for Developers
Page 12: UX for Developers
Page 13: UX for Developers
Page 14: UX for Developers

<Code/>

Page 15: UX for Developers

UX

Page 16: UX for Developers

Why Should I Care?

Page 18: UX for Developers

“Every $1 invested in usability returns between

$10 and $100” - IBM

Page 19: UX for Developers

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

What is UX?

Page 21: UX for Developers
Page 22: UX for Developers

User Needs

Page 23: UX for Developers

User NeedsTechnical

Requirements

Page 24: UX for Developers

User NeedsTechnical

Requirements

BusinessObjectives

Page 25: UX for Developers

User NeedsTechnical

Requirements

BusinessObjectives

Sweet spot

Page 26: UX for Developers

UX Lessons for Developers

Page 27: UX for Developers

"Good artists copy, great artists steal."

- Pablo Picasso

Page 28: UX for Developers
Page 29: UX for Developers
Page 30: UX for Developers
Page 31: UX for Developers
Page 32: UX for Developers
Page 33: UX for Developers

Make it Faster

Page 34: UX for Developers

0.5s increase = 20% drop in ad rev

Page 35: UX for Developers

100ms+ = -1% sales

Page 36: UX for Developers
Page 37: UX for Developers

Reduce Friction

Page 38: UX for Developers
Page 39: UX for Developers
Page 40: UX for Developers
Page 41: UX for Developers
Page 42: UX for Developers
Page 43: UX for Developers
Page 44: UX for Developers

Reduce Inconsistency

Page 45: UX for Developers
Page 46: UX for Developers
Page 47: UX for Developers
Page 48: UX for Developers
Page 49: UX for Developers
Page 50: UX for Developers
Page 51: UX for Developers

Web

Page 52: UX for Developers

iPad

Page 53: UX for Developers

Kill Features

Page 54: UX for Developers
Page 55: UX for Developers
Page 56: UX for Developers
Page 57: UX for Developers

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 59: UX for Developers

Tell people what to do

Page 60: UX for Developers
Page 61: UX for Developers
Page 62: UX for Developers

vs

Page 63: UX for Developers
Page 64: UX for Developers

“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

First Encounter

Page 66: UX for Developers

First EncounterImpression

Page 67: UX for Developers
Page 68: UX for Developers
Page 69: UX for Developers
Page 70: UX for Developers
Page 71: UX for Developers
Page 72: UX for Developers
Page 73: UX for Developers
Page 74: UX for Developers
Page 75: UX for Developers
Page 76: UX for Developers
Page 77: UX for Developers
Page 78: UX for Developers

How are people viewing your product?

Page 79: UX for Developers

10x10 pixels

not usable

Page 80: UX for Developers
Page 81: UX for Developers
Page 82: UX for Developers
Page 83: UX for Developers
Page 84: UX for Developers

Tools

Page 85: UX for Developers

Step 1: Draw

Page 86: UX for Developers

Step 2: Take Picture

Page 87: UX for Developers

Step 3: Enjoy

Page 88: UX for Developers
Page 89: UX for Developers
Page 90: UX for Developers
Page 91: UX for Developers