by Patryk Adaś

Lossless Web Navigation with Trails

1*a2HidWVvbaqVlct9OORVhw

Since the early 2000’s, the desktop metaphor of tabbed browsing has dominated the way we navigate the web. With Browser.html, a Mozilla Research project aimed at building a browser user interface built in HTML for nightly builds of Servo, we are experimenting with evolving the standard tabbed browser towards a model based on trails.

The goal of trails is to construct not only a window into web content but a narrative of user activity. Our hope is that our work might help advance the state of browsing closer to the ideal of a tool that enhances our cognitive process, rather than increasing our cognitive load.

To illustrate the kind of scenario we’re thinking about, we’ll introduce you to our friend Nala.

The search for the perfect pizza

Nala’s scouting out pizza joints. In her traditional, tabbed browser, she sets off with a search (1) that takes her to a page of search results (2).

1*7qOw8C6wzXJi6ieHobEKTw

She follows a link to a list of restaurants on Yelp (3), and checks out a promising pizza joint (4).

1*404g1U_jYU4pYrO1292hsg

External links on Yelp open in separate tabs, so when Nala clicks a link to a restaurant’s website, it starts a new tab (5).

1*mhoj_P3uphTdyGKvK2o6QQ

The new tab doesn’t have any history, or any connection to the first tab. All history about how Nala got to the restaurant’s website is lost!

The browser’s amnesia compounds as she goes to look at more options: switching back to the first tab (6) and navigating back to the Yelp results (7), she looks for another restaurant.

1*cZMNV-d5kA_zPBV0gPQkBA

Now when she selects a new restaurant (8), part of the current tab’s navigation history is lost as well:

1*JTpAAWHBlwIZ0YMZPDsCJw

Clicking an external link to the next restaurant’s website again opens a new tab (9), and again severs the connection from the history that preceded it.

1*tW9QQd7vXGJ1inuAt13O2Q

To look at the results of her initial search results again, Nala goes back a few steps in the history of the first tab and opens another pizza venue directly from there (10).

1*dWHcc6uSwXJFUv3NTaEVAw

In this example of a common search scenario, more than a third of the history is lost!

Of course, browsers typically provide tools like history views and “recent tabs” menus, but none of these presents a narrative that matches the actual course Nala followed.

From tabs to trails

With Browser.html we are prototyping a user interface that tells not just the fragments of Nala’s history that a tabbed browser preserves (Version 1), but all of it (Version 2):

1*Z1Ue9kAxXyt0xS2ZiGa1yQ

But these trees can easily get intricate. What we think matters most is not where each exploration diverged, but the complete path leading to a result. So that’s what we display to the user (Version 3):

1*Q46vM6br-gi0eTPhT5SBPg

Each row represents a trail from the root of the navigation tree to a result. The benefit is that a trail tells a self-contained story from left to right. On the other hand, duplicates lead to a lot of distracting visual noise. Luckily, that can be removed by focusing on a single trail while folding the others.

This is what Nala would have actually seen:

Tabs and trails: the same, but different.

If you ignore the paths leading up to each explored topic, trails are no different from conventional tabs. This is intentional: our goal is to enhance existing user experiences, not to replace them. Users can continue using browsers as they always have. And yet each navigation trail is a tab that tells a complete story from start to finish. This provides us with opportunities to explore further enhancements to the user experience. Here are a few we’re considering:

  • Sharing not just URLs but entire trails.
  • Fading trails as they become irrelevant and eventually moving them off the grid.
  • Persisting trails in a form as they were during the visit, so that they can be revisited (offline).
  • Allowing annotation of trails so users can record their thoughts while researching a topic.
  • Collaborative topic research.
  • Optionally opening pages in a new trail.

The Path To Trails

The idea of visualizing a user’s journey through the web as a trail is by no means a new one. Even seventy years ago, in his landmark As We May Think essay popularizing the idea of hyperlinked data, Vannevar Bush described a “memex machine.” He envisioned this machine would help us collect and share data through a personal library that would help us leave a trail through our research process.

Since then, there have been several attempts to create such a tool, beginning with Trailmeme by Xerox Trails. This concept was continued by Trailblazer by MacWarriors in 2004, currently followed by Trailblazer.io. It’s our hope that by connecting the ideas of trails to familiar tabbed idioms, we’ll build on existing workflows and make the idea broadly appealing. And Browser.html serves as a great test-bed for these ideas.

A Spacial Model

I’m working on a spacial model through various user interactions and animations. This should help users better understand what’s going on and how to navigate the web most effectively.

You can read more about this here.

Join us!

We’re currently working on building our first working prototype. If this sounds like fun to you, please come check out the Browser.html project! You can find our list of open issues on GitHub, or come chat with us on our Slack.