code with empathy: ux for engineers and ux developers
TRANSCRIPT
#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 Agenda1. 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
SizesThis 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-actionsThis 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
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
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 patternsAccount registration
Search barModule tabsModule tabsHome 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 today1. 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
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