web-dev-qa-db-ja.com

相互依存設定のUIパターン?

ユーザーが構成する必要があり、それぞれが他の最大値に影響を与える複数のパラメーターを持つネットワークアプライアンスの構成画面を作成しようとしています。ユーザーはこれらの値の1つまたは2つだけを必要とする場合があり、他の値はシステムによって自動最適化される必要があります。

ユーザーに相互依存関係を明確にして、彼に値を設定する自由を与えるだけでなく、彼が調整しなかったものをシステムが自動計算できるようにしたいと思います。

そのようなシナリオの確立されたパターンはありますか?

問題の非常に予備的な視覚化: enter image description here

どうもありがとう!

4
Grinner

ご協力ありがとうございます。システムインジケーターを使用するソリューションを考案しました(残念ながら、システム容量を単純に%で要求することはできません。良いか悪いかだけです)。

また、特定の各パラメーターの設定可能な最大値を求めることができるため、許容範囲を示す背景としてハードグラデーションを持つスライダーを作成しました。

Jsfiddleは1000ワードの価値があるので、ここにあります(ボタンはjsfiddleでは機能しないようですが、通常は機能します)。

https://jsfiddle.net/grinner/rLju4o2p/

1
Grinner

システム容量の現在の状態を表示し、しきい値を微調整するときにペインを更新します。

容量の%またはバイナリ状態のいずれかで基本設定を表示できる場合は、しきい値の調整時にこのペインを調整できます。

それらの変更がシステム容量の範囲内である場合は、 Save ボタンをクリックするか、変更をキャンセルします。

システムステータスを表示したままにする

これはJacob Nielsenによる 10ユーザビリティヒューリスティック の1つです。久しぶりです。これは特定のパターンではなく、一連の原則です。

最初はシステムステータスの可視性

システムステータスの可視性とは、システムの状態がユーザーにどの程度伝達されるかを指します。理想的には、システムは常に、適切なフィードバックを通じて妥当な時間内に何が起こっているかについてユーザーに通知する必要があります。

enter image description here

更新:対応の懸念

チームがこれを小さなビューポートに適用することを検討していることを示しました。

最も重要な情報は現在のシステムステータスなので、それを上に配置できます。もう一度見直さなければならないかもしれない1つの問題は、スライダーであり、これは調整が難しい場合があります(モバイルの場合など)。この場合、テキスト入力を強調できます。

これをモックアップしているときに、デスクトップバージョンでも、現在の設定ペインを調整ペインと入れ替えることができるので、ユーザーが最初に読むのは現在の設定です。

enter image description here

8
Mike M

考慮すべきいくつかのオプション:

  • 説明テキストを含めます。パケットサイズ、レイテンシ、再送信とは何ですか?なぜ誰かがそれぞれに高い値または低い値を使用したいのですか?

  • ルールを明示的にします。現状のまま、6再送信で60ミリ秒のレイテンシが良い理由はわかりませんが、10再送は悪いです。必要に応じて、数式を含めます。 「システムの容量」のようなものは、あいまいで変化しやすく、ユーザーにとって不明であるため、役に立ちません。

  • ルールが複雑すぎる場合は、「ヘルス」ゲージを表示するを使用して、一部のサイトが使用するパスワード強度インジケーターのように、色を赤から黄色、緑に変更できます。インジケーターが黄色または赤に変わると、修正を提案するメッセージが付随する場合があります。ゲージは、ユーザーが許容可能な設定の選択にどれだけ近いかをユーザーに知らせる必要があります。

  • 視覚的インジケーターを含むインデントやツリー構造などの依存関係。モックアップは、3つの完全に独立した設定のように見えます。それらが関連するであるが、依存しない場合は、フレーム内でグループ化できます。

3
習約塔