web-dev-qa-db-ja.com

アイテムが選択できないことをどのように示しますか?

ユーザーが先に進む前に行を選択する必要があるテーブルがありますが、一部の値を表示する必要があるが選択できない場合もあります。

これについてどう思いますか?

私の最初の考えは、アイコン、視覚的なスタイル、およびいくつかの説明文の組み合わせを使用することです。しかし、適切なメッセージがそのまま表示されるかどうかはわかりません。無効にしたチェックボックスを使用しない限り、アイコンを選択不可にするためのアイデアもありません。あなたはそれを選択可能にするために何かをすることができます。

enter image description here

すべての回答を歓迎します!

19
J4G

チェックボックスを無効にしておいても大丈夫です、それが心配な場合は、ツールチップを使用して、ホバーしたときに選択できない理由をユーザーに説明できますフィールド上。

デザインについてのいくつかの考え:

使用しているチェックボックスは、選択できないチェックボックスを理解させません。それらを小さくしてください。

また、私はそれらをそのまま左側に配置します より一般的

行を選択できないことを示すために、行を別の色や不透明度にする必要はないと思います。これは、他の何らかの理由に関連している可能性があるため、実際には混乱を招く可能性があります。 シンプルに保つ

Action = Select
Action performed on -> checkbox
Action not available => different checkbox(preferred) or no checkbox

enter image description here

28
Alvaro

私はあなたに良い解決策を与え、それから悪い説明をします

enter image description here

昔、ほとんどすべてのWebサイトがインタラクティブなフォームで同じような色とデザインを使用していた場合、ユーザーはこのWebサイトで学習すると他のすべてのWebサイトでそれを知ることができるため、ユーザーにとってはるかに簡単でした。

enter image description here

しかし、最近では、デザイナーはインタラクティブなフォームを含むデザインにより多くのアイデンティティを適用しています。これは一般的なパターンからわずかに派生したもので、新しいパターンも導入されています。

しかし、できるだけパターンにこだわるようにしてください。パターンは常にセクシーであるとは限りませんが、デザインがどれほど自明であるかを犠牲にします。

設計を分析する場合、チェックアイコンの灰色のシェードを使用する必要がありました enter image description here チェックボックスであることを示すために、ボックスのサイズを少し小さくすると、チェックボックスであることを示すことができます。

これにより、灰色の背景を使用して、ボックスが有効か無効かを示すことができます。

有効モードでは、テーマのどの色を使用するかを指定できます。たとえば、ボックスの境界線に紫を使用したり、チェックアイコン自体に色を付けたりすることができます。

それが無効にされたとき、私たちはそれを白黒に変えることによって、それから人生を奪うだけです。

懸念に関しては、無効化されたチェックボックスは誤解を招く可能性があるため、ユーザーが無効化されたフィールドにカーソルを合わせたときにtooltipを追加して、無効化された理由を説明できます。

8
UX Labs

ユーザーが続行する前に正確に 1行のみを選択する必要がある場合は、チェックボックスを Select ボタン。ボタンを選択できる項目にのみ表示されるようにすることもできます。

5
Harrison Paine

理想的な世界では、選択できない行を単に非表示にしますが、あなたがそれを表示する必要がある場合があり、なぜそれを表示する必要があるかについてのさらなるコンテキストがないと、私の応答が確信できません該当します。とにかく...

選択できない行については、どのような種類のチェックボックスも表示しません。 Alvaroがすでに述べたように、チェックボックスは左側にあるはずです。また、すべての行を選択できるチェックボックスをタイトル行に置くことをお勧めします。

別のオプションは、選択できない行のフォントに取り消し線を付けることですが、これは、情報が何であるか、なぜ選択できないのかによって異なります。

1
Peter

選択できない項目については、どのようなチェックボックスもないことに同意します。次に、必要な値の「選択」ボタンを使用して、区別をさらに明確にします。

0
A Brigham