ウェブナビゲーションに革命を起こす――シームレスなブラウジングを実現する「トレイル」の概念

著者:Patryk Adaś

2000年代前半から今日に至るまで、タブによるブラウジングというデスクトップのメタファーは、私たちのウェブの歩き方を支配し続けてきました。Mozilla Researchが手がける「Browser.html」は、Servoのナイトリービルド向けにHTMLだけで構築されたブラウザUIを作るプロジェクトです。このプロジェクトでは、従来のタブ型ブラウザを、「トレイル(trails)」と呼ばれる新しいモデルへと進化させる実験を行っています。

トレイルの目標は、単なるウェブコンテンツへの「窓」ではなく、ユーザーの活動そのものを物語として記録することです。認知への負荷を増やすのではなく、むしろ思考のプロセスを支援してくれる道具という理想へ、ブラウジング体験を一歩近づけられればと考えています。

ここでは、私たちの友人ナラ(Nala)の例を挙げて、具体的なシナリオを見ていきましょう。

完璧なピザ屋を探して

ナラはピザ屋を探しています。従来のタブ型ブラウザで検索(1)を行うと、検索結果ページ(2)にたどり着きます。

Yelpのレストラン一覧ページ(3)へのリンクをクリックし、気になるピザ屋(4)をチェックします。

Yelp上の外部リンクは別タブで開くため、レストランの公式サイトへのリンクをクリックすると、新しいタブ(5)が立ち上がります。

この新しいタブには履歴が一切なく、最初のタブとのつながりもありません。ナラがどうやってそのレストランのサイトにたどり着いたのか、その経緯はすべて失われてしまうのです!

さらに選択肢を比較しようとすると、この「ブラウザの健忘症」は深刻化します。最初のタブに戻り(6)、Yelpの検索結果まで履歴をさかのぼり(7)、今度は別のレストランを探します。

そして新しいレストランを選ぶと(8)、今度は現在のタブのナビゲーション履歴の一部も失われます:

次のレストランの公式サイトへの外部リンクをクリックすれば、また新しいタブ(9)が開き、そこでも直前の履歴とのつながりが断ち切られます。

最初の検索結果をもう一度見るために、ナラは最初のタブの履歴を数ステップ戻り、そこから直接別のピザ店(10)を開きます。

このよくある検索シナリオでは、なんと全体の3分の1以上の履歴が失われてしまうのです!

もちろん、ブラウザには履歴表示や「最近使ったタブ」メニューといった機能があります。しかし、どれもナラが実際にたどった道筋に沿った物語を再現してはくれません。

タブからトレイルへ

Browser.htmlでは、タブ型ブラウザが保持する断片的な履歴だけ(バージョン1)ではなく、ナラの行動のすべて(バージョン2)を語るユーザーインターフェースのプロトタイプを作っています。

しかし、こうした木構造はたちまち複雑になりがちです。本当に重要なのは、それぞれの探索がどこで分岐したかではなく、結果に至るまでの完全な道筋だと私たちは考えました。そこで、ユーザーにはそれを表示します(バージョン3)。

各行は、ナビゲーションツリーの根元から結果までの一本のトレイルを表します。メリットは、トレイルが左から右へと読める自己完結したストーリーになることです。一方で、重複が多く視覚的なノイズにもなりがちです。幸い、注目したいトレイル以外を折りたたむことで、これは解消できます。

これこそが、ナラが本来目にすべきだったものです。

タブとトレイル:似て非なるもの

各トピックに至るまでの経路を無視すれば、トレイルは従来のタブと変わりません。これは意図的な設計です。私たちの目標は既存のユーザー体験を置き換えることではなく、強化することだからです。ユーザーはこれまで通りブラウザを使い続けられます。それでありながら、各ナビゲーショントレイルは、始まりから終わりまでの完全な物語を語るタブなのです。これにより、さらなるUX向上のための可能性が大きく広がります。検討しているアイデアをいくつか紹介しましょう。

• URLだけでなく、トレイル全体を共有できるようにする
• 関連性が薄れたトレイルをフェードアウトさせ、最終的にグリッドから外す
• 訪問時の状態のままトレイルを保存し、後から(オフラインでも)振り返られるようにする
• トレイルへの注釈機能を設け、リサーチ中の思考を記録できるようにする
• 共同でのトピックリサーチを可能にする
• ページを新しいトレイルとして開くオプションを提供する

トレイルへの道

ウェブ上のユーザーの旅路を「トレイル」として可視化するという発想は、決して新しいものではありません。ハイパーリンクされたデータという概念を世に広めた画期的なエッセイ「As We May Think」の中で、ヴァネヴァー・ブッシュ(Vannevar Bush)は70年以上も前に「メメックス(memex)マシン」について言及しています。彼はこの機械が、個人のライブラリを通じてデータの収集・共有を助け、リサーチの過程に「足跡(トレイル)」を残せるようにすると構想していました。

それ以来、そうしたツールを作ろうとする試みがいくつもあります。ゼロックスのTrailmemeに始まり、2004年のMacWarriorsによるTrailblazer、そして現在はTrailblazer.ioへと受け継がれています。馴染みのあるタブの操作感とトレイルの概念をつなぐことで、既存のワークフローを土台にしながら、このアイデアをより多くの人々に届けられることを願っています。Browser.htmlは、こうしたアイデアを試す絶好のテストベッドとなるでしょう。

空間モデル(Spatial Model)

私は現在、さまざまなユーザーインタラクションやアニメーションを通じて空間モデルの開発に取り組んでいます。これにより、ユーザーが何が起きているのかをより深く理解し、最も効果的にウェブをナビゲートできるようになると期待しています。

詳細についてはこちらをご覧ください。

一緒に参加しませんか?

私たちは現在、初めて動作するプロトタイプの開発に取り組んでいます。面白そうだと思ったら、ぜひBrowser.htmlプロジェクトをチェックしてみてください!GitHubで公開中の課題一覧を確認できますし、Slackでも気軽にお話しください。

無料でプログラミングを学ぼう。freeCodeCampのオープンソースカリキュラムは、これまで4万人以上の人々を開発者の仕事へと導いてきました。今すぐ始めましょう。