Responsibilities

Research, prototyping, communication.

Client

Mozilla Research

Timeframe

Eleven months

08.2016 - 07.2017

The goal of trails is to construct not only a window into web content but a narrative of user activity.

Current browsers

History does not show the path to the result.

Real path

We search in a linear way, we think by association.

Browser.html

Trail tells a self-contained story from left to right.

Each row represents a trail from the root of the navigation tree to a result.

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.

Read full story

Header expansion

I was prototyping shortcuts to relevant pages straight in the header.

Trails

Duplicates lead to a lot of distracting visual noise. That can be removed by focusing on a single trail while folding the others.

Right click

Testing another possibilities of switching trails and utilizing contextual menu trigger with right-click.

𝔣𝔩𝔞𝔨𝔦

@slsoftworks

DevRel & Community @mozilla

Should any of you been wondering — @ServoDev's browser.html frontend/UI is frickin amazing. 😱⚡🎉

There, now y'all know. 🤓
#mozAloha

The spatial model is communicated through user interactions and animations to help user navigate the web efficiently.

Going back and forward.

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.

Familiar feeling

Horizontal movement is a common interaction for choosing arbitary point on the timeline.

Gyroscope

I was prototyping possible solutions of utilising gyroscope to show additional context.

Go back

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.

Contextual

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

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.

Familiar feeling

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

Continious narration

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.

Vertical scales better

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.

Gyroscope

I've prototyped utilizing gyroscope to provide extended context.

Enhance our cognitive process, rather than increases our cognitive load.

Constistency in every interaction.

In order for the mental model to work it needs to be applied to all views.

New website

A new website will push the current page to the left, becoming the first in line.

New website in the background

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.

More contextual sharing.

I was exploring and prototyping solutions for peer to peer web. What If we can share websites, not links?

Annotate and send

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.

Receive in native context

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.

Browser.html is a speculative browser for nightly builds of Servo based on trails.

Research, prototyping, communication.

Mozilla Research

Eleven months

The goal of trails is to construct not only a window into web content but a narrative of user activity.

Current browsers

Real path

Browser.html

Each row represents a trail from the root of the navigation tree to a result.

Header expansion

Trails

Right click

𝔣𝔩𝔞𝔨𝔦

The spatial model is communicated through user interactions and animations to help user navigate the web efficiently.

Going back and forward.

Familiar feeling

Gyroscope

Go back

Contextual

Josh Carpenter

Switching trail

Familiar feeling

Continious narration

Vertical scales better

Gyroscope

Enhance our cognitive process, rather than increases our cognitive load.

Constistency in every interaction.

New website

New website in the background

More contextual sharing.

Annotate and send

Receive in native context

Got a project?
Tell me everything.

Tok’n’talk & Userfeeds

Browser.html is a speculative browser for nightly builds of Servo based on trails.

Research, prototyping, communication.

Mozilla Research

Eleven months

The goal of trails is to construct not only a window into web content but a narrative of user activity.

Current browsers

Real path

Browser.html

Each row represents a trail from the root of the navigation tree to a result.

Header expansion

Trails

Right click

𝔣𝔩𝔞𝔨𝔦

The spatial model is communicated through user interactions and animations to help user navigate the web efficiently.

Going back and forward.

Familiar feeling

Gyroscope

Go back

Contextual

Josh Carpenter

Switching trail

Familiar feeling

Continious narration

Vertical scales better

Gyroscope

Enhance our cognitive process, rather than increases our cognitive load.

Constistency in every interaction.

New website

New website in the background

More contextual sharing.

Annotate and send

Receive in native context

Got a project?Tell me everything.

Tok’n’talk & Userfeeds

Got a project?
Tell me everything.