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

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

Josh Carpenter
@joshcarpenter

UX Lead, WebVR/AR at Google.

More people should know about Browser.html. Way too modest a team. New browser on new engine doesn't happen often.

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.

Read more

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.