davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
403 Révisions
1 Branche
Aborescence: cf213338ae
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'cf213338ae'
${ noResults }
larlet-fr-david-cache/cache/01fe9dacc4f148d6a1d10838124.../index.html

index.html 29KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593 
  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>The Art of Aligning Groups (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="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/">

  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.   The Art of Aligning Groups (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="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/">Source originale du contenu</a></h3>

  463.     <p><a href="https://www.flickr.com/photos/walhalla/24145962492/"><img data-attachment-id="2891" data-permalink="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/chapelizod_murmuration/" data-orig-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" data-orig-size="2048,1367" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Chapelizod Murmuration" data-image-description="&lt;p&gt;Photo by &lt;a href=&quot;https://www.flickr.com/photos/walhalla/24145962492/&quot;&gt;Simon&lt;/a&gt;. CC BY-NC-ND 2.0.&lt;/p&gt;&#10;" data-medium-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg" data-large-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg" src="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" alt="" class="alignnone size-full wp-image-2891" srcset="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg 2048w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg 300w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-768x513.jpg 768w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg 1024w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1229x820.jpg 1229w" sizes="(max-width: 2048px) 100vw, 2048px"/></a></p>

  464. 

  465. <p>My best experience collaborating with a group happened almost 20 years ago on a basketball court. I had just recovered from a back injury and was returning to my regular pickup game for the first time in two months. To my surprise, a bunch of new people had shown up that day, and I ended up on a team with four other guys I didn’t know.</p>

  466. 

  467. <p>It didn’t matter. That day, that game, we played the most beautiful basketball I had ever experienced. It was like a dance. No one was particularly great individually, but everyone knew how to play <em>together</em>. People moved without the ball, sprinting down the floor, screening and cutting. The ball barely touched the ground as we whipped it around to each other — dribble, dribble, pass, pass, pass.</p>

  468. 

  469. <p>We were playing fast, but I felt like I was seeing things in slow motion. I would pass the ball to empty spots, and the right guy would magically materialize just as the ball got there. Every basket we made was an easy basket, and we scored them in large quantities before finally putting the other team out of its misery.</p>

  470. 

  471. <p>The final score showed that we had collaborated effectively, but it didn’t tell the whole story. It didn’t say how it <em>felt</em> to play with that team, to be in <em>flow</em> with four other people, none of whom had ever played together before. Every movement felt effortless and joyful. I felt alive. The team felt alive.</p>

  472. 

  473. <h2>Alignment Versus Agreement</h2>

  474. 

  475. <p>People often ask how I measure effective collaboration. My answer is always, “It depends. What’s the goal?” Collaboration, by definition, is working together in pursuit of a shared, bounded goal. Whether or not you achieve that goal matters. However, how everyone <em>feels</em> in pursuit of that goal also matters. Success needs to take both of those things into account.</p>

  476. 

  477. <p>I think the word, “alignment,” conveys this nuance nicely by suggesting both directionality and movement. Alignment is dynamic. It’s irrelevant if the wheels in your car are in alignment if you’re not moving. Alignment is also not binary. If the wheels in your car are not perfectly aligned, you’ll still be able to drive. It just won’t be as smooth or as efficient as it could be. The level of resistance you experience is a measure of how aligned you actually are.</p>

  478. 

  479. <p>“Alignment” is not the same thing as “agreement,” although people often conflate the two.  A group might verbally agree on a destination, but its participants might still move in conflicting directions. Conversely, a group might move in perfect lock-step without ever having explicitly agreed on where it’s going or how (as was the case in my pickup game). It might even achieve this while <a href="https://en.wikipedia.org/wiki/Disagree_and_commit">explicitly disagreeing</a>.</p>

  480. 

  481. <p>This distinction is important, because it’s not necessarily hard to get a group to agree on something. One way is to make a statement that is so abstract, it’s both indisputable and meaningless. An example of something I often hear is, “We value collaboration.” Another one is, “Our goal is to better serve our customers.” Very few people would disagree with either of those statements, but by themselves, they’re too broad to mean anything. Agreement without alignment also often happens in groups with conflict-averse cultures, where people would rather assent than argue.</p>

  482. 

  483. <p><em>Being in alignment</em> is different than <em>moving in alignment</em>. If the goal is for everyone to be moving toward the same goal <a href="http://fasterthan20.com/2015/08/bring-groups-alive-by-establishing-a-rhythm/">in rhythm</a> and without resistance, then everyone must both <em>want</em> to move in alignment with everyone else and <em>be capable</em> of doing this. You achieve the former by <em>aligning</em>. You achieve the latter by <em><a href="http://fasterthan20.com/collaboration-muscles-and-mindsets/">practicing</a></em>.</p>

  484. 

  485. <p>How do you get a group into alignment? How can you tell when a group is aligned? And how can groups practice <em>moving</em> in alignment?</p>

  486. 

  487. <h2>Alignment, Not Control</h2>

  488. 

  489. <p>There is no one right way to get a group aligned. Sometimes, it just happens. More often than not, it takes work.</p>

  490. 

  491. <p>Most people seem to equate aligning as a top-down version of “getting buy-in.” In other words, someone — usually a person with positional power over everyone else — thinks really hard about the “right” way to do something, then tries to convince everyone else to go along with it with some combination of encouragement and threats, possibly integrating some feedback along the way.</p>

  492. 

  493. <p>This isn’t wrong, but it’s not the best way to motivate people, it doesn’t tap into a group’s full <a href="http://fasterthan20.com/2013/12/maximizing-collective-intelligence-means-giving-up-control/">collective intelligence</a>, and it doesn’t usually lead to great performance.</p>

  494. 

  495. <p>My philosophy with groups is that more perspectives lead to better outcomes. When it comes to <a href="http://fasterthan20.com/toolkit/goals-success-spectrum/">goals</a> and <a href="http://fasterthan20.com/diy-strategy-culture/">strategy</a> in particular, rather than one or a few people coming up with their own ideas first and having others respond or comply, I want as many people as possible to think critically about the problem at hand and to co-create the solution. This is generally messier and slower (at first), because it requires people to align around language and worldviews and to <em>struggle</em> both individually and collectively. But that struggle leads to greater ownership and agency, which ultimately leads to higher performance.</p>

  496. 

  497. <p>Alignment obviates the need for control, but it requires stomaching the messiness of aligning. While the hallmark of moving in alignment is a feeling of flow, the process of aligning can feel exactly the opposite.</p>

  498. 

  499. <h2>Building Alignment</h2>

  500. 

  501. <p>What does a productive struggle look like? What does it <em>feel</em> like? How is it different from an unproductive struggle? How do you know how long to let it go?</p>

  502. 

  503. <p>The best I can offer are my own strategies for building alignment.</p>

  504. 

  505. <p><strong>Ask and listen first.</strong> Give people a chance to think about something on their own first, even if you’ve already done a lot of your own thinking. If their thinking is aligned with yours, use their words, so that they see themselves in the work.</p>

  506. 

  507. <p><strong>Write it down.</strong> We all lead busy lives. It’s easy to forget things, especially when they’re complicated. Capturing the state of people’s thinking, even when it’s messy, and constantly keeping it in front of them helps a group build on rather than reconstruct its thinking.</p>

  508. 

  509. <p><strong>Put a stake in the ground.</strong> Stakes can be pulled out and moved, which means you don’t have to get it exactly right the first time. Don’t expect a group to align on the first try, especially if it’s about something that’s messy and complicated. Instead, get as much alignment as you can around something imperfect, move forward as much as you can, and revisit and revise based on your experience. The whole group will <a href="http://fasterthan20.com/lean/">learn as it moves</a>.</p>

  510. 

  511. <p>I use the <a href="http://fasterthan20.com/2014/02/tic-tac-toe-and-the-squirm-test-building-trust-and-shared-understanding/">“Squirm Test”</a> and the “T-shirt Test” to help me gauge how aligned a group is. Simply put, if the group makes a decision, and someone starts to squirm, that person is not fully aligned. If people believe so strongly in a decision, they’re willing or even excited about wearing it on a T-shirt, they are aligned. Continue adjusting the stakes over time until the squirming goes away and everyone is wearing the T-shirt.</p>

  512. 

  513. <p><strong>Create real-time feedback loops.</strong> Moving in alignment with others requires constant feedback. If you can’t see how your group is moving as a whole, you can’t adjust. The more real-time indicators you have (including the Squirm and T-shirt Tests) and the more transparently you work, the more likely others will be able to see and react to each other.</p>

  514. 

  515. <p><strong>Remind each other what you’re doing and why.</strong> The best thing you can do when you’re struggling is to take a step back and remind yourself of why you’re going through this process. It’s helpful to remember times when you were in alignment with others and what it took to get there. It’s also helpful to remember times when you decided to take shortcuts without being fully aligned.</p>

  516. 

  517. <h2>Moving in Alignment Is Hard</h2>

  518. 

  519. <p>I’m particularly fond of physical (also referred to as “embodied” or “somatic”) practices as a way to viscerally remind yourself of what alignment looks and feels like and what it takes to get there. Pickup basketball is certainly one form of physical practice, but it’s not for everyone, and there are lots of other great practices that are a lot easier on the body.</p>

  520. 

  521. <p>One of my favorites is a group breathing exercise I learned from <a href="https://www.linkedin.com/in/eveline-shen-a600b8b/">Eveline Shen</a>, the Executive Director of <a href="https://forwardtogether.org/">Forward Together</a>, a group that regularly uses a form of physical practice they call, <a href="https://forwardtogether.org/forward-stance/">“Courageous Practice,”</a> as a way of staying grounded and aligned. It starts by standing in a circle and taking a few deep breaths together. You then add movement to your breath, raising your hand at a right angle as you inhale, and lowering it as you exhale. The goal is to breathe in alignment with each other. It helps to have a few people step out of the circle to act as observers, so that they can see how aligned the group actually is.</p>

  522. 

  523. <p>There are lots of different variations of this exercise. You can change the orientation of people in the circle, so that some people are facing inwards and other are facing outwards. You can stand in a line or some other shape. You can designate a leader or not.</p>

  524. 

  525. <p>It turns out that the simple act of breathing in alignment as a group is hard. Practicing not only helps you get better at it, but it also helps you develop strategies for moving in alignment that can apply to activities beyond breathing.</p>

  526. 

  527. <p>As difficult as it is to achieve perfect alignment, perhaps the most important lesson from this exercise is that, when everyone is trying, people are generally very good at breathing together. “Very good” is a worthy goal for any group trying to collaborate. As singular as that one pickup basketball game was for me, I’ve had many more experiences that were very good, and each of those were joyful, satisfying, and productive.</p>

  528. 

  529. <p>Alignment is a <a href="http://fasterthan20.com/2016/04/loving-vs-hating-process/">process</a>. Set your expectations accordingly, and celebrate each victory along the way.</p>

  530.   </article>

  531. </section>

  532. 

  533. 

  534. <nav id="jumpto">

  535.   <p>

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

  537.     <a href="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/">Source originale</a> |

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

  539.   </p>

  540. </nav>

  541. 

  542. <footer>

  543.   <div>

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

  545.     <p>

  546.       Bonjour/Hi!

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

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

  549.     </p>

  550.     <p>

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

  552.     </p>

  553.     

  554.     <p>

  555.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  572.     </p>

  573.     <p>

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

  575.     </p>

  576.     <p>

  577.       Je ne traque pas ta navigation mais mon

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

  579.       conserve des logs d’accès.

  580.     </p>

  581.   </div>

  582. </footer>

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

  584.   ;(_ => {

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

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

  587.       e.preventDefault()

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

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

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

  591.     })

  592.   })()

  593. </script>