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.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/b516a25fa1bb236d45276214a51.../index.html

index.html 53KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735 
  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>A Crash Course in UX Design Research (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://medium.com/user-experience-design-1/a-crash-course-in-ux-design-research-ea00c3307c82">

  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.   A Crash Course in UX Design Research (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://medium.com/user-experience-design-1/a-crash-course-in-ux-design-research-ea00c3307c82">Source originale du contenu</a></h3>

  463.     <h3 name="f92d" id="f92d" class="graf--h3">A Crash Course in UX Design Research</h3>

  464. 

  465. <p name="4861" id="4861" class="graf--p">The material in this article was originally presented to the Downtown UX Meetup here in Orlando. A member described it as “a firehose of UX information” but one that built a solid foundation for him to continue learning from. It is the longest article I have written for Medium. I didn’t split it up because I want it to serve as a complete introduction to the field.</p>

  466. 

  467. <p name="c423" id="c423" class="graf--p">First off we will discuss why research is so important, then what we are after, and finally how to go about getting it. But, before we continue, let’s get a little help defining design research.</p>

  468. 

  469. <blockquote name="b825" id="b825" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“The work that uncovers and articulates the needs of individuals and/or groups in order to <em class="markup--em markup--pullquote-em">inform</em> the design of products and services in a <em class="markup--em markup--pullquote-em">structured manner</em>.”</blockquote>

  470. 

  471. <p name="d5b2" id="d5b2" data-align="center" class="graf--p">— Nick Remis, Adaptive Path</p>

  472. 

  473. <p name="844a" id="844a" class="graf--p">In that single sentence Nick has packed a lot of really interesting insights. Maybe we can get a clearer picture by diving into the why.</p>

  474. 

  475. <figure name="7e74" id="7e74" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*D7oF3XZTal8gnyvu5rnxFw.png" data-width="572" data-height="281" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*D7oF3XZTal8gnyvu5rnxFw.png"/></div></figure>

  476. 

  477. <p name="20a7" id="20a7" class="graf--p">Many of us have a lot of thoughts about our customers and users. We have tribal knowledge, information that we have gained just from engaging in an industry for some period of time. But what do we know?</p>

  478. 

  479. <p name="1ff7" id="1ff7" class="graf--p">Often we work on assumptions. Assumptions are great! They are absolutely necessary for us to work as designers, but they become dangerous when treated as facts. Design research gives us a structured, methodical approach to a understanding our users. With it we are able to to represent and articulate them in an unbiased way.</p>

  480. 

  481. <p name="6604" id="6604" class="graf--p">Through design research we are able to:</p>

  482. 

  483. <ul class="postList"><li name="a8e7" id="a8e7" class="graf--li">Inform the design of products &amp; services</li><li name="996c" id="996c" class="graf--li">Validate Assumptions</li><li name="8788" id="8788" class="graf--li">Reduce the cost of reaching success</li></ul>

  484. 

  485. <figure name="6ba8" id="6ba8" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*Rb2BhHzWiO74V1DraMGbyQ.png" data-width="716" data-height="320" data-action="zoom" data-action-value="1*Rb2BhHzWiO74V1DraMGbyQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*Rb2BhHzWiO74V1DraMGbyQ.png"/></div><figcaption class="imageCaption">I borrowed the idea for this illustration for Adaptive Path’s <a href="http://ux-intensive.com/" data-href="http://ux-intensive.com/" class="markup--anchor markup--figure-anchor" rel="nofollow">UX Intensive </a>— Research Day. I highly recommend you attend if you have the opportunity!</figcaption></figure>

  486. 

  487. <p name="5902" id="5902" class="graf--p">We are knee deep in the <a href="http://blogs.forrester.com/category/age_of_the_customer" data-href="http://blogs.forrester.com/category/age_of_the_customer" class="markup--anchor markup--p-anchor" rel="nofollow">Age of the Customer</a> and UX is booming. It has become obvious that earlier models of designing for humans are not quite accurate. We are not sheep who — with the right advertising — will buy any product and abide its flaws. We are not vulcans looking for the one swiss army knife that has more features than any competing product. And we are not robots looking for the most efficient workflow.</p>

  488. 

  489. <p name="68b7" id="68b7" class="graf--p">Human beings are weird. We don’t always do the most logical thing. And often we go out of our way to experience things that bring us joy. These reasons illustrate why research can help you to understand your users in ways that no other approach can.</p>

  490. 

  491. <h3 name="5eaa" id="5eaa" class="graf--h3">So what are we after?</h3>

  492. 

  493. <p name="086e" id="086e" class="graf--p">When it comes down to it, we are really after three things with our design research:</p>

  494. 

  495. <figure name="620a" id="620a" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*VXNzUMQtaLy_v1WBZ71GGw.jpeg" data-width="300" data-height="300" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*VXNzUMQtaLy_v1WBZ71GGw.jpeg"/></div><figcaption class="imageCaption"><a href="http://en.wikipedia.org/wiki/Sky_and_Water_I" data-href="http://en.wikipedia.org/wiki/Sky_and_Water_I" class="markup--anchor markup--figure-anchor" rel="nofollow">Sky and Water I</a>, M. C. Escher</figcaption></figure>

  496. 

  497. <ol class="postList"><li name="59c8" id="59c8" class="graf--li">Discover patterns and unknown insights</li><li name="199f" id="199f" class="graf--li">Set objectives, Create hypotheses, and reach conclusions</li><li name="f561" id="f561" class="graf--li">Invent possible futures</li></ol>

  498. 

  499. <p name="0596" id="0596" class="graf--p">As we collect data throughout our research, synthesizing findings can be a daunting task.</p>

  500. 

  501. <p name="d7a7" id="d7a7" class="graf--p">But it doesn’t have to be. Identify patterns in ways that people react to the interfaces we ask them to interact with, the tasks we ask them to complete, the experiences we ask them to share, or the way they engage with us when we ask key questions.</p>

  502. 

  503. <p name="acfe" id="acfe" class="graf--p">Often times some of these insights and patterns stand out. Or we can depend less on intuition and use a <a href="http://www.artefactgroup.com/content/tool/i-heart-frameworks/" data-href="http://www.artefactgroup.com/content/tool/i-heart-frameworks/" class="markup--anchor markup--p-anchor" rel="nofollow">synthesis framework</a>. Either way, by using index cards and post its we get these insights out of your head and into the world. This will help you to more easily notice the patterns and collaborate with your team.</p>

  504. 

  505. <h3 name="48fb" id="48fb" class="graf--h3">How?</h3>

  506. 

  507. <figure name="89f7" id="89f7" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*AgFwybM3ZBvizP3xEsYAAw.png" data-width="298" data-height="391" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*AgFwybM3ZBvizP3xEsYAAw.png"/></div></figure>

  508. 

  509. <p name="4139" id="4139" class="graf--p">Let me start of by saying that we are not “pure” researchers. We don’t have to follow a strict scientific method.</p>

  510. 

  511. <p name="1ce1" id="1ce1" class="graf--p">We do create hypotheses and test them. BUT we can be nimble, we can change the prototypes on the fly. We measure our success by the outcomes we reach.</p>

  512. 

  513. <p name="308e" id="308e" class="graf--p">There are many user research methods that we can use to gather data. I am going to cover several of them in this article, but this is by no means an all inclusive list.</p>

  514. 

  515. <p name="4e51" id="4e51" class="graf--p">There are three dimensions by which we can categorize these research methods. They are not black and white, and fit more as conceptual pairings than opposing ideas. Some times you can get both sides of a dimension in a single method.</p>

  516. 

  517. <p name="8055" id="8055" class="graf--p">They are:</p>

  518. 

  519. <ol class="postList"><li name="6ed9" id="6ed9" class="graf--li">Qualitative &amp; Quantitative</li><li name="cf6a" id="cf6a" class="graf--li">Generative &amp; Evaluative</li><li name="b0e1" id="b0e1" class="graf--li">Behavioral &amp; Attitudinal</li></ol>

  520. 

  521. <figure name="510b" id="510b" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*3Zpw-2xpg4TrEyHEuFWatA.png" data-width="1131" data-height="617" data-action="zoom" data-action-value="1*3Zpw-2xpg4TrEyHEuFWatA.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*3Zpw-2xpg4TrEyHEuFWatA.png"/></div></figure>

  522. 

  523. <h4 name="1f74" id="1f74" class="graf--h4">Qualitative &amp; Quantitative</h4>

  524. 

  525. <p name="0f0a" id="0f0a" class="graf--p">Quantitative methods are typically anything that you can count: time on page, percent of users engaging with x, page views, user flows, time to task completion. A lot of quantitative data in the tech world lives in the things you can do with analytics. Beyond analytics you can get into methods such as surveys and A/B testing. A point to note is that quantitative data thrives with large data sets.</p>

  526. 

  527. <p name="805a" id="805a" class="graf--p">Qualitative methods are typically anything that fall on the other side of the fence. This involves researchers engaging users and digging into their behaviors, feelings, attitudes and emotions by utilizing a plethora of well practiced <em class="markup--em markup--p-em">soft skills</em>. It can also involve users recording themselves, their surrounding and their thoughts while they go through experiences with techniques like diary studies and video ethnography.</p>

  528. 

  529. <figure name="c38a" id="c38a" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*_raIrQpBrPedmjISicnECA.png" data-width="263" data-height="192" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*_raIrQpBrPedmjISicnECA.png"/></div></figure>

  530. 

  531. <p name="f186" id="f186" class="graf--p">One thing that you should keep in mind is that qualitative and quantitative research are <a href="http://johnnyholland.org/2012/04/qualitative-is-not-the-opposite-of-quantitative-data/" data-href="http://johnnyholland.org/2012/04/qualitative-is-not-the-opposite-of-quantitative-data/" class="markup--anchor markup--p-anchor" rel="nofollow">not on opposite ends of the same spectrum</a>. They each have their own spectrum and are really more like two sides of the same coin.</p>

  532. 

  533. <p name="c1bb" id="c1bb" class="graf--p">Quantitative research can help you to gain confidence and know that your qualitative research candidates weren’t outliers. Qualitative research can give you a deeper understanding of the picture you have pulled from quantitative data, and prevent you from jumping to false conclusions. With quantitative data you may know what a user did, but you don’t know why they did it or if they even liked it.</p>

  534. 

  535. <h4 name="fcff" id="fcff" class="graf--h4">Generative &amp; Evaluative</h4>

  536. 

  537. <p name="325f" id="325f" class="graf--p">Where are you at in your research process? Depending on your answer you might want to focus on more generative research (early on ideation) or more evaluative research (is what were building right?).</p>

  538. 

  539. <p name="9335" id="9335" class="graf--p">One thing to keep in mind is you are not required to be on one side of the fence or the other. Like Qualitative and Quantitative, these can play in harmony to help you get a clearer understanding. I’ll often use techniques from both categories during a session.</p>

  540. 

  541. <h4 name="89a9" id="89a9" class="graf--h4">Attitudinal &amp; Behavioral</h4>

  542. 

  543. <p name="eabf" id="eabf" class="graf--p">This final dimension categorizes our research methods into the realms of “What opinions do a user have about a product or service?” and “How is a user actually interacting with a product or service?” For certain situations you may need to know what your users think, but for others it is more important what your users do. Again, use the appropriate methods to assess one, the other, or both.</p>

  544. 

  545. <p name="debc" id="debc" class="graf--p">Let’s get a better understanding by looking at several research methods. As you read about each one, think about how you might leverage it to collect Qualitative and/or Quantitative data, to generate ideas and/or to evaluate them, and to assess behaviors and/or attitudes of your users.</p>

  546. 

  547. <h3 name="4266" id="4266" class="graf--h3">Design Research Methods</h3>

  548. 

  549. <p name="a435" id="a435" class="graf--p"><em class="markup--em markup--p-em">A quick aside — I share some resources to dig in deeper with each of these methods. I recommend reading through them all and then coming back to follow links for the ones you would like to learn more about!</em></p>

  550. 

  551. <figure name="0e09" id="0e09" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*DH_2l347kQ0-MVCdPHAfJQ.png" data-width="342" data-height="296" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*DH_2l347kQ0-MVCdPHAfJQ.png"/></div></figure>

  552. 

  553. <h4 name="2d94" id="2d94" class="graf--h4">Service Safaris</h4>

  554. 

  555. <p name="cb0d" id="cb0d" class="graf--p">A service safari involves going out into the wild and experiencing a service first hand. This tends to be much easier if you work at a large organization, or if you are new to or a consultant for the organization. As you go through the experience, take note of the interactions you have with the organization. Are there gaps in the experience that you have to leap? Are you passed from one person to another? Dig into this method more with <a href="https://www.hvcollege.com/documents/technology/ServiceSafariActivity.pdf" data-href="https://www.hvcollege.com/documents/technology/ServiceSafariActivity.pdf" class="markup--anchor markup--p-anchor" rel="nofollow">this worksheet</a>.</p>

  556. 

  557. <figure name="faa4" id="faa4" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*7-mhqJixyqPBM5Gtk2UePg.png" data-width="296" data-height="226" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*7-mhqJixyqPBM5Gtk2UePg.png"/></div></figure>

  558. 

  559. <h4 name="aab5" id="aab5" class="graf--h4">Focus Groups</h4>

  560. 

  561. <p name="c280" id="c280" class="graf--p">Focus groups involve getting users together to talk about your product or service. This method has been around for a long time. It is sometimes criticized because it tends to emphasize group think and doesn’t identify “unmet needs.” To learn more about running a focus group, there’s a <a href="http://www.uxmatters.com/mt/archives/2011/07/dos-and-donts-for-focus-groups.php" data-href="http://www.uxmatters.com/mt/archives/2011/07/dos-and-donts-for-focus-groups.php" class="markup--anchor markup--p-anchor" rel="nofollow">great list of “Do’s and Dont’s” from UX Matters</a>.</p>

  562. 

  563. <figure name="acfc" id="acfc" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*elcFc7uCAkwsnT2ZBaKfUw.png" data-width="316" data-height="192" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*elcFc7uCAkwsnT2ZBaKfUw.png"/></div></figure>

  564. 

  565. <h4 name="f29a" id="f29a" class="graf--h4">Interviews</h4>

  566. 

  567. <p name="c440" id="c440" class="graf--p">In much of our research we talk to users in one way or another. Often these methods bleed into each other in practice. Interviewing users is valuable much in the way you interview potential new hire at your organization. The focus here is to gain a deeper understanding of your user, their motivations and background. This is useful data when it comes to building personas. The <a href="http://www.nngroup.com/" data-href="http://www.nngroup.com/" class="markup--anchor markup--p-anchor" rel="nofollow">NN/g</a> have a spectacular article on <a href="http://www.nngroup.com/articles/interviewing-users/" data-href="http://www.nngroup.com/articles/interviewing-users/" class="markup--anchor markup--p-anchor" rel="nofollow">when interviews are useful</a>.</p>

  568. 

  569. <figure name="9f99" id="9f99" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*Kk0_mtxSNHHAX28zpXfRjQ.png" data-width="425" data-height="390" data-action="zoom" data-action-value="1*Kk0_mtxSNHHAX28zpXfRjQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*Kk0_mtxSNHHAX28zpXfRjQ.png"/></div></figure>

  570. 

  571. <h4 name="7f9c" id="7f9c" class="graf--h4">Surveys</h4>

  572. 

  573. <p name="a739" id="a739" class="graf--p">This is an often inexpensive method you can use to gain insight quickly. Surveys are tricky because of two problems that tend to arise with them. First off, there is a significant selection bias at the type of user who will fill out your survey, even when using incentives. Secondly, it can be difficult to ask questions that don’t lead your participants to the answers you were looking for. Caroline Jarrett gives us some <a href="http://www.slideshare.net/cjforms/10-tips-for-a-better-ux-survey" data-href="http://www.slideshare.net/cjforms/10-tips-for-a-better-ux-survey" class="markup--anchor markup--p-anchor" rel="nofollow">great tips for writing surveys in this Sideshare</a>.</p>

  574. 

  575. <figure name="b69f" id="b69f" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*BCe1JPclKO8fZVOU8xqc-g.png" data-width="294" data-height="207" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*BCe1JPclKO8fZVOU8xqc-g.png"/></div></figure>

  576. 

  577. <h4 name="b8a1" id="b8a1" class="graf--h4">Directed storytelling</h4>

  578. 

  579. <p name="f5c6" id="f5c6" class="graf--p">You can pair this method with almost any in which you are interacting with a user. Being intentional about how we dig in is important. Directed storytelling may be my favorite research method because it helps us gain that deeper understanding. It involves listening empathically and guiding the user to dig deeper when they answer a question. There is often more to reveal just under the surface. Jamin Hegeman has an <a href="http://jamin.org/but-why/" data-href="http://jamin.org/but-why/" class="markup--anchor markup--p-anchor" rel="nofollow">awesome short story</a> about how this works.</p>

  580. 

  581. <figure name="da76" id="da76" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*x2ypdlAZ8JPZnuIFlX2VZA.png" data-width="246" data-height="216" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*x2ypdlAZ8JPZnuIFlX2VZA.png"/></div></figure>

  582. 

  583. <h4 name="46c7" id="46c7" class="graf--h4">Diary Studies</h4>

  584. 

  585. <p name="0346" id="0346" class="graf--p">Also called Annotated Experiences, these are not “Dear Diary” but more a user documenting their thoughts as they go through an experience. This might be a process you are hoping to improve by building a tool. Or it could involve going through your service as it is today, like a Service Safari by proxy. UXPA Magazine published an <a href="http://uxpamagazine.org/dear-diary-using-diaries-to-study-user-experience/" data-href="http://uxpamagazine.org/dear-diary-using-diaries-to-study-user-experience/" class="markup--anchor markup--p-anchor" rel="nofollow">article that gets into some of the nitty-gritty details of Diary Studies</a>.</p>

  586. 

  587. <figure name="e139" id="e139" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*2adQQV4WS0l-0oMueu6wVw.png" data-width="281" data-height="240" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*2adQQV4WS0l-0oMueu6wVw.png"/></div><figcaption class="imageCaption">Only a little creepy.</figcaption></figure>

  588. 

  589. <h4 name="5f54" id="5f54" class="graf--h4">Field Studies</h4>

  590. 

  591. <p name="2ac2" id="2ac2" class="graf--p">Do you enjoy people watching? Have you ever sat in a hotel lobby and observed someone checking in? A field study is that but with more intention. They can be a great way to get beyond what a user can tell you they need, identifying the areas where they struggle and don’t even think about it. The areas that have just become part of life or “just the way it is.” We don’t settle for that in UX, and field studies can be a great way to unearth those problems. Jared spool goes so far as to call them “<a href="http://www.uie.com/articles/field_studies/" data-href="http://www.uie.com/articles/field_studies/" class="markup--anchor markup--p-anchor" rel="nofollow">the best tool to discover user needs</a>.”</p>

  592. 

  593. <figure name="8086" id="8086" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*RtFPfhFkK3ZMlrXRZ_P7Kw.png" data-width="301" data-height="279" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*RtFPfhFkK3ZMlrXRZ_P7Kw.png"/></div></figure>

  594. 

  595. <h4 name="7637" id="7637" class="graf--h4">Intercepts</h4>

  596. 

  597. <p name="fa62" id="fa62" class="graf--p">If you were doing research on redesigning a <em class="markup--em markup--p-em">High End Cocktail Ordering Experience </em>you might want to go to a few bars and, after a customer finishes ordering their drink, jump in and ask them what they liked and didn’t like about the experience. This is an intercept. You swoop in just as a user completes a task and then ask them about their experience while they are still in that moment. You can even do this with a digital task, but there is a lot more risk of putting someone off when they have a modal in their face as opposed to another human being who is reaching out to them. Read more about digital intercepts on the <a href="http://www.usertesting.com/blog/2014/04/21/how-to-do-site-intercepts-with-usertesting/" data-href="http://www.usertesting.com/blog/2014/04/21/how-to-do-site-intercepts-with-usertesting/" class="markup--anchor markup--p-anchor" rel="nofollow">User Testing blog</a> and how <a href="http://www.nngroup.com/articles/live-intercept-remote-test/" data-href="http://www.nngroup.com/articles/live-intercept-remote-test/" class="markup--anchor markup--p-anchor" rel="nofollow">NN/g used intercepts to drive remote field studies</a>.</p>

  598. 

  599. <figure name="21d8" id="21d8" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*hotmmrFN-ZI48jgF2VF0uw.png" data-width="234" data-height="178" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*hotmmrFN-ZI48jgF2VF0uw.png"/></div></figure>

  600. 

  601. <h4 name="6c10" id="6c10" class="graf--h4">Video Ethnography</h4>

  602. 

  603. <p name="f2d0" id="f2d0" class="graf--p">This research method works well for remote activities that it is difficult to get all or any of the researchers to. You can equip your subject with some inexpensive camera gear and ask them to record their experience going through a service, activity or while working with a product. This method leverages some of the elements of a Diary Study with some of the elements of Field Studies. Tomer Sharon gives us a deeper understanding by highlighting <a href="http://blog.usabilla.com/top-ethnographic-research-videos/" data-href="http://blog.usabilla.com/top-ethnographic-research-videos/" class="markup--anchor markup--p-anchor" rel="nofollow">10 examples of video ethnography</a>.</p>

  604. 

  605. <figure name="89dc" id="89dc" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*ZT0HSiIAICQjioPg2s9Urg.png" data-width="332" data-height="375" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*ZT0HSiIAICQjioPg2s9Urg.png"/></div></figure>

  606. 

  607. <h4 name="13f9" id="13f9" class="graf--h4">Picture Cards</h4>

  608. 

  609. <p name="c001" id="c001" class="graf--p">Also called Collaging, this method involves equipping users with a focus and a set of randomized pictures, words, drawings and symbols. The user is then invited to tell a story using those supplies. This can be particularly useful when a topic is difficult or emotional to discuss. For example, asking patients or family members to tell you a story about a time they sat in a waiting room. Providing these tools can help that person share emotions that might be difficult otherwise. Minnie Bredouw from IDEO shares a story on Design Kit about a time she <a href="http://www.designkit.org/stories/48" data-href="http://www.designkit.org/stories/48" class="markup--anchor markup--p-anchor" rel="nofollow">utilized collaging in a workshop with users in rural Nigeria</a>.</p>

  610. 

  611. <figure name="ccc3" id="ccc3" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*7pVUmnnrGdB5iPiCVeRmGw.png" data-width="427" data-height="415" data-action="zoom" data-action-value="1*7pVUmnnrGdB5iPiCVeRmGw.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*7pVUmnnrGdB5iPiCVeRmGw.png"/></div></figure>

  612. 

  613. <h4 name="6c2d" id="6c2d" class="graf--h4">Mental Model Mapping</h4>

  614. 

  615. <p name="8807" id="8807" class="graf--p">I only learned about this method recently but it is fun and can be really insightful. As you research the needs of your user, you put those motivations above a line. Then, place the features that address those needs below the line in the same column. This can help you to identify where there may be deficiencies in your application and where you are doing something that isn’t necessarily needed by your users. You should definitely check out <a href="http://www.smashingmagazine.com/2012/04/23/mental-model-diagrams-cartoon/" data-href="http://www.smashingmagazine.com/2012/04/23/mental-model-diagrams-cartoon/" class="markup--anchor markup--p-anchor" rel="nofollow">this cartoon that explains Mental Model Maps</a> from Indi Young and Brad Colbow.</p>

  616. 

  617. <figure name="a6ca" id="a6ca" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*Y0crjm6dQemIK3R6-NXupA.png" data-width="333" data-height="305" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*Y0crjm6dQemIK3R6-NXupA.png"/></div></figure>

  618. 

  619. <h4 name="4ae8" id="4ae8" class="graf--h4">Usability Testing</h4>

  620. 

  621. <p name="b99a" id="b99a" class="graf--p">This method involves testing a mockup, prototype, drawing, or even live code by giving a user tasks and inviting them to complete those tasks while you observe. I am always amazing at the things I learn when I run a usability test. I use this method more than any other and strongly recommend you try it out if you don’t already. Often I hear concern over how expensive this method is perceived to be, but I can tell you from experience that it can actually be rather inexpensive. Check out Steve Krug’s book <a href="http://www.sensible.com/rsme.html" data-href="http://www.sensible.com/rsme.html" class="markup--anchor markup--p-anchor" rel="nofollow">Rocket Surgery Made Easy</a> and this <a href="http://www.uxbooth.com/articles/usability-testing-dont-guess-test/" data-href="http://www.uxbooth.com/articles/usability-testing-dont-guess-test/" class="markup--anchor markup--p-anchor" rel="nofollow">UX Booth article on usability testing</a> to learn more.</p>

  622. 

  623. <figure name="23bc" id="23bc" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*M9_KIIK96JIspkw8MVl_aw.png" data-width="421" data-height="311" data-action="zoom" data-action-value="1*M9_KIIK96JIspkw8MVl_aw.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*M9_KIIK96JIspkw8MVl_aw.png"/></div></figure>

  624. 

  625. <h4 name="f0c6" id="f0c6" class="graf--h4">A/B Testing</h4>

  626. 

  627. <p name="8648" id="8648" class="graf--p">One potential issue with Usability Testing is that human beings often want to be pleasing and might not be honestly critical of your work. This problem can be addressed with A/B Testing. Showing a user two options and asking them to give you feedback comparing the pros/cons of both opens up the conversation and can provide more honest feedback. You can use technology to run A/B Tests in a quantitatively relevant way by presenting users with interface variations in the wild. To make another book recommendation, <a href="http://www.amazon.com/Handbook-Usability-Testing-Conduct-Effective/dp/0470185481" data-href="http://www.amazon.com/Handbook-Usability-Testing-Conduct-Effective/dp/0470185481" class="markup--anchor markup--p-anchor" rel="nofollow">The Handbook of Usability Testing</a> is an oldie but a goodie and does a great job of digging into both methods. Also, NN/g digs into some <a href="http://www.nngroup.com/articles/ab-testing-and-ux-research/" data-href="http://www.nngroup.com/articles/ab-testing-and-ux-research/" class="markup--anchor markup--p-anchor" rel="nofollow">intriguing concepts of A/B Testing in this article</a>.</p>

  628. 

  629. <figure name="b915" id="b915" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*2qRpl--b2n0YTsfqHTsQ0Q.png" data-width="524" data-height="446" data-action="zoom" data-action-value="1*2qRpl--b2n0YTsfqHTsQ0Q.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*2qRpl--b2n0YTsfqHTsQ0Q.png"/></div></figure>

  630. 

  631. <h4 name="1291" id="1291" class="graf--h4">Participatory Design</h4>

  632. 

  633. <p name="e28c" id="e28c" class="graf--p">This is a bit of a broad category of research but essentially boils down to engaging stakeholder in design activities that enable them to share ideas with you in a collaborative way. Often this is an effective way to get customers, executives or other SMEs to share concepts that they otherwise might have a difficult time communicating. It is worth noting that this does not mean you don’t have to design. It can be a common misconception that gives this method a bad name. Dig in deeper with the folks over at Wicked Problems as they <a href="https://www.wickedproblems.com/4_participatory_design.php" data-href="https://www.wickedproblems.com/4_participatory_design.php" class="markup--anchor markup--p-anchor" rel="nofollow">explore what Participatory Design means to them</a>.</p>

  634. 

  635. <figure name="cdc0" id="cdc0" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*VB7gHIyVr3pioVWpQZdP7g.png" data-width="275" data-height="282" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*VB7gHIyVr3pioVWpQZdP7g.png"/></div></figure>

  636. 

  637. <h4 name="de7b" id="de7b" class="graf--h4">Card Sorting</h4>

  638. 

  639. <p name="8ceb" id="8ceb" class="graf--p">Card Sorting is a great tool when working on primary navigational elements. In a simple exercise you provide a user with a stack of index cards that have the titles of pages or content on them. The user is then asked to organize these cards into groups. Depending on your needs you can do this in an open way where the user may define their own categories, or in a closed way where the categories are predefined. Read more about this method with Donna Spencer’s <a href="http://boxesandarrows.com/card-sorting-a-definitive-guide/" data-href="http://boxesandarrows.com/card-sorting-a-definitive-guide/" class="markup--anchor markup--p-anchor" rel="nofollow">Definitive Guide to Card Sorting</a> on Boxes and Arrows.</p>

  640. 

  641. <figure name="e567" id="e567" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*GQy0Lz1q4X7zIl0R2t6nOw.png" data-width="372" data-height="232" data-action="zoom" data-action-value="1*GQy0Lz1q4X7zIl0R2t6nOw.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*GQy0Lz1q4X7zIl0R2t6nOw.png"/></div></figure>

  642. 

  643. <h4 name="3cf8" id="3cf8" class="graf--h4">Analytics</h4>

  644. 

  645. <p name="bf7c" id="bf7c" class="graf--p">Okay, this last one is unfair as there are many kinds of research methods you can bundle into “Analytics.” How long does a user spend completing a task? Which features are most commonly utilized? What page flows do users typically take? These and so many more questions are answered with analytics. The one tricky thing is in the interpretation of the data. Remember the need for both qualitative and quantitative data? If you only look at analytics it can be easy to jump to conclusions, but without marrying the data to real qualitative research you might be missing out on some important insights. Dig in deeper with Luke Hay and <a href="http://www.uxbooth.com/articles/an-analytics-first-approach-to-ux-part-1/" data-href="http://www.uxbooth.com/articles/an-analytics-first-approach-to-ux-part-1/" class="markup--anchor markup--p-anchor" rel="nofollow">An Analytics-First Approach to UX</a> on UX Booth.</p>

  646. 

  647. <h3 name="0d3c" id="0d3c" class="graf--h3">Creating Opportunities for Research</h3>

  648. 

  649. <figure name="822d" id="822d" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*oEBL6z6P8EvBBTBU-61Jcw.png" data-width="475" data-height="382" data-action="zoom" data-action-value="1*oEBL6z6P8EvBBTBU-61Jcw.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*oEBL6z6P8EvBBTBU-61Jcw.png"/></div></figure>

  650. 

  651. <p name="9bae" id="9bae" class="graf--p">Now that you are beginning to build a toolbelt of research methods, you may be wondering how you can actually do this research. Well, depending on your needs you may want to target specific candidates based on these four factors (and others more unique to your situation). But if I can give you one piece of adivce it would be to <strong class="markup--strong markup--p-strong">go big or go anyways</strong>. It doesn’t matter if you don’t have the opprituinty to do a big in-depth study, just do a small not in depth study. Some research is better than no research, some insight is better than no insight, and the more you do it, the more evidence you will collect to show why it is so beneficial.</p>

  652. 

  653. <p name="2975" id="2975" class="graf--p">Practice on your friends, or your spouse, or your coworkers. It’s a great way to discover if you are asking leading questions or to catch some of the surprises you might encounter when you are actually in it.</p>

  654. 

  655. <h3 name="5c9c" id="5c9c" class="graf--h3">You Did It!</h3>

  656. 

  657. <p name="62da" id="62da" class="graf--p">You just learned about 16 design research methods. Great job! As you read about each one were you able to categorize them in our three dimensions? Do you have an idea how they might be able to serve your needs through the different stages of the design process?</p>

  658. 

  659. <p name="641c" id="641c" class="graf--p">The last resource I will leave you with is another <a href="http://www.nngroup.com/articles/which-ux-research-methods/" data-href="http://www.nngroup.com/articles/which-ux-research-methods/" class="markup--anchor markup--p-anchor" rel="nofollow">NN/g article</a> that categorizes them across two of our dimensions and helps reveal insight into when they might be useful to you.</p>

  660. 

  661. <p name="6d6d" id="6d6d" class="graf--p">But perhaps now is a great moment to take a break and grab a cup of coffee or tea. When you’re ready, come back and dig into the resources I linked to for more in depth details about the research methods you are most intrigued by.</p>

  662. 

  663. <p name="8a4e" id="8a4e" class="graf--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Thank you to those who wrote the further reading I’ve shared:<br/></em></strong>Nick Remis, Masuma Henry, Indi Young, Jakob Nielsen, Caroline Jarrett, Jamin Hegeman, Carine Lallemand, Jared Spool, Aidan Bryant, Tomer Sharon, Minnie Bredouw, Brad Colbow, Steve Krug, Jeffery Rubin, Dana Chisnell, Jennifer Cardello, Liz Sanders, Donna Spencer, Luke Hay, Christian Rohrer, and anyone I may have missed— your generous contributions to the field of UX have inspired a generation of UX professionals.</p>

  664. 

  665. <p name="1d7d" id="1d7d" class="graf--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">And thanks to the platforms they share their thoughts on:</em></strong><br/>Adaptive Path, Artefact Group Blog, Johnny Holland, UX Matters, NN/g, UXPA Magazine, UIE, User Testing Blog, Usabilla Blog, Design Kit, Smashing Magazine, UX Booth, Wicked Problems</p>

  666. 

  667. <p name="23e3" id="23e3" class="graf--p">Also a huge thanks to the members of the Downtown UX Meetup in Orlando. Presenting this material to them inspired me to write this article and share it with you. Special thanks to Gus Hernandez, Erin Fonzi Denton, and Denise Benkert for giving me feedback on this article.</p>

  668. 

  669. <h3 name="4a4c" id="4a4c" class="graf--h3">Finally, thank you!</h3>

  670. 

  671. <p name="7775" id="7775" class="graf--p graf--last">I really appreciate you reading this introduction to UX Design Research. I would love to hear from you on twitter (<a href="https://twitter.com/MattPLavoie" data-href="https://twitter.com/MattPLavoie" class="markup--anchor markup--p-anchor" rel="nofollow">@MattPLavoie</a>) and am always happy to talk about UX.</p>

  672.   </article>

  673. </section>

  674. 

  675. 

  676. <nav id="jumpto">

  677.   <p>

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

  679.     <a href="https://medium.com/user-experience-design-1/a-crash-course-in-ux-design-research-ea00c3307c82">Source originale</a> |

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

  681.   </p>

  682. </nav>

  683. 

  684. <footer>

  685.   <div>

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

  687.     <p>

  688.       Bonjour/Hi!

  689.       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>

  690.       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>).

  691.     </p>

  692.     <p>

  693.       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>.

  694.     </p>

  695.     

  696.     <p>

  697.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  714.     </p>

  715.     <p>

  716.       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>.

  717.     </p>

  718.     <p>

  719.       Je ne traque pas ta navigation mais mon

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

  721.       conserve des logs d’accès.

  722.     </p>

  723.   </div>

  724. </footer>

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

  726.   ;(_ => {

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

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

  729.       e.preventDefault()

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

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

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

  733.     })

  734.   })()

  735. </script>