Code with Empathy: UX for Engineers and UX Developers
•
52 likes•5,425 views
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.
Report
Share
Report
Share
1 of 87
Download to read offline
More Related Content
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
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
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
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
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
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
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
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
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
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
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
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/
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.
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
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.
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.
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.
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.
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)
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