
<h2 className="micro">The Context</h2>

We are all familiar with the recommendation algorithm – the dark forces that shove fad-diet-shills, flat-earthers, and Jordan Peterson into our feeds.

They've become a modern myth. There are a thousand moral panic op-eds raising the alarms; algorithms are controlling us, manipulating us, radicalizing us, and preying on our insecurities and "secret desires." All just to sell us overengineered toothbrushes, vegan whey powder, and blow-up paddling pools, among other goodies.

While it's unclear whether algorithms are truly "harming the children"<Footnote idName={1}>And other such hand-wavy claims that fail to clearly define 'algorithms', 'harm', or identify which specific children we should be morally panicked about</Footnote>, there's still a few legitimate concerns in the ways we're allowed to interact with them in modern interfaces.

For a start, we aren't told what kinds of data go into our algorithmic systems, and have no visibility into why certain results come out. Most algorithm-driven interfaces blackbox their internal logic and decision-making rules. Faced with these opaque systems, we end up fetishising the algorithms – we attribute human agency and capacities to them, and in doing so hide the very real human agents designing and maintaining them. We call them "magic" to dismiss the need to make them legible to users.

As an audience we have no visibility into what metrics the engineers are optimising for. The engineers themselves don't always understand how the algorithms choose what to recommend. The lack of transparency makes it difficult to understand why we're shown certain content. It hides the fact some algorithms maximise for qualities like emotional outrage, shock value, and political extremism. We lack the agency to evaluate and change the algorithms serving us content.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

When an automated system recommends a piece of content, it should include an [[Epistemic Disclosure]] message explaining **why** it suggested it, and what factors went into that decision.

Transparency tips integrated into user interfaces like “**Recomended because you liked Pride and Prejudice**" or “**Recommended because Mary Douglas read this**” help us see the chain of logic.

Transparency alone isn't enough though. Users should have control over the data that feeds algorithmic systems they're subjected to. We should be able to to remove whole input sources, as well as individual pieces of content.

Pinterest does a good job of telling you why you're seeing certain pins, as well as giving you controls to remove the pin and see fewer like it:

<BasicImage
  width="800px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_800/v1640730625/maggieappleton.com/patterns/algo_6_kai29c.jpg"
  alt="A screenshot of the Pinterest interface saying why a specific pin was recommended"
/>

They also have a "tune your home feed" settings page where you can remove specific pins, boards, or topics:

<ImageFrame
  width="1000px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1000/v1640730625/maggieappleton.com/patterns/algo_4_pqaggw.jpg"
  alt="A screenshot of the Pinterest setting page where you can tune your home feed"
/>

Despite being a notorious algorithmic bad boy, YouTube also gives you the ability to mark videos in your feed as "not interested"<Footnote idName={1}>Although anecdotally, no matter how many times I say I don't want Jordan Peterson videos, they keep showing up</Footnote> or "don't recommend channel", then follows up asking _why_ you marked it.

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_1_r8i1y4.jpg"
  alt="The YouTube homescreen with the options menu expanded on a single video"
/>

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_2_tw5bws.jpg"
  alt="The YouTube homescreen after you select 'not interested' with a modal asking why you're not interested"
/>

They also offer a "remove this video" option on your watch history page:

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_3_yd68as.jpg"
  alt="The YouTube watch history page with the option to remove a video from it"
/>

Letting users remove single videos/posts/tweets/whathaveyous from their algorithmic soup is the bare minimum for any platform. We're a long way from meaningful transparency that makes internal algorithmic decisions clear and empowers users to design their own feeds.


Algorithms that make their reasoning visible

Algorithmic Transparency


<AssumedAudience>
  Active readers and writers of the web. Particularly ones frustrated by context
  collapse and the proliferation of generic articles that try to accomodate
  every possible audience online
</AssumedAudience>

<h2 className="micro">The Context</h2>

Readers are a problem for every writer. Writers have to write for a specific person. That specific person is almost always imaginary. Anytime you put writing in public, posted somewhere a vast range of people might happen upon it, imagining the reader becomes an exercise in desperate speculation.

Who is truly reading this? I haven't a clue.

All I can do it guess. I have to _assume_ things about you. Assumptions I make based off the other people my Twitter neighbourhood and extended gardening network.

This includes how much you know about the history of hypertext. Whether you're caught up on the latest JavaScript framework gossip. How much you can tell me about embodied cognition and its role in interface design. Whether you know who Clifford Geertz, Bret Victor, Ted Nelson, and George Lakoff are.

If I assume incorrectly, I'll lose you in the middle of a sentence – either because I'll assume you know more than you do, and drown you in unfamiliar words and alienating jargon. Or I'll assume too little and bore you with basic, repetitive definitions of things you personally helped invent.

If I don't make clear who I'm writing for, and you don't know who should be reading this, we're far more likely to end up in an unsatisfying reader/writer mismatch.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

At the beginning of many of my posts, I have a small informational box that tells you my **assumed audience** – who I think I'm writing this piece for.

A few examples to illustrate the point:

<AssumedAudience>
  JavaScript developers who have some familiarity with data visualisation,
  interactive narratives, and/or scrollytelling articles.
</AssumedAudience>

<AssumedAudience>
  People who understand the basic historical arc of postmodernism,
  post-postmodernism, the rationalist movement, and the post-rationalists. Would
  describe yourself as Very Online.
</AssumedAudience>

These small boxes free both of us of unspoken obligations and expectations. As the writer, I am now free to write for an informed audience without defining every term and qualifying every statement. We can jump straight to the gritty details and contentious debates rather than doing a full literature review of the field.

You still might no have a clue what I'm talking about, but you were forewarned. You have chosen to venture into this article as a bemused voyeur – willing to sacrifice comprehension to feed your curiosity.

The same way you might eavesdrops on a conversation between two Dev Ops engineers vehemently fighting over the practicality of kubernetes. None of us know what they're saying, but the jargon is to die for.

<References>
  <ReferencesLink
    title="Assumed Audience: everyone on the internet"
    href="https://v4.chriskrycho.com/2018/assumed-audiences.html"
    author="Chris Krycho"
  />
</References>


Naming your invisible audiences to free yourself from unspoken obligations

Assumed Audiences


<h2 className="micro">The Context</h2>

For most of the words we read online, we have a limited amount of context about the writer and how much effort they've put into the piece we're reading.

We might have a name and tiny 32px profile image. We don't know how long it took them to write these words, how many hundreds of tabs they read through, or whether they spent years earning a graduate degree on the topic. We rarely have a rich backstory with a comprehensive educational and professional history at hand.

If we disagree with their points, we're more likely to be ungenerous Epistemic Peers who assume the worst: they've barfed this garbage up in a single, frenzied caffeine rush and haven't so much as opened Google Scholar to check for prior art.

That might all be true. Which is fine. As long as they _disclose_ the situation up front. The only true source of dissapointment – in both reading and life – is unmet expectations.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

At the beginning of a piece of writing, the author writes a sentence or two about the **epistemic status** of the work. _Epistemology_ is the study of knowledge – how we know things, the methods we use to gain knowledge, and how we validate knowledge as "true." So an _epistemic status_ usually covers how the author came to know what they know. This includes how much effort they put into researching it, how they validated the information, and how sure they are about their conclusions.

Scott Alexander of [Slate Star Codex](https://slatestarcodex.com/) was one of the earliest well-known bloggers to do this. Many of his posts include statuses that range from "total conjecture" to "pretty good, but I make no claim this is original." Here's a few more choice examples:

<ImageFrame
  style={{ margin: "0 auto 1rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/v1641161435/maggieappleton.com/patterns/epistemic1_w0umsf.png"
  alt="A Scott Alexander post with the epistemic status more crackpottish than usual"
/>

<ImageFrame
  style={{ margin: "0 auto 1rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/v1641161787/maggieappleton.com/patterns/epistemic2_syifue.png"
  alt="A Scott Alexander post with the epistemic status very speculative"
/>

<ImageFrame
  style={{ margin: "0 auto 2rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/v1641161787/maggieappleton.com/patterns/epistemic3_meynmd.png"
  alt="A Scott Alexander post with the epistemic status very speculative and not necessarily endorsed"
/>

[Gwern](https://www.gwern.net/) is another blogger who adds rich metadata to each post. They have a numerical "certainty" rating on each post:

<ImageFrame
  style={{ marginTop: 0 }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/v1641198514/maggieappleton.com/patterns/gwernepistemic_1_jpo0dp.png"
  alt="A Gwern post on spaced repetition with a certainty rating of highly likely"
/>

The rationalist and Effective Altruist communities have been particularly enthusiastic about the pattern. In true Rationalist style, one person write up a comprehensive proposal to [standardize epistemic statuses](https://www.reddit.com/r/LessWrong/comments/eesr4y/a_proposal_for_standardizing_epistemic_status/) on the r/LessWrong subreddit.

<References>
  <ReferencesLink
    title="Epistemic Effort on LessWrong"
    href="https://www.lesswrong.com/posts/oDy27zfRf8uAbJR6M/epistemic-effort"
    author="Raemon"
  />
  <ReferencesLink
    title="Epistemic Statuses are Lazy and that is a Good Thing"
    href="https://devonzuegel.com/post/epistemic-statuses-are-lazy-and-that-is-a-good-thing"
    author="Devon Zuegal"
  />
</References>


Providing clear metadata on the epistemic validity of content

Epistemic Disclosure


<h2 className="micro">The Context</h2>

Our web browsing experience hasn't changed much over the last three decades.

Here's Mosaic, the first browser that made the web popular outside niche academic circles. Built in 1993, its _"killer feature"_ was inline images.<Footnote idName={1}>As opposed to images you had to download and open in a separate window</Footnote>

<ImageFrame
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_900/v1642358019/maggieappleton.com/patterns/moasic_fxat9i.png"
  alt="The Mosaic web browser interface in 1993"
/>

And here's Chrome, currently the most widely used browser, 29 years later:

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1642358018/maggieappleton.com/patterns/chrome_wbjk5d.png"
  alt="The Chrome browser interface from 2019"
/>

On the surface, not much has changed. The layouts, icons, and button arrangement haven't moved. Address bar at the top. Arrow icons to move between pages. Access to the same basic controls; print, refresh, save, and search.

Modern Chrome certainly gained the veneer of minimalist modern design; we've reduced the interface to a low-contrast sea of whitespace. It's also vastly more powerful; 1993 Mosaic certainly couldn't load 20 tabs running WebGL animations.

But from a user's perspective, the core browsing experience isn't different. Enter URL, load the page, click on links, move forwards and backwards in browser history. We can only see one website at a time, or max two if we stack our browser windows in columns.

Chrome and Mosaic are not uniquely similar. All the major characters in this browser drama – Firefox, Safari, Opera, and Internet Explorer/Edge – feel like they're wearing the same outfit.

This historical consistency is impressive. Perhaps it means we nailed this interface pattern on the first try. Or perhaps it means building browsers is an enourmously complex challenge, and the only companies with enough engineering resources to dedicate towards it aren't interested in mucking about. They're too busy keeping up with W3C web standards and negotiating cross-compatability concerns, leaving little room for experimental interface patterns.

This isn't for lack of want though. There have been plenty of calls to _"reinvent"_ the browser. Places like [The Browser Company](https://thebrowser.company/) make a lot of noise about it (but we've yet to see a product demo). Foundations like Mozilla have funded extensive [experimental explorations](http://patrykadas.com/browser.html) of alternative browsers.

There's a steady stream of ideas and speculative sketches floating around Twitter that prompt us to reconsider our browsery assumptions and ask good design questions:

<TweetEmbed tweetId="1418749070336684034" />

<TweetEmbed tweetId="1450479522609090562" />

<TweetEmbed tweetId="1256317316452810755" />

The dreams in some of these speculative suggestions are starting to materialise.

<Spacer />

<h2 className="micro">The Pattern</h2>

There are some new apps appearing that offer alternative ways of browsing the web, but sidestep the problem of needing to build an entire browser.

Through the use of `<iframe>` embeds (or sometimes darker magic like live-updating screenshots in `<img>` tags), these apps are creating a form of web inception; allowing us to embed tiny browser windows inside a larger canvas. <Footnote idName={2}>This is a tricky as many websites deny access if they're embedded inside other webpages. This isn't out of malice; they're trying to protect themselves from cross-site scripting attacks</Footnote>

This canvas-based approach adds _spatial_ dimension to the web browsing experience; they allow us to arrange browser windows above, below, to the left, and right of other browser windows.

The same way we're able to put an open book next to a piece of paper and below a row of sticky notes in meatspace. Arranging objects in space to create groupings, indicate relationships, and build hierarchies is one of those classical human skills that never goes out of style.

#### Spatial Browsing Apps

1. [Kosmik](https://lithium.paris/) is a canvas-based note-taking app for iOS and Mac app that includes frames for web browsing. It's still in early development, but as a native app it doesn't seem to have the same cross-site blocking issues as web apps.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642582738/maggieappleton.com/patterns/kosmik_rm0rpy.jpg"
  alt="A Kosmik canvas with three open browsers arranged next to one another"
/>

2. [Nette](https://www.nette.io/) is a browsing app designed for researchers that allows you to open multiple browser windows, draw physical connections between frames, pull out key concepts, and write markdown notes directly into your canvas. <Footnote idName={3}>Still pre-release but looking promising</Footnote>

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/nette_kjqsgj.jpg"
  alt="A Nette canvas with open browsers, diagrams, and notes arranged next to one another"
/>

3. [Sprout](https://sprout.place/) is designed with social interaction in mind – an open, multiplayer canvas where you can video/voice chat, write notes, and browse webpages together. It cleverly sidesteps the issue of cross-site blocking by using screenshots in `<img>` tags instead of true `<iframe>` elements.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/sprout_ffcyrn.jpg"
  alt="A Sprout canvas with two open browsers arranged next to one another"
/>

4. [Natto.dev](https://natto.dev/) isn't designed to be a browsing or knowledge management app, but inadvertently implements this pattern. It's a spatial canvas for programming that happens to allow HTML elements, such as `<iframe>`:

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/natto_cfqkov.jpg"
  alt="A Natto canvas with three open browsers arranged next to one another"
/>

All of these examples allow you to add different blocks and elements to your canvas other than simply browsers. This turns the interface into a true research space. You can add notes, images, and links connected to these browsers – pulling out information in order to arrange it in ways that make sense to you.

At least... in theory. The above platforms are promising, but they're all at beta/alpha stage for the moment. They're worth playing with, but not stable enough to build up an extensive database of notes and browser trails in.

We're so close though. Here's to hoping we have widely useable spatial browsing tools within the next year or two.

#### Postscript

I should touch on the impulse to bring in even more dimensions here. When you search for "_spatial web browsing_," you'll find there are whole engineering teams trying to stick web browsers on [walls within 3D AR/VR](https://venturebeat.com/2021/05/13/spatial-unveils-web-browser-collaboration-in-3d-workspace-and-nft-virtual-galleries/) environments. To me this feels like putting the cart before the poorly rendered, nausea-inducing horse, given we haven't built tools to properly browse the web in 2D space yet.

<References>
  <ReferencesLink
    title="Browser.html speculative research"
    href="http://patrykadas.com/browser.html"
    author="Patryk Adas"
  />
  <ReferencesLink
    title="Spatial Interfaces"
    href="https://darkblueheaven.com/spatialinterfaces/"
    author="John Palmer"
  />
  <ReferencesLink
    title="Spatial Software"
    href="https://darkblueheaven.com/spatialsoftware"
    author="John Palmer"
  />
</References>


Adding spatial affordances to the experience of browsing the web

Pattern Catalogue

A catalogue of design patterns gathered from my own observations and research.

Algorithmic Transparency

Assumed Audiences

Epistemic Disclosure

Spatial Web Browsing