davidbgk
/
larlet-fr-david-cache


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

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-elderly/">

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

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

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


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

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

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

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

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

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


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

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

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

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

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Designing For The Elderly: Ways Older People Use Digital Technology Differently (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-elderly/">Source originale du contenu</a></h3>
    <p>If you work in the tech industry, it’s easy to forget that older people exist. <a href="http://bits.blogs.nytimes.com/2013/07/05/technology-workers-are-young-really-young/">Most tech workers are really young</a><sup class="po" id="note-1"><a href="#1">1</a></sup>, so it’s easy to see why most technology is designed for young people. But consider this: By 2030, around <a href="http://www.aoa.gov/Aging_Statistics/">19% of people in the US will be over 65</a><sup class="po" id="note-2"><a href="#2">2</a></sup>. Doesn’t sound like a lot? Well it happens to be about the same number of people in the US who own an iPhone today. Which of these two groups do you think Silicon Valley spends more time thinking about?</p>

<p>This seems unfortunate when you consider all of the things technology has to offer older people. A great example is <a href="http://www.cna.com.br/speakingexchange/">Speaking Exchange</a><sup class="po" id="note-3"><a href="#3">3</a></sup>, an initiative that connects retirees in the US with kids who are learning English in Brazil. Check out the video below, but beware — it’s a tear-jerker.</p>

<figure><br/><em>CNA – Speaking Exchange (watch the video on <a href="https://www.youtube.com/embed/-S-5EfwpFOk">YoutTube</a><sup class="po" id="note-4"><a href="#4">4</a></sup>)</em></figure>

<p>While the ageing process is different for everyone, we all go through some fundamental changes. Not all of them are what you’d expect. For example, despite declining health, older people tend to be <a href="http://www.economist.com/node/17722567">significantly happier</a><sup class="po" id="note-5"><a href="#5">5</a></sup> and better at <a href="http://newoldage.blogs.nytimes.com/2014/02/11/what-makes-older-people-happy/">appreciating what they have</a><sup class="po" id="note-6"><a href="#6">6</a></sup>.</p>

<p>But ageing makes some things harder as well, and one of those things is using technology. If you’re designing technology for older people, below are seven key things you need to know.</p>

<p>(How old is old? It depends. While I’ve deliberately avoided trying to define such an amorphous group using chronological boundaries, it’s safe to assume that each of the following issues becomes increasingly significant after 65 years of age.)</p>

<h3>Vision And Hearing</h3>

<p>From the age of about 40, the lens of the eye begins to harden, causing a condition called “presbyopia.” This is a normal part of ageing that makes it increasingly difficult to read text that is small and close.</p>

<figure><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg"><img property="image" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/01-kindle-text-size-opt-small.jpg" alt="The font size a 75 chooses on his Kindle."/></a><sup class="po" id="note-7"><a href="#7">7</a></sup><br/>
<figcaption>Here’s a 75-year-old with his Kindle. Take a look at the font size he picks when <em>he’s</em> in control. Now compare it to the average font size on an iPhone. (Image: <a href="http://www.navydesign.com.au">Navy Design</a><sup class="po" id="note-28"><a href="#28">28</a></sup><sup class="po" id="note-20"><a href="#20">20</a></sup><sup class="po" id="note-8"><a href="#8">8</a></sup>.) (<a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg">View large version</a><sup class="po" id="note-9"><a href="#9">9</a></sup>)</figcaption></figure>

<p>Color vision also declines with age, and we become worse at distinguishing between similar colors. In particular, shades of blue appear to be faded or desaturated.</p>

<p>Hearing also declines in predictable ways, and a large proportion of people over 65 have <a href="http://www.nidcd.nih.gov/health/hearing/Pages/Age-Related-Hearing-Loss.aspx">some form of hearing loss</a><sup class="po" id="note-10"><a href="#10">10</a></sup>. While audio is seldom fundamental to interaction with a product, there are obvious implications for certain types of content.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Avoid font sizes smaller than 16 pixels (depending of course on device, viewing distance, line height etc.).</li>
<li>Let people adjust text size themselves.</li>
<li>Pay particular attention to <a href="http://webaim.org/resources/contrastchecker/">contrast ratios</a><sup class="po" id="note-11"><a href="#11">11</a></sup> with text.</li>
<li>Avoid blue for important interface elements.</li>
<li>Always test your product using <a href="http://www.afb.org/prodBrowseCatResults.asp?CatID=49">screen readers</a><sup class="po" id="note-12"><a href="#12">12</a></sup>.</li>
<li>Provide subtitles when video or audio content is fundamental to the user experience.</li>
</ul>

<h3>Motor Control</h3>

<p>Our motor skills decline with age, which makes it harder to use computers in various ways. For example, during some user testing at a retirement village, we saw an 80-year-old who always uses the mouse with two hands. Like many older people, she had a lot of trouble hitting interface targets and moving from one thing to the next.</p>

<p>In the general population, a <a href="http://www.yorku.ca/mack/hfes2009.html">mouse is more accurate</a><sup class="po" id="note-13"><a href="#13">13</a></sup> than a finger. But in our user testing, we’ve seen older people perform better using touch interfaces. This is consistent with research that shows that <a href="http://www.medicaldaily.com/finger-tapping-test-shows-no-motor-skill-decline-until-after-middle-age-244927">finger tapping declines later</a><sup class="po" id="note-14"><a href="#14">14</a></sup> than some other motor skills.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Reduce the distance between interface elements that are likely to be used in sequence (such as form fields), but make sure they’re at least 2 millimeters apart.</li>
<li>Buttons on touch interfaces should be <a href="http://dl.acm.org/citation.cfm?id=1152260">at least 9.6 millimeters diagonally</a><sup class="po" id="note-15"><a href="#15">15</a></sup> (for example, 44 × 44 pixels on an iPad) for ages up to 70, and larger for older people.</li>
<li>Interface elements to be clicked with a mouse (such as forms and buttons) should be at least 11 millimeters diagonally.</li>
<li>Pay attention to sizing in human interface guidelines (Luke Wroblewski has a good <a href="http://www.lukew.com/ff/entry.asp?1085">roundup of guidelines</a><sup class="po" id="note-16"><a href="#16">16</a></sup> for different platforms).</li>
</ul>

<h3>Device Use</h3>

<blockquote>
<p>If you want to predict the future, just look at what middle-class American teens are doing. Right now, they’re using their mobile phones for everything.</p>
<p>– <a href="http://dcurt.is/the-death-of-the-tablet">Dustin Curtis</a><sup class="po" id="note-17"><a href="#17">17</a></sup></p>
</blockquote>

<p>It’s safe to assume Dustin has never watched a 75-year-old use a mobile phone. Eventually, changes in vision and motor control make small screens impractical for everyone. <a href="http://www2.deloitte.com/content/dam/Deloitte/global/Documents/Technology-Media-Telecommunications/gx-tmt-2014prediction-smartphone.pdf">Smartphones are a young person’s tool</a><sup class="po" id="note-18"><a href="#18">18</a></sup>, and not even the coolest teenager can escape their biological destiny.</p>

<p>In our research, older people consistently described phones as “annoying” and “fiddly.” Those who own them seldom use them, often not touching them for days at a time. They often ignore SMS’ entirely.</p>

<figure><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg"><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/02-examples-of-technology-opt-small.jpg" alt="Examples of technology used by the elderly"/></a><sup class="po" id="note-19"><a href="#19">19</a></sup><br/>
<figcaption>Examples of technology used by the elderly (Image: <a href="http://www.navydesign.com.au">Navy Design</a><sup class="po" id="note-28"><a href="#28">28</a></sup><sup class="po" id="note-20"><a href="#20">20</a></sup><sup class="po" id="note-8"><a href="#8">8</a></sup>) (<a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg">View large version</a><sup class="po" id="note-21"><a href="#21">21</a></sup>)</figcaption></figure>

<p>But older people aren’t afraid to try new technology when they see a clear benefit. For example, older people are the <a href="http://dcurt.is/the-death-of-the-tablet">largest users of tablets</a><sup class="po" id="note-22"><a href="#22">22</a></sup>. This makes sense when you consider the defining difference between a tablet and a phone: screen size. The recent <a href="http://recode.net/2014/08/26/in-defense-of-tablets/">slump in tablet sales</a><sup class="po" id="note-23"><a href="#23">23</a></sup> also makes sense if you accept that older people have longer upgrade cycles than younger people.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Avoid small-screen devices (i.e. phones).</li>
<li>Don’t rely on SMS to convey important information.</li>
</ul>

<h3>Relationships</h3>

<p>Older people have different relationships than young people, at least partly because they’ve had more time to cultivate them. For example, we conducted some research into how older people interact with health care professionals. In many cases, they’ve seen the same doctors for decades, leading to a very high degree of trust.</p>

<blockquote>
<p>I regard it like going to see old pals.… I feel I could tell my GP almost anything.</p>
<p>– George, 73, on visiting his medical team</p>
</blockquote>

<p>But due to health and mobility issues, the world available to the elderly is often smaller — both physically and socially. Digital technology has an obvious role to play here, by connecting people virtually when being in the same room is hard.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Enable connection with a smaller, more important group of people (not a big, undifferentiated social network).</li>
<li>Don’t overemphasize security and privacy controls when trusted people are involved.</li>
<li>Be sensitive to issues of isolation.</li>
</ul>

<h3>Life Stage</h3>

<p>During a user testing session, I sat with a 66-year-old as she signed up for an Apple ID. She was asked to complete a series of security questions. She read the first question out loud. “What was the model of your first car?” She laughed. “I have no idea! What car did I have in 1968? What a stupid question!”</p>

<p>It’s natural for a 30-year-old programmer to assume that this question has meaning for everyone, but it contains an implicit assumption about which life stage the user is at. Don’t make the same mistake in your design.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Beware of content or functionality that implicitly assumes someone is young or at a certain stage in life.</li>
</ul>

<h3>Experience With Technology</h3>

<p>I once sat with a man in his 80s as he used a library interface. “I know there are things down there that I want to read” he said, gesturing to the bottom of the screen, “but I can’t figure out how to get to them.” After I taught him how to use a scrollbar, his experience changed completely. In another session, two of the older participants told me that they’d never used a search field before.</p>

<p>Generally when you’re designing interfaces, you’re working within a certain kind of scaffolding. And it’s easy to assume that everyone knows how that scaffolding works. But people who didn’t grow up with computers might have never used the interface elements we take for granted. Is a scrollbar a good design for moving content up and down? Is its function self-evident? These aren’t questions most designers often ask. But the success of your design might depend on a thousand parts of the interface that you can’t control and probably aren’t even aware of.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Don’t make assumptions about prior knowledge.</li>
<li>Interrogate all parts of your design for usability, even the parts you didn’t create.</li>
</ul>

<h3>Cognition</h3>

<p>The science of cognition is a huge topic, and ageing changes how we think in unpredictable ways. Some people are razor-sharp in their 80s, while others decline as early as in their 60s.</p>

<p>Despite this variability, three areas are particularly relevant to designing for the elderly: memory, attention and decision-making. (For a more comprehensive view of cognitive change with age, chapter 1 of <a href="http://www.ncbi.nlm.nih.gov/books/NBK3885/"><em>Brain Aging: Models, Methods, and Mechanisms</em></a><sup class="po" id="note-24"><a href="#24">24</a></sup> is a great place to start.)</p>

<h4>Memory</h4>

<p>There are different kinds of memory, and they’re affected differently by the ageing process. For example, <strong>procedural</strong> memory (that is, remembering how to do things) is generally unaffected. People of all ages are able to learn new skills and reproduce them over time.</p>

<p>But other types of memory suffer as we age. <strong>Short-term</strong> memory and <strong>episodic</strong> memory are particularly vulnerable. And, although the causes are unclear, older people often have <a href="http://www.psych.utoronto.ca/users/hasher/abstracts/hasher_zacks_88.htm">difficulty manipulating the contents of their <strong>working</strong> memory</a><sup class="po" id="note-25"><a href="#25">25</a></sup>. This means that they may have trouble understanding how to combine complex new concepts in a product or interface.</p>

<p><strong>Prospective</strong> memory (remembering to do something in the future) <a href="http://www.oxfordscholarship.com/view/10.1093/acprof:oso/9780195156744.001.0001/acprof-9780195156744-chapter-10">also suffers</a><sup class="po" id="note-26"><a href="#26">26</a></sup>. This is particularly relevant for habitual tasks, like remembering to take medication at the right time every day.</p>

<p>How do people manage this decline? In our research, we’ve found that paper is king. Older people almost exclusively use calendars and diaries to supplement their memory. But well-designed technology has great potential to provide cues for these important actions.</p>

<figure><a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg"><img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/03-paper-is-king-opt-small.jpg" alt="For older people, paper is king."/></a><sup class="po" id="note-27"><a href="#27">27</a></sup><br/>
<figcaption>For older people, paper is king. (Image: <a href="http://www.navydesign.com.au">Navy Design</a><sup class="po" id="note-28"><a href="#28">28</a></sup><sup class="po" id="note-20"><a href="#20">20</a></sup><sup class="po" id="note-8"><a href="#8">8</a></sup>) (<a href="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg">View large version</a><sup class="po" id="note-29"><a href="#29">29</a></sup>)</figcaption></figure>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Introduce product features gradually over time to prevent cognitive overload.</li>
<li>Avoid splitting tasks across multiple screens if they require memory of previous actions.</li>
<li>During longer tasks, give clear feedback on progress and reminders of goals.</li>
<li>Provide reminders and alerts as cues for habitual actions.</li>
</ul>

<h4>Attention</h4>

<p>It’s easy to view ageing as a decline, but it’s not all bad news. In our research, we’ve observed one big advantage: Elderly people consistently excel in attention span, persistence and thoroughness. Jakob Nielsen has observed similar things, finding that <a href="http://www.nngroup.com/articles/usability-for-senior-citizens/">95% of seniors are “methodical”</a><sup class="po" id="note-30"><a href="#30">30</a></sup> in their behaviors. This is significant in a world where the average person’s attention span has actually <a href="http://www.statisticbrain.com/attention-span-statistics/">dropped below the level of a goldfish</a><sup class="po" id="note-31"><a href="#31">31</a></sup>.</p>

<p>It can be a great feeling to watch an older user really take the time to explore your design during a testing session. And it means that older people often find things that younger people skip right over. I often find myself admiring this way of interacting with the world. But the obvious downside of a slower pace is increased time to complete tasks.</p>

<p>Older people are also <a href="http://www.era.lib.ed.ac.uk/handle/1842/8572">less adept at dividing their attention</a><sup class="po" id="note-32"><a href="#32">32</a></sup> between multiple tasks. In a world obsessed with multitasking, this can seem like a handicap. But because <a href="http://news.stanford.edu/news/2009/august24/multitask-research-study-082409.html">multi-tasking is probably a bad idea</a><sup class="po" id="note-33"><a href="#33">33</a></sup> in the first place, designing products that help people to focus on one thing at a time can have benefits for all age groups.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Don’t be afraid of long-form text and deep content.</li>
<li>Allow for greater time intervals in interactions (for example, server timeouts, inactivity warnings).</li>
<li>Avoid dividing users’ attention between multiple tasks or parts of the screen.</li>
</ul>

<h4>Decision-Making</h4>

<p>Young people tend to weigh a lot of options before settling on one. Older people make decisions a bit differently. They tend to <a href="http://psycnet.apa.org/index.cfm?fa=search.displayRecord&amp;uid=2000-07430-014">emphasize prior knowledge</a><sup class="po" id="note-34"><a href="#34">34</a></sup> (perhaps because they’ve had more time to accumulate it). And they give more weight to the opinions of experts (for example, their doctor for medical decisions).</p>

<p>The exact reason for this is unclear, but it may be due to other cognitive limitations that make comparing new options more difficult.</p>

<p><strong>Key lessons:</strong></p>

<ul>
<li>Prioritize shortcuts to previous choices ahead of new alternatives.</li>
<li>Information framed as expert opinion may be more persuasive (but don’t abuse this bias).</li>
</ul>

<h3>Conclusion</h3>

<p>A lot of people in the tech industry talk about “changing the world” and “making people’s lives better.” But bad design is excluding whole sections of the population from the benefits of technology. If you’re a designer, you can help change that. By following some simple principles, you can create more inclusive products that work better for everyone, especially the people who need them the most.</p>

<p><em>Payment for this article was donated to <a href="https://fightdementia.org.au">Alzheimer’s Australia</a><sup class="po" id="note-35"><a href="#35">35</a></sup>.</em></p>

<p><em property="editor">(cc, ml, al, il)</em></p>

<h4 class="po">Footnotes</h4>

<ol class="po"><li id="#1"><a href="#note-1">http://bits.blogs.nytimes.com/2013/07/05/technology-workers-are-young-really-young/</a></li><li id="#2"><a href="#note-2">http://www.aoa.gov/Aging_Statistics/</a></li><li id="#3"><a href="#note-3">http://www.cna.com.br/speakingexchange/</a></li><li id="#4"><a href="#note-4">https://www.youtube.com/embed/-S-5EfwpFOk</a></li><li id="#5"><a href="#note-5">http://www.economist.com/node/17722567</a></li><li id="#6"><a href="#note-6">http://newoldage.blogs.nytimes.com/2014/02/11/what-makes-older-people-happy/</a></li><li id="#7"><a href="#note-7">http://www.smashingmagazine.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg</a></li><li id="#8"><a href="#note-8">http://www.navydesign.com.au</a></li><li id="#9"><a href="#note-9">http://www.smashingmagazine.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg</a></li><li id="#10"><a href="#note-10">http://www.nidcd.nih.gov/health/hearing/Pages/Age-Related-Hearing-Loss.aspx</a></li><li id="#11"><a href="#note-11">http://webaim.org/resources/contrastchecker/</a></li><li id="#12"><a href="#note-12">http://www.afb.org/prodBrowseCatResults.asp?CatID=49</a></li><li id="#13"><a href="#note-13">http://www.yorku.ca/mack/hfes2009.html</a></li><li id="#14"><a href="#note-14">http://www.medicaldaily.com/finger-tapping-test-shows-no-motor-skill-decline-until-after-middle-age-244927</a></li><li id="#15"><a href="#note-15">http://dl.acm.org/citation.cfm?id=1152260</a></li><li id="#16"><a href="#note-16">http://www.lukew.com/ff/entry.asp?1085</a></li><li id="#17"><a href="#note-17">http://dcurt.is/the-death-of-the-tablet</a></li><li id="#18"><a href="#note-18">http://www2.deloitte.com/content/dam/Deloitte/global/Documents/Technology-Media-Telecommunications/gx-tmt-2014prediction-smartphone.pdf</a></li><li id="#19"><a href="#note-19">http://www.smashingmagazine.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg</a></li><li id="#20"><a href="#note-20">http://www.navydesign.com.au</a></li><li id="#21"><a href="#note-21">http://www.smashingmagazine.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg</a></li><li id="#22"><a href="#note-22">http://dcurt.is/the-death-of-the-tablet</a></li><li id="#23"><a href="#note-23">http://recode.net/2014/08/26/in-defense-of-tablets/</a></li><li id="#24"><a href="#note-24">http://www.ncbi.nlm.nih.gov/books/NBK3885/</a></li><li id="#25"><a href="#note-25">http://www.psych.utoronto.ca/users/hasher/abstracts/hasher_zacks_88.htm</a></li><li id="#26"><a href="#note-26">http://www.oxfordscholarship.com/view/10.1093/acprof:oso/9780195156744.001.0001/acprof-9780195156744-chapter-10</a></li><li id="#27"><a href="#note-27">http://www.smashingmagazine.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg</a></li><li id="#28"><a href="#note-28">http://www.navydesign.com.au</a></li><li id="#29"><a href="#note-29">http://www.smashingmagazine.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg</a></li><li id="#30"><a href="#note-30">http://www.nngroup.com/articles/usability-for-senior-citizens/</a></li><li id="#31"><a href="#note-31">http://www.statisticbrain.com/attention-span-statistics/</a></li><li id="#32"><a href="#note-32">http://www.era.lib.ed.ac.uk/handle/1842/8572</a></li><li id="#33"><a href="#note-33">http://news.stanford.edu/news/2009/august24/multitask-research-study-082409.html</a></li><li id="#34"><a href="#note-34">http://psycnet.apa.org/index.cfm?fa=search.displayRecord&amp;uid=2000-07430-014</a></li><li id="#35"><a href="#note-35">https://fightdementia.org.au</a></li></ol>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-elderly/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>