UX Eye for the JavaScript Guy or Gal

Slide 1

Slide 1 text

JOHN ATHAYDE NATION JS OCTOBER 2013 Thursday, October 10, 13

Slide 2

Slide 2 text

Thursday, October 10, 13

Slide 3

Slide 3 text

Thursday, October 10, 13

Slide 4

Slide 4 text

Thursday, October 10, 13

Slide 5

Slide 5 text

Thursday, October 10, 13

Slide 6

Slide 6 text

Thursday, October 10, 13

Slide 7

Slide 7 text

Thursday, October 10, 13

Slide 8

Slide 8 text

Thursday, October 10, 13

Slide 9

Slide 9 text

Thursday, October 10, 13

Slide 10

Slide 10 text

hat is u ? Thursday, October 10, 13

Slide 11

Slide 11 text

http://usabilityfail.com/?p=345 Thursday, October 10, 13

Slide 12

Slide 12 text

Thursday, October 10, 13

Slide 13

Slide 13 text

Thursday, October 10, 13

Slide 14

Slide 14 text

IROQUOIS THEATRE FIRE 600+ PEOPLE DIED PUSHED UP AGAINST THE DOORS 1903 Thursday, October 10, 13

Slide 15

Slide 15 text

Thursday, October 10, 13

Slide 16

Slide 16 text

Thursday, October 10, 13

Slide 17

Slide 17 text

Thursday, October 10, 13

Slide 18

Slide 18 text

Thursday, October 10, 13

Slide 19

Slide 19 text

UI UX IA Thursday, October 10, 13

Slide 20

Slide 20 text

UX? USER EXPERIENCE Thursday, October 10, 13

Slide 21

Slide 21 text

“ the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments” Thursday, October 10, 13

Slide 22

Slide 22 text

THE PROMPTNESS WITH WHICH USERS LEARN TO USE SOMETHING Thursday, October 10, 13

Slide 23

Slide 23 text

THE EFFICIENCY THEY ATTAIN WHILE MAKING USE OF IT Thursday, October 10, 13

Slide 24

Slide 24 text

HOW EASY IT IS FOR THEM TO REMEMBER HOW TO USE IT Thursday, October 10, 13

Slide 25

Slide 25 text

HOW ERROR-PRONE IT IS Thursday, October 10, 13

Slide 26

Slide 26 text

& THE LEVEL OF SATISFACTION THEY ATTAIN FROM USING IT Thursday, October 10, 13

Slide 27

Slide 27 text

Thursday, October 10, 13

Slide 28

Slide 28 text

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index Thursday, October 10, 13

Slide 29

Slide 29 text

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index Thursday, October 10, 13

Slide 30

Slide 30 text

Thursday, October 10, 13

Slide 31

Slide 31 text

60fps http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13

Slide 32

Slide 32 text

24 film 29.97 NTSC 25 PAL Thursday, October 10, 13

Slide 33

Slide 33 text

2:3 PULLDOWN TELECINE Thursday, October 10, 13

Slide 34

Slide 34 text

Thursday, October 10, 13

Slide 35

Slide 35 text

60fps http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13

Slide 36

Slide 36 text

~16ms http://speakerdeck.com/jaffathecake/rendering-without-lumps Thursday, October 10, 13

Slide 37

Slide 37 text

http://vimeo.com/61342267 Keith Pitt & Mario Visic Thursday, October 10, 13

Slide 38

Slide 38 text

NETWORK LINK CONDITIONER Thursday, October 10, 13

Slide 39

Slide 39 text

PLACE YOUR JA VASCRIPT AT THE END OF THE HTML FILE Thursday, October 10, 13

Slide 40

Slide 40 text

Performant Systems Thursday, October 10, 13

Slide 41

Slide 41 text

<100ms Thursday, October 10, 13

Slide 42

Slide 42 text

Thursday, October 10, 13

Slide 43

Slide 43 text

§508 www.section508.gov Thursday, October 10, 13

Slide 44

Slide 44 text

http://www.flickr.com/photos/scooter811/1475730494/ GOOGLE IS A BLIND USER Thursday, October 10, 13

Slide 45

Slide 45 text

AN ACCESSIBLE WEBSITE BENEFITS ALL USERS NOT JUST THE DISABLED Thursday, October 10, 13

Slide 46

Slide 46 text

ACCESSIBILITY IS A SUBSET OF USABILITY Thursday, October 10, 13

Slide 47

Slide 47 text

A WEBSITE IS NOT USABLE UNLESS IT IS ACCESSIBLE Thursday, October 10, 13

Slide 48

Slide 48 text

USABILITY IMPLIES ACCESSIBILITY BUT THE OPPOSITE IS NOT NECESSARILY TRUE Thursday, October 10, 13

Slide 49

Slide 49 text

BREAKING BROWSER BEhAVIOR B3 Thursday, October 10, 13

Slide 50

Slide 50 text

Thursday, October 10, 13

Slide 51

Slide 51 text

command-shift-left/right Thursday, October 10, 13

Slide 52

Slide 52 text

Thursday, October 10, 13

Slide 53

Slide 53 text

Thursday, October 10, 13

Slide 54

Slide 54 text

Thursday, October 10, 13

Slide 55

Slide 55 text

Thursday, October 10, 13

Slide 56

Slide 56 text

Thursday, October 10, 13

Slide 57

Slide 57 text

Thursday, October 10, 13

Slide 58

Slide 58 text

FAKE USERS TO HELP GUIDE YOU DESIGN PERSONAS Thursday, October 10, 13

Slide 59

Slide 59 text

Thursday, October 10, 13

Slide 60

Slide 60 text

Front Line Consumer Advocate (CA) TITLE Consumer Advocate (CA) ROLE Individual who is the general system user, interacting with customers via phone and email (and eventually chat) to resolve support issues that customers have with LivingSocial, it’s deals, or it’s merchants. JOB TASKS • Answer phone • Create and manage cases • Issue refunds • Resolve customer issues GOALS, FEARS, AND ASPIRATIONS • Meet daily quota (fear of not meeting quota) • Working on projects by accomplishing high close rate • Fear of customer anger especially w/r/t refund policy • Avoiding mandatory overtime by meeting their quotas and closing cases more quickly COMPUTER SKILLS, KNOWLEDGE, AND ABILITIES • Wide range of ability and knowledge. • Needs to be able to use a browser, answer the phone in a professional manner • Able to multi-task and keep critical information correctly in their heads • Ability to get trained on the tools (currently SalesForce, phone system) GROUP SIZE AND INFLUENCE This is currently the largest group at 130 individuals (not including senior CAs but including international users) MEANS OF COMMUNICATION SalesForce chatter, team meetings with team leads, IM/GoogleTalk, email. INTERNAL TOOLS: CSR PERSONAS 3 Athayde Confidential | For internal use only Thursday, October 10, 13

Slide 61

Slide 61 text

WHAT ARE PEOPLE TRYING TO DO? MENTAL MODELS Thursday, October 10, 13

Slide 62

Slide 62 text

Thursday, October 10, 13

Slide 63

Slide 63 text

http://rosenfeldmedia.com/books/mental-models/ Thursday, October 10, 13

Slide 64

Slide 64 text

NO, THE OTHER BUTTON! USER TESTING Thursday, October 10, 13

Slide 65

Slide 65 text

Thursday, October 10, 13

Slide 66

Slide 66 text

Thursday, October 10, 13

Slide 67

Slide 67 text

Thursday, October 10, 13

Slide 68

Slide 68 text

PERCEPTION AGAIN DID I BREAK IT? Thursday, October 10, 13

Slide 69

Slide 69 text

undefined Thursday, October 10, 13

Slide 70

Slide 70 text

RETURN ERRORS THAT MAKE SENSE Thursday, October 10, 13

Slide 71

Slide 71 text

Thursday, October 10, 13

Slide 72

Slide 72 text

“but I hit submit...” Thursday, October 10, 13

Slide 73

Slide 73 text

“I sent you the link, why aren’t you seeing the same thing I am?” Thursday, October 10, 13

Slide 74

Slide 74 text

“Why did reload take me back to the home page?” Thursday, October 10, 13

Slide 75

Slide 75 text

Thursday, October 10, 13

Slide 76

Slide 76 text

Hand Holding Thursday, October 10, 13

Slide 77

Slide 77 text

USE THE RIGHT AMOUNT OF FEEDBACK FOR ACTIONS Thursday, October 10, 13

Slide 78

Slide 78 text

Thursday, October 10, 13

Slide 79

Slide 79 text

Thursday, October 10, 13

Slide 80

Slide 80 text

Thursday, October 10, 13

Slide 81

Slide 81 text

TOUCHABILITY Thursday, October 10, 13

Slide 82

Slide 82 text

Thursday, October 10, 13

Slide 83

Slide 83 text

NETWORK LINK CONDITIONER Thursday, October 10, 13

Slide 84

Slide 84 text

DESTRUCTIVE ACTIONS SHOULD BE HARDER THAN NON- DESTRUCTIVE ACTIONS Thursday, October 10, 13

Slide 85

Slide 85 text

BE LENIENT AND PROVIDE AN EASY WAY TO UNDO Thursday, October 10, 13

Slide 86

Slide 86 text

Thursday, October 10, 13

Slide 87

Slide 87 text

DON’T BE OVEREAGER WITH YOUR VALIDATING Thursday, October 10, 13

Slide 88

Slide 88 text

DON’T STEAL FOCUS (e.g. alert();) Thursday, October 10, 13

Slide 89

Slide 89 text

OPTIMIZE FOR WHAT FEELS FAST REGARDLESS OF WHAT IS FASTER Thursday, October 10, 13

Slide 90

Slide 90 text

DON’T HURT POWER USERS TO HELP NEW USERS (AND VICE-VERSA) Thursday, October 10, 13

Slide 91

Slide 91 text

HOW WE DO THE THINGS WE DO PROCESS Thursday, October 10, 13

Slide 92

Slide 92 text

RESEARCH SHADOWING, BUSINESS ANALYSIS, ETC. Thursday, October 10, 13

Slide 93

Slide 93 text

PERSONAS FAKE PLASTIC PEOPLE Thursday, October 10, 13

Slide 94

Slide 94 text

MENTAL MODEL REQUIREMENTS ARE YOUR FRIEND Thursday, October 10, 13

Slide 95

Slide 95 text

SOLUTION DECISION START WITH PROBLEMS, NOT SOLUTIONS Thursday, October 10, 13

Slide 96

Slide 96 text

Launch Screen promobuilder SALES USER FLOW - iOS APP Merchants/ MSAs New Merchant/ MSA New Insertion Order/Deal New Daily Deal Builder New Instant Deal Builder New Family Deal Builder Merchant Dashboard Show/Edit Insertion Order SEE INSTANT DEAL BUILDER FLOW SCREEN SEE DAILY DEAL BUILDER FLOW SCREEN SEE FAMILY DEAL BUILDER FLOW SCREEN FLOW Thursday, October 10, 13

Slide 97

Slide 97 text

SKETCH PAPER, WHITEBOARD, PEN TABLET Thursday, October 10, 13

Slide 98

Slide 98 text

Thursday, October 10, 13

Slide 99

Slide 99 text

PHOTOCHOP! Thursday, October 10, 13

Slide 100

Slide 100 text

PROTOTYPE RUNNING IN SOME SEMBLANCE OF CODE Thursday, October 10, 13

Slide 101

Slide 101 text

USER TESTING WHAT WORKS / WHAT DOESN’T Thursday, October 10, 13

Slide 102

Slide 102 text

LATHER RINSE REPEAT IT’S A PROCESS, NOT A DESTINATION Thursday, October 10, 13

Slide 103

Slide 103 text

Thursday, October 10, 13

Slide 104

Slide 104 text

APIs Thursday, October 10, 13

Slide 105

Slide 105 text

"If the database architecture is wrong, the code will be wrong. If the code is wrong, the behaviour is wrong. And if the behaviour is wrong, then no javascript can ever solve the real problem." - Bèr 'berkes' Kessels (www.berk.es) Thursday, October 10, 13

Slide 106

Slide 106 text

"Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works." - Steve Jobs http://www.nytimes.com/2003/11/30/magazine/30IPOD.html Thursday, October 10, 13

Slide 107

Slide 107 text

'AthaydeWilliamsRailsView 25% OFF DISCOUNT CODE at www.pragprog.com/titles/warv @boboroshi @therailsview [email protected] Thursday, October 10, 13