'

Code with Empathy: UX for Engineers and UX Developers

Понравилась презентация – покажи это...





Слайд 0

#UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 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


Слайд 6

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


Слайд 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


Слайд 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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 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


Слайд 13

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


Слайд 14

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


Слайд 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


Слайд 16

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


Слайд 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


Слайд 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


Слайд 19

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


Слайд 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


Слайд 21

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


Слайд 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


Слайд 23

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


Слайд 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


Слайд 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


Слайд 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


Слайд 27

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


Слайд 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


Слайд 29

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


Слайд 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


Слайд 31

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


Слайд 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


Слайд 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


Слайд 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


Слайд 35

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


Слайд 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


Слайд 37

#UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 38

Interaction design #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 39

Graphic design #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 41

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


Слайд 42

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


Слайд 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


Слайд 44

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


Слайд 45

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


Слайд 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


Слайд 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


Слайд 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


Слайд 49

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


Слайд 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


Слайд 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


Слайд 52

Color Cool Warm #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 53

Complementary colors #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 54

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


Слайд 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


Слайд 56

Paletton.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 58

DesignForHackers.com #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 59

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


Слайд 60

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


Слайд 61

Users Devs #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 63

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


Слайд 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


Слайд 65

People know… #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 66

Common design patterns #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 68

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


Слайд 69

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


Слайд 70

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


Слайд 71

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


Слайд 72

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


Слайд 73

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


Слайд 74

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


Слайд 75

Product team #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 76

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


Слайд 77

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


Слайд 78

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


Слайд 79

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


Слайд 80

Make friends! #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 81

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


Слайд 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


Слайд 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


Слайд 84

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


Слайд 85

Questions? design@anitacheng.com @anitaycheng #UXEmpathy @anitaycheng @UXSC_ @UXPALA


Слайд 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


Слайд 87


×

HTML:





Ссылка: