Code with Empathy: UX for Engineers and UX Developers


The Presentation inside:

Slide 0

#UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 1

Anita Cheng • Information Architect /
 UX (Front-end) Developer @ City of LA • Director of Marketing at UXPALA • Live-tweeting fiend • Former cancer scientist #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 2

Science is like information architecture! Data! Data! Theory! Data! Data! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 3

Science is like information architecture! Content! Data! Content! Data! Product! Theory! Content! Data! Content! Data! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 4

My first web design books All about usability + information architecture Starting from scratch - a luxury! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 5

“This UX thing sounds great, but can we do it without spending any time or money or effort?” – majority of companies out there #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 6

The reality - deadlines! So what can devs learn right now to improve their products? #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 7

Today’s Agenda 1. What is UX anyway, and what does it have to do with coding? 2. What can devs do to improve the UX without adding to their already exhausting workload?
 
 (Hint: Heuristics and design patterns! With bonus tips about graphic design) 3. How to become part of a healthy UX process #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 8

What is user experience? © Dalton Reed, Flickr The gamut of behaviors and emotions one feels about using a product, system, or service #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 9

Stephen Anderson’s UX Hierarchy of Needs #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 10

Stephen Anderson’s UX Hierarchy of Needs $$ $ $$ $$$ $ #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 11

Stephen Anderson’s UX Hierarchy of Needs Development skill #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 12

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 13

Is your payment going through? #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 14

Is your payment going through? Show it! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 15

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 16

What am I downloading here? #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 17

What am I downloading here? Download name Microsoft SQL Server Express 2012, 64-bit Microsoft SQL Server Express 2012 w/ Advanced Services, 64-bit Microsoft SQL Server Express 2012 w/ Tools, 64-bit Microsoft SQL Server 2012 Local DB, 64-bit Microsoft SQL Server 2012 Management Studio Express, 64-bit Microsoft SQL Server 2012 R2 Express, 64-bit Use titles, not filenames #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 18

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 19

Undo all the things! (Oh, if we had this in real life!) #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 20

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 21

Support user expectations “View” is not the same as “Download” “View” will open a new window #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 22

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 23

Ask before they do something potentially bad! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 24

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 3. User control and freedom 4. Consistency and standards 9. Help users recognize, diagnose, and recover from errors 5. Error prevention
 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 25

Why your users won’t remember what your icon is for © Ryan Ritchie, Flickr Remind them of what they’re doing on every screen #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 26

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 8. Aesthetic and minimalist design 4. Consistency and standards 9. Help users recognize, diagnose, and recover from errors 5. Error prevention
 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 27

Personalization and Power Users #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 28

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 29

Make things relevant and clear iTunes vs 500px #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 30

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 31

How can I fix this error? #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 32

How can I fix this error? Oops! We’ve detected that you changed a title in your Oops! We’ve detected that you changed a title in your UsefulLinks widget. UsefulLinks widget. We can’t display page content until you reset the widget in We can’t display page content until you reset the widget in page editing. page editing. OK #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 33

How can I fix this error? Oops! We’ve that you that you a title in your UsefulLinks We’ve detected detectedchanged changed a title in your Oops! We’ve detected that you changed a title in your UsefulLinks widget. widget. UsefulLinks widget. We can’t display page content until you in this the widget in We’ve refreshed the title change reset page. We can’t display page content until you reset the widget in page editing. page editing. Great! OK #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 34

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 35

Great example: Hubspot • Clear, simple wording • Screenshots #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 36

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 6. Recognition rather than recall 2. Match between system and the real world 7. Flexibility and efficiency of use 3. User control and freedom 4. Consistency and standards 5. Error prevention 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation http://www.nngroup.com/articles/ten-usability-heuristics/ #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 37

#UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 38

Interaction design #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 39

Graphic design #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 40

Let’s usabil-ify this sample This is the honey badger. See the honey badger in action. Watch it run in slow motion.It’s pretty badass. Look. It runs all over the place. “Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the honey badger just eating a mouse, and then look, “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and continues eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra.The honey badger. #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 41

Patterns (and breaking them) Mindful contrast #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 42

How much contrast? Mindful contrast, with purpose! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 43

Fonts! (pick two) This is the honey badger See the honey badger in action. It’s pretty badass. Look. It runs all over the place. “Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the honey badger just eating a mouse, and then look, “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 44

FontSquirrel.com FontPair.co #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 45

No Comic Sans! (or Papyrus!) #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 46

A note about line length This is the honey badger ? ? ? ? See the honey badger in action. It’s pretty badass. Look. It runs all over the place. “Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the honey badger just eating a mouse, and then look, “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 47

~12 words per line This is the honey badger See the honey badger in action. Watch it run in slow motion.It’s pretty badass. Look. It runs all over the place. “Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the honey badger just eating a mouse, and then look, “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 48

Grids This is the honey badger It’s pretty badass. Look. It runs all over the place. “Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slowmotion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the honey badger just eating a mouse, and then look, “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and continues eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra.The honey badger. See the honey badger in action. #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 49

Foundation.Zurb.com GetBootstrap.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 50

Negative Space This is the honey badger It’s pretty badass. Look. It runs all over the place.“Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! 
 “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, The honey badger has been referred to by the Guinness Book because it’s a hungry little bastard.Look at this! Like nothing of World Records as the most fearless animal in the animal happened! The honey badger gets right back up and continues kingdom. eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey The honey badger. badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the See the honey badger in action. honey badger just eating a mouse, and then look, #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 51

Sizes This is the honey badger It’s pretty badass. Look. It runs all over the place.“Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! 
 “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and continues eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra. The honey badger. badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the See the honey badger in action. honey badger just eating a mouse, and then look, #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 52

Color Cool Warm #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 53

Complementary colors #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 54

Orange-blue tvtropes.org Every movie poster ever! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 55

Complementary call-to-actions This is the honey badger It’s pretty badass. Look. It runs all over the place.“Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! 
 “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and continues eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra. The honey badger. badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the See the honey badger in action. honey badger just eating a mouse, and then look, #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 56

Paletton.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 57

Not bad! This is the honey badger It’s pretty badass. Look. It runs all over the place.“Whoa! Watch out!” says that bird. Ew, it’s got a snake! Oh! It’s chasing a jackal! Oh my gosh! Oh, the honey badger is just crazy! 
 “Get away from me!” says the snake, “Get away from me!” Honey badger don’t care. Honey badger smacks the shit out of it. And the snake comes back and it lashes at the honey badger. Now the honey badger is going to pass out for a few minutes, and then it’s going to get right back up and start eating all over again, The honey badger has been referred to by the Guinness Book of World Records as the most fearless animal in the animal kingdom. It really doesn’t give a shit. If it’s hungry, it’s hungry. The honey because it’s a hungry little bastard.Look at this! Like nothing happened! The honey badger gets right back up and continues eating the cobra.How disgusting.And of course, what does the honey badger have to eat for the next two weeks? Cobra. The honey badger. badger is really pretty badass. It has no regard for any other animal whatsoever. Look at him, he’s just grunting, and eating snakes. Eew! What’s that? A mouse? Oh that’s nasty. They’re so nasty. Oh look it’s chasing things and eating them. The honey badgers have a fairly long body, but a distinctly thickset broad shoulders, and, you know, their skin is loose, allowing them to move about freely, and they twist around. It’s running in slow-motion again. See? At nighttime the honey badger goes hunting, because it’s hungry. Look! Here comes a fierce battle between a king cobra and a honey badger. I wonder what will happen? Look at this, there’s the See the honey badger in action. honey badger just eating a mouse, and then look, #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 58

DesignForHackers.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 59

Universal rules What about our product? #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 60

1. You are not the user
 
 
 #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 61

Users Devs #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 62

Learn what tech stack your users are on (Internet Explorer versions) Google Analytics - free and fast (Browser, OS, mobile, screen sizes) #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 63

caniuse.com IE8 or 9 = no CSS flexbox for me :( #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 64

1. You are not the user 2. People spend far more time on websites and apps other than your own #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 65

People know… #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 66

Common design patterns #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 67

Common design patterns Account registration Home link Module tabs Module tabs Left Navigation Search bar Grid module In-page navigation #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 68

Apple Developer Library https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/ #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 69

Android Developer Library http://developer.android.com/design/index.html #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 70

Windows Phone Developer Library https://dev.windows.com/en-us/design #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 71

iOS Android Windows But the web is everybody! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 72

Yahoo! Design Pattern Library https://developer.yahoo.com/ypatterns/ UI-patterns.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 73

Learn the “why” of design patterns #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 74

Technology doesn’t exist in a vacuum #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 75

Product team #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 76

Product team (and companies!) #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 77

Devs and their product team “Help us, you’re our only hope!” #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 78

Devs and their product team “Make this exactly, as we decided without you!” #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 79

Development needs to be considered from Day 1 Development skill #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 80

Make friends! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 81

It can be hard! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 82

“Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it is the only thing that ever has.” –Margaret Mead #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 83

What we learned today 1. What is UX anyway, and what does it have to do with coding? 
 
 The foundations of user experience are development-focused 2. What can devs do to improve the UX without adding to their already exhausting workload?
 
 Using Nielsen’s Usability Heuristics, graphic design principles, and design patterns to improve usability as you code 3. How to become part of a healthy UX process
 
 Make friends, find your allies, have a seat at the table #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 84

Build a strong foundation for a delightful experience User experience #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 85

Questions? [email protected] @anitaycheng #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 86

Workshop! • Find design patterns in popular websites • Printed list from Yahoo! Pattern Design Library • Others: • UI-Patterns: http://ui-patterns.com/patterns • Google Web Fundamentals: https:// developers.google.com/web/fundamentals/ • Welie: http://www.welie.com/patterns/index.php • Zurb: http://zurb.com/building-blocks #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Slide 87


×

HTML:





Ссылка: