davidbgk
/
larlet-fr-david-cache
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Släpp 0 Aktiviteter
A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
169 Incheckningar
1 Gren
Träd: df9a5c5108
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/d1ba3714c51ac038a9fec5c578b.../index.html

index.html 30KB
Rå Blame Historik

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622 
  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 Distribution of Users’ Computer Skills: Worse Than You Think (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

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

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

  31.   <link rel="canonical" href="https://www.nngroup.com/articles/computer-skill-levels/">

  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 Distribution of Users’ Computer Skills: Worse Than You Think (archive)

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

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://www.nngroup.com/articles/computer-skill-levels/">Source originale du contenu</a></h3>

  463.     <p>One of usability’s most hard-earned lessons is that <a href="https://www.nngroup.com/articles/design-priorities/"><em>you are not the user</em></a>. This is why it’s a <a href="https://www.nngroup.com/articles/guesses-vs-data/">disaster to guess</a> at the users’ needs. Since designers are so different from the majority of the target audience, it’s not just <em>irrelevant</em> what you like or what you think is easy to use — it’s often <em>misleading</em> to rely on such personal preferences.</p>

  464. 

  465. <p>For sure, anybody who works on a design project will have a more accurate and detailed <a href="https://www.nngroup.com/articles/mental-models/">mental model</a> of the user interface than an outsider. If you target a broad consumer audience, you will also have a higher IQ than your average user, higher <a href="https://www.nngroup.com/articles/writing-for-lower-literacy-users/">literacy levels</a>, and, most likely, you’ll be younger and experience less <a href="https://www.nngroup.com/articles/middle-aged-web-users/">age-driven degradation</a> of your abilities than many of your users.</p>

  466. 

  467. <p>There is one more difference between you and the average user that’s even more damaging to your ability to predict what will be a good user interface: skills in using computers, the Internet, and technology in general. Anybody who’s on a web-design team or other user experience project is a veritable supergeek compared with the average population. This not just true for the developers. Even the less-technical team members are only “less-technical” in comparison with the engineers. They still have much stronger technical skills than most normal people.</p>

  468. 

  469. <h2>OECD Skills Research</h2>

  470. 

  471. <p>A recent international research study allows us to quantify the difference between the broad population and the tech elite. The data was collected from 2011–2015 in 33 countries and was published in 2016 by the OECD (the Organisation for Economic Co-operation and Development, a club of industrialized countries). In total, <strong>215,942 people</strong> were tested, with at least 5,000 participants in most countries. The large scale of this study explains why it took a few years to publish the findings.</p>

  472. 

  473. <p>The research aimed to test the skills of <strong>people aged 16–65</strong>, which is the age range referred to as “adults” in the report. While it’s true that people aged 66+ are rare in the workforce (and thus of less interest to this workforce-targeted project), they are a major user group for many websites. Our <a href="https://www.nngroup.com/articles/usability-for-senior-citizens/">research with users older than 65</a> has found many important usability issues for this age segment, who often has lower technology skills than younger users. Thus, in assessing the OECD findings, we should remember that the full user pool has lower skills than what the study data shows.</p>

  474. 

  475. <p>The OECD project looked at a broad range of job-related skills, but of most interest to us is the test of technology skills. For this part of the study, participants were asked to perform 14 computer-based tasks. Instead of using live websites, the participants attempted the tasks on simulated software on the test facilitator’s computer. This allowed the researchers to make sure that all participants were confronted with the same level of difficulty across the years and enabled controlled translations of the user interfaces into each country’s local language.</p>

  476. 

  477. <p>The tasks ranged in difficulty from very straightforward to somewhat complicated. One of the <strong>easy tasks</strong> was to use the reply-all feature for an email program to send a response to three people. This was easy because the problem was explicit and involved a single step and a single constraint (the three people).</p>

  478. 

  479. <p>One of the <strong>difficult tasks</strong> was to schedule a meeting room in a scheduling application, using information contained in several email messages. This was difficult because the problem statement was implicit and involved multiple steps and multiple constraints. It would have been much easier to solve the explicitly stated problem of booking room A for Wednesday at 3pm, but having to determine the ultimate need based on piecing together many pieces of info from across separate applications made this a difficult job for many users.</p>

  480. 

  481. <p>Even the supposedly difficult tasks don’t sound that hard and I certainly expect all of my readers to be able to perform them speedily and with a high degree of confidence. However, my entire point is that just because <em>you</em> can do it, it doesn’t mean that the <em>average user</em> can do so as well.</p>

  482. 

  483. <h2>The 4 Levels of Technology Proficiency</h2>

  484. 

  485. <p>The researchers defined 4 levels of proficiency, based on the types of tasks users can complete successfully. For each level, here’s the percentage of the population (averaged across the OECD countries) who performed at that level, as well as the report’s definition of the ability of people within that level.</p>

  486. 

  487. <h3>“Below Level 1” = 14% of Adult Population</h3>

  488. 

  489. <p>Being too polite to use a term like “level zero,” the OECD researchers refer to the lowest skill level as “below level 1.”</p>

  490. 

  491. <p>This is what people below level 1 can do: “Tasks are based on well-defined problems involving the use of only one function within a generic interface to meet one explicit criterion without any categorical or inferential reasoning, or transforming of information. Few steps are required and no sub-goal has to be generated.”</p>

  492. 

  493. <p>An example of task at this level is “Delete this email message” in an email app.</p>

  494. 

  495. <h3>Level 1 = 29% of Adult Population</h3>

  496. 

  497. <p>This is what level-1 people can do: “Tasks typically require the use of widely available and familiar technology applications, such as email software or a web browser. There is little or no navigation required to access the information or commands required to solve the problem. The problem may be solved regardless of the respondent’s awareness and use of specific tools and functions (e.g. a sort function). The tasks involve few steps and a minimal number of operators. At the cognitive level, the respondent can readily infer the goal from the task statement; problem resolution requires the respondent to apply explicit criteria; and there are few monitoring demands (e.g. the respondent does not have to check whether he or she has used the appropriate procedure or made progress towards the solution). Identifying content and operators can be done through simple match. Only simple forms of reasoning, such as assigning items to categories, are required; there is no need to contrast or integrate information.”</p>

  498. 

  499. <p>The reply-to-all task described above requires level-1 skills. Another example of level-1 task is “Find all emails from John Smith.”</p>

  500. 

  501. <h3>Level 2 = 26% of Adult Population</h3>

  502. 

  503. <p>This is what level-2 people can do: “At this level, tasks typically require the use of both generic and more specific technology applications. For instance, the respondent may have to make use of a novel online form. Some navigation across pages and applications is required to solve the problem. The use of tools (e.g. a sort function) can facilitate the resolution of the problem. The task may involve multiple steps and operators. The goal of the problem may have to be defined by the respondent, though the criteria to be met are explicit. There are higher monitoring demands. Some unexpected outcomes or impasses may appear. The task may require evaluating the relevance of a set of items to discard distractors. Some integration and inferential reasoning may be needed.”</p>

  504. 

  505. <p>An example of level-2 task is “You want to find a sustainability-related document that was sent to you by John Smith in October last year.”</p>

  506. 

  507. <h3>Level 3 = 5% of Adult Population</h3>

  508. 

  509. <p>This is what this most-skilled group of people can do: “At this level, tasks typically require the use of both generic and more specific technology applications. Some navigation across pages and applications is required to solve the problem. The use of tools (e.g. a sort function) is required to make progress towards the solution. The task may involve multiple steps and operators. The goal of the problem may have to be defined by the respondent, and the criteria to be met may or may not be explicit. There are typically high monitoring demands. Unexpected outcomes and impasses are likely to occur. The task may require evaluating the relevance and reliability of information in order to discard distractors. Integration and inferential reasoning may be needed to a large extent.”</p>

  510. 

  511. <p>The meeting room task described above requires level-3 skills. Another example of level-3 task is “You want to know what percentage of the emails sent by John Smith last month were about sustainability.”</p>

  512. 

  513. <h3>Can’t Use Computers = 26% of Adult Population</h3>

  514. 

  515. <p>The numbers for the 4 skill levels don’t sum to 100% because a large proportion of the respondents never attempted the tasks, being unable to use computers. In total, across the OECD countries, <strong>26% of adults were unable to use a computer</strong>.</p>

  516. 

  517. <p>That one quarter of the population can’t use a computer at all is the most serious element of the <a href="https://www.nngroup.com/articles/digital-divide-the-three-stages/">digital divide</a>. To a great extent, this problem is caused by computers still being much too complicated for many people.</p>

  518. 

  519. <h2>Tech Skills by Country</h2>

  520. 

  521. <p>You might say that you’re not designing for the whole of the OECD. You’re only designing for the rich and privileged country in which you most likely live. Fair enough, but the conclusions don’t change much, even when we look at the richest countries, as shown in the following chart (which is sorted in ascending order by the number of people at the highest skill level — i.e., people like yourself):</p>

  522. 

  523. <p><img alt="Data from the OECD study of technical skills show the distribution among skill levels across countries as well as the average for all OECD countries." src="https://media.nngroup.com/media/editor/2016/10/20/computer-skill-levels-by-country.png"/></p>

  524. 

  525. <p>(Scandinavia is the average of Denmark, Finland, Norway, and Sweden. The UK is the population-weighted average of England and Northern Ireland, since Scotland and Wales didn’t participate in the research.)</p>

  526. 

  527. <p>While there’s a lot of variation in the number of people who can’t use a computer at all, there are only very slight differences in the number of people at the highest skill level.</p>

  528. 

  529. <h2>You = Top 5%–8%</h2>

  530. 

  531. <p>The main point I want to make is that you, dear reader, are almost certainly in the top category of computer skills, level 3. In the United States, only 5% of the population has these high computer skills. In Australia and the UK 6% are at this level; in Canada and across Northern Europe the number increases to 7%; Singapore and Japan are even better with a level-3 percentage of 8%.</p>

  532. 

  533. <p>Overall, people with strong technology skills make up <strong>a 5–8% sliver of their country’s population</strong>, whatever rich country they may be coming from. Go back to the OECD’s definition of the level-3 skills, quoted above. Consider defining your goals based on implicit criteria. Or overcoming unexpected outcomes and impasses while using the computer. Or evaluating the relevance and reliability of information in order to discard distractors. Do these sound like something you are capable of? Of course they do.</p>

  534. 

  535. <p>What’s important is to remember that <strong>95% of the population</strong> in the United States (93% in Northern Europe; 92% in rich Asia) <strong>cannot do these things</strong>.</p>

  536. 

  537. <p>You can do it; 92%–95% of the population can’t.</p>

  538. 

  539. <p>What does this simple fact tell us? <em>You are not the user</em>, unless you’re designing for an elite audience. (And even if you do target, say, a <a href="https://www.nngroup.com/articles/b2b-vs-b2c/">B2B audience</a> of nothing but engineers, they still know much less about your specific product than you do, so you’re still not the user.)</p>

  540. 

  541. <p>If you think something is easy, or that “surely people can do this simple thing on our website,” then you may very well be wrong.</p>

  542. 

  543. <h2>What Most Users Can Do</h2>

  544. 

  545. <p>If you want to target a broad consumer audience, it’s safest to assume that users’ skills are those specified for level 1. (But, remember that 14% of adults have even poorer skills, even disregarding the many who can’t use a computer at all.)</p>

  546. 

  547. <p>To recap, level 1 skills are:</p>

  548. 

  549. <ul>

  550.     <li>Little or no navigation required to access the information or commands required to solve the problem</li>

  551.     <li>Few steps and a minimal number of operators</li>

  552.     <li>Problem resolution requiring the respondent to apply explicit criteria only (no implicit criteria)</li>

  553.     <li>Few monitoring demands (e.g., having to check one’s progress toward the goal)</li>

  554.     <li>Identifying content and operators done through simple match (no transformation or inferences needed)</li>

  555.     <li>No need to contrast or integrate information</li>

  556. </ul>

  557. 

  558. <p>Anything more complicated, and your design can only be used by people with skills at level 2 or 3, meaning that you’re down to serving 31% of the population in the United States, 35% in Japan and the UK, 37% in Canada and Singapore, and 38% in Northern Europe and Australia. Again, the international variations don’t matter much relative to the big-picture conclusion: <strong>keep it extremely simple, or two thirds of the population can’t use your design</strong>.</p>

  559.   </article>

  560. </section>

  561. 

  562. 

  563. <nav id="jumpto">

  564.   <p>

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

  566.     <a href="https://www.nngroup.com/articles/computer-skill-levels/">Source originale</a> |

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

  568.   </p>

  569. </nav>

  570. 

  571. <footer>

  572.   <div>

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

  574.     <p>

  575.       Bonjour/Hi!

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

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

  578.     </p>

  579.     <p>

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

  581.     </p>

  582.     

  583.     <p>

  584.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  601.     </p>

  602.     <p>

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

  604.     </p>

  605.     <p>

  606.       Je ne traque pas ta navigation mais mon

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

  608.       conserve des logs d’accès.

  609.     </p>

  610.   </div>

  611. </footer>

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

  613.   ;(_ => {

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

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

  616.       e.preventDefault()

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

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

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

  620.     })

  621.   })()

  622. </script>