A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 34KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The world needs a tech diet; here is how designers can help (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://essays.uxdesign.cc/tech-diet/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>The world needs a tech diet; here is how designers can help</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://essays.uxdesign.cc/tech-diet/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>If you use digital products on a daily basis, you’ve probably noticed the proliferation of dark design patterns that try to manipulate you to engage further, deeper, or longer on a website or app.</p>
  71. <p>We are not in control of our tools anymore</p>
  72. <p>It’s time we bridge the gap between feel-good Design &amp; Ethics panels and the work we do every day as digital product designers.</p>
  73. <p>Image: David Teodorescu</p>
  74. <p>UI copy that fabricates a sense of scarcity, urging you to book a hotel room before someone else does. Confirm-shame links that try to bully users into entering their email addresses. Streaming platforms that autoplay new episodes, encouraging binge-watching behavior. </p>
  75. <p>Eager for clicks and views, tech platforms are always looking for new ways to use basic human instincts like shame, laziness and fear to their advantage. Digital junk foods, from social networking apps to video streaming platforms, promise users short-term highs but leave depressive existential lulls in their wake. </p>
  76. <p>The result? Our relationship with technology is becoming increasingly characterized by dependency, regret, and loss of control.</p>
  77. <p>But wait...</p>
  78. <p>How did we get here?</p>
  79. <p>While the products we build every day have evolved, our ways of thinking about user engagement have scarcely changed since the days of dial-up. We assume that the higher the metrics, the more successful the business and, thus, the smarter the product designer.</p>
  80. <p>Clicks</p>
  81. <p>Views</p>
  82. <p>Session duration</p>
  83. <p>Shares</p>
  84. <p>Sign-ups</p>
  85. <p>Response rate</p>
  86. <p>Avg time on page</p>
  87. <p>Pages per visit</p>
  88. <p>Dormancy rate</p>
  89. <p>Leads generated</p>
  90. <p>Opens per week</p>
  91. <p>Bounce rate</p>
  92. <p>And we’ve become so good at engagement over the years, we have approached its pursuit as a science. We have deified products like Instagram or Tinder for their shamelessly addictive qualities. We have learned and taught each other how to design for addiction, always devising new ways to keep people coming back for more. </p>
  93. <p>But in some cases, we are simply defining metrics out of apathy. We forget to question the real business value behind each of those KPIs. After all, more page views per visit to an e-commerce website do not necessarily mean more sales. Likewise, the number of opens per week for a mobile banking app tells us little about customer loyalty and satisfaction — when it comes to their financial life, aren’t people looking for peace of mind instead?</p>
  94. <p>Over the past few decades, we have helped build a corporate culture that systematically prioritizes short-term gains over longer-term product health.</p>
  95. <p>The introduction of digital products and services into our lives has substantially changed the way our relationship to time, effort, and initiative. We might not think about this all the time, but we are not as in control of those digital tools as we are of the physical ones around us.</p>
  96. <p>A tool such as a chainsaw has to be manually initiated by its user...</p>
  97. <p>...that’s not the case with digital tools like phones, which are often initiating interactions with us.</p>
  98. <p>When you look (or think of) a mug, you know pretty accurately how much effort it will take to lift it up...</p>
  99. <p>...that’s not the case when you click on a “Get Started” button on an insurance provider website.</p>
  100. <p>When you look at a tube and compare it to the size of your saw, you can estimate how much time it will take you to complete the task...</p>
  101. <p>...that’s not the case with the endless feeds we are exposed to in social media apps and blogs.</p>
  102. <p>“</p>
  103. <p>Although the digital revolution has pushed technology forward, it has also left people with no choice but to conform to the new rules and paradigms set by this technology.
  104. — Marigo Heijboer</p>
  105. <p>The new digital tools of our era don’t have natural affordances unless the designer consciously decides to design them in a transparent, honest way.</p>
  106. <p>Turns out... </p>
  107. <p>Times,
  108. they are
  109. a-changing</p>
  110. <p>01</p>
  111. <p>Discussions around our unhealthy relationship with technology are becoming mainstream.</p>
  112. <p>Politicians starting to create laws against dark patterns</p>
  113. <p>Tech companies drowned in scandals about privacy and user data</p>
  114. <p>Mass media outlets started covering tech issues more frequently</p>
  115. <p>02</p>
  116. <p>Companies observing this trend are starting to act — but in timid ways.</p>
  117. <p>Instagram lets users know when they finish scrolling through the feed</p>
  118. <p>Youtube, iOS and other mobile OSs let people track and limit how much time they are spending in each app</p>
  119. <p>Bumble gives users the option to disconnect, including taking a “digital detox” mode</p>
  120. <p>03</p>
  121. <p>A more minimalist mindset is emerging in our Zeitgeist and our Netflix watchlists.</p>
  122. <p>Marie Kondo: the Netflix sensation who teaches American families to prioritize belongings that ‘spark joy’ while purging the stuff they don’t need</p>
  123. <p>Tiny Homes: a show about people choosing to simplify their lives by downsizing their living spaces </p>
  124. <p>Minimalism: a documentary about those who have rejectedthe American idea that more consumption brings greater happiness</p>
  125. <p>Hey—</p>
  126. <p>enough</p>
  127. <p>talking</p>
  128. <p>As designers, how do we actually break the cycle of designing for addictive engagement?</p>
  129. <p>Keep scrolling, keep scrolling</p>
  130. <p>Change has to start somewhere. Seeing a gap between our well-intended ideas and the work we do every day, we have decided to create a more practical guide to provoking change.</p>
  131. <p>How can we break the business-as-usual cycle...</p>
  132. <p>In our design</p>
  133. <p>In our process</p>
  134. <p>In our company</p>
  135. <p>In our community</p>
  136. <p>In our personal life</p>
  137. <p>In our design</p>
  138. <p>Set solid design principles</p>
  139. <p>Crown Hall, Illinois Institute of Technology, Chicago (1956). Architectural Press Archive / RIBA Collections</p>
  140. <p>Design principles that strive for reduction and simplification have been around for a while. The philosophy at the core of the 20th century Modernist aesthetic movement, for example, lay the idea that the world had to be fundamentally rethought and streamlined, promoting sleek, clean lines and eliminating decorative additions that were purely for the sake of embellishment. </p>
  141. <p>Thirty years ago, Don Norman published The Design of Everyday Things, outlining principles product designers who wanted to create better experiences should follow. Today, in the age of intangible digital products, we need to decide —and stick to— larger principles that will guide our work. </p>
  142. <p>Where to start:</p>
  143. <p>Massimo Vignelli →</p>
  144. <p>Vignelli has made a fundamental contribution to the world of design by keeping alive and promoting the evolution of the ethical principles developed by the Modern Movement in the early 20th century.</p>
  145. <p>Dieter Rams →</p>
  146. <p>Industrial designer at the helm of the creative direction of the German brand Braun. Rams led one of the most important movements of the industrial design world, known as functionalism.</p>
  147. <p>More recently:</p>
  148. <p>Ruined by Design →</p>
  149. <p>Inspired by Victor Papanek’s understanding of the relationship between design and politics as well as the current state of the tech industry, this book by Mike Monteiro argues that designers have destroyed the world and offers practical advice on how we can fix it. </p>
  150. <p>Calm Tech Principles →</p>
  151. <p>Coined in 1995 by PARC Researchers Mark Weiser and John Seely Brown in reaction to the increasing complexities created by information technologies, the “Calm Technology” movement has been led by researcher and author Amber Case.</p>
  152. <p>In our design</p>
  153. <p>Choose respectful design patterns</p>
  154. <p>“</p>
  155. <p>Design reproduces dominant relationships unless there is a deliberate effort to change them.</p>
  156. <p>—Dan Zollman</p>
  157. <p>As designers, we can play a crucial role in the creation of healthier products and services. Ultimately, we are the ones choosing UI patterns, writing copy, and defining flows and interactions. So it’s on us to question whether we are doing our jobs responsibly. The same way tech addiction is created through design, design can also be used to promote a healthier relationship with technology.</p>
  158. <p>Stop endless scroll</p>
  159. <p>Instead of designing for infinite engagement, what if we prioritized more relevant content?</p>
  160. <p>Reduce notifications</p>
  161. <p>Not everything is important. What if we rethought our notification strategy to be more mindful of people’s attention and time?</p>
  162. <p>Reveal info gradually</p>
  163. <p>What if instead of giving users all information at once, we were more thoughtful about when and how each message is revealed?</p>
  164. <p>Give them control</p>
  165. <p>What if we design user experiences that are more transparent,giving people control over their level of engagement?</p>
  166. <p>Further reading:</p>
  167. <p>Humane by Design →</p>
  168. <p>Humane by Design is a resource that provides guidance for designing ethically responsible digital products through patterns focused on user well-being.</p>
  169. <p>Design for Behavior Change →</p>
  170. <p>Stephen Wendel's book is a practical guide to designing for behavior change, highlighting the importance of mastering behavioral design in order to use them for good.</p>
  171. <p>In our process</p>
  172. <p>Run better research</p>
  173. <p>Research helps us better understand our users. However, not all research is equally effective. </p>
  174. <p>Know your tools and when to use them</p>
  175. <p>If not well planned, research can be misleading: a usability test session may show users are able to act quickly on a task, but neglect to ask how this task impacts them and whether they even want to perform it in the first place. Foundational research (such as an ethnographic study), done early and often, can help bring the user perspective to your team and to the product strategy — before you jump into directional studies (like a usability testing).</p>
  176. <p>→</p>
  177. <p>Go wide in your research</p>
  178. <p>Even when planning directional research, use the opportunity to understand broader user behaviors and orientations towards your product and towards tech more generally. Set up the interview as a conversation and try to learn more about the following: </p>
  179. <p>• In what context do they use your product? </p>
  180. <p>• How does the product influence their relationships with others around them? </p>
  181. <p>• By using your product, what are they giving up? </p>
  182. <p>• What else can you learn about them that you don't know yet?</p>
  183. <p>→</p>
  184. <p>Be mindful about how you frame questions </p>
  185. <p>According to Erika Hall, "The big research question is what you want to know, not what you ask in an interview. In fact, asking your research question directly is often the worst way to learn anything.”</p>
  186. <p>→</p>
  187. <p>In our process</p>
  188. <p>Challenge default metrics</p>
  189. <p>“</p>
  190. <p>Until we measure what we value, we will over-value what we measure.</p>
  191. <p>—Kim Goodwin at IAC19</p>
  192. <p>There are two common scenarios when it comes to metrics:</p>
  193. <p>•</p>
  194. <p>The business has a focus on growth metrics and the design work is limited to aggressively improving those numbers; or</p>
  195. <p>•</p>
  196. <p>The business has not established its own metrics and relies on canned metrics, meaning the design work is disconnected from its impact on users.</p>
  197. <p>Both scenarios can be quite damaging and can lead to designers using dark patterns to hit their goals faster. </p>
  198. <p>Designers need to be part of the metric discussion not only to bring in the user's perspective but to keep in check how a particular metric can influence or be influenced by the whole product ecosystem.</p>
  199. <p>For each business metric, the product can have a user-centered metric as well as a counter-metric to keep the bigger picture in play. </p>
  200. <p>Forget growth hacks</p>
  201. <p>Counter-metrics can help you to avoid both the "get rich quick" scheme mentality of crazy growth metrics as well as the "end justifies the means" philosophy that justifies creating addictive and unhealthy behaviors in users.</p>
  202. <p>→</p>
  203. <p>Follow your heart</p>
  204. <p>Google's HEART framework is a great way to start talking about metrics. Remember that your users don't just want to be "happy"; try to be specific about how each goal translates into their personal objectives.</p>
  205. <p>→</p>
  206. <p>Measure what you value</p>
  207. <p>If improving people's relationships with tech is something you value, you should measure it — and make people accountable for it. Quoting Kim Goodwin at the IAC 2019: "until we measure what we value, we will over-value what we measure".</p>
  208. <p>→</p>
  209. <p>In our process</p>
  210. <p>Anticipate unhealthy behaviors</p>
  211. <p>Imagine this: A young woman joins the LGBTQ choir at her college. Her choir leader adds her to the group’s Facebook page, and Facebook automatically shares this action on the student’s Newsfeed. However, she had not come out to her family yet. When they see the news on Facebook, the extremely religious community from her hometown sends her hate mail. (Mike Monteiro)</p>
  212. <p>As designers, we are used to thinking about happy paths, ideal flows, and all the great ways people will engage with our products. But what are some of the ways they can cause unintended harms?</p>
  213. <p>Here are some questions you can use to brainstorm on your own or with your team:</p>
  214. <p>Depression</p>
  215. <p>Is your product stimulating depressive behaviors, or could your product experience aggravate symptoms of depression? How might a person with depression or someone experiencing suicidal thoughts use your product to hurt themselves?</p>
  216. <p>Addiction</p>
  217. <p>Does your product encourage addictive behaviors? What is the worst case scenario for users susceptible to addiction?</p>
  218. <p>Exclusion</p>
  219. <p>Is your product accessible to all user groups, regardless of disabilities, culture, education levels, and language? Is it possible that your product could be used to exclude certain groups? Or does your product unwittingly perpetuate cycles of exclusion?</p>
  220. <p>Oversharing </p>
  221. <p>Does your product encourage sharing personal information? What are some of the possible negative outcomes of that overexposure? What emotions can content trigger in other users and what kinds of effects might these emotions have?</p>
  222. <p>Abusive relationships</p>
  223. <p>Could someone take advantage of your product or platform to create a relationship of unhealthy dependence or domination with another user (e.g. blackmail, bribery)?</p>
  224. <p>How to act:</p>
  225. <p>Brainstorm unintended, unhealthy behaviors</p>
  226. <p>Consider how people could misuse your features and what type of bad behaviors can happen currently and in the future.</p>
  227. <p>→</p>
  228. <p>Dive deeper in user research</p>
  229. <p>How would these behaviors make people feel? Use research not only to test the desired flow but also when your product fails.</p>
  230. <p>→</p>
  231. <p>Quantify the current state</p>
  232. <p>Include in your metrics and analysis the current state of bad behaviors as well as future risks that it can create.</p>
  233. <p>→</p>
  234. <p>Seek opportunity for positive impact</p>
  235. <p>Think of ways your company can create a positive impact or educate users around the issue of healthier tech behaviors and then align these objectives with your product goals.</p>
  236. <p>→</p>
  237. <p>Generate awareness </p>
  238. <p>Share your work on preventing unhealthy behaviors with your organization to increase awareness and buy-in.</p>
  239. <p>→</p>
  240. <p>In our organization</p>
  241. <p>Convince your
  242. C-levels</p>
  243. <p>“</p>
  244. <p>If your business depends on dark patterns to succeed, you’re just leaving yourself open to being disrupted.</p>
  245. <p>—Harry Brignull</p>
  246. <p>The threat of negative press is a powerful incentive for change in organizations — especially when it comes to those actions that depend on top-down decisions from high-up stakeholders. The mere possibility of having to deal with a PR crisis creates fear: no one wants to have their brand associated with crimes, catastrophes, or misuse of user data.</p>
  247. <p>Sometimes mockups speak louder than strategy slides </p>
  248. <p>As product designers, we shouldn’t be driving our decisions around negative PR headlines. But if we need to speak C-level language, mocking fake press releases are definitely an effective way to grab executive level attention.</p>
  249. <p>Have a conversation about long-term health</p>
  250. <p>Despite the fact that dark patterns bring short-term gains, experts agree that implementing them in your business is a bad idea. The initial boost in the number of new users rarely results in an increase of loyal customers, as deception tends to erode trust. Show the higher ups examples of companies who have been focusing too much on short-term goals and struggling to maintain their long-term platform health — as well as the initiatives they have started to take to fix that issue.</p>
  251. <p>→</p>
  252. <p>Create actionable fear</p>
  253. <p>Write and mock up fake headlines that shows the bad behaviors that can happen in your platform. Include them in your presentations and pose the question, “What can we do to avoid these issues?” For each problem you bring to colleagues’ attention, make sure to follow up with tangible design principles (or Dos and Don’ts slides) that will help your team avoid worst-case scenarios. </p>
  254. <p>→</p>
  255. <p>Show positive results</p>
  256. <p>Remind your team of past initiatives and design updates your company has made to control bad behavior, and the results you have seen. Building on top of previous efforts will feel less daunting than creating net new initiatives or features.</p>
  257. <p>→</p>
  258. <p>In our organization</p>
  259. <p>Spread healthier habits at work</p>
  260. <p>“</p>
  261. <p>We can’t change a system unless we have a shared understanding and shared language.</p>
  262. <p>—Tristan Harris</p>
  263. <p>If you work in an environment where people don't respect each other’s use of tech, chances are you are not going to advocate being respectful of the tech habits of your own users.</p>
  264. <p>How to act:</p>
  265. <p>Respect people's calendars</p>
  266. <p>Don’t schedule too many meetings in a row, after hours, or during lunchtime; Just because you found a magic spot on their calendar doesn't mean that the person is available.</p>
  267. <p>→</p>
  268. <p>Plan your meetings</p>
  269. <p>A meeting shouldn't be a surprise. Make everyone comfortable by communicating your agenda in advance Share artifacts before the meeting and reserve the first few minutes for colleagues to read them in silence so that everyone is up-to-speed before the discussion starts.</p>
  270. <p>→</p>
  271. <p>Don't bring your computer to a meeting</p>
  272. <p>If you don't need your computer in the meeting, leaving it at your desk can help you focus your attention and make the most of the time with your team. Likewise, avoid checking your phone (or don't even bring it).</p>
  273. <p>→</p>
  274. <p>Send shorter emails and don't Slack after hours</p>
  275. <p>The easiest it is to send a message, bigger are the chances that people will misuse it. The message goal is not to get it out of your way, but to share it with someone else. Therefore, the receiver side is more important than yours as a sender.</p>
  276. <p>→</p>
  277. <p>Don't rush to reply or to follow up</p>
  278. <p>If it is that urgent (it rarely is), talking in person might be more effective. Give people time.</p>
  279. <p>→</p>
  280. <p>Use whiteboards more often</p>
  281. <p>Whiteboards, pen and paper, and the gold-old post-its can help to visualize what is being discussed, improving alignment, collaboration, and focus.</p>
  282. <p>→</p>
  283. <p>Discuss work policies</p>
  284. <p>Discuss with your team which practices you could adjust or implement (e.g. remote work, meeting frequency, feedback channels) in your company to encourage a healthier work-life balance.</p>
  285. <p>→</p>
  286. <p>Run retrospectives</p>
  287. <p>Retrospective meetings are a great way to check-in with people about how they are feeling regarding workloads and team dynamics. Use this opportunity to check on whether people are implementing healthier tech habits or if they need more guidance or encouragement.</p>
  288. <p>→</p>
  289. <p>Lead by example</p>
  290. <p>Design directors and managers: lead by example. If you don’t pull out your phone during a meeting, chances are no one else in the room will either.</p>
  291. <p>→</p>
  292. <p>In our community</p>
  293. <p>Engage beyond panels</p>
  294. <p>If design is the rendering of intent, just having the intention is not enough: we need to execute it. How can we engage past our own bubble to make real impact in the world?</p>
  295. <p>→</p>
  296. <p>Reach out to other specialists</p>
  297. <p>While designers hold much of the responsibility for the impact of technology on people's lives, professionals like sociologists, anthropologists, and other researchers who study our relationship with technology hold valuable insights into what we do.</p>
  298. <p>Go beyond your own bubble</p>
  299. <p>The best people to talk to about kids and tech? Parents. The best people to talk to about tech in schools? Students and teachers. Join conversations with people who have a shared interest in this topic, not just a shared background with you.</p>
  300. <p>→</p>
  301. <p>Be a team player</p>
  302. <p>We don't hold the answers. Often our role is facilitating rather than solving it. Give support to the specialists and groups that are making a difference.</p>
  303. <p>→</p>
  304. <p>Volunteer your craft</p>
  305. <p>Instead of just talking about it, make your craft available to help non profits (or build side projects) that are making a difference in creating a healthier relationship with technology.</p>
  306. <p>→</p>
  307. <p>In our personal life</p>
  308. <p>Design your own tech diet</p>
  309. <p>Look at the world around you: the spaces, objects, and interfaces you interact with on a daily basis. As a designer, you could be thinking about how to best design these things — and how creating the right digital guardrails can have a positive impact on your routine.</p>
  310. <p>Understand your own use cases</p>
  311. <p>Asking yourself questions like these will help you identify parts of your day where you could be spending less time or making less decisions:</p>
  312. <p>• How many times through the course of a workday do you reach for a pen and a piece of paper to sketch something out?</p>
  313. <p>• How do you dress on the weekdays (when you are in a hurry) vs. on the weekends (when you may have more time, and feel a little more adventurous)?</p>
  314. <p>• What are the three things you need to bring with you every time you leave the house?</p>
  315. <p>→</p>
  316. <p>Defining your personal KPIs</p>
  317. <p>The next step is to define what is important to you. What are you trying to achieve with a simpler or easier life, and why? What are the personal metrics you should design against?</p>
  318. <p>• Less time spent: what are the tasks you repeat every day that can be optimized or automated to save you time? </p>
  319. <p>• Less forgetting: how can you reduce the number of times you forget things? </p>
  320. <p>• Less decision-making: how can you reduce the number of decisions you have to make throughout the day?</p>
  321. <p>→</p>
  322. <p>Implement and iterate</p>
  323. <p>Finally, time to take action.</p>
  324. <p>• Turn off badges and notifications on your phone</p>
  325. <p>• Move apps away from your phone home screen and open less important apps by typing</p>
  326. <p>• Charge your phone outside the bedroom</p>
  327. <p>• Find time to go offline for a few hours a day</p>
  328. <p>→</p>
  329. <p>Designing your life begins with designing the environment around you. Most importantly: share these new behaviors with your family, friends, and people who do not work in tech. As early adopters of technology, we are responsible for influencing the less nerdy folks around us.</p>
  330. <p>Futher reading:</p>
  331. <p>The Informed Life →</p>
  332. <p>The Informed Life is an interview-based podcast by Jorge Arango that explores how people from different fields manage their personal information ecosystems to be more effective. </p>
  333. <p>In our personal life</p>
  334. <p>Hold other companies accountable</p>
  335. <p>“</p>
  336. <p>It doesn’t matter if our field holds values like respect dear, if we’re not able to get businesses and institutions to adopt those values and apply them to their work.</p>
  337. <p>—Cyd Harrell</p>
  338. <p>In the past few years, there has been a bigger mobilization to make companies accountable for bad practices in their workplace and in their products. To mitigate a potential crisis, companies started to make announcements about privacy and well-being, but without actually changing their business practices. As designers, we can take a stand against addictive engagement — and actually do something about it.</p>
  339. <p>Report as spam</p>
  340. <p>Any time you receive an unsolicited email or phone call, or are added to a distribution list without permission, use the tools at your disposal to flag this content as inappropriate.</p>
  341. <p>Leave honest reviews</p>
  342. <p>Frustrated with an app that is creating anxiety or triggering unhealthy emotions? Leave a comment on the app store so other people can be better informed before deciding to download it.</p>
  343. <p>Change your consumption habits</p>
  344. <p>Choose companies whose values align with yours. Choose companies that respect your time and attention. Complaining about a social network but continuing to use it won’t make change happen.</p>
  345. <p>Tweet about it</p>
  346. <p>See a dark pattern? Take a screenshot, tweet it, and tag the company. Companies are always tracking mentions to anticipate PR nightmares. This is not about public-shaming other designers, but creating action within that company — while also increasing awareness among your friends and followers about the products they use.</p>
  347. <p>Dear @Linkedin, why don’t you include the message in the email itself? Do we really need the red notification badge at the top?</p>
  348. <p>It’s not a detox, it’s a re-education</p>
  349. <p>Be wary of “digital detoxes”. Similar to our relationship with food, short-term fad diets don’t create long-lasting change but often instill a sense of failure and shame instead.</p>
  350. <p>Digital nutrition is about developing and implementing cognitive skills and creating new habits to help us stay in control of our technology consumption.</p>
  351. <p>We know that calls for change are easier said than done. The reality of the corporate world is harsh, and leaves very little room for anything that is not driving short-term business results. Designers are in a unique position to spark change, by influencing product decisions, C-level execs and users themselves. To be the change we want to see in the world, we need to start somewhere.</p>
  352. </article>
  353. <hr>
  354. <footer>
  355. <p>
  356. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  357. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  358. </svg> Accueil</a> •
  359. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  360. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  361. </svg> Suivre</a> •
  362. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  363. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  364. </svg> Pro</a> •
  365. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  366. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  367. </svg> Email</a> •
  368. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  369. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  370. </svg> Légal</abbr>
  371. </p>
  372. <template id="theme-selector">
  373. <form>
  374. <fieldset>
  375. <legend><svg class="icon icon-brightness-contrast">
  376. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  377. </svg> Thème</legend>
  378. <label>
  379. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  380. </label>
  381. <label>
  382. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  383. </label>
  384. <label>
  385. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  386. </label>
  387. </fieldset>
  388. </form>
  389. </template>
  390. </footer>
  391. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  392. <script>
  393. function loadThemeForm(templateName) {
  394. const themeSelectorTemplate = document.querySelector(templateName)
  395. const form = themeSelectorTemplate.content.firstElementChild
  396. themeSelectorTemplate.replaceWith(form)
  397. form.addEventListener('change', (e) => {
  398. const chosenColorScheme = e.target.value
  399. localStorage.setItem('theme', chosenColorScheme)
  400. toggleTheme(chosenColorScheme)
  401. })
  402. const selectedTheme = localStorage.getItem('theme')
  403. if (selectedTheme && selectedTheme !== 'undefined') {
  404. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  405. }
  406. }
  407. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  408. window.addEventListener('load', () => {
  409. let hasDarkRules = false
  410. for (const styleSheet of Array.from(document.styleSheets)) {
  411. let mediaRules = []
  412. for (const cssRule of styleSheet.cssRules) {
  413. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  414. continue
  415. }
  416. // WARNING: Safari does not have/supports `conditionText`.
  417. if (cssRule.conditionText) {
  418. if (cssRule.conditionText !== prefersColorSchemeDark) {
  419. continue
  420. }
  421. } else {
  422. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  423. continue
  424. }
  425. }
  426. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  427. }
  428. // WARNING: do not try to insert a Rule to a styleSheet you are
  429. // currently iterating on, otherwise the browser will be stuck
  430. // in a infinite loop…
  431. for (const mediaRule of mediaRules) {
  432. styleSheet.insertRule(mediaRule.cssText)
  433. hasDarkRules = true
  434. }
  435. }
  436. if (hasDarkRules) {
  437. loadThemeForm('#theme-selector')
  438. }
  439. })
  440. </script>
  441. </body>
  442. </html>