davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 Commits
1 Branch
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
larlet-fr-david-cache/cache/eae184de757f4384212d32a1273.../index.html

index.html 28KB
Raw Permalink Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Sympathy vs. Empathy in UX (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://www.nngroup.com/articles/sympathy-vs-empathy-ux/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Sympathy vs. Empathy in UX (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://www.nngroup.com/articles/sympathy-vs-empathy-ux/">Source originale du contenu</a></h3>

  463.     <p>As UX professionals, it is our job to advocate on behalf of our users. To do it, we must understand them. Understanding our users means building empathy for human beings who experience the product or service we create. </p>

  464. 

  465. <p>In an effort to practice empathy, many teams mistakenly practice sympathy. Although these words have different meanings, teams often incorrectly use sympathy and empathy interchangeably. This confusion results in a large gap in their understanding and in an inability to address real human needs. </p>

  466. 

  467. <p>The goal of this article is to help you reflect on your current UX practice — are you unknowingly practicing pity and sympathy instead of empathy?</p>

  468. 

  469. <h2>What Is Sympathy?</h2>

  470. 

  471. <p>Definition: <strong>Sympathy</strong> is the acknowledgement of the suffering of others.</p>

  472. 

  473. <p>Sympathy is often the reaction (in the form of sorrow or pity) to the hardship or plight of another person. However, in contrast to empathy, there’s still a feeling of distance between you and the other person, and their adversity is not something you personally relate to or expect to share. You don’t envision yourself suffering the user's problems (and you definitely don't share those problems now), much as you do recognize that some users have problems.</p>

  474. 

  475. <p>In UX, sympathy is limited to acknowledging that users are going through a difficult scenario, task, or journey. If we are sympathetic to our users, it does not mean that we put ourselves in their shoes and feel their pain or annoyance. For example, when we’re designing an accessible website for people who are blind, we may express sympathy by acknowledging their potential challenges: </p>

  476. 

  477. <ul>

  478.     <li>“It will be hard to consume the content if you can’t see the infographics.”</li>

  479.     <li>“This font is kind of small and light. It may be hard for someone older to read.”</li>

  480.     <li>“It would be tough to navigate this website with a screen reader.” </li>

  481. </ul>

  482. 

  483. <p>It is true that some sympathy is better than none. For example, it is better to have sympathy for users with <a href="https://www.nngroup.com/articles/computer-skill-levels/">limited technical skills</a> than despise them for their shortcomings. However, <strong>the true goal of design is not to be nice to users, but to empower them</strong>. For example, this is why we don’t recommend lengthy error messages about how sorry we are about an error. Rather, we suggest that <a href="https://www.nngroup.com/articles/errors-forms-design-guidelines/">error messages allow users to quickly correct the problem</a> and move on.</p>

  484. 

  485. <h2>What Is Empathy? </h2>

  486. 

  487. <p>Empathy is a step beyond sympathy, and more complex in nature. </p>

  488. 

  489. <p>Definition: <strong>Empathy</strong> is the ability to fully understand, mirror, then share another person’s expressions, needs, and motivations. </p>

  490. 

  491. <p>In UX, empathy enables us to understand not only our users’ immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. It allows us to dig deep into our understanding of the user and create solutions that will not only solve a need, but effectively improve our users’ lives by removing unnecessary pain or friction. Instead of just designing an accessible website, practicing empathy is using a screen reader, blindfolded, in order to complete a task on your own website. </p>

  492. 

  493. <ul>

  494.     <li>“I am struggling to find my way around the site.”</li>

  495.     <li>“This is much tougher than I thought it would be.”</li>

  496.     <li>“I will advocate for the changes that need to be made.”</li>

  497. </ul>

  498. 

  499. <h2>The Spectrum of Empathy </h2>

  500. 

  501. <p>There is no firm threshold that marks one’s transition from sympathy to empathy. Rather, the relation between the two is best represented on a spectrum with pity (the most disconnected and abstracted version of sympathy) on one end and compassion (the more connected and embodied version of empathy) on the other. </p>

  502. 

  503. <p><img alt="The Spectrum of Empathy by Sarah Gibbons" src="https://media.nngroup.com/media/editor/2019/03/22/screen-shot-2019-03-22-at-90954-am.png"/></p>

  504. 

  505. <p><em>The spectrum of empathy includes pity, sympathy, empathy, and compassion. Pity and sympathy require little to no effort or understanding, while empathy and compassion require effort to understand and engagement to produce a positive change. </em></p>

  506. 

  507. <p> </p>

  508. 

  509. <p>Pity is simply when you feel sorry for somebody else. You don’t like their unfortunate situation, and maybe you’ll even do something to rectify the situation, but mostly to make your own unpleasant feelings go away.</p>

  510. 

  511. <p>On the other end of the spectrum is compassion, the feeling where you relate the most to the users as independent actors, as opposed to objects. ("Actors" in this context means that we recognize that the users have their own purposes, wants, and needs, and that they are acting to satisfy what <em>they </em>want to accomplish, not what we think they ought to do or want. Thus, we don't impose our priorities or preferences upon the users, which would be an act of objectifying them that's more characteristic of sympathy.) Compassion is a call to action derived from empathy — when our understanding of another’s thoughts or feelings give us the compulsion, duty, or desire to help change that person’s situation for the better.  </p>

  512. 

  513. <h2>How to Practice Empathy in UX </h2>

  514. 

  515. <h4> </h4>

  516. 

  517. <ul>

  518.     <li>

  519.     <h4>Use Qualitative Research Methods  </h4>

  520.     </li>

  521. </ul>

  522. 

  523. <p>Practicing empathy in UX must begin with user research. We must set aside ego and assumptions and immerse ourselves in research. Qualitative methods, such as user interviews, cognitive mapping, and <a href="https://www.nngroup.com/articles/diary-studies/">diary studies</a>, allow us to dig into user behaviors, motivations, and concerns. </p>

  524. 

  525. <p>Remember to use <a href="https://www.nngroup.com/articles/open-ended-questions/">open-ended questions</a>. When you ask users to explain things to you, they often reveal surprising <a href="https://www.nngroup.com/articles/mental-models/">mental models</a>, problem-solving strategies, hopes, and fears. For example: </p>

  526. 

  527. <p><em>What makes you happy? </em>instead of <em>Are you happy? </em></p>

  528. 

  529. <p><em>How has your family affected you? </em>instead of <em>Are you close to your family?</em></p>

  530. 

  531. <p><em>What would make you stronger? </em>instead of <em>Tell me your weaknesses.</em></p>

  532. 

  533. <p>Practice empathy as you conduct research. Be aware that you don’t know what people are going through and what will trigger a memory or be difficult for them. </p>

  534. 

  535. <h4> </h4>

  536. 

  537. <p>Make accessibility a part of your research plan. This approach allows you to test your assumptions and explore potential opportunities for improvement with actual end users. Use <a href="https://www.afb.org/default.aspx">well-known organizations</a>, <a href="https://nfb.org/about-us/state-affiliates">state chapters</a>, or <a href="https://carroll.org/">local training centers</a> to help you recruit participants with disabilities.</p>

  538. 

  539. <h4> </h4>

  540. 

  541. <ul>

  542.     <li>

  543.     <h4>Have Your Team Watch Research Sessions and See Real Users</h4>

  544.     </li>

  545. </ul>

  546. 

  547. <p>When conducting research, invite all team members, and key stakeholders to observe the sessions. <a href="https://www.nngroup.com/articles/stakeholders-and-user-testing/">Doing this vastly increases the potential of empathy</a>, and the corresponding acceptance of research findings. Seeing is believing. And seeing and interacting with the user live is even more powerful.</p>

  548. 

  549. <p>Prior to inviting your coworkers to user testing, you may need to spend some time <a href="https://www.nngroup.com/articles/collaborating-stakeholders/">evangelizing UX research</a> within your team or organization. Make sure everyone knows how deep user-experience design needs to be and what you can accomplish: saved time, minimal rework, and a product that solves <a href="https://www.nngroup.com/articles/user-need-statements/">a real user need</a>.</p>

  550. 

  551. <p>Make sure that you post recordings from user sessions in a place where people can access them and watch them on their own, in case they cannot observe live.</p>

  552. 

  553. <h4> </h4>

  554. 

  555. <ul>

  556.     <li>

  557.     <h4>Use Videos of Users Whenever Presenting Research Findings to Stakeholders</h4>

  558.     </li>

  559. </ul>

  560. 

  561. <p>Supplement your findings and recommendations with video clips showing how users actually perform that task. Not only will your findings be more compelling, but you’ll also be building general empathy towards your audience. Make sure you show a variety of people in your videos (it shouldn’t be hard if you followed our first guideline and recruited a diverse participant group) — with different backgrounds, different demographics, and different abilities.</p>

  562. 

  563. <h4> </h4>

  564. 

  565. <p><a href="https://www.nngroup.com/articles/empathy-mapping/">Empathy maps</a> capture users’ emotions, hopes, and fears and distill your knowledge of the users into one place. An empathy map can help you discover gaps in your current knowledge and identify the types of research needed to address it.</p>

  566. 

  567. <p>Even more importantly, an empathy map can help others become empathic towards users because it can act as a source of truth throughout a project and protect it from bias or unfounded assumptions. Empathy is a complex skill, and empathy maps reduce the risk of misalignment because everyone has the same visual baseline. </p>

  568. 

  569. <h4> </h4>

  570. 

  571. <p>“You are not the user” may sound like a cliché, but it’s part of the human psychology to think <a href="https://www.nngroup.com/articles/false-consensus/">that others think and behave in the same way that we do</a>. If everybody in your team is male, younger than 30, and with a tech background, you’ll end up with designs that will implicitly favor that user group.</p>

  572. 

  573. <p>Recruit team members with a variety of backgrounds and demographics. That will not guarantee empathy for users, but will at least be a first step in the right direction. Diversity must go wide to include experiences, skills, and attitudes acquired and evolved over each employee’s lifetime — known as ‘acquired diversity.’ In broad terms, as defined by Chloe Heath, acquired diversity is a person’s experience of the world and the cultural quirks accumulated over a long period. </p>

  574. 

  575. <h4> </h4>

  576. 

  577. <ul>

  578.     <li>

  579.     <h4>Build Empathy into Your Design Guidelines</h4>

  580.     </li>

  581. </ul>

  582. 

  583. <p>Within this diverse team, create protocols that encourage empathy. For example, Caroline Jarrett’s<a href="https://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php"> Question Protocol</a> uses consistent intention and prioritization behind each and every question, rather than asking all possible questions to the user (some of which may make the user feel inadequate or uncomfortable, bring up bad memories, etc.).</p>

  584. 

  585. <p>If you’ve been with your team for a while, you may have a good idea of the types of erroneous assumptions it tends to make. Create specific guidelines that can act as a check point against your team’s bad habits, especially when it comes to empathy. For example, if your team is prone to not changing designs that don’t work for specific users, consider introducing a guideline that can correct this behavior. The guideline could be <em>Each design must be tested with a diverse user group that maps onto our target demographics</em>. Instead of <a href="https://www.nngroup.com/articles/no-validate-in-ux/"><em>Let’s validate this design, say Let’s learn what works and what doesn’t work well for users and why</em></a>.</p>

  586. 

  587. <h2>Conclusion </h2>

  588. 

  589. <p>Empathy in UX is essential. It is a bridge into our user’s minds and our greatest asset as UX professionals. Empathy allows us to design with intent, introduce focus and clarity, advocate on behalf of our users, and challenge our assumptions.</p>

  590. 

  591. <p>(For more on the difference between sympathy and empathy, see also Neel Burton's <a href="https://www.psychologytoday.com/us/blog/hide-and-seek/201505/empathy-vs-sympathy">Empathy vs Sympathy</a>.)</p>

  592.   </article>

  593. </section>

  594. 

  595. 

  596. <nav id="jumpto">

  597.   <p>

  598.     <a href="/david/blog/">Accueil du blog</a> |

  599.     <a href="https://www.nngroup.com/articles/sympathy-vs-empathy-ux/">Source originale</a> |

  600.     <a href="/david/stream/2019/">Accueil du flux</a>

  601.   </p>

  602. </nav>

  603. 

  604. <footer>

  605.   <div>

  606.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  607.     <p>

  608.       Bonjour/Hi!

  609.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  610.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  611.     </p>

  612.     <p>

  613.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  614.     </p>

  615.     

  616.     <p>

  617.       Voici quelques articles choisis :

  618.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  619.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  620.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  621.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  622.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  623.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  624.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  625.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  626.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  627.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  628.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  629.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  630.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  631.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  632.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  633.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  634.     </p>

  635.     <p>

  636.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  637.     </p>

  638.     <p>

  639.       Je ne traque pas ta navigation mais mon

  640.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  641.       conserve des logs d’accès.

  642.     </p>

  643.   </div>

  644. </footer>

  645. <script type="text/javascript">

  646.   ;(_ => {

  647.     const jumper = document.getElementById('jumper')

  648.     jumper.addEventListener('click', e => {

  649.       e.preventDefault()

  650.       const anchor = e.target.getAttribute('href')

  651.       const targetEl = document.getElementById(anchor.substring(1))

  652.       targetEl.scrollIntoView({behavior: 'smooth'})

  653.     })

  654.   })()

  655. </script>