In my last post I described the concept of navigation trails as an evolution of the standard tabbed browsing model.

As a part of the Browser.html project, I’m working on a spatial 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.

Users have developed certain behaviors and expectations we want to build upon. Instead of replacing existing workflows, we want to enhance them.

Horizontal movement — going back / forward

When you rewinding a cassette or use a video editing tool, one common interaction model is horizontal movement along a timeline. Browsers use this approach to allow users to go back in their navigation history. But this only allows going backward a single history entry at a time. Shortcuts exist, but they don’t allow previewing past pages.

Even with conventionally lossy navigation history, it’s common to have multiple entries to go backward or forward. Introducing trails will only increase the number of entries.

We want users to select an arbitrary point in the timeline using familiar interactions.

_[Youtube](https://youtu.be/reMbtUWeias" rel="noopener" target="blank" title=")

In our design, a light pull (swipe) from the left allows the user to take a peek at the last history entry. Pulling further unfolds the full trail and reveals the entire history, allowing the user to return to an arbitrary point by releasing on a site.

_[Youtube](https://youtu.be/6e0cGYHJoDQ" rel="noopener" target="blank" title=")

Pulling past all of the entries switches to a trails overview, as we assume the user wanted to switch to a different website.

_[Youtube](https://youtu.be/uVRWfjceDDg" rel="noopener" target="blank" title=")

We want to provide visual clues at the earliest stage of building a trail. A new website will push the current page to the left, becoming the first in line.

Vertical movement — switching trail

Mainstream desktop browsers end up overloading the horizontal axis as a way of switching tabs. In contrast, mobile browsers use vertical space for this purpose.

This aligns with long-standing use of vertical ordering in catalogues and as a natural way of arranging todo items.

The average person tends to have either less than eight tabs open, or to add tabs without organization until declaring “tab bankruptcy” and starting fresh.

_[Youtube](https://youtu.be/QH1sOQXvH-k" rel="noopener" target="blank" title=")

Opening link in the background creates a trail that slides below the currently featured page, once again providing a clue of where new trails end up spatially.

_[Youtube](https://youtu.be/3NxlriMTNnY" rel="noopener" target="blank" title=")

The bottom of a page is a natural place to provide easy access to the next trail, which is conveniently accessed by scrolling past the end of the page.

_[Youtube](https://youtu.be/AWpbnV41zUE" rel="noopener" target="blank" title=")

In order for the mental model to work it needs to be applied to all views. The trails overview allows navigation within trails using the same horizontal gestures shown earlier and switching trails using vertical gestures. It provides a navigational map with access to all trails taken while pursuing a specific topic.

Join us!

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

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

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

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

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.

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

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.

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

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):

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):

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.