SlideShare ist ein Scribd-Unternehmen logo

Code with Empathy: UX for Engineers and UX Developers

•
•
Anita Cheng
Anita Cheng

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.

DesignIngenieurwesenTechnologie
1 von 87
Downloaden Sie, um offline zu lesen
#UXEmpathy @anitaycheng @UXSC_ @UXPALA
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data!
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data! Product! Content! Content! Content! Content!
#UXEmpathy @anitaycheng @UXSC_ @UXPALA My first web design books All about usability + information architecture Starting from scratch - a luxury!
#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?”
#UXEmpathy @anitaycheng @UXSC_ @UXPALA The reality - deadlines! So what can devs learn right now to improve their products?
#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
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs $$$ $$$ $$$
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs Development skill
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through?
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through? Show it!
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA What am I downloading here?
#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
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Undo all the things! (Oh, if we had this in real life!)
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Support user expectations “View” is not the same as “Download” “View” will open a new window
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Ask before they do something potentially bad!
#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
#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
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Personalization and Power Users
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Make things relevant and clear vs 500pxiTunes
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA How can I fix this error?
#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
#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!
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Great example: Hubspot • Clear, simple wording • Screenshots
#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/
#UXEmpathy @anitaycheng @UXSC_ @UXPALA
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Interaction design
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Graphic design
#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.
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Patterns (and breaking them) Mindful contrast
#UXEmpathy @anitaycheng @UXSC_ @UXPALA How much contrast? Mindful contrast, with purpose!
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA FontSquirrel.com FontPair.co
#UXEmpathy @anitaycheng @UXSC_ @UXPALA No Comic Sans! (or Papyrus!)
#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
#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
#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.
#UXEmpathy @anitaycheng @UXSC_ @UXPALA GetBootstrap.com Foundation.Zurb.com
#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.
#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.
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Cool Warm Color
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Complementary colors
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Every movie poster ever! tvtropes.org Orange-blue
#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.
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Paletton.com
#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.
#UXEmpathy @anitaycheng @UXSC_ @UXPALA DesignForHackers.com
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Universal rules What about our product?
#UXEmpathy @anitaycheng @UXSC_ @UXPALA 1. You are not the user
 
 

#UXEmpathy @anitaycheng @UXSC_ @UXPALA Users Devs
#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)
#UXEmpathy @anitaycheng @UXSC_ @UXPALA caniuse.com IE8 or 9 = no CSS flexbox for me :(
#UXEmpathy @anitaycheng @UXSC_ @UXPALA 1. You are not the user 2. People spend far more time on websites and apps other than your own
#UXEmpathy @anitaycheng @UXSC_ @UXPALA People know…
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns Account registration Search barModule tabsModule tabs Home link Left Navigation In-page navigation Grid module
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Apple Developer Library https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Android Developer Library http://developer.android.com/design/index.html
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Windows Phone Developer Library https://dev.windows.com/en-us/design
#UXEmpathy @anitaycheng @UXSC_ @UXPALA iOS Android Windows But the web is everybody!
#UXEmpathy @anitaycheng @UXSC_ @UXPALA UI-patterns.com https://developer.yahoo.com/ypatterns/ Yahoo! Design Pattern Library
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Learn the “why” of design patterns
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Technology doesn’t exist in a vacuum
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team (and companies!)
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Help us, you’re our only hope!”
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Make this exactly, as we decided without you!”
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Development needs to be considered from Day 1 Development skill
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Make friends!
#UXEmpathy @anitaycheng @UXSC_ @UXPALA It can be hard!
#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.”
#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
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Build a strong foundation for a delightful experience User experience
#UXEmpathy @anitaycheng @UXSC_ @UXPALA Questions? design@anitacheng.com @anitaycheng
#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

Empfohlen

Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practicesuxpin
 
How Autodesk creates better digital experiences with UserTesting
How Autodesk creates better digital experiences with UserTestingHow Autodesk creates better digital experiences with UserTesting
How Autodesk creates better digital experiences with UserTestingUserTesting
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and AgileUserZoom
 
Walk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXWalk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXuxpin
 
User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Productsuxpin
 
Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Researchuxpin
 
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtI'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtJack Moffett
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Amrita Aviyente
 

Empfohlen

Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practicesuxpin
 
How Autodesk creates better digital experiences with UserTesting
How Autodesk creates better digital experiences with UserTestingHow Autodesk creates better digital experiences with UserTesting
How Autodesk creates better digital experiences with UserTestingUserTesting
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and AgileUserZoom
 
Walk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXWalk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXuxpin
 
User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Productsuxpin
 
Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Researchuxpin
 
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtI'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtJack Moffett
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Amrita Aviyente
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...UXPA International
 
How growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentHow growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentUserTesting
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
 
Lean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case StudyLean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case Studyuxpin
 
Product development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotalProduct development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotalUserTesting
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshopSimon Phillips
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slidesJose E. Rodriguez Huerta
 
Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013Joshua Seiden
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
Make User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal MeasuresMake User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal MeasuresUserZoom
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshopux singapore
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the WildMichele Ide-Smith
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammeNeil Allison
 
Lean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopLean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopCassy Rowe
 
Lean UX in the Enterprise
Lean UX in the EnterpriseLean UX in the Enterprise
Lean UX in the EnterpriseAustin Knight
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
 
Paris ML meetup
Paris ML meetupParis ML meetup
Paris ML meetupYves Raimond
 
What I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersWhat I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersEtiene Dalcol
 

Weitere ähnliche Inhalte

Was ist angesagt?

Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...UXPA International
 
How growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentHow growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentUserTesting
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
 
Lean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case StudyLean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case Studyuxpin
 
Product development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotalProduct development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotalUserTesting
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshopSimon Phillips
 
Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013Joshua Seiden
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
Make User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal MeasuresMake User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal MeasuresUserZoom
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the WildMichele Ide-Smith
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammeNeil Allison
 
Lean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopLean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopCassy Rowe
 
Lean UX in the Enterprise
Lean UX in the EnterpriseLean UX in the Enterprise
Lean UX in the EnterpriseAustin Knight
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
 

Was ist angesagt? (20)

Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...
 
How growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product developmentHow growth teams are revolutionizing UX and product development
How growth teams are revolutionizing UX and product development
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
 
Lean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case StudyLean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case Study
 
Product development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotalProduct development at NerdWallet: Why user research is pivotal
Product development at NerdWallet: Why user research is pivotal
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshop
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slides
 
Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013Lean UX + UX Strat, from UX Strat conference, September 2013
Lean UX + UX Strat, from UX Strat conference, September 2013
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
Make User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal MeasuresMake User Experience Part of The KPI Conversation With Universal Measures
Make User Experience Part of The KPI Conversation With Universal Measures
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshop
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design System
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website Programme
 
Lean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopLean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 Workshop
 
Lean UX in the Enterprise
Lean UX in the EnterpriseLean UX in the Enterprise
Lean UX in the Enterprise
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
 

Andere mochten auch

What I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersWhat I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersEtiene Dalcol
 
Let Non-Developers Develop your Site. Manu Raivio
Let Non-Developers Develop your Site. Manu RaivioLet Non-Developers Develop your Site. Manu Raivio
Let Non-Developers Develop your Site. Manu RaivioFuture Insights
 
Deloitte State of the State 2015
Deloitte State of the State 2015Deloitte State of the State 2015
Deloitte State of the State 2015Deloitte UK
 
Pair Programming demystified
Pair Programming demystifiedPair Programming demystified
Pair Programming demystifiedDaftcode
 
A Beginners Guide to noSQL
A Beginners Guide to noSQLA Beginners Guide to noSQL
A Beginners Guide to noSQLMike Crabb
 
Become a Better Engineer Through Writing
Become a Better Engineer Through WritingBecome a Better Engineer Through Writing
Become a Better Engineer Through WritingIntuit Inc.
 
Productivity Facts Every Employee Should Know
Productivity Facts Every Employee Should KnowProductivity Facts Every Employee Should Know
Productivity Facts Every Employee Should KnowRobert Half
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 
Cannes Film Festival: Classic moments from the film festival's glamorous past
Cannes Film Festival: Classic moments from the film festival's glamorous pastCannes Film Festival: Classic moments from the film festival's glamorous past
Cannes Film Festival: Classic moments from the film festival's glamorous pastguimera
 
Improve the Development Process with DevOps Practices by Fedorov Vadim
Improve the Development Process with DevOps Practices by Fedorov VadimImprove the Development Process with DevOps Practices by Fedorov Vadim
Improve the Development Process with DevOps Practices by Fedorov VadimSoftServe
 
Learning from a Culture of Collaboration: Engineers do it better. What can de...
Learning from a Culture of Collaboration: Engineers do it better. What can de...Learning from a Culture of Collaboration: Engineers do it better. What can de...
Learning from a Culture of Collaboration: Engineers do it better. What can de...Intuit Inc.
 
Overview of Machine Learning and Feature Engineering
Overview of Machine Learning and Feature EngineeringOverview of Machine Learning and Feature Engineering
Overview of Machine Learning and Feature EngineeringTuri, Inc.
 
How a Smart Leader Sets SMART Goals
How a Smart Leader Sets SMART GoalsHow a Smart Leader Sets SMART Goals
How a Smart Leader Sets SMART GoalsWeekdone.com
 
The Tester Role & Scrum
The Tester Role & ScrumThe Tester Role & Scrum
The Tester Role & ScrumJohan Hoberg
 
10 more lessons learned from building Machine Learning systems - MLConf
10 more lessons learned from building Machine Learning systems - MLConf10 more lessons learned from building Machine Learning systems - MLConf
10 more lessons learned from building Machine Learning systems - MLConfXavier Amatriain
 
The Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopMike Rohde
 

Andere mochten auch (20)

Paris ML meetup
Paris ML meetupParis ML meetup
Paris ML meetup
 
What I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginnersWhat I learned teaching programming to 150 beginners
What I learned teaching programming to 150 beginners
 
Let Non-Developers Develop your Site. Manu Raivio
Let Non-Developers Develop your Site. Manu RaivioLet Non-Developers Develop your Site. Manu Raivio
Let Non-Developers Develop your Site. Manu Raivio
 
Deloitte State of the State 2015
Deloitte State of the State 2015Deloitte State of the State 2015
Deloitte State of the State 2015
 
Pair Programming demystified
Pair Programming demystifiedPair Programming demystified
Pair Programming demystified
 
A Beginners Guide to noSQL
A Beginners Guide to noSQLA Beginners Guide to noSQL
A Beginners Guide to noSQL
 
Become a Better Engineer Through Writing
Become a Better Engineer Through WritingBecome a Better Engineer Through Writing
Become a Better Engineer Through Writing
 
Productivity Facts Every Employee Should Know
Productivity Facts Every Employee Should KnowProductivity Facts Every Employee Should Know
Productivity Facts Every Employee Should Know
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 
Cannes Film Festival: Classic moments from the film festival's glamorous past
Cannes Film Festival: Classic moments from the film festival's glamorous pastCannes Film Festival: Classic moments from the film festival's glamorous past
Cannes Film Festival: Classic moments from the film festival's glamorous past
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Improve the Development Process with DevOps Practices by Fedorov Vadim
Improve the Development Process with DevOps Practices by Fedorov VadimImprove the Development Process with DevOps Practices by Fedorov Vadim
Improve the Development Process with DevOps Practices by Fedorov Vadim
 
Learning from a Culture of Collaboration: Engineers do it better. What can de...
Learning from a Culture of Collaboration: Engineers do it better. What can de...Learning from a Culture of Collaboration: Engineers do it better. What can de...
Learning from a Culture of Collaboration: Engineers do it better. What can de...
 
Overview of Machine Learning and Feature Engineering
Overview of Machine Learning and Feature EngineeringOverview of Machine Learning and Feature Engineering
Overview of Machine Learning and Feature Engineering
 
Enabling Autonomy
Enabling AutonomyEnabling Autonomy
Enabling Autonomy
 
The Programmer
The ProgrammerThe Programmer
The Programmer
 
How a Smart Leader Sets SMART Goals
How a Smart Leader Sets SMART GoalsHow a Smart Leader Sets SMART Goals
How a Smart Leader Sets SMART Goals
 
The Tester Role & Scrum
The Tester Role & ScrumThe Tester Role & Scrum
The Tester Role & Scrum
 
10 more lessons learned from building Machine Learning systems - MLConf
10 more lessons learned from building Machine Learning systems - MLConf10 more lessons learned from building Machine Learning systems - MLConf
10 more lessons learned from building Machine Learning systems - MLConf
 
The Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-Workshop
 

Ähnlich wie Code with Empathy: UX for Engineers and UX Developers

Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-foundersCyber-Duck
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really wantleisa reichelt
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoBeMyApp
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Johan Verhaegen
 
Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)Anders Ramsay
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneChris Mills
 
Usability Show+Tell
Usability Show+TellUsability Show+Tell
Usability Show+Tellgcotrell
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UXCyber-Duck
 
Live Usability Lab ELUNA 2008: Long Beach California
Live Usability Lab ELUNA 2008: Long Beach CaliforniaLive Usability Lab ELUNA 2008: Long Beach California
Live Usability Lab ELUNA 2008: Long Beach Californiateaguese
 
Bridging user experience design with agile product development
Bridging user experience design with agile product developmentBridging user experience design with agile product development
Bridging user experience design with agile product developmentHarri Kiljander
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Introduction to UX
Introduction to UXIntroduction to UX
Introduction to UXEffective
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1studiokandm
 

Ähnlich wie Code with Empathy: UX for Engineers and UX Developers (20)

Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
IDLC
IDLCIDLC
IDLC
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-founders
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
VIGC Academy
VIGC AcademyVIGC Academy
VIGC Academy
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?
 
Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)Dev-Centered UX (UX Week 2014)
Dev-Centered UX (UX Week 2014)
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyone
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
Usability Show+Tell
Usability Show+TellUsability Show+Tell
Usability Show+Tell
 
Hackers guide to UX
Hackers guide to UXHackers guide to UX
Hackers guide to UX
 
Live Usability Lab ELUNA 2008: Long Beach California
Live Usability Lab ELUNA 2008: Long Beach CaliforniaLive Usability Lab ELUNA 2008: Long Beach California
Live Usability Lab ELUNA 2008: Long Beach California
 
Bridging user experience design with agile product development
Bridging user experience design with agile product developmentBridging user experience design with agile product development
Bridging user experience design with agile product development
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Introduction to UX
Introduction to UXIntroduction to UX
Introduction to UX
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 

Kürzlich hochgeladen

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptDoaaRezk5
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 

Kürzlich hochgeladen (20)

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .ppt
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 

Code with Empathy: UX for Engineers and UX Developers

  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data!
  • 4. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Science is like information architecture! Theory! Data! Data! Data! Data! Product! Content! Content! Content! Content!
  • 5. #UXEmpathy @anitaycheng @UXSC_ @UXPALA My first web design books All about usability + information architecture Starting from scratch - a luxury!
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA The reality - deadlines! So what can devs learn right now to improve their products?
  • 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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs
  • 11. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs $$$ $$$ $$$
  • 12. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Stephen Anderson’s UX Hierarchy of Needs Development skill
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through?
  • 15. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Is your payment going through? Show it!
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA What am I downloading here?
  • 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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Undo all the things! (Oh, if we had this in real life!)
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Support user expectations “View” is not the same as “Download” “View” will open a new window
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Ask before they do something potentially bad!
  • 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. #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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Personalization and Power Users
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Make things relevant and clear vs 500pxiTunes
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How can I fix this error?
  • 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. #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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Great example: Hubspot • Clear, simple wording • Screenshots
  • 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/
  • 39. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Interaction design
  • 40. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Graphic design
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Patterns (and breaking them) Mindful contrast
  • 43. #UXEmpathy @anitaycheng @UXSC_ @UXPALA How much contrast? Mindful contrast, with purpose!
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA FontSquirrel.com FontPair.co
  • 46. #UXEmpathy @anitaycheng @UXSC_ @UXPALA No Comic Sans! (or Papyrus!)
  • 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. #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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA GetBootstrap.com Foundation.Zurb.com
  • 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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Cool Warm Color
  • 54. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Complementary colors
  • 55. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Every movie poster ever! tvtropes.org Orange-blue
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Paletton.com
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA DesignForHackers.com
  • 60. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Universal rules What about our product?
  • 61. #UXEmpathy @anitaycheng @UXSC_ @UXPALA 1. You are not the user
 
 

  • 62. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Users Devs
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA caniuse.com IE8 or 9 = no CSS flexbox for me :(
  • 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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA People know…
  • 67. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns
  • 68. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Common design patterns Account registration Search barModule tabsModule tabs Home link Left Navigation In-page navigation Grid module
  • 69. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Apple Developer Library https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  • 70. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Android Developer Library http://developer.android.com/design/index.html
  • 71. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Windows Phone Developer Library https://dev.windows.com/en-us/design
  • 72. #UXEmpathy @anitaycheng @UXSC_ @UXPALA iOS Android Windows But the web is everybody!
  • 73. #UXEmpathy @anitaycheng @UXSC_ @UXPALA UI-patterns.com https://developer.yahoo.com/ypatterns/ Yahoo! Design Pattern Library
  • 74. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Learn the “why” of design patterns
  • 75. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Technology doesn’t exist in a vacuum
  • 76. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team
  • 77. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Product team (and companies!)
  • 78. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Help us, you’re our only hope!”
  • 79. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Devs and their product team “Make this exactly, as we decided without you!”
  • 80. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Development needs to be considered from Day 1 Development skill
  • 81. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Make friends!
  • 82. #UXEmpathy @anitaycheng @UXSC_ @UXPALA It can be hard!
  • 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. #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. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Build a strong foundation for a delightful experience User experience
  • 86. #UXEmpathy @anitaycheng @UXSC_ @UXPALA Questions? design@anitacheng.com @anitaycheng
  • 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