Web ナビゲーションに革命を起こす:シームレスなブラウジングのためのロスレス トレイル

パトリック・アダシュ著

2000 年代初頭以来、タブ ブラウジングというデスクトップの比喩が、私たちが Web を操作する方法を支配してきました。 Servo の夜間ビルド用に HTML に組み込まれたブラウザ ユーザー インターフェイスの構築を目的とした Mozilla Research プロジェクトの Browser.html では、標準のタブ付きブラウザを進化させてトレイルに基づいたモデルを実験しています。 .

トレイルの目標は、ウェブ コンテンツへの窓だけでなく、 ユーザー アクティビティの物語を構築することです。 私たちの希望は、私たちの取り組みが、 ブラウジングの状態を強化するツールの理想に近づけるのに役立つことです。 認知負荷を増加させるのではなく、認知プロセスを改善します。

私たちが考えているシナリオの種類を説明するために、友人のナラを紹介します。

完璧なピザの検索

ナラはピザ店を探しています。従来のタブ付きブラウザで、彼女は検索 (1) を開始します。 これにより、検索結果 (2) のページが表示されます。 .

彼女は Yelp のレストラン リストへのリンクをたどります(3) そして、有望なピザ屋(4)をチェックします。 .

Yelp の外部リンクは別のタブで開くため、Nala がレストランの Web サイトへのリンクをクリックすると、新しいタブ (5) が開きます。 .

新しいタブには履歴がなく、最初のタブとの接続もありません。 ナラがレストランのウェブサイトにたどり着いた経緯に関する履歴はすべて失われています。

彼女がさらにオプションを見ようとすると、ブラウザの記憶喪失はさらに悪化します。最初のタブ (6) に戻ります。 Yelp の結果(7)に戻ります。 、彼女は別のレストランを探します。

今、彼女が新しいレストランを選択すると(8) 、現在のタブのナビゲーション履歴の一部も失われます。

次のレストランの Web サイトへの外部リンクをクリックすると、新しいタブ (9) が開きます。 、そして、その前の履歴から接続を再度切断します。

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

この一般的な検索シナリオの例では、履歴の 3 分の 1 以上が失われます。

もちろん、ブラウザには通常、履歴ビューや「最近のタブ」メニューなどのツールが用意されていますが、これらのどれも、ナラがたどった実際のコースと一致する物語を提示するものではありません。

タブからトレイルへ

Browser.html を使用して、タブ付きブラウザが保持する Nala の歴史の断片だけでなく(バージョン 1)を伝えるユーザー インターフェイスのプロトタイプを作成しています。 、ただしすべて（バージョン 2） :

しかし、これらの木は簡単に複雑になる可能性があります。私たちが最も重要だと考えているのは、それぞれの探索がどこで分岐したかではなく、結果に至るまでの完全なパスです。これがユーザー(バージョン 3)に表示されるものです。 :

各行は、ナビゲーション ツリーのルートから結果までの軌跡を表します。利点は、トレイルが左から右へ自己完結型のストーリーを伝えることです。一方、重複すると、気が散る視覚的なノイズが大量に発生します。幸いなことに、これは 1 つのトレイルに焦点を当て、他のトレイルを折りたたむことで取り除くことができます。

これはナラが実際に見たものです:

タブとトレイル:同じですが、異なります。

探索された各トピックに至るまでのパスを無視した場合、トレイルは従来のタブと何ら変わりません。これは意図的なものです。私たちの目標は、既存のユーザー エクスペリエンスを強化することであり、既存のユーザー エクスペリエンスを置き換えることではありません。ユーザーはこれまでと同様にブラウザを使い続けることができます。それでいてそれぞれのナビゲーション トレイルは、最初から最後まで完全なストーリーを伝えるタブです。 これにより、ユーザー エクスペリエンスのさらなる強化を検討する機会が得られます。私たちが検討しているものは次のとおりです。

• URL だけでなく証跡全体を共有する
• トレイルが無関係になるとフェードアウトし、最終的にはグリッドから移動します。
• （オフラインで）再訪問できるように、訪問時と同じ形式でトレイルを保存する
• ユーザーがトピックを調べているときに自分の考えを記録できるように、トレイルに注釈を付けることができる
• 共同でトピックを調査する
• オプションで新しいトレイルのページを開きます。

トレイルへの道

ユーザーの Web 経由の移動を軌跡として視覚化するというアイデアは、決して新しいものではありません。 70 年前でさえ、ヴァネヴァー ブッシュは、ハイパーリンクされたデータのアイデアを広めた画期的なエッセイ『As We May Think』の中で、「ミーム マシン」について説明しました。彼は、このマシンが個人ライブラリを通じてデータを収集して共有し、研究プロセスの痕跡を残すのに役立つだろうと想像していました。

それ以来、Xerox Trails の Trailmeme を皮切りに、そのようなツールを作成する試みがいくつか行われてきました。このコンセプトは 2004 年に MacWarriors の Trailblazer に引き継がれ、現在は Trailblazer.io に引き継がれています。私たちは、トレイルのアイデアをおなじみのタブ付きイディオムに結び付けることで、既存のワークフローを構築し、そのアイデアを広くアピールできるようにしたいと考えています。そして、Browser.html は、これらのアイデアの優れたテストベッドとして機能します。

空間モデル

私はさまざまなユーザー インタラクションやアニメーションを通じて空間モデルに取り組んでいます。これにより、ユーザーは何が起こっているのか、そしてウェブを最も効果的に移動する方法をより深く理解できるようになります。

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

参加しましょう!

私たちは現在、最初の実用的なプロトタイプの構築に取り組んでいます。これが面白そうなら、ぜひ Browser.html プロジェクトをチェックしてみてください。 GitHub で未解決の問題のリストを見つけるか、Slack でチャットしてください。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう