Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Code with Empathy: UX for Engineers and UX Developers

4 257 vues

Publié le

User experience is a hot field, but still very new for many tech companies. Let’s face it, the companies who can devote the resources for a robust UX process are few and far between! Software developers often find themselves making design decisions by necessity, which ends up complicating the product lifecycle down the road. So what can developers learn right now to improve the usability and delight of their products?

This talk was given to audiences of UXPALA members, USC students, and developers at SoCal Code Camp.

Publié dans : Design, Ingénierie, Technologie
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you...  http://ishbv.com/unlockher/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Thanks, For Free Download Latest PPTs You will also Visit Us www.ThesisScientist.com
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Code with Empathy: UX for Engineers and UX Developers

  1. 1. #UXEmpathy @anitaycheng @UXSC_ @UXPALA
  2. 2. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Anita Cheng • Information Architect /
 UX (Front-end) Developer @ City of LA • Director of Marketing at UXPALA • Live-tweeting fiend • Former cancer scientist
  3. 3. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data!
  4. 4. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data! Product! Content! Content! Content! Content!
  5. 5. #UXEmpathy @anitaycheng @UXSC_ @UXPALA My first web design books All about usability + information architecture Starting from scratch - a luxury!
  6. 6. #UXEmpathy @anitaycheng @UXSC_ @UXPALA – majority of companies out there “This UX thing sounds great, but can we do it without spending any time or money or effort?”
  7. 7. #UXEmpathy @anitaycheng @UXSC_ @UXPALA The reality - deadlines! So what can devs learn right now to improve their products?
  8. 8. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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
  9. 9. #UXEmpathy @anitaycheng @UXSC_ @UXPALA What is user experience? The gamut of behaviors and emotions one feels about using a product, system, or service © Dalton Reed, Flickr
  10. 10. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs
  11. 11. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs $$$ $$$ $$$
  12. 12. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs Development skill
  13. 13. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  14. 14. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through?
  15. 15. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through? Show it!
  16. 16. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  17. 17. #UXEmpathy @anitaycheng @UXSC_ @UXPALA What am I downloading here?
  18. 18. #UXEmpathy @anitaycheng @UXSC_ @UXPALA What am I downloading here? Use titles, not filenames 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 Download name
  19. 19. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  20. 20. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Undo all the things! (Oh, if we had this in real life!)
  21. 21. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  22. 22. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Support user expectations “View” is not the same as “Download” “View” will open a new window
  23. 23. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  24. 24. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Ask before they do something potentially bad!
  25. 25. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention
 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  26. 26. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Why your users won’t remember what your icon is for Remind them of what they’re doing on every screen © Ryan Ritchie, Flickr
  27. 27. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention
 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  28. 28. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Personalization and Power Users
  29. 29. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  30. 30. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Make things relevant and clear vs 500pxiTunes
  31. 31. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  32. 32. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How can I fix this error?
  33. 33. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How can I fix this error? Oops! We’ve detected that you changed a title in your UsefulLinks widget. We can’t display page content until you reset the widget in page editing. OK Oops! We’ve detected that you changed a title in your UsefulLinks widget. We can’t display page content until you reset the widget in page editing. OK
  34. 34. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How can I fix this error? Oops! We’ve detected that you changed a title in your UsefulLinks widget. We can’t display page content until you reset the widget in page editing. OK Oops! We’ve detected that you changed a title in your UsefulLinks widget. We can’t display page content until you reset the widget in page editing. OK We’ve detected that you changed a title in your UsefulLinks widget. We’ve refreshed the title change in this page. Great!
  35. 35. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  36. 36. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Great example: Hubspot • Clear, simple wording • Screenshots
  37. 37. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Jakob Nielsen’s 10 Usability Heuristics for User Interface Design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 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/
  38. 38. #UXEmpathy @anitaycheng @UXSC_ @UXPALA
  39. 39. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Interaction design
  40. 40. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Graphic design
  41. 41. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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.
  42. 42. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Patterns (and breaking them) Mindful contrast
  43. 43. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How much contrast? Mindful contrast, with purpose!
  44. 44. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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
  45. 45. #UXEmpathy @anitaycheng @UXSC_ @UXPALA FontSquirrel.com FontPair.co
  46. 46. #UXEmpathy @anitaycheng @UXSC_ @UXPALA No Comic Sans! (or Papyrus!)
  47. 47. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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
  48. 48. #UXEmpathy @anitaycheng @UXSC_ @UXPALA ~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
  49. 49. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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 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. See the honey badger in action.
  50. 50. #UXEmpathy @anitaycheng @UXSC_ @UXPALA GetBootstrap.com Foundation.Zurb.com
  51. 51. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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! 
 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. See the honey badger in action.
  52. 52. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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! 
 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. See the honey badger in action.
  53. 53. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Cool Warm Color
  54. 54. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Complementary colors
  55. 55. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Every movie poster ever! tvtropes.org Orange-blue
  56. 56. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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! 
 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. See the honey badger in action.
  57. 57. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Paletton.com
  58. 58. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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! 
 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. See the honey badger in action.
  59. 59. #UXEmpathy @anitaycheng @UXSC_ @UXPALA DesignForHackers.com
  60. 60. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Universal rules What about our product?
  61. 61. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 1. You are not the user
 
 

  62. 62. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Users Devs
  63. 63. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Learn what tech stack your users are on Google Analytics - free and fast (Browser, OS, mobile, screen sizes) (Internet Explorer versions)
  64. 64. #UXEmpathy @anitaycheng @UXSC_ @UXPALA caniuse.com IE8 or 9 = no CSS flexbox for me :(
  65. 65. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 1. You are not the user 2. People spend far more time on websites and apps other than your own
  66. 66. #UXEmpathy @anitaycheng @UXSC_ @UXPALA People know…
  67. 67. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns
  68. 68. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns Account registration Search barModule tabsModule tabs Home link Left Navigation In-page navigation Grid module
  69. 69. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Apple Developer Library https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  70. 70. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Android Developer Library http://developer.android.com/design/index.html
  71. 71. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Windows Phone Developer Library https://dev.windows.com/en-us/design
  72. 72. #UXEmpathy @anitaycheng @UXSC_ @UXPALA iOS Android Windows But the web is everybody!
  73. 73. #UXEmpathy @anitaycheng @UXSC_ @UXPALA UI-patterns.com https://developer.yahoo.com/ypatterns/ Yahoo! Design Pattern Library
  74. 74. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Learn the “why” of design patterns
  75. 75. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Technology doesn’t exist in a vacuum
  76. 76. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team
  77. 77. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team (and companies!)
  78. 78. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Help us, you’re our only hope!”
  79. 79. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Make this exactly, as we decided without you!”
  80. 80. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Development needs to be considered from Day 1 Development skill
  81. 81. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Make friends!
  82. 82. #UXEmpathy @anitaycheng @UXSC_ @UXPALA It can be hard!
  83. 83. #UXEmpathy @anitaycheng @UXSC_ @UXPALA –Margaret Mead “Never doubt that a small group of thoughtful, committed citizens can change the world. Indeed, it is the only thing that ever has.”
  84. 84. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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
  85. 85. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Build a strong foundation for a delightful experience User experience
  86. 86. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Questions? design@anitacheng.com @anitaycheng
  87. 87. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 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

×