バスケットボールリファレンスのページ内ナビゲーションの再設計

Basketball Reference では、デザインを再設計しました。 ページ内ナビゲーション システム (これを「内部ナビゲーション」と呼びます) は、補足コンテンツ (ゲーム ログや分割など) および「このページについて」セクション (ページの目次として機能します) にアクセスするために使用します。一方、 内容は全て同じですデスクトップ上のプレゼンテーションを水平バーから垂直サイドバーに変更しました。インタラクションは クリック/タップベース ホバーベースの代わりに。インナーナビゲーションも今では デスクトップでもモバイルでも同じ。これは 段階的な設計の更新 大規模な設計の見直しの一部ではありません。この変更は Basketball Reference で公開されていますが、今後数週間のうちに他の Reference サイトにも反映される予定です。

これは、サイトのデザインに対してこれまでに行った中で最も広範な変更であるため、そのプロセスを順を追って説明したいと思います。まず、それは次のようになります。

Sports Reference では、私たちのデザイン哲学を「積極的に機能的」と表現しています。当社は、速度、アクセスしやすさ、ナビゲーションのしやすさを最適化したプラットフォーム上にスポーツ データの広範なリポジトリを提供し、すべてのユーザーが統計をさらに深く調べることができるようにしています。私たちは、デザインの更新に対して慎重かつユーザー重視のアプローチを採用しています。当社は、当社のサイトが中核的なユーティリティであることを認識しているため、信頼している使いやすさや安定性を損なうことなくエクスペリエンスを向上させるために、変更は厳密に精査され、目的に基づいて行われる必要があります。

私たちの現在のサイトデザインは 2017 年 2 月に遡ります。それ以来、私たちは多くのことを行ってきました。 FBref を使用して別のスポーツを追加しました。 Play Index ツールを Stathead として再起動しました。私たちは Immaculate Grid を買収し、再起動しました。新しい機能を追加し、スポーツ全体にわたるデータ範囲を大幅に拡大しました。私たちは舞台裏で大量のインフラストラクチャ作業を行ってきました。私たちは次世代製品の構築を開始しました。このすべてを通じて、リファレンス サイトのデザインはほとんど変わりませんでした。

現在のサイト デザインは十分に機能していますが、改善の余地はあります。ただし、心配しないでください。ある日サイトを開いたらすべてが変わっていたことに気づくわけではありません。私たちは段階的なアプローチを採用し、ユーザーにとって相対的に問題となる特定の領域に焦点を当てています。それは革命というより進化です。

まず、内部ナビゲーションに焦点を当てます。これは、ユーザーが愛情を込めて呼んでいるウサギの穴への重要な入り口の 1 つであるため、明らかに非常に重要なインターフェイス パターンです。ユーザーからのフィードバックと使用状況分析を通じて特定した改善の余地がある領域をいくつか示します。

• デスクトップの内部ナビゲーションは、ホバーベースのインタラクションのため使いにくい場合があります。幅が広い (フルスクリーン) のと高さが低いため、目的のリンクをクリックするにはマウスを非常に正確に動かす必要があります。
• 内部ナビゲーションは、デスクトップでもモバイルでも無視するのが簡単でした。非常に多くの場合、ユーザーは私たちがすでに備えている機能を求めて私たちに手紙を書きます。多くの場合、これらの機能は、内部ナビゲーションからアクセスできる補足ページにあります。多くのリンクがドロップダウンの背後に隠されており、内側のナビゲーションのリンクは通常の青色のリンク色ではなく濃い灰色でした。
• 内部ナビゲーションのエクスペリエンスは、デスクトップとモバイルではまったく異なりました。デスクトップでは、リンクとドロップダウン メニューの水平バーで表示されました。モバイルでは、単一の垂直ドロップダウン メニューとして表示されました。

新しい設計がこれらの各領域にどのように対応しているかは次のとおりです。

• 内部ナビゲーションは、ホバー操作に依存せずに移動できます。クリックとタップベースです。さらに、コンテンツがサイドバーに表示されるため、線の幅が非常に短くなり、スキャンしやすくなります。
• 内部ナビゲーションはデスクトップ上のサイドバーとして表示されるようになりました。これは、複数回のテストでユーザーがより直感的に理解できるパターンです。当社サイトの他のリンクと同様、リンクは青色で下線付きで表示されます。さらに、「このページ上」セクションはデフォルトで展開され、縦方向に表示されます。これで、Wikipedia などのサイトに表示される目次のように動作するようになりました。さらに、ページがスクロールしてもサイドバーは所定の位置に留まるため、ページの別のセクションにすばやく移動することがはるかに簡単になります。
• 内部ナビゲーションがデスクトップとモバイルで同じになったため、異なるデバイス間を切り替えるユーザーにとっては親しみやすさが増すはずです。また、サイドバーを非表示にしたい場合は、モバイルサイトと同様にサイドバーを閉じることができます。

その他の考慮事項:

• サイドバー用のスペースを確保するために、レイアウトの最大幅を 1450 ピクセルから 1600 ピクセルに増やしました。モバイル デバイスを使用するユーザーはますます増えていますが、依然として大きな画面を使用している人がいます。スクリーンが大型化するにつれて、そのスペースをより多く利用するようになりました。
• 現時点では、デスクトップ エクスペリエンスは水平レイアウトから垂直レイアウトに変更されただけです。内容はすべて同じです。内部ナビゲーション コンテンツを水平レイアウトではなく垂直レイアウトに最適化する方法を検討します。たとえば、より多くのリンクを最上位に移動する余地が増えたので、セクションの展開および折りたたみで非表示になるリンクが減りました。
• 現時点では、この新しい内部ナビゲーションは Basketball Reference にのみ掲載されていますが、今後数週間以内に他の Reference サイトにも導入される予定です。

その過程で何百人ものユーザーからフィードバックを受け取りました。 3 月に遡ると、同僚のフレディと私は、フェニックスで開催された SABR Analytics Conference で進行中の設計コンセプトをいくつか発表しました。その講演では、私たちが検討しているいくつかのデザインコンセプトを共有し、聴衆に私たちが検討すべきだと思うものに投票してもらい、フィードバックを提供するスペースを与えました。内部ナビゲーションの変更は、数百人の参加者から非常に強いシグナルを受け取った 2 つのコンセプトのうちの 1 つでした。

そのフィードバックをもとにデザインを改良し、新たなプロトタイプを作成しました。私たちはプロトタイプを閲覧し、操作し、感想を共有したユーザーに一連のインタビューを実施しました。そのフィードバックを使用して、コード内に機能を構築しました。最後に、リリースに先立って、ユーザーが実際のコードを操作して、クリックの感触、スクロールの動作、サイドバーが存在するページの感触を確認できるように、もう 1 回のインタビューを実施しました。ユーザビリティ テストの両方のラウンドで、ユーザーは満場一致で、垂直方向の内部ナビゲーションが改善されたことに同意しました。それが私たちが立ち上げるために必要な合図でした。

しかし、私たちは聞き終えたわけではありません。私たちを通してのご意見をお聞かせください フィードバックフォーム。

このエントリーは 2025 年 11 月 24 日月曜日午後 5 時 04 分に投稿され、次の場所に保管されています。 発表、 Basketball-Reference.com。このエントリへの応答は、 RSS2.0 餌。あなたはできる 応答を残す、 または トラックバック 自分のサイトから。