長いテキストの説明を持つ多くのスライダーを使用する方法

Question

次の問題があります。

私のウェブサイトには個人設定ページがあり、ユーザーは自分の特定の身体部分の健康レベルを定義できます。

少し混ぜ合わせると、体の一部の健康レベルをさまざまな側面（肩など）から定義できます。

ヘルスレベルには5レベルのスケールがあり、これは添付のモックアップのConcept2パーツの凡例で確認できます。

スライダーの使用を考えています。これは、これらの多くの設定を設定するのに最適だからです。

この投稿に画像を埋め込むことはできませんが、私のコンセプトは次のとおりです。

enter image description here

ご覧のように、13個のボディパートがあるため、互いに隣接する垂直スライダーはページに適合しません。＃2のコンセプトでは、混雑しすぎて概観が難しいことが問題です。

利用可能な最大幅は650または最大750pxです。

私のユーザーにはすてきなクリーンなアプローチが欲しい：/

Myrddin Emrys · Answer

私は2番目の概念を使用しますが、いくつかの重要な変更があります。

まず、これはスライダーではなく、これらは明確な選択肢です。この選択には、ラジオボタンがより適切なWindowsコントロールになります。最も適切な同様の例は、顧客サービスを評価する調査です。
第二に、それは最悪から最高までの連続的な尺度であるため、アイコンをより連続的になるように変更します。それらは現在非常に異なっており、関節の健康の昇順で配置されているという視覚的な兆候はありません。
3番目に、ジョイントラベルを左側に配置し、アイコンの範囲を上部（列ヘッダー）のみに移動し、選択したアイコンを動的に右側に配置します。これにより、リストが圧縮されて閲覧しやすくなり、全体の関節の健康状態を一目で確認できる右下のリストが作成されます。関節を解剖学的に上から下に配置すると、配置の価値がさらに高まります。

例：

enter image description here

Karen · Answer

コンセプト＃2は素晴らしいと思います。画像を「どのように感じますか」タイプのスケールに関連付けて、実際の値を少し臨床的でなく、もう少し覚えやすいものにすると便利です。すべてのスライダーの下にある画像を取り出し、それらをリストの上部と下部に（すべて続けて）配置した場合、その特定の部品の選択された画像値をスライダーの最後に表示できます。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Csabi · Answer

みんなの提案（本当にありがたい）に基づいて、現在のコンセプト＃3を思いついたので、コメントいただければ嬉しいです。

concept 2

この概念の背後にある理由：

矢印は数値の上下のように機能しますが、選択したレベルの説明が表示されます。

レベル列にまたがるセルまたはスライダーに見出しとラジオボタンのあるテーブルではなく、これを使用する理由：

選択したレベルの説明をすべての行に表示したいのは、多くのボディパーツがあり、ユーザーがスクロールダウンすると見出しが表示されないためです（表の下に見出しを提案した人もいますが...）。
アイコンでは意味全体を伝えることができないため、アイコンだけでなく、選択したレベルの説明を表示したい。さらに、アイコンの意味についてユーザーを教育したくありません。
13のボディパートと5つのレベルがあります。これは、65個のラジオボタンを意味します。おそらく見栄えが悪く、簡単に概観できます。ボタンを押すだけで適切なラジオボタンを選択できることはわかっています。この概念では、ボタンを4回押すだけで適切なレベルの説明を選択できますが、ほとんどのユーザーは各ボディパーツの健康状態が100％に近いと思いますなので、1つまたは2つのボディパーツのみを低い健康レベルに設定する必要があります。
スライダーはOKですが、それでも、すべてのボディパーツの選択されたレベルの説明を表示したいと思います。説明が7列目にうまく収まるかどうかはわかりません。私はむしろ大きなフォントと広い列を使用したいと思います。

選択したヘルスレベルの背景は色付きで、赤から緑の範囲になります。

多分「numericupdowns」の代わりにコンボボックス/ドロップダウンを使用する方が良いですか？次に、色付けはありませんが、おそらくもっと使いやすいですか？

Vitaly Mijiritsky · Answer

これにはスライダーは必要ありません。また、スライダーは5つの異なる値ではなく、連続的なスケールであることをユーザーに誤解させるため、スライダーは必要ありません。

ここにあるのはテーブルです。多くのパラメーターがあるため、幅にわずかな問題がありますが、幸いにも5つの可能な値しかないため、表を逆にすることができます。

それらの長い列のタイトルについて何かを行う必要があります（言い換えるか、2行に分割する）が、それ以外の場合はそれで十分です。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}