web-dev-qa-db-ja.com

スライダー、テキスト入力、またはその両方の組み合わせで、テーブルデータをどのように最適にフィルタリングできますか?

私はゲームのファンサイト用のデータWebページ(そのページを表示するほとんどの人がデータを検索する場所)を設計しており、その一部は次のようになります

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

表は、さまざまなレベルでのキャラクターの統計を示しています。最大および最小レベルの行が常に表示されます。 2行目と4行目のレベルは、左側の2つのハンドルのスライダーで選択するか、テキストボックスに直接入力して選択できます。

主にスライダーに関して、UIを改善できるかどうか疑問に思っています。スペースの制限により、ほとんどのスライダーには2ピクセルの感度があります。2ピクセルのスライド/レベルを1減らします。

ユーザーが特定のレベル(自分がいるレベルなど)のデータを探す場合、スライダーはほとんど役に立ちません。レベル間を比較しているユーザーや、統計がある値よりも大きくなるために必要な最小レベルを探しているユーザーの場合、スライダーを使用すると、値を繰り返し入力する必要がありません。ただし、その高感度のため、その有用性はわずかに妨げられます。

UIのこの部分は内部テストを開始したばかりで、テスターからフィードバックを得ますが、これに対する他の解決策があるかどうかを確認したいと思います。

1
TwiNight

スライダーを使用する場合の問題は、テキストフィールドにレベル番号を入力するよりも遅いことです。スライダーを使用する場合、ユーザーは目的のレベルに一致するようにスライダーを微調整する必要があります。これはトリッキーになる可能性があり、私の意見では不要です。

私はスライダーを削除し、テーブルの上にあるテキスト入力フィールドを使用して、ユーザーに表示したいレベルまたはレベルの範囲を尋ねます。

したがって、デフォルトの最大レベルと最小レベル、およびユーザーが指定した範囲(または1つのレベル)を表示します。

レベルを見つける方法をユーザーに明確にするため。入力フィールドの下に短い説明を追加します。

レベルを表示する順序も最小に変更します。マックスへ。


enter image description here

2
Chairman Meow