The Context

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_33ya , its “killer feature” was inline images. As opposed to images you had to download and open in a separate window

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

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_33ya 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 make a lot of noise about it (but we’ve yet to see a product demo). Foundations like Mozilla have funded extensive experimental explorations 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:

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

The Pattern

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

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

2. Nette 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. Still pre-release but looking promising

3. Sprout 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.

4. 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>:

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