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.

index.html 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  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>Get a Kanban! (or Scrum board) (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://mauveweb.co.uk/posts/2015/08/get-a-kanban.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Get a Kanban! (or Scrum board) (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://mauveweb.co.uk/posts/2015/08/get-a-kanban.html">Source originale du contenu</a></h3>
  445. <div>
  446. <p>I continue to be staggered at the effectiveness, as a process management
  447. technique, of simply sticking cards representing tasks onto a whiteboard.
  448. Whatever your industry or project management methodology, the ability it offers
  449. to visualise the <em>flow of work</em> is immensely powerful. It lets us plan the
  450. current work and the near future to maximise our productivity.</p>
  451. <img alt="/2015/kanban-example.png" class="align-center" src="http://mauveweb.co.uk/2015/kanban-example.png"/><p>It's valuable whether you're working on your own or working as a team. When
  452. working as a team, it can be used to schedule work among team members. When on
  453. your own, it merely helps with clarity of thought (we'll look at why a little
  454. later).</p>
  455. <p>Yet this is largely unknown outside of software development. All sorts of
  456. industries would benefit from this approach, from farming to law.</p>
  457. <div class="section" id="terminology">
  458. <h2>Terminology</h2>
  459. <p>There's lots of variation in the terminology around kanbans, so let me lay out
  460. the terms as I use them.</p>
  461. <p>The idea of a <strong>kanban</strong> originates in manufacturing in Japan. The word itself
  462. means <em>sign board</em> and refers to the board itself. Specific processes built
  463. around a kanban are called <strong>kanban methodologies</strong>. Scrum calls the kanban a
  464. "Scrum Board" and naturally there are all manner of other terms and practices
  465. for using a similar approach in other methodologies too.</p>
  466. <p>Onto the kanban we need to stick cards representing <strong>tasks</strong> - small pieces of
  467. work that are easy to pick up and get done. Sometimes tasks will relate to
  468. bigger projects. Some call these bigger projects <strong>epics</strong>, and may use
  469. additional cards to represent the relationship of tasks to epics.</p>
  470. <p>A <strong>backlog</strong> is the totality of the work yet to do (and again, terms differ;
  471. some practices may exclude work that is already scheduled).</p>
  472. </div>
  473. <div class="section" id="how-to-run-a-kanban">
  474. <h2>How to run a kanban</h2>
  475. <p>First of all, get yourself a real, physical whiteboard. If you can get a
  476. magnetic whiteboard, you can stick task cards to it with magnets, which is nice
  477. and clean. But otherwise your tasks can be cards stuck to the board with
  478. blu-tak, or post-it notes. I favour index cards of a weighty paper density,
  479. about the size of your hand when flat. This lets you write large, clear letters
  480. on them, which are easier to see from a distance, and they are somewhat
  481. resistant to being scuffed as you stack them into a deck and riffle through it.</p>
  482. <p>Next, you need to come up with your backlog. If you're in the middle of a piece
  483. of work, you can start by braindumping the current state. Otherwise, get into a
  484. quiet room, with the appropriate people if necessary, and a stack of index
  485. cards, and write out cards, or break them down, or tear them up, until you have
  486. a set of concrete tasks that will get you to your goal. Make sure everyone
  487. agrees the cards are correct.</p>
  488. <p>The cards can include all kinds of extra information that will help you plan
  489. the work. For example, you might include deadlines or an estimate (in hours,
  490. days or your own unit - I like "ideal hours").</p>
  491. <img alt="/2015/kanban-task-metadata.png" class="align-center" src="http://mauveweb.co.uk/2015/kanban-task-metadata.png"/><p>Sometimes tasks are easy to describe on a card but if you were to pick up the
  492. card as something to work on, it wouldn't be immediately obvious where to
  493. start. These should be broken down into smaller pieces of work during this
  494. planning phase. This allows you to see with better granularity how much of the
  495. large piece of work is done. I like tasks that are of an appropriate size for
  496. each person to do several of them in a week. However, it's OK to break down
  497. the card into smaller tasks later if the task is probably going to be something
  498. to tackle further in the future.</p>
  499. <p>Now, divide the whiteboard into columns. You will need at least two: something
  500. like backlog, and <strong>in progress</strong>. But you could have many more. Kanban is
  501. about flow. Tasks flow through the columns. The flow represents the phases of
  502. working on a task. You might start by quoting for work and finish by billing
  503. for it. Or you might start by making sure you have all the raw materials
  504. required and finish by taking inventory of materials used.</p>
  505. <img alt="/2015/kanban-flow.png" class="align-center" src="http://mauveweb.co.uk/2015/kanban-flow.png"/><p>None of these practices are set in stone - you can select them and reselect
  506. them as your practices evolve. For example, you could focus on longer-range
  507. planning:</p>
  508. <img alt="/2015/kanban-schedule.png" class="align-center" src="http://mauveweb.co.uk/2015/kanban-schedule.png"/><p>So with your whiteboard drawn, you can put your tasks on the board. Naturally
  509. many of your cards may not fit, so you can keep your backlog stack somewhere
  510. else. Choosing what to put on the board becomes important.</p>
  511. <p>Now, just move the cards to reflect the current state. When a task is done, you
  512. update the board and choose the next most valuable task to move forward. You
  513. might put initials by a card to indicate who is working on it.</p>
  514. <p>Visit the kanban regularly, as a team. Stop and replan frequently - anything
  515. from a couple of times a week up to a couple of times a day - especially when
  516. new information becomes available. This might involve pulling cards from the
  517. backlog onto the board, writing new cards, tearing up cards that have become
  518. redundant, and rearranging the board to reprioritise. Make sure the right
  519. people are present every time if possible.</p>
  520. <p>Less frequently you might make a bigger planning effort: pick up all the cards
  521. from your backlog pile or column, and sit down again with the relevant people
  522. to replan these and reassess all their priorities. Some of the cards may be
  523. redundant and some new work may have been identified.</p>
  524. <p>The value of the kanban will then naturally begin to flow:</p>
  525. <ul class="simple">
  526. <li>Higher productivity as you see how what you're working on fits into a whole</li>
  527. <li>A greater ability to reschedule - for example, to park work in progress to
  528. tackle something urgent</li>
  529. <li>Team collaboration around tasks that seem to be problematic</li>
  530. <li>Estimates of when something might get done or which deadines are at risk</li>
  531. </ul>
  532. </div>
  533. <div class="section" id="tips">
  534. <h2>Tips</h2>
  535. <p>A physical whiteboard seems to be very important. A lot of the practices don't
  536. seem to evolve properly if you use some sort of digital version of a kanban.
  537. There are lots of reasons for this. One obvious one is that physical
  538. whiteboards offer the ability to annotate the kanban with little hints,
  539. initials, or whatever. Another one is that an online whiteboard doesn't beg to
  540. be looked at; a physical whiteboard up in your workplace is something to notice
  541. frequently, as well as offer a designated place to get away from a screen and
  542. plan work.</p>
  543. <p>Naturally, having a physical whiteboard is only possible if your team is not
  544. geographically distributed. Geographically distributed teams are challenging
  545. for a whole host of reasons, and this is just one. A digital version of a
  546. kanban may be a good approach in those cases. Or perhaps frequent photos of a
  547. physical whiteboard elsewhere in the world can help to keep things in sync.</p>
  548. <p>Readability from a distance helps get value from your kanban. Write in capital
  549. letters because these are more readable from a distance. Use a broad felt pen.
  550. Use differently coloured index cards or magnets to convey additional
  551. information.</p>
  552. <p>It's somewhat important to ensure that the kanban captures all streams of work.
  553. There's a tendency to think "This isn't part of the project we're planning;
  554. let's not get distracted by it". But that reduces the value of the kanban in
  555. tracking what is actually happening in your workflow. Obviously, different
  556. streams of work can be put in a different place on the kanban, or use
  557. differently coloured cards.</p>
  558. <p>You can also track obstacles to delivering work on the board. I like to reserve
  559. red cards to indicate obstacles. Removing those obstacles may require work!</p>
  560. </div>
  561. <div class="section" id="why-kanbans-work">
  562. <h2>Why Kanbans work</h2>
  563. <p>Kanbans are certainly a form of process visualisation. Enabling you to
  564. visualise how tasks are flowing will let you spot problems in the process, such
  565. as too much work building up that only a certain team member can do. You can
  566. design workarounds to a problem like this also right there on the kanban.</p>
  567. <p>Stepping back from this, the reason I've found having a kanban useful even for
  568. solo work may be related to the psychological idea of <a class="reference external" href="https://en.wikipedia.org/wiki/Transactive_memory#Extensions_to_other_domains">transactive memory</a>,
  569. where we use our memory not as a primary store of information, but as an index
  570. over other stores of information, such as those in other people's heads, or on
  571. paper. The model of thought is then very much like a database transaction - we
  572. might "read" a number of facts from different sources into working memory,
  573. generate some new insight, and "write" that insight back to an external source.</p>
  574. <p>By committing our understanding of our backlog of work to index cards, we can
  575. free our memories to focus on the task at hand. And when that task is done, we
  576. waste no time in switching back to a view of our workflow that can tell us
  577. immediately "what's next". Or say we encounter new information that we suspect
  578. affects something in the backlog - being able to go straight back to that card
  579. and recover exactly how we defined the task turns out to be useful: it allows
  580. us to quickly assess the impact of new information to our existing ideas and
  581. plans.</p>
  582. <p>The final reason I believe kanbans work so well is that both the kanban and the
  583. stack of cards that represent your backlog are artifacts that are constructed
  584. collaboratively in a group. Taking some concrete artifact out of a meeting as a
  585. record of what was said cuts down a lot on misremembered conclusions
  586. afterwards. Some people try to take "action points" out of meetings for the
  587. same reason, and then quote them back to everyone by e-mail afterwards. This
  588. doesn't seem to work as well - I often find myself thinking "I don't recall
  589. agreeing that!" One reason for this is that the record of the action points is
  590. not written down for all to see and approve/veto, but a personal list written
  591. by the person taking the minutes.</p>
  592. <p>Writing tasks out on index cards in front of people, and reading them out
  593. repeatedly or handing them around (or laying them out on the table for people
  594. to move around and reorganise - related in principle to <a class="reference external" href="http://mauveweb.co.uk/posts/2014/01/crc-cards.html">CRC Cards</a>), means
  595. that everyone gets a chance to internalise or reject the wording on the card.</p>
  596. <p>Similarly, the organisation of kanban is not only a concrete artifact that is
  597. modified with other people standing around: it is ever-present to consult and
  598. correct. Nobody can have an excuse to leave the kanban in an incorrect state.
  599. Thus the kanban is a reliable source of truth.</p>
  600. <p>So whatever your industry, whatever your process methodology, set yourself up
  601. a kanban and give it a try. Happy kanbanning!</p>
  602. </div>
  603. </div>
  604. </article>
  605. </section>
  606. <nav id="jumpto">
  607. <p>
  608. <a href="/david/blog/">Accueil du blog</a> |
  609. <a href="http://mauveweb.co.uk/posts/2015/08/get-a-kanban.html">Source originale</a> |
  610. <a href="/david/stream/2019/">Accueil du flux</a>
  611. </p>
  612. </nav>
  613. <footer>
  614. <div>
  615. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  616. <p>
  617. Bonjour/Hi!
  618. 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>
  619. 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>).
  620. </p>
  621. <p>
  622. 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>.
  623. </p>
  624. <p>
  625. Voici quelques articles choisis :
  626. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  627. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  628. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  629. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  630. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  631. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  632. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  633. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  634. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  635. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  636. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  637. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  638. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  639. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  640. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  641. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  642. </p>
  643. <p>
  644. 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>.
  645. </p>
  646. <p>
  647. Je ne traque pas ta navigation mais mon
  648. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  649. conserve des logs d’accès.
  650. </p>
  651. </div>
  652. </footer>
  653. <script type="text/javascript">
  654. ;(_ => {
  655. const jumper = document.getElementById('jumper')
  656. jumper.addEventListener('click', e => {
  657. e.preventDefault()
  658. const anchor = e.target.getAttribute('href')
  659. const targetEl = document.getElementById(anchor.substring(1))
  660. targetEl.scrollIntoView({behavior: 'smooth'})
  661. })
  662. })()
  663. </script>