Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

1

User Experience
           for Developers
                    Pek Pongpaet
                  @pekpongpaet #cwc




ChicagoWebConf 2012 #cwc

2

User Experience
           for Developers
                     (non-humans)

                    Pek Pongpaet
                  @pekpongpaet #cwc




ChicagoWebConf 2012 #cwc

3

Pek Pongpaet

4

UX for Developers

5

UX for Developers

6

UX for Developers

7

UX for Developers

8

UX for Developers

9

UX for Developers

10

UX for Developers

11

UX for Developers

12

UX for Developers

13

UX for Developers

14

<Code/>

15

UX

16

Why Should I Care?

17

http://www.slideshare.net/firstpinkgirl/the-importance-of-user-experience-for-developers

18

“Every $1 invested in
usability returns between
     $10 and $100”
                      - IBM

19

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)

20

What is UX?

21

UX for Developers

22

User Needs

23

Technical
User Needs
             Requirements

24

Technical
User Needs
              Requirements



        Business
       Objectives

25

Technical
User Needs
              Requirements



        Business      Sweet spot
       Objectives

26

UX Lessons for Developers

27

"Good artists copy,
 great artists steal."
            - Pablo Picasso

28

UX for Developers

29

UX for Developers

30

UX for Developers

31

UX for Developers

32

UX for Developers

33

Make it
Faster

34

0.5s increase = 20% drop in ad rev

35

100ms+ = -1% sales

36

UX for Developers

37

Reduce Friction

38

UX for Developers

39

UX for Developers

40

UX for Developers

41

UX for Developers

42

UX for Developers

43

UX for Developers

44

Reduce Inconsistency

45

UX for Developers

46

UX for Developers

47

UX for Developers

48

UX for Developers

49

UX for Developers

50

UX for Developers

51

Web

52

iPad

53

Kill Features

54

UX for Developers

55

UX for Developers

56

UX for Developers

57

Be like Edison



“I tested no fewer than 6,000 vegetable
   growths, and ransacked the world for
    the most suitable filament material.”
                       - Thomas Edison

58

http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page

59

Tell people what to do

60

UX for Developers

61

UX for Developers

62

vs

63

UX for Developers

64

“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

65

First Encounter

66

First Encounter
    Impression

67

UX for Developers

68

UX for Developers

69

UX for Developers

70

UX for Developers

71

UX for Developers

72

UX for Developers

73

UX for Developers

74

UX for Developers

75

UX for Developers

76

UX for Developers

77

UX for Developers

78

How are people
viewing your product?

79

10x10 pixels




not usable

80

UX for Developers

81

UX for Developers

82

UX for Developers

83

UX for Developers

84

Tools

85

Step 1: Draw

86

Step 2: Take Picture

87

Step 3: Enjoy

88

UX for Developers

89

UX for Developers

90

UX for Developers

91

UX for Developers

92

follow me on twitter
@pekpongpaet

93

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/

More Related Content

UX for Developers