davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Ask LukeW: New Ways into Web Content (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.lukew.com/ff/entry.asp?2008">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Ask LukeW: New Ways into Web Content</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.lukew.com/ff/entry.asp?2008" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p class="feature">Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site at: <a href="https://ask.lukew.com">ask.lukew.com</a></p>

<p>Though quiet recently, this site built up a <a href="https://www.lukew.com/ff/">decent amount</a> of content over the past 27 years. Specifically, there's nearly 2,000 text articles, 375 presentations, 60 videos, and 3 books worth of explorations and explanations about all forms of digital product design from early Web sites to Mobile apps to Augmented Reality experiences.</p>

<p><a href="//static.lukew.com/ask_lukew_data_2x.png"><img src="//static.lukew.com/ask_lukew_data.png" srcset="//static.lukew.com/ask_lukew_data.png, //static.lukew.com/ask_lukew_data_2x.png 2x" alt="2,000 articles, 375 presentations, 57 videos on LukeW's site"></a>
</p>

<p>Anyone interested in these materials, has essentially two options: search or browse. Searching (primarily through Google) gets people to a specific article, presentation, or video when they have a sense of what they're looking for. Browsing (on this site or other sites with links to this one) helps people discover things they might not have been explicitly looking for.</p>

<p>But with over half a million written words, three and a half thousand minutes of video, and thousands of images it's hard to know what's available, to connect related content, and ultimately get the most value out of this site.</p>

<p><a href="//static.lukew.com/ask_lukew_data2_2x.png"><img src="//static.lukew.com/ask_lukew_data2.png" srcset="//static.lukew.com/ask_lukew_data2.png, //static.lukew.com/ask_lukew_data2_2x.png 2x" alt="Search or browse the content on LukeW Ideation and Design"></a>
</p>

<p>Enter <a href="https://www.computer.org/csdl/magazine/co/2022/05/09771130/1DeEYd2FXZm">large-scale AI models for language</a> (LLMs). By making use of these models to perform a variety of language operations, we can re-index the content on this site by concepts using embeddings, and generate new ways to interact with it.</p>

<p>We make use of large-language models to:</p>
<ul>
<li>summarize articles</li>
<li>extract key concepts from articles</li>
<li>create follow-on questions to ask with specific articles</li>
<li>make exploratory questions to expose people to new content</li>
<li>generate answers in response to what people ask</li>
</ul>
<p>This combination of language operations adds up to a very different new way to experience the content on <a href="https://ask.lukew.com">lukew.com</a></p>

<p><a href="//static.lukew.com/ask_lukew_questions_2x.png"><img src="//static.lukew.com/ask_lukew_questions.png" srcset="//static.lukew.com/ask_lukew_questions.png, //static.lukew.com/ask_lukew_questions_2x.png 2x" alt="Suggested questions in the Ask LukeW interface"></a>
</p>

<p><a href="https://ask.lukew.com">Ask LukeW</a> starts off with a series of suggested questions that change each time someone loads the page. This not only helps with the "what should I ask?" problem of empty text fields but is also a compelling way to explore what the site has to offer. Of course, someone can start with their own specific question. But in testing, many folks gravitate to the suggestions first, which helps expose people to more of the breadth and depth of available content.</p>

<p><a href="//static.lukew.com/ask_lukew_answer2_2x.png"><img src="//static.lukew.com/ask_lukew_answer2.png" srcset="//static.lukew.com/ask_lukew_answer2.png, //static.lukew.com/ask_lukew_answer2_2x.png 2x" alt="Generated answers and visual sources in the Ask LukeW interface"></a>
</p>

<p>After someone selects a question or types their own question, we generate an answer using the corpus of information on lukew.com. These results tend to be more opinionated than what a large language model operating solely on a much bigger set of content (like the Web) provides, even with prompt engineering to direct it toward specific kinds of answers (i.e. UI design-focused).</p>

<p><a href="//static.lukew.com/ask_lukew_corpus_2x.png"><img src="//static.lukew.com/ask_lukew_corpus.png" srcset="//static.lukew.com/ask_lukew_corpus.png, //static.lukew.com/ask_lukew_corpus_2x.png 2x" alt="Comparing answers from a fixed corpus to ChatGPT in the Ask LukeW interface"></a>
</p>

<p>The content we use to answer someone's question can come from one or more articles so we give provide visual sources to make this clear. In the current build, we're citing Web pages but PDFs and videos are next. It's also worth noting that we follow-up each answer with additional suggested questions to once again give people a better sense of what they can ask next. No dead ends.</p>

<p><a href="//static.lukew.com/ask_lukew_objects_2x.png"><img src="//static.lukew.com/ask_lukew_objects.png" srcset="//static.lukew.com/ask_lukew_objects.png, //static.lukew.com/ask_lukew_objects_2x.png 2x" alt="Sources object cards from the Ask LukeW interface"></a>
</p>

<p>If someone wants to go deeper into any of the sourced materials, they can select the card and get an article-specific experience. Here we make use of LLM language operations to create a summary, extract related topics and provide suggested questions that the article can answer. People can ask questions of just this document (as indicated by the green article "chip" in the question bar) or go back to site-wide questions by tapping the close (x) icon.</p>

<p><a href="//static.lukew.com/ask_lukew_article_2x.png"><img src="//static.lukew.com/ask_lukew_article.png" srcset="//static.lukew.com/ask_lukew_article.png, //static.lukew.com/ask_lukew_article_2x.png 2x" alt="Article specific features in  the Ask LukeW interface"></a>
</p>

<p>As the number of answers builds up, we collapse each one automatically, so people can focus on the current question they've asked. This also makes it easier to scroll through a long conversation and pick out answers from short summaries consisting of the question and the first two lines of its answer.</p>

<p>People can also pin individual question and answer pairs to save them for later and come back to previous conversations in addition to making new ones using the menu bar on the left.</p>

<p><a href="//static.lukew.com/ask_lukew_conversation_2x.png"><img src="//static.lukew.com/ask_lukew_conversation.png" srcset="//static.lukew.com/ask_lukew_conversation.png, //static.lukew.com/ask_lukew_conversation_2x.png 2x" alt="Conversation listing in the Ask LukeW interface"></a>
</p>

<p>While there's a number of features in the <a href="https://ask.lukew.com">Ask LukeW</a> interface, it's mostly a beta. We don't save state from question to question so the kind of ongoing dialog people may expect from <a href="https://openai.com/blog/chatgpt">ChatGPT</a> isn't there yet, pinned answers and saved conversations are only done locally (cookie-based) and as mentioned before, PDFs and videos aren't yet part of the index.</p>

<p>Despite that, it's been interesting to explore how an existing body of content can gain new life using large-language model technology. I've been regularly surprised and interested by questions like:</p>

<ul>
<li>How can progressive enhancement be used in software development?
</li><li>What are the central mental traits that people unconsciously display through the products they buy?</li>
<li>What are the design considerations for touch-based apps for kids?</li>
<li>What is small multiples and how can it help people make sense of large amounts of information quickly and easily?</li>
<li>What is the debate around the utility of usability testing in design?</li>
</ul>

<p>And I wrote all this content! Since that happened across a quarter century, maybe it's not that surprising that I don't remember it all. Anyhow... hope you also enjoy trying out <a href="https://ask.lukew.com">ask.lukew.com</a> and feel free to <a href="https://www.lukew.com/about/">send</a> any ideas or comments over.</p>

<h2>Acknowledgments</h2>
<p>Big thanks to <a href="https://liyangguang.com/">Yangguang Li</a> (front end), <a href="https://twitter.com/swissgrid">Thanh Tran</a> (design), and <a href="https://twitter.com/sampullara">Sam Pullara</a> (back end) in helping pull together this <a href="https://ask.lukew.com">exploration</a>.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>