入力値の依存関係

Question

以下の画像に示すように、現在スライダーがあります。

ユーザーがドローダウン値を調整すると、年金値も影響を受け、逆も同様です。これは簡単に聞こえますが、ユーザーがスライダーで年金額を増やしたい場合は、ポインターを年金に向かってドラッグする傾向があります。これにより、実際にはドローダウン値が増加し、年金値が減少します。

元々、スライダーには2つの色が含まれていましたが、少しは役に立ちましたが、システムの制約により、色を追加できません。

これをどのように行うべきかについて誰かがアドバイスできますか？.

どんな提案も大歓迎です。

Michael Zuschlag · Answer

フローで行く

私には、ユーザーがあなたに解決策を言っているようです：正しい動きで年金の割合を増やしてください。

スライダーはある種の水平積み上げ棒グラフとして表示されますが、ユーザーには表示されません。彼らはそれを車のAC /熱制御のように見ています。だからそれと戦わないでください。

積み上げ棒グラフを積み上げ棒グラフのようにする

テキストボックス間のギャップが比率を表す必要がある場合は、積み上げ棒グラフのようにしてみてください。スライダーを横に向けます。トラックを広くします。そして、はい、色を使用します。関連付けを行うために、テキストボックスのラベルと値に「棒」の色と一致するように色を付けます。スライダーの両端ではなく、バーの横にラベルを配置します（垂直方向のバーの場合は上下）。これにより、動きの方向よりもバーに関連付けられます。動的ブラケットが役立つ場合があります。

明らかに、これはカスタムメイドのコントロール（Flashなど）である必要があり、開発リソースに値しない場合があります。全体の問題は、ユーザーがスライダーに期待するものと反対に機能するスライダーを作成しているため、標準のスライダーを使用して十分な成功を収められるかどうかは疑問です（一方の端のラベルに向かってスライドすると、より多くのスライダーが得られます）。）。この問題を回避するには、コントロールを標準スライダーのように見えないようにする必要があります。

垂直方向、太め、ラベルとテキストボックスの移動、色の一致、動的角かっこの追加がユーザーに「これはスタックバーである」ではなく「これはスタックバーである」 AC /ヒーターコントロール」と表示されますが、ユーザビリティテストを行っているように聞こえるので、ユーザーにわかります。

FWIW、私は今朝、私のオフィスの5人の人に次の図を試しました（1回の小さな再設計の反復を含む）、「年金を75％に増やしたい場合はどうしますか？」 1.5人はスライダーを引き上げると言った。 3人半は、スライダーを引き下げると述べた。（「半分」とは、1人のユーザーがより詳しく調べた後、心を「上」から「下」に変更したためです）。まだ作業が必要だと思いますが、通常のスライダーで得ていたものよりも優れている可能性があるので、もう一度、あなたが感じた場合はテキスト間にギャップがあるボックスは比率を表すので、このアプローチが出発点として適している場合があります。

より一般的なアドバイスは、「積み上げ棒グラフ」などのメタファーまたは関連を使用する場合、グラフィックがそのメタファー/関連をより多く呼び出すほど、うまく機能するということです。

スライダーなし

多分あなたはまったくスライダーを必要としません。スライダーは、ユーザーが事前にわかっている特定の値を達成しようとするのではなく、ユーザーが「見栄え」がよくなるように（またはオーディオプレゼンテーションの場合は見栄えがするように）調整する場合に最適です。設定前、設定中、または設定後のスライダーは、ユーザーがスケールのどこにいるかを一目で把握できるようにするのに最適です。

ただし、ユーザーがほとんど常に特定の価値を念頭に置いてページにアクセスする場合は、2つのテキストボックスだけを使用した方がよい場合があります。スライダーは、正確な値（正確に33％など）に到達するのが面倒であり、正確な値（33％対30％）をチェックするのがあまり得意ではありません。テキストボックスを使用すると、不動産も節約できます。ユーザー調査により、取引の内容がわかります。

2つの編集可能なテキストボックスを調整して、一方を変更すると他方がリアルタイムで更新され、合計が100になるようにすることができます。たとえば、Googleがどのようにテキストボックスを調整して、単位変換（Google、たとえば「メートルからフィートで確認できます）。

テキストボックスを「ドローダウン対年金」というラベルの付いたフレームにまとめ、ユーザーがそれらを関連付けられていると見なす可能性を高めます。これがGoogleが行うことすべてであり、必要なすべてのことかもしれません。混乱の原因となる場合は、2つのテキストボックスの下に静的な読み取り専用のテキストを配置すると、常に100％になることがわかります。カスタムコントロールを作成する場合は、相対的な比率を示すテキストボックスの間に小さなnoninteractiveグラフィックを追加してみてください。スライダーとの混乱を避けるために、積み上げ棒ではなく円グラフを使用します。

もちろん、一部のユーザーが見栄えをよくしている一方で、他のユーザーが事前に値を考慮している場合は、スライダーと編集可能なテキストボックスの両方を使用できます。実際、私はそれがあなたがやっていたことを想定していました。

つぶやく

短い簡単な答えを出せないのはなぜですか？たぶん、最初の文で止めるべきだったのかもしれません。