比較Webサイト：何年にもわたってプレーヤーを比較する最も簡単な方法
地元のスポーツコンテストのウェブサイトで、プレーヤーのスコアを比較できるセクションを設ける予定です。 （全員が同じ10の分野に参加しました。）
インターフェースは本当にシンプルでなければなりません：プレーヤーの写真の行があり、誰かをつかんで比較エリアにドラッグするだけで、2番目のもの（そして気になる別のもの）をドラッグすると、それらが比較されます。 -つまり、サイトのスコアがシンプルな表に表示され、すべての分野の最高スコアが強調表示されます。
問題は、さまざまな年の競争から比較するための機能を追加したいことです。たとえば、今年のスコアと2012年の友達のスコアを比較したい場合などです。
それを達成するいくつかの方法は何ですか？
1年間1行のように、写真の行を増やしたくありません。ドラッグアンドドロップシステムを維持したいのですが、さまざまな年の比較を統合する方法を考えることができないので、ユーザーがこのセクションに入ると、何をすべきかがわかり、機能を見逃すことはありません。
プレーヤーを比較して2つの大きな円を表示すると、年の下にそれぞれの下にある種のセレクターを配置できます。こうすることで、選択したプレーヤーの年に悩むだけで、インターフェースが複雑になりすぎません。
年/シーズンセレクターには多くのオプションがあります。
- ドロップダウン
- アクティブなものが強調表示された数字の簡単なリスト
- スライダー
どちらを選択するかは多くの要因によって異なり、実際には質問の範囲外です。
写真を比較領域にドロップすると、垂直スクロールバーが右側に表示され、コントロールが一番上に表示され、コントロールには最新の年のラベルが付けられます。これに対応して、比較はデフォルトで、そのプレーヤーからの現在の年の統計を比較に使用します。ユーザーがコントロールを下にドラッグすると、比較のためのラベルと統計情報が前の年を反映するように変化します。
これはかなり直感的だと思います。上部にコントロールがあるスクロールバーが下にドラッグするように要求しているので、ラベルを使用すると、下にドラッグしたときに何が起こるかが非常に明確になり、ラベルと統計の瞬時の変化がわかります。その仮定をすぐに確認します。
さらに、これをWindowsスクロールバーのように機能させて、スライダーのサイズがそのプレーヤーで使用可能な年数のデータに反比例するようにすると、他に選択できる年数が直感的にわかります。から。
@JohnGBの回答を変更する比較の上に年の選択を追加しました。
ドラッグアンドドロップでプレーヤーが名簿から削除されることによる付加価値は、ユーザーが異なるプレーヤーの同じプレーヤーを比較できることです。
同じ年からの選択：
異なる年からの選択。ある年から1人のプレーヤーを選択し、別の年から別のプレーヤーを選択します。
ユーザーは、2011年と2014年の両方からネイサンを選択して、彼が何年に渡って進化したかを比較することができました。
@JohnGBの回答と同様に、年の選択方法は個別に決定する必要があります。ボタンを使った選択は、何年も選択すると混雑する可能性があります。
@JohnGBによって提供される答えは日付選択の最も簡単で最も単純なアプローチだと思いますが、2人のプレーヤーを比較しようとするときは、まずある程度の詳細を示す必要があります。あなたの場合、得点されたゴール、プレイされたゲームなどの統計情報は、ユーザーに参照ポイントを提供し、比較の決定に影響を与える可能性があります。これらの詳細の表示は、最初は非表示にして、ユーザーが表示したいときにのみ表示することができます。ここに簡単なモックアップがあります（個々のプレーヤーの統計情報は、スライドパネルから利用できます）。
これは、ユーザーが比較を表示する前に、統計のタイプを理解できるため、利点もあります。
最後のポイントと（間違えたかもしれませんが）円形の形状はすばらしいですが、それらの横に詳細を含めたい場合や、バッジやステータスの更新を追加するなど、スケールアップしたい場合に問題になる可能性があります。
お役に立てれば。
スクロールバーはUXの不整合です。ユーザーは、データが変更されるのではなく、コンテンツが領域内で移動（スクロール）することを期待し、通常、スクロールバーをドラッグして年を変更するとは考えません。
ドロップダウンまたはスピンボックスは、通常のUIとより一貫していますが、触覚性が低く、使いやすいです。
私の好みは、魚眼レンズ（または「OSCドックスタイル」）のズームオンフォーカスメニューのバリエーションです。ここに値のバーがあり、現在持っている値が拡大されます。どちらかの方向にスライドすると、利用可能なリストがスクロールされ、選択が変更されて、拡大されたアイテムが常に中央に配置されます。これは多くの場合、複数の画像から選択するために使用され、基本はかなり簡単です：
li:hover { transform: scale(1.2); }
ただし、メニューをマウスホイールでスライドさせるのも少し面倒です。
（モックアップから）円形の画像を使用している場合、プレーヤーのポートレートの周りにrotaryズームセレクターを表示します。ボトムは、ラジオのチューニングノブやボリュームノブを彷彿とさせる、理想的で、触覚的で使い慣れたものです。残念ながら、純粋にCSSを使用してそのようなものをクロスプラットフォームで機能させることは、せいぜい悪夢のようです。JS http://tympanus.net/Development/Arctext/ のようなものが必要です。 SVG http://jsfiddle.net/dbushell/32mAb/2/ -そして、古いブラウザーのためにそのようなデザインを優雅にデグレードすることは難しいでしょう。