davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The Lean UX Manifesto: Principle-Driven Design (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://www.smashingmagazine.com/2014/01/08/lean-ux-manifesto-principle-driven-design/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The Lean UX Manifesto: Principle-Driven Design (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.smashingmagazine.com/2014/01/08/lean-ux-manifesto-principle-driven-design/">Source originale du contenu</a></h3>
    <p>My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that <strong>there’s a temptation to lay down rules</strong>, and if the rules aren’t followed… well, then, you can’t call it lean UX. At the end of the day, though, some lean UX is better than none.</p>

<p>If you were told to finish off the following sentence, how would you do it?</p>

<blockquote><p>“You’re not practicing lean UX if…”</p></blockquote>

<p>I asked that very same question on Twitter, LinkedIn and email to some <a href="http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/">lean UX thinkers</a><sup class="po" id="note-1"><a href="#1">1</a></sup> out there. My personal conclusion is simple. Lean UX is a set of principles that may be used to guide you to better, more desirable solutions for users. It’s not a process in which each tool is rigidly applied.</p>

<p>Let me give you a real-world example. Co-location is a hot topic in the lean UX discussion. If you talk to experts and read their tweets and blogs, you might get the sense that if you’re not a co-located, <a href="http://lifehacker.com/5965280/follow-jeff-bezos-two-pizza-rule-to-avoid-the-dangers-of-groupthink">two-pizza-eating team</a><sup class="po" id="note-2"><a href="#2">2</a></sup>, then you can’t practice lean UX. I know that this is not the intent of <a href="http://www.amazon.com/Lean-UX-Applying-Principles-Experience/dp/1449311652">authors of resources on lean UX</a><sup class="po" id="note-3"><a href="#3">3</a></sup>, but it’s out there. Frankly, the situation is ideal, but if you work in a large company, it might not be the reality.</p>

<p><strong>The value of co-location is obvious.</strong> As Jeff Gothelf describes in his book <a href="http://shop.oreilly.com/product/0636920021827.do"><em>Lean UX: Applying Lean Principles to Improve User Experience</em></a><sup class="po" id="note-4"><a href="#4">4</a></sup>:</p>

<blockquote>
<p>“Nothing is more effective than walking over to a colleague, showing some work, discussing, sketching, exchanging ideas, understanding facial expressions and body language, and reaching a resolution on a thorny topic.”</p>
</blockquote>

<p>I couldn’t agree more, but in one of my projects, it’s not a reality. Our team is spread across three states, two countries and three companies. We believe, however, that we can still practice the fundamentals of lean UX successfully despite this, and I believe we do. Our methods might make a purist cringe, but we have a measure of success (and also measurable success).</p>

<p><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2014/01/ux-discussion.jpg"><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2014/01/ux-discussion.jpg" alt="ux-discussion" width="500" height="310" class="alignnone size-full wp-image-120359"/></a><sup class="po" id="note-5"><a href="#5">5</a></sup><br/>
<em>No matter where your colleagues are located, you can all still practice the fundamentals of lean UX. Image by <a href="http://www.flickr.com/photos/flat61/3883611573/">Claire Murray</a><sup class="po" id="note-6"><a href="#6">6</a></sup>.</em></p>

<p>So, what I really wanted to know when I asked the question above was, what are the absolute must-haves in order to be successful with lean UX?</p>

<p>Here are a few of my favorite responses to “You’re not practicing lean UX if…,” along with my reasons why (in brackets):</p>

<p>From <a href="https://twitter.com/hpdailyrant">Ha Phan</a><sup class="po" id="note-7"><a href="#7">7</a></sup>:</p>

<ul>
<li>“… your collaboration sessions with the team don’t include business goals and strategies.”<br/>
[As much as I want to focus on solving user problems, it won’t fly if we don’t consider where we are headed as a business and whether the activity fits in.]</li>
<li>“… you’re not defining KPIs [key performance indicators] and integrating analytics into each release.”<br/>
[Without a valid measurement, we can’t know whether we’re solving the problem. We have to be able to point to at least one number to know whether we’re failing or succeeding.]</li>
<li>“<strong>… you implement every single step in the design process</strong>, instead of picking and choosing from the design toolbox.”<br/>
[Lean UX is a set of principles and tools and should be applied as needed. We shouldn’t be ticking every box in a project management cycle.]</li>
<li>“… you’re creating long design specs for the vision of the entire product.”<br/>
[Users do not interact with requirements documents, specifications and wireframes; so, the quicker we get to the end product, the better. Let’s not get bogged down by deliverables in the interim. Rather, let’s create the lightest thing we can in order to communicate how to apply the thinking to the end design.]</li>
</ul>

<p>From <a href="http://www.jeffgothelf.com/blog/">Jeff Gothelf</a><sup class="po" id="note-8"><a href="#8">8</a></sup>:</p>

<ul>
<li>“… you are not managing towards outcomes (not outputs, feature sets, etc).”<br/>
[At the end of the day, we need to consider the bottom line. Sure, we’re building products, but more importantly, we’re building a business. Asking whether what we’re doing will make money is important? And if it will make money, how?]</li>
<li>“<strong>… you don’t have a willingness and the freedom or support to experiment.</strong>”<br/>
[This can’t be done without executive buy-in.]</li>
</ul>

<p>From <a href="https://twitter.com/MelissaHui">Melissa Hui</a><sup class="po" id="note-9"><a href="#9">9</a></sup>:</p>

<ul>
<li>“… you’re spending more time working on documentation than thinking about the design and collaboration with team members.”<br/>
[This is similar to what Ha said, but this identifies an interesting danger. Working on documentation tends to be a one-person activity that takes away from valuable collaboration.]</li>
<li>“… your development team is not seeing what they’re building until they have to build it.”<br/>
[The development team should be fully engaged and involved in the design process. Again, collaboration is key.]</li>
</ul>

<h3>The Lean UX Manifesto</h3>

<p>After receiving these responses, I felt compelled to create a manifesto. The responses helped me to focus on the guiding principles behind lean UX. I like the ones cited above because they focus not on a particular tool, but rather on the seeds of innovation behavior. After reading all of the tweets and emails and then thinking about the current toolset, I boiled down the manifesto to what follows below.</p>

<p>I didn’t do it alone. I enlisted the help of two colleagues who I also consider mentors: Ha Phan, quoted above, and Ajay Revels, my lean UX partner in crime. Visit the <a href="http://www.leanuxmanifesto.com/">Lean UX Manifesto website</a><sup class="po" id="note-10"><a href="#10">10</a></sup> for more of the back story.</p>

<p>So, here is what we believe:</p>

<blockquote>
<p>We are developing a way to create digital experiences that are valued by our end users. Through this work, we hold in high regard the following:</p>
<ul>
<li><strong>Early customer validation</strong> over releasing products with unknown end-user value</li>
<li><strong>Collaborative design</strong> over designing on an island</li>
<li><strong>Solving user problems</strong> over designing the next “cool” feature</li>
<li><strong>Measuring KPIs</strong> over undefined success metrics</li>
<li><strong>Applying appropriate tools</strong> over following a rigid plan</li>
<li><strong>Nimble design</strong> over heavy wireframes, comps or specs</li>
</ul>
<p>As stated in the Agile Manifesto, “While there is value in the items on the right, we value the items on the left more.”</p>
</blockquote>

<h3>How The Manifesto Works</h3>

<p>Let’s take each of these in turn and see how we can follow the principles of lean UX.</p>

<h4>Early Customer Validation Over Releasing Products With Unknown User Value</h4>

<p>What if you worked at a company where usability testing just wasn’t done? Unfortunately, this is the sad state in which many of our fellow UX practitioners find themselves. How, then, do they follow the principles of lean UX?</p>

<p>With usability testing, we seek customer validation or early failure. Customer validation may be sought through other means as well. For example, does your company gather feedback from users? If that feedback is circulated, are you on the list of people who receive it?</p>

<p>Here are other sources of learning about customer needs:</p>

<ul>
<li><strong>Customer service representatives</strong><br/>
Their focus is on helping customers overcome experience issues. Try to speak to them regularly. They are likely documenting their calls, so see whether you can create some system for tagging experience issues that you can follow up on.</li>
<li><strong>Sales representatives</strong><br/>
This is another group that is focused on the customer. They will understand what customer problems are out there to be solved. They’ll also know which features are important and which innovations customers want.</li>
<li><strong>Website search data</strong><br/>
This is an invaluable source of customer desires. Search data can uncover website navigation problems and features or problems that customers are looking for.</li>
</ul>

<p><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/12/CustomerServiceRep.jpg"><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/12/CustomerServiceRep.jpg" alt="Salespeople and customer service reps can be great sources of customer needs. " width="500" height="306" class="size-full wp-image-120149"/></a><sup class="po" id="note-11"><a href="#11">11</a></sup><br/>
<em>Salespeople and customer service representatives are great sources of learning about customer needs. (Image: <a href="http://www.flickr.com/photos/rzganoza/5689088327/in/photostream/">Renato Ganoza</a><sup class="po" id="note-12"><a href="#12">12</a></sup>)</em></p>

<h4>Collaborative Design Over Designing on an Island</h4>

<p>Design should not be a solo exercise. Being a design team of one is no excuse. I use the <a href="http://vimeo.com/37861987">design studio process</a><sup class="po" id="note-13"><a href="#13">13</a></sup> and adopt the role of facilitator. Gather team members who own a piece of the project, and host a design studio workshop. Include at least the following people (adjusting to suit your unique organization):</p>

<ul>
<li><strong>Domain owner</strong><br/>
Your subject matter expert</li>
<li><strong>Requirements Owner</strong><br/>
A business analyst or the person who gathers and writes the requirements</li>
<li><strong>Data provider</strong><br/>
A data analyst on hand who is familiar with the analytics and can pull the info you need</li>
<li><strong>Technology owner</strong><br/>
A developer, someone who understands the technology constraints and design patterns</li>
<li><strong>Product or business owner</strong><br/>
A product manager or the person who owns this piece of business</li>
<li><strong>Designer</strong><br/>
The UX or visual designer or person who owns the design and can facilitate the design studio</li>
<li><strong>Researcher</strong><br/>
The usability analyst or UX researcher or person who owns customer development and persona creation</li>
</ul>

<h4>Solving User Problems Over Designing the Next Cool Feature</h4>

<p>When you’re handed a requirements document, a thought-out solution, a feature, a brief or whatever artifact you receive to inform your work, begin by asking, “What problem are we trying to solve?” Ideally, you should clearly understand the customer’s problem. Design is problem-solving, so if you don’t know the problem, you can’t design a solution. If you do this enough, then the stakeholders will understand that you’re more than just a wireframe jockey. You’re a professional problem-solver with a system for creating solutions that make sense.</p>

<h4>Measuring KPIs Over Undefined Success Metrics</h4>

<p>You can’t measure success if you aren’t… er, measuring. Avoid vanity metrics. I love <a href="http://www.slideshare.net/dmc500hats/startup-metrics-for-pirates-long-version">Dave McClure’s pirate metrics</a><sup class="po" id="note-14"><a href="#14">14</a></sup>:</p>

<ul>
<li><strong>Acquisitions</strong><br/>
Users come to the website from various channels.</li>
<li><strong>Activation</strong><br/>
Users enjoy their first visit (a “happy” user experience).</li>
<li><strong>Retention</strong><br/>
Users come back, visiting multiple times.</li>
<li><strong>Referral</strong><br/>
Users like the product enough to refer others.</li>
<li><strong>Revenue</strong><br/>
Users conduct some monetization behavior.</li>
</ul>

<h4>Applying Appropriate Tools Over Following a Rigid Plan</h4>

<p>Lean UX should be a flexible process. As I started to develop the process steps for one cycle, I found myself overwhelmed with the number of tools being recommended. My advice, similar to what I’d say when creating a minimum viable product, is to apply the minimum tools required to get you to “pivot” or “persevere.”</p>

<p>Here are a few tools that I’ve found useful (not an exhaustive list):</p>

<ul>
<li>provisional personas, right sized for the effort;</li>
<li>persona map (which we learned from Menlo Innovations);</li>
<li>assumptions, with the riskiest identified;</li>
<li>design studio;</li>
<li>paper prototyping in early stages;</li>
<li>digital prototyping (HTML preferred) in later stages;</li>
<li>guerilla design assessment (a better name for usability testing);</li>
<li>co-location wherever possible.</li>
</ul>

<p><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/12/DesignStudio.jpg"><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/12/DesignStudio.jpg" alt="The design studio method is popular for collaborative design" width="500" height="375" class="size-full wp-image-120154"/></a><sup class="po" id="note-15"><a href="#15">15</a></sup><br/>
<em>The design studio method is popular for collaborative design. (Image: <a href="http://www.flickr.com/photos/visualpunch/10306535683/in/photostream/"> visualpun.ch</a><sup class="po" id="note-16"><a href="#16">16</a></sup>)</em></p>

<p>Everything else should be applied as it makes sense. For example, if more customer development is needed, then take the time to interview as a team and to internalize customer needs. The lean startup world has no shortage of tools. Use only the ones that make sense to your project and that get you to a validated solution faster.</p>

<h4>Nimble Design Over Heavy Wireframes, Comps or Specs</h4>

<p>The goal is to release a product. Once it’s released, users won’t interact with the wireframes or requirements document as part of the product. They will interact with the product itself. So, try to spend less time on your design artifacts.</p>

<p>How can you lighten your wireframes?</p>

<ul>
<li><strong>Lighter annotations and more presentation</strong><br/>
I’ve found that if I take the time to present my unfinished wireframes to stakeholders, I will get valuable feedback sooner and save time.</li>
<li><strong>Co-design</strong><br/>
If developers, quality assurance testers and business analysts are involved in the design, then they will share ownership and internalize the annotations. When this happens, you can pass off sketches as wireframes because team members will already understand the interactions.</li>
<li><strong>Paper prototypes</strong><br/>
These serve a dual purpose. They get you to design validation (i.e. usability testing) sooner, but they also demonstrate the interactions. No need to write detailed wire annotations if the user can see the interactions firsthand.</li>
</ul>

<p class="icad" id="cad-middle" data-ad-zone-id="97"/><h3>It’s All About Principle-Driven Design</h3>
<p>This all boils down to something that I call principle-driven design. As stated, some lean UX is better than none, so applying these principles as best you can will get you to customer-validated, early-failure solutions more quickly. Rules are for practitioners who don’t really know the value of this process, while principles demand wisdom and maturity.</p>
<p>By allowing principles to drive you, you’ll find that you’re more nimble, reasonable and collaborative. Really, you’ll be overall better at getting to solutions. This will please your stakeholders and team members from other disciplines (development, visual design, business, etc.). To quote the late Stephen Covey:</p>
<blockquote><p>“There are three constants in life: change, choice and principles.”</p></blockquote>
<p>That pretty much sums up lean UX.</p>
<p><em>(al, il, ea)</em></p>
<h4 class="po">Footnotes</h4><ol class="po"><li id="#1"><a href="#note-1">1 http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/</a></li><li id="#2"><a href="#note-2">2 http://lifehacker.com/5965280/follow-jeff-bezos-two-pizza-rule-to-avoid-the-dangers-of-groupthink</a></li><li id="#3"><a href="#note-3">3 http://www.amazon.com/Lean-UX-Applying-Principles-Experience/dp/1449311652</a></li><li id="#4"><a href="#note-4">4 http://shop.oreilly.com/product/0636920021827.do</a></li><li id="#5"><a href="#note-5">5 http://www.smashingmagazine.com/wp-content/uploads/2014/01/ux-discussion.jpg</a></li><li id="#6"><a href="#note-6">6 http://www.flickr.com/photos/flat61/3883611573/</a></li><li id="#7"><a href="#note-7">7 https://twitter.com/hpdailyrant</a></li><li id="#8"><a href="#note-8">8 http://www.jeffgothelf.com/blog/</a></li><li id="#9"><a href="#note-9">9 https://twitter.com/MelissaHui</a></li><li id="#10"><a href="#note-10">10 http://www.leanuxmanifesto.com/</a></li><li id="#11"><a href="#note-11">11 http://www.smashingmagazine.com/wp-content/uploads/2013/12/CustomerServiceRep.jpg</a></li><li id="#12"><a href="#note-12">12 http://www.flickr.com/photos/rzganoza/5689088327/in/photostream/</a></li><li id="#13"><a href="#note-13">13 http://vimeo.com/37861987</a></li><li id="#14"><a href="#note-14">14 http://www.slideshare.net/dmc500hats/startup-metrics-for-pirates-long-version</a></li><li id="#15"><a href="#note-15">15 http://www.smashingmagazine.com/wp-content/uploads/2013/12/DesignStudio.jpg</a></li><li id="#16"><a href="#note-16">16 http://www.flickr.com/photos/visualpunch/10306535683/in/photostream/</a></li></ol>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.smashingmagazine.com/2014/01/08/lean-ux-manifesto-principle-driven-design/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>