web-dev-qa-db-ja.com

テキストボックスを無効にせずに強調解除する

ドロップダウンの1つが選択されている場合、次のテキストフィールドの内容を強調しません。それらが無効になっていることを示唆するので、私はそれらを灰色にしたくありません。ドロップダウンを使用すると効果的に情報になりますが、編集可能であり、その時点で再び目立つようになります。これを達成するための最良の方法は何ですか?

mockup

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

バックグラウンド

データ分析に使用するWebアプリケーションがあり、2つのシンプルなテキストフィールド(カレンダーコントロールがアタッチされている)を使用して、表示する時間範囲を選択します。

mockup

bmmlソースをダウンロード

一般的な時間範囲を簡単に選択できるように、実験的にプリセットを導入しています。必要に応じて任意の時間を選択できるようにするために、既存の時間フィールドを削除したくありません。また、(上記の例のように)プリセットが使用されたときに選択された正確な時間範囲を示すのにも役立ちます。

ドロップダウンメニューからプリセットを選択すると、それに合わせてテキストフィールドが更新されます。テキストフィールドを編集すると、ドロップダウンの選択が解除されます。つまり、常に使用されているコントロールのセットは1つだけです。

私が欲しいのは、プリセットが選択されている場合、テキストフィールドが使用されていないことを示すために、テキストフィールドを何らかの方法で強調しないことです。最も単純なアプローチは、コントロールをグレー表示するか無効にすることですが、必要に応じて完全に使用できるため、これを行いたくありません。

この問題に対処する良い方法は何でしょうか?

テキストフィールドに集中しすぎているのかもしれません。私の主な目的は、1つのコントロールのセットのみが使用されているが、他のセットは簡単に使用できることを示すことです。私の2番目の目標は、システムの既存のユーザーとの摩擦を減らすためにUIを大幅に変更しないことです。

2
Burhan Ali

両方のフィールドセットを表示したままにし、両方のフィールドがいつでも使用できることを示すという制約に基づいて、ユーザーが混乱しすぎない場合は、ラジオボタングループにそれらをラップすることができます。ユーザーに言う(私が正しく解釈している場合)は、ユーザーがプリセットを使用したり、特定の範囲を設定したりできることです。

Duration Selected

次に、ユーザーが範囲フィールドを変更するか、2番目のラジオボタンを選択した場合、ラジオボタンを裏返し、これが使用されていることを示し、カスタム範囲に入る場合は、説明どおりにプリセットをクリアします。

Specific Range Selected

それらを強調するためだけに使用されていないコントロールを「無効にする」価値があるかもしれません。ラジオボタンは、どちらのオプションも使用できることをユーザーに通知します。

With Disabling

2
Jeffy

両方のオプションが同時に表示されるとは思いません。一度に1つのオプションを表示できるコントロールがあると、インターフェースが大幅に簡素化され、認知負荷が軽減されます。ビジネス要件と過去の使用状況分析に基づいて、どのオプションをデフォルトにするかを決定する必要があります。タブはこの問題を非常に効果的に解決できると思います。

enter image description here

私たちは数年間、職場で同様のソリューションを使用しており、否定的なフィードバックはありません。

4
adesigner