davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
276 Commits
1 Branch
Struktur: a82c900c1e
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „a82c900c1e“
${ noResults }
larlet-fr-david-cache/cache/34b95fe8629199a65e2a1bcc7e5.../index.html

index.html 58KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962 
  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>What Screens Want by Frank Chimero (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://frankchimero.com/talks/what-screens-want/transcript/">

  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.   What Screens Want by Frank Chimero (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://frankchimero.com/talks/what-screens-want/transcript/">Source originale du contenu</a></h3>

  463.     <section class="foreword">

  464. <p>

  465.     <img src="http://frankchimero.com/talks/what-screens-want/transcript/build.svg">

  466.     <br>

  467.     This site is an interpretation of my talk from <a href="http://2013.buildconf.com">Build, 2013.</a> I’ve made some small adjustments to the original content to help translate it to a written essay. Thanks to Andy McMillan for inviting me to speak yet again. And thanks to you, for reading this little experiment.

  468. </p>

  469. </section>

  470. 

  471. <section class="white panel1">

  472. <p>The past two years were a wild goose chase for answers. I read books, looked at art, listened to my heroes, and sketched out scratchy thoughts of my own to search for any sensible response to a question that had been lodged in my head for months.</p>

  473. 

  474. <h1 class="emph">What does it mean to natively design for screens?</h1>

  475. 

  476. <p>I couldn’t get the question out of my head. I tried to find its contours, and just as I thought I had made some progress on a response, a new part of the picture appeared and showed I only had a shadow of an answer. After many failures, I began to see which approaches worked better. The way toward an answer is never what you expect, so I was surprised that mine began with a routine trip to the pharmacy.</p>

  477. </section>

  478. 

  479. <section class="rainbowbreak">

  480. <h1>THE<br>

  481.     VOLUME<br>

  482.     OF<br>

  483.     DANCING<br>

  484.     LIGHT<br>

  485. </h1>

  486. </section>

  487. 

  488. <section class="aspirin">

  489. 

  490. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/aspirin.png" class="tinycentered circleborder"></p>

  491. 

  492. <p>These are aspirin pills. I’m not big on medicating, so my aspirin purchase was the first in a long time. When I rattled a few of the pills out of the bottle, I noticed they seemed to be a lot smaller than I remembered.</p>

  493. 

  494. <p>I went online to see what was going on. It seems pharmaceutical companies have been able to make the active drug in aspirin more effective in the past few decades. The tiny aspirin pills are hardly aspirin at all, and the drug’s current version is so potent and physically minuscule that it must be padded with a filler substance to make the pill large enough to pick up and put in your mouth. Literally, you couldn’t grasp it without the padding.</p>

  495. 

  496. <p>When I read that, it occurred to me that we’ve been living through a similar situation with computers. I mean, have you looked at technology recently and taken stock? Things have changed under us. We take it for granted, because the transition was so fast and thorough.</p>

  497. </section>

  498. 

  499. <section class="white">

  500. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/carphone.jpg" class="tinycentered circleborder"></p>

  501. <p>I remember my first cellular phone. It came in a bag and we called it a car phone. Now the phone fits in your pocket and you can use the damn thing to <em>start</em> a car. It’s remarkable.</p>

  502. <br><br>

  503. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/computer.jpg" class="tinycentered circleborder"></p>

  504. <p>And I think about my first computer. The monitor sat on top the computer like an ugly, stupid hat: one big, dull box on top of another. But now they’re all the same thing. Your computer is a big, shiny pane of glass that spans the length of your desk.</p>

  505. <br><br>

  506. </section>

  507. 

  508. <section class="black">

  509. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/imac.png" class="tinycentered circleborder"></p>

  510. <p>So just like the aspirin, we’ve made the guts of our computers more potent, powerful, and smaller. Chances are your computer’s footprint is entirely comprised of its screen. Even an iMac is just a screen with a kickstand.</p>

  511. <p>And now, because of touch screens, we’re using the screens for input as well as output. The whole feedback cycle of using a computer is entirely screen-based. It’s no wonder that the average person’s conception of a computer <em>is</em> the screen.</p>

  512. <p>So, if computers are like aspirin, and we’ve been making the computers smaller and smaller, where’s the necessary padding that allows us to grasp things? I stumbled over the question for a while. Then it hit me.</p>

  513. </section>

  514. 

  515. <section class="panel1">

  516. <h1 class="emph black">The padding isn’t around the screens. It’s <em>in</em> them.</h1>

  517. </section>

  518. 

  519. <section class="white">

  520. <p>Manipulating data, one of the original purposes of computers, is often too abstract for most—even me. It helps to make things visible. Graphical user interfaces unpack some of the complexity in computing, and their implementation became a key to unlocking computers for most people in the ’80s and ’90s. The interfaces we build are where we put the padding. You give a user something to grasp onto when you make a metaphor solid. In the case of software on a screen, the metaphors visually explain the functions of an interface, and provide a bridge from a familiar place to a less known area by suggesting a tool’s function and its relationship to others.</p>

  521. 

  522. <p><br><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/trash.jpg" class="tinycentered"><br></p>

  523. 

  524. <p>For instance, if I say <em>“This is a Trash Bin,”</em> you may not know a computer’s file management system or directory structures, but you’ve got a pretty good idea of how trash bins work, so you can deduce that the unwanted files go in the trash bin, and you’ll be able to retrieve them until the bin is emptied.</p>

  525. 

  526. <p>Metaphors are assistive devices for understanding.</p>

  527. </section>

  528. 

  529. <section>

  530. <p>I think we all know that some of the aspirin pill’s padding is necessary in computing. We need abstractions, otherwise we’d be writing code in machine language or Assembly, there’d be no work designing interfaces, and users wouldn’t understand much unless they took the years to learn everything from the ground up.</p>

  531. <p>Computers, after all, are just shaky towers of nested abstractions: from the code that tells them what to do, to the interfaces that suggest to the user what’s possible to do with them. Each level of abstraction becomes an opportunity to make work more efficient, communicate more clearly, and assist understanding. Of course, abstractions also become chances to complicate what was clear, slow down what was fast, and fuck up what was perfectly fine.</p>

  532. <p>Choosing the proper amount of abstraction is tricky, because each user comes to what you’re making with their own amount of experience. Experience gaps are not unique to computing, but I think it matters more here than in many other situations.</p>

  533. </section>

  534. 

  535. <section class="white">

  536. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/keenness.gif" class="fullimg"></p>

  537. <p>The best way to understand why is to look at the differences between your hands and your brain. Your hands can’t change size, but your mind can: if you’re paying attention, your brain becomes more keen to experiences over time. So while the size of an aspirin pill is constrained by your stubby little fingers, your brain can normalize the patterns of an interface and make way for more nuanced abstractions. With enough time and exposure, a user can shed the padding and metaphors that become dead weight, like taking the training wheels off a bike.</p>

  538. </section>

  539. 

  540. <section>

  541. <p>We’ve been living through that shedding process, and the interfaces of iOS 7 and Windows Metro suggest the keenness of our minds and our adeptness at navigating interfaces. Like them or not, Metro and iOS7 are major touchstones in our relationship to computing, because they signify that we’re beginning to accept a flexible medium on its own terms.</p>

  542. 

  543. <p>But it’s not the first time we’ve done something like this. Let’s go back 35 years.</p>

  544. </section>

  545. 

  546. <section class="rainbowbreak">

  547. <h1>PLASTIC<br>

  548.     MAKES<br>

  549.     IT<br>

  550.     POSSIBLE

  551. </h1>

  552. </section>

  553. 

  554. <section class="video">

  555. <p>I’d like to show you a video clip from a BBC special called <a href="http://www.youtube.com/watch?v=wTfbEHfNvF4&feature=c4-overview-vl&list=PLmo9vOINxhRkiZioqITzxqPNU7WWJPLYz"><em>Connections,</em></a> hosted and written by James Burke.<br><br></p>

  556. <div class="vidframe"><iframe src="http://frankchimero.com/talks/what-screens-want/transcript///player.vimeo.com/video/79718420" width="500" height="375"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

  557. </section>

  558. 

  559. <section class="panel1 black">

  560. <p>Sound familiar? The progression of plastics is the same as screens and software. It’s a pattern of malleable mediums:</p>

  561. <h1 class="emph">If something can be anything, it usually becomes everything.</h1>

  562. <p>As a little formal exercise, let’s take every time Burke says “plastic” and replace it with “software.” (Please imagine I’m doing this in a devastatingly charming British accent.)</p>

  563. </section>

  564. 

  565. <section class="white">

  566. <div class="burkestep">

  567.     Have you noticed what’s happened to software in the last ten years?

  568. </div>

  569. 

  570. <div class="burkestep">

  571.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke1.jpg"></div>

  572.     <div>It’s become something in its own right.</div>

  573. </div>

  574. <div class="burkestep">

  575.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke2.jpg"></div>

  576.     <div>I mean, early on, if you made something in software, you had to make it look exactly like what it was replacing.</div>

  577. </div>

  578. <div class="burkestep">

  579.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke3.jpg"></div>

  580.     <div>I mean particularly leather, or people wouldn’t buy it.</div>

  581. </div>

  582. <div class="burkestep">

  583.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke4.jpg"></div>

  584.     <div>It’s not been long since the word software was an insult. Nasty and complicated, remember?</div>

  585. </div>

  586. 

  587. <div class="burkestep">

  588.     Not any more. It’s as if we suddenly changed our attitude to what real meant and recognized software for what it is:

  589. </div>

  590. 

  591. <div class="burkestep">

  592.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke6.jpg"></div>

  593.     <div>something that permits us to do things we couldn’t possibly do if they had to be made with the so called real thing.</div>

  594. </div>

  595. 

  596. <div class="burkestep">

  597.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke7.jpg"></div>

  598.     <div>Now it’s everywhere. I mean, look at this office.</div>

  599. </div>

  600. 

  601. <div class="burkestep">

  602.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke8.jpg"></div>

  603.     <div>This is now software.</div>

  604. </div>

  605. 

  606. <div class="burkestep">

  607.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke9.jpg"></div>

  608.     <div>So’s that.</div>

  609. </div>

  610. 

  611. <div class="burkestep">

  612.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke10.jpg"></div>

  613.     <div>So is this.</div>

  614. </div>

  615. <div class="burkestep">

  616.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke11.jpg"></div>

  617.     <div>And so are these.</div>

  618. </div>

  619. <div class="burkestep">

  620.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke12.jpg"></div>

  621.     <div>And especially what’s inside them.</div>

  622. </div>

  623. <div class="burkestep">

  624.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke13.jpg"></div>

  625.     <div>There’s software on the wall.</div>

  626. </div>

  627. <div class="burkestep">

  628.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke14.jpg"></div>

  629.     <div>There’s software on this desk.</div>

  630. </div>

  631. <div class="burkestep">

  632.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke15.jpg"></div>

  633.     <div>My shoes are software.</div>

  634. </div>

  635. <div class="burkestep">

  636.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke16.jpg"></div>

  637.     <div>And now there’s a new generation of objects that can only be made in software.</div>

  638. </div>

  639. <div class="burkestep">

  640.     <div><a href="http://hateplow.tumblr.com/post/59207752965" class="noborder"><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke17.gif"></a></div>

  641.     <div>It’s a software world. And because of software, it’s a soft world in a different sense, in the original sense of the word: it changes its shape easily.</div>

  642. </div>

  643. <div class="burkestep">

  644.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke18.gif" class="tinycentered"></div>

  645.     <div>So now we no longer buy the thing we want, we buy the shape of the thing we prefer.</div>

  646. </div>

  647. <div class="burkestep">

  648.     <div><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/burke19.jpg"></div>

  649.     <div>And when the shapes change regularly, which they do, we begin to <em>want</em> them to change regularly.</div>

  650. </div>

  651. </section>

  652. 

  653. <section>

  654. <p>When Burke talks about things needing to look like their old embodiments and the ability for those shapes to change, he’s talking about skeuomorphs. But he’d never use that word, because he’s much too clever. The word sticks in your mouth, right? Both halves come from Greek.</p>

  655. 

  656. <h1 class="emph black">skeuo <span>&rarr;</span> container<br>

  657. morph <span>&rarr;</span> shape</h1>

  658. 

  659. <p>So, skeuomorphs are about the shape we choose for the containers we build. This requires plasticity. Softness. Screens are a special material without much precedent, save plastic. And I think it’s best to view screens as a material for interaction and interface design.</p>

  660. </section>

  661. 

  662. <section class="wood">

  663. <p>Just like any material, screens have affordances. Much like wood, I believe screens have grain: a certain way they’ve grown and matured that describes how they want to be treated. The grain is what gives the material its identity and tells you the best way to use it. Figure out the grain, and you know how to natively design for screens.</p>

  664. <p>And we’ve tried. Oh god, we’ve tried. Unfortunately, the discussion around screen-native design feels a bit stunted in its current form. We’re stuck in a pendulum swing.</p>

  665. </section>

  666. 

  667. <section class="realblack">

  668. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/pendulum.gif" class="fullimg"></p>

  669. <p>There are two main ideological camps. On one side, you have proponents for flat design, the folks who say that because screens are flat, the designs should be too, and we should remove any hint or reference to the three-dimensional world because computing is something else entirely.</p>

  670. 

  671. <p>On the other side, you have folks who believe in the value of skeuomorphs as near-tangible, visible metaphors. This is the tribe of <a href="http://www.zdnet.com/lickable-buttons-4010015797/">lickable buttons</a>, realistic textures, folded paper, and stitched leather.</p>

  672. 

  673. <p>Any reasonable person would say the best approach is somewhere in the middle, but both arguments fail because they are based on aesthetics. Leaning on the look of things is a tempting argument to make: screens are output devices, after all. But, it’s a shallow answer to a deep question. I’ll do my best to refute both of these arguments.</p>

  674. </section>

  675. 

  676. <section class="white">

  677. <p>I’m going to use horses in this example, because horses are cool, and I need to circle back to them in a minute.</p>

  678. <hr>

  679. 

  680. <div class="horseex">

  681.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-color.jpg"></p>

  682.     <p>All right, here’s a color photo of a horse.</p>

  683.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-bw.jpg"></p>

  684.     <p>And here’s a black and white one.</p>

  685.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-drawing.jpg"></p>

  686.     <p>There’s a drawing of a horse.</p>

  687.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-painting.jpg"></p>

  688.     <p>And a famous painting with a horse.</p>

  689.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-flat.jpg"></p>

  690.     <p>There’s a flat horse.</p>

  691.     <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/horse-skeuo.jpg"></p>

  692.     <p>A skeuomorphic horse.</p>

  693. </div>

  694. <hr>

  695. <p>Apologies if this seems like an idiotic exercise. My point is you just viewed all of these on a screen, and that screen did perfectly fine showing them all to you. A screen doesn’t care what it shows any more than a sheet of paper cares what’s printed on it. Screens are aesthetically neutral, so the looks of things are not a part of their grain. Sorry, internet. If you want to make something look flat, go for it. There are plenty of reasons to do so. But you shouldn’t say you made things look a certain way because the screen cared one way or the other.</p>

  696. </section>

  697. 

  698. <section class="wood">

  699. <p>So how do you figure out that grain? Well, if you think about it, the grain of wood is documentation of how the tree has grown. Maybe the best thing to do is to figure out where screens came from. Which means I get to talk about horses again.</p>

  700. <p>Let’s have a short history lesson.</p>

  701. </section>

  702. 

  703. <section class="rainbowbreak">

  704. <h1>LONG<br>

  705.     AGO<br>

  706.     IN<br>

  707.     THE<br>

  708.     VALLEY

  709. </h1>

  710. </section>

  711. 

  712. <section class="white panel1">

  713. <h1 class="emph">In 1872 a man took a photograph of a horse.</h1>

  714. <p>This doesn’t seem like that significant of an achievement, but almost 140 years later, it’s my favorite starting point to describe screens.</p>

  715. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/muybridgehorsesolo.gif" class="horsesolo"></p>

  716. <p>This is the photo, and I think it is probably familiar to quite a few of you. It was taken by a British man named Eadweard Muybridge, who lived in San Francisco and often found himself working in an area we now call Silicon Valley. The photo was staged at a horse track in Palo Alto, just a little bit away from the old Facebook headquarters. The photo on its own isn’t extraordinary, but there isn’t just one photo.</p>

  717. </section>

  718. 

  719. <section class="realblack strip">

  720. <p>Muybridge took <em>twelve,</em> all taken in the span of just a few seconds.</p><br>

  721. <img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/muybridgestrip.jpg" class="fullimg real" style="margin-left: -20%;">

  722. <img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/muybridgestrip.jpg" class="fullimg real" style="margin-left: 20%;">

  723. <br>

  724. <p>The photos were originally taken to settle a gentlemen’s bet to see if all four of a horse’s hooves were off the ground at any point in their stride. (They were.) Aside from bets, the project had profound effects on time and movement. See, Muybridge’s little photo project was the first time we ever split the second. We all think splitting the atom is important because we can see the consequences, but I think slicing the second is just as profound.</p>

  725. <p>Splitting time so thinly has its advantages. Because when you take those twelve photos and put them in rapid sequence, they do this:</p>

  726. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/muybridgeanimated.gif" class="horsesolo"></p>

  727. <p>This might not seem like such a big deal to us now, but photography up until that point required the subject to stay extremely still to keep the photograph from blurring. People smiled in the 19th century, but you’d never know it from the photos. It meant that before Muybridge, photographs could refer to life, but never capture its essence: movement.</p>

  728. </section>

  729. 

  730. <section>

  731. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/zooprax.png" class="tinycentered zoopraximg"></p>

  732. <p>Muybridge had discovered how to bottle movement, and like any good inventor, he did experiments to see if he could reanimate his frozen horses. Muybridge’s first attempts to set time in motion were to print the high-speed photographs radially on a glass disc and spin it while it was lit from behind. He called it a zoopraxiscope.</p>

  733. </section>

  734. 

  735. <section class="video">

  736. <div class="vidframe"><iframe src="http://frankchimero.com/talks/what-screens-want/transcript///player.vimeo.com/video/79789728?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

  737. <p>Here’s a zoopraxiscope projection at work. Keep in mind what you’re watching is a volume of traveling light, and that light needs to land on something to show itself. This is one of the origins of screens.</p>

  738. <p>And you know, these little animations look awfully similar to animated GIFs. Seems that any time screens appear, some kind of short, looping animated imagery of animals shows up, as if they were a natural consequence of screens.</p>

  739. </section>

  740. 

  741. <section class="white">

  742. <p>Muybridge’s crazy horse experiment eventually led us to the familiar glow of the screen. If you’re like me, and consider Muybridge’s work as one of the main inroads to the creation of screens, it becomes apparent that web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change.</p>

  743. <p>So what does all of this mean? I think the grain of screens has been there since the beginning. It’s not tied to an aesthetic. Screens don’t care what the horses look like. They just want them to move. They want the horses to change.</p>

  744. <p>Designing for screens is managing that change. To put a finer head on it, the grain of screens is something I call <em>flux—</em></p>

  745. </section>

  746. 

  747. <section class="rainbowbreak somanyhorses">

  748. <h1>EVERY<br>

  749.     THING<br>

  750.     CHANGES<br>

  751.     —<br>

  752.     DON’T<br>

  753.     BE<br>

  754.     AFRAID

  755. </h1>

  756. </section>

  757. 

  758. <section class="white panel1">

  759. <h1 class="emph">Flux is the <em>capacity</em> for change.</h1>

  760. <p>Yes, this could be animation, because that’s what I’ve been talking about up until now, but I think it’s a lot more, too. Flux is a generous definition. It encompasses many of the things we take for granted in the digital realm: structural changes, like customization, responsiveness, and variability.</p>

  761. <p>Some examples:</p>

  762. <hr>

  763. <div class="horseex">

  764.     <p><a href="http://bobulate.com/post/1216102383/evening-edition" class="noborder"><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/bobulate.jpg"></a></p>

  765.     <p>Flux is changing the colors of <a href="http://bobulate.com/post/1216102383/evening-edition">your website at night,</a> to customize for a different reading experience based on time.</p>

  766.     <p><a href="http://www.thehill-side.com/lookbooks/ss-2013" class="noborder"><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/hillside.gif"></a></p>

  767.     <p>It’s having some fun with a <a href="http://www.thehill-side.com/lookbooks/ss-2013">fashion lookbook</a> if you know it’s mostly going to be seen on screens.</p>

  768.     <p><a href="http://www.microsoft.com" class="noborder"><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/microsoft.jpg"></a></p>

  769.     <p>It’s building a <a href="http://www.microsoft.com">responsive website</a> for a little company.</p>

  770.     <p><a href="http://devoureth.tumblr.com/post/40716529827/gentlemen-and-women-take-note-x" class="noborder"><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/bowtie.gif"></a></p>

  771.     <p>It’s using movement to <a href="http://devoureth.tumblr.com/post/40716529827/gentlemen-and-women-take-note-x">more clearly describe the steps of a complicated process.</a></p>

  772. </div>

  773. <hr>

  774. <p>There are many more examples, and I’m sure you can think of some too. I break flux into three levels:</p>

  775. </section>

  776. 

  777. <section>

  778. <h2>Low</h2>

  779. <p>These are really small mutations we take for granted when it comes to computing, like the ability to sort a table row on your spreadsheet. One of the major reasons the spreadsheet software has the capacity to change is because the screen can show the change produced. You can’t do that on paper. You need processing and a malleable display surface.</p>

  780. <hr>

  781. <h2>High</h2>

  782. <p>These are the immersive interactive pieces you think of when I say “Flash website.” I think this sort of stuff is rarely a good idea on the web, but we’re talking about screens in general. I’ve seen a lot of really cool stuff done with high flux in museums, public installations, and in film. High flux is <em>great</em> in physical spaces.</p>

  783. <hr>

  784. <h2>Medium</h2>

  785. <p>This area is most interesting to me, because it overlaps with what I do: websites and interfaces. Medium level flux is assistive and descriptive animation, and restructuring content based on sensors. It clarifies interactivity by allowing elements to respond to that interaction and other, measured conditions.</p>

  786. </section>

  787. 

  788. <section class="white">

  789. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/slimer.jpg" class="fullimg"></p>

  790. <p>Probably the most well-known example of medium flux is OS X’s genie effect on window minimization. The animation clarifies the interaction by treating the window as a physical object, and sucks down the window to show its eventual position in the dock when minimized.</p>

  791. <p>I’ll show you a few more examples.</p>

  792. <hr>

  793. <p>These come from <a href="http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/">a great blog post by Adrian Zumbrunnen of IA in Zurich.</a></p>

  794. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/ScrollingAnimated.gif" class="tinycentered"></p>

  795. <p>This one shows animated scrolling after clicking on a navigation item. The animation describes the position of the content on the page, and helps you understand the path you took to get there. It preserves context.</p>

  796. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/Stateful-toggle.gif" class="tinycentered"></p>

  797. <p>This next one is a stateful toggle, meaning supplemental form elements displace the original list to consolidate space, and infer a relationship between them.</p>

  798. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/Sticky-Label.gif" class="tinycentered"></p>

  799. <p>This is a sticky label. It’s handy if you’re scrolling through a long list, because it keeps useful metadata present and visible.</p>

  800. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/ExpandingComments.gif" class="tinycentered"></p>

  801. <p>And last is a comment field with progressive disclosure. This method allows the designer to reduce UI components to their essence. Input forms are only revealed when necessary to avoid confusion, and the animation aids them in understanding the origin of the new form fields.</p>

  802. </section>

  803. 

  804. <section>

  805. <p>Movement, change, and animation are a lot more than ways to delight users: they are a functional method for design.</p>

  806. <p>These examples are essentially animated wireframes, but extra detail isn’t needed. Designing how things change and move is enough for us to understand what they are and the relationships between them. You don’t need the heavy-handed metaphor, because the information is baked into the element’s behavior, not its aesthetics.</p>

  807. <p>A designer’s work is not only about how the things look, but also their behaviors in response to interaction, and the adjustments they make between their fixed states. In fact, designing the way elements adapt and morph in the in-between moments is half of your work as a designer. You’re crafting the interstitials.</p>

  808. <p>We’ve been more aware of this interstitial work in the past few years because of responsive design’s popularity and its resistance to fixed states. It’s a step in the right direction, but it has made work <em>crazy</em> frustrating.</p>

  809. </section>

  810. 

  811. <section class="black panel1">

  812. <h1 class="emph">

  813.     Pbndh!<br>

  814.     Grhbdbbt!<br>

  815.     Phhfffft.<br>

  816.     Argh!

  817. </h1>

  818. <p>I’ve worked on several responsive projects in the past couple years, and it’s always been a headache—not from technological limitations, but because there weren’t suitable words to describe the behaviors I wanted. I had to jump into code, and waste time writing non-production markup and CSS to prototype a behavior so the developer could see it. That’s really wasteful, especially if all you needed was a word for the behavior. The community has been putting a lot of effort in developing tools that allow for quicker prototyping, but explaining yourself can happen multiple ways. Clear wording with consistent meaning reduces the number of prototypes you need to build, because a simple word will do.</p>

  819. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/language.gif" class="fullimg"/></p>

  820. <p>We need to work as a community to develop a language of transformation so we can talk to one another. And we probably need to steal these words from places like animation, theater, puppetry, dance, and choreography.</p>

  821. <p>Words matter. They are abstractions, too—an interface to thought and understanding by communication. The words we use mold our perception of our work and the world around us. They become a frame, just like the interfaces we design.</p>

  822. </section>

  823. 

  824. <section class="white">

  825. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/ethan.jpg" class="tinycentered"></p>

  826. <p>At Build 2012, Ethan Marcotte gave a lecture called <a href="https://vimeo.com/63525054">“The Map is not the Territory.”</a> It was a talk about abstractions, looked at through the lens of maps and physical terrain. The longer I’ve considered Ethan’s thoughts, the more I believe cartography is an apt metaphor for our industry’s current situation. The builders of interfaces in a technology-laden, abstracted, and mediated world hold sway, much like mapmakers do.</p>

  827. </section>

  828. 

  829. <section class="video">

  830. <p>Rather than try to make that case myself, I’ve got a clip for you about maps. It’s from <em>The West Wing.</em></p>

  831. <div class="vidframe"><iframe src="http://frankchimero.com/talks/what-screens-want/transcript///player.vimeo.com/video/79809979" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

  832. </section>

  833. 

  834. <section>

  835. <p>Maps are abstractions that attempt to express the unexpressable by distorting reality into something presentable, something understandable. For instance, time is hard to grok on its own, but a calendar serves as a map to the territory of time, and it makes time management a little easier.</p>

  836. <p>But an abstraction can only give you one facet of a complex reality. Things get bad when those abstractions become the terms your mind uses to consider the thing itself—you mistake the map as the territory. And it’s funny how those maps begin to mold your understanding of the world around you.</p>

  837. <p>For example, a few years ago, I flew to Hong Kong from Chicago, and my brain just about broke because the flight path took us over the North Pole. I forgot that was even possible! My brain was so programmed with representations and maps that I, well, forgot that Earth is a sphere, and you can navigate it any which way you want—not just east and west. An abstraction’s distortion blinded me to a portion of the reality. Abstractions always distort and omit, because they have to. The trick is to be mindful it is happening.</p>

  838. </section>

  839. 

  840. <section class="white panel1">

  841. <p>If I asked you to picture the world, you probably think of this.</p>

  842. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/map1.gif" class="fullimg"></p>

  843. <p>But there’s nothing that says you couldn’t think of it like this.</p>

  844. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/map2.gif" class="fullimg"></p>

  845. <p>Or even like this. Who says north is up?</p>

  846. <p><img src="http://frankchimero.com/talks/what-screens-want/transcript/trans.gif" data-src="http://frankchimero.com/talks/what-screens-want/transcript/map3.gif" class="fullimg"></p>

  847. <p>For the characters on <em>The West Wing</em>, they misunderstood the relative size of nations and their actual position on the globe, because the map in their mind was made for easy sea navigation.</p>

  848. <h1 class="emph">The accuracy of the sea came at the cost of the land.</h1>

  849. <p>When I realized that, a little light went off in my head: a map’s biases do service to one need, but distort everything else. Meaning, they misinform and confuse those with different needs.</p>

  850. </section>

  851. 

  852. <section class="black">

  853. <p>That’s how I feel about the web these days. We have a map, but it’s not for me. So I am distanced. It feels like things are distorted. I am consistently confused.</p>

  854. <p>See, we have our own abstractions on the web, and they are bigger than the user interfaces of the websites and apps we build. They are the abstractions we use to define the web. The commercial web. The things that have sprung up in the last decade, but gained considerable speed in the past five years.</p>

  855. <p>It’s the business structures and funding models we use to create digital businesses. It’s the pressure to scale, simply because it’s easy to copy bits. It’s the relationships between the people who make the stuff, and the people who use that stuff, and the consistent abandonment of users by entrepreneurs.</p>

  856. <p>It’s the churning and the burning, flipping companies, nickel and diming users with in-app purchases, data lock-in, and designing with dark patterns so that users accidentally do actions against their own self-interest.</p>

  857. </section>

  858. 

  859. <section>

  860. <p>Listen: I’m at the end of a 4-month sabbatical, and I worry about this stuff, because the further I get from everything, the more it begins to look toxic. These pernicious elements are the primary map we have of the web right now.</p>

  861. <p>We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.</p>

  862. </section>

  863. 

  864. <section class="white">

  865. <p>So what is the answer? I found this quote by <a href="http://en.wikipedia.org/wiki/Ted_Nelson">Ted Nelson,</a> the man who invented hypertext. He’s one of the original rebel technologists, so he has a lot of things to say about our current situation. <a href="http://www.youtube.com/watch?v=zumdnI4EG14">Nelson:</a></p>

  866. <blockquote>

  867.     The world is not yet finished, but everyone is behaving as if everything was known. This is not true. In fact, the computer world as we know it is based upon one tradition that has been waddling along for the last fifty years, growing in size and ungainliness, and is essentially defining the way we do everything. My view is that today’s computer world is based on techie misunderstandings of human thought and human life. <em>And the imposition of inappropriate structures throughout the computer is the imposition of inappropriate structures on the things we want to do in the human world.</em>

  868. </blockquote>

  869. <p>Emphasis mine. So, what is Nelson saying? First, he’s saying technology is shining back on us. We made it, and now it is making us. The abstractions we created have distortions that hurt and reduce us. Damage. Most importantly, he’s saying we need more maps.</p>

  870. </section>

  871. 

  872. <section>

  873. <p>Like Ethan’s talk said: the map is not the territory, so a bad map doesn’t necessarily mean bad territory. Our saving grace is that one territory—in this case, the internet, technology—can have more than one map. We can make maps that distort less, or at least accurately represent our goals for all of this technology.</p>

  874. <p>The land comes at the cost of the sea, remember? Maps support the values of those who make them, and distort everything else. So, if your goal is a poker game for rich old white guys, we’ve got a fantastic map right now. I think it’s in all of our best interests to get working on a new vision for the web, and a new role for technology.</p>

  875. </section>

  876. 

  877. <section class="black panel1">

  878. <p>We can produce a vision of the web that isn’t based on:</p>

  879. <h1 class="emph">consolidation<br>

  880.     privatization<br>

  881.     power<br>hierarchies<br>

  882.     surveillance</h1>

  883. <p>We can make a new map. Or maybe reclaim a map we misplaced a long time ago. One built on:</p>

  884. <h1 class="emph">extensibility<br>

  885.     openness<br>

  886.     communication<br>

  887.     community<br>

  888.     <em>wildness</em></h1>

  889. <p>We can use the efficiency and power of interfaces to help people do what they already wish more quickly or enjoyably, and we can build up business structures so that it’s okay for people to put down technology and get on with their life once their job is done. We can rearrange how we think about the tools we build, so that someone putting down your tool doesn’t disprove its utility, but validates its usefulness.</p>

  890. </section>

  891. 

  892. <section class="white">

  893. <p>Let me leave you with this: the point of my writing was to ask what screens want. I think that’s a great question, but it is a secondary concern. What screens want needs to match up with <em>what we want.</em></p>

  894. <p>People believe there’s an essence to the computer, that there’s something true and real and a correct way to do things. But—there is no right way. We get to choose how to aim the technology we build. At least for now, because increasingly, technology feels like something that happens to you instead of something you use. We need to figure out how to stop that, for all of our sakes, before we’re locked in, on rails, and headed toward who knows what.</p>

  895. <p>One of the reasons that I’m so fascinated by screens is because their story is our story. First there was darkness, and then there was light. And then we figured out how to make that light dance. Both stories are about transformations, about change. Screens have flux, and so do we.</p>

  896. <p>So the pep talk is that things are starting to suck, but there’s a capacity for change in what we’ve made, who we are, and what we believe. Everything was made, and if we want, we can remake it how we see fit. We only need to want it.</p>

  897. <p>And then we have to build it.<span class="fin"></span></p>

  898. </section>

  899.   </article>

  900. </section>

  901. 

  902. 

  903. <nav id="jumpto">

  904.   <p>

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

  906.     <a href="http://frankchimero.com/talks/what-screens-want/transcript/">Source originale</a> |

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

  908.   </p>

  909. </nav>

  910. 

  911. <footer>

  912.   <div>

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

  914.     <p>

  915.       Bonjour/Hi!

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

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

  918.     </p>

  919.     <p>

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

  921.     </p>

  922.     

  923.     <p>

  924.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  941.     </p>

  942.     <p>

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

  944.     </p>

  945.     <p>

  946.       Je ne traque pas ta navigation mais mon

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

  948.       conserve des logs d’accès.

  949.     </p>

  950.   </div>

  951. </footer>

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

  953.   ;(_ => {

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

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

  956.       e.preventDefault()

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

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

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

  960.     })

  961.   })()

  962. </script>