私は、強調された行を強調して、行の色を変えて編集可能なhtmlテーブルを作成しています。
セルをクリックすると、ユーザーはその内容を変更できます。
これらすべてを考慮して、特定のセルが非アクティブ化されており、クリックできないことをユーザーに示す必要があります。
基本的な「灰色」の背景色を試しましたが、3つの異なる灰色の濃淡が累積されます。
それらのどれも私を十分に納得させないので、代替行の色を使用して無効化されたセルを表に表す最良の方法は何ですか?
[〜#〜]編集[〜#〜]
最良の方法は色を使用しないです。実際、色は優れた視力に大きく依存するため、必ずしも最適な方法とは限りません(デザイナーが通常持っている、忘れないでください)。
色を使用せずに無効状態を強調するいくつかの代替のアイデアと方法を次に示します-これらは提案です。おそらくすべてやり過ぎであり、プロトタイプと対話するユーザーを観察することは、さまざまなアイデアを評価するための良い方法です(廊下テストはこれに適しています) :
ホバー状態を変更します。たとえば、cursor: pointer
ホバースタイルを使用しないでください。アイコンを標準のマウスカーソルのままにして、セルの上にホバーしても何も起こらないようにします。編集可能なセルのホバーに表示される編集アイコンを追加することも検討してください。次に、無効なセルの上にマウスを置くと、「編集不可」アイコンが表示されます。
リンクのスタイルを設定しないでください-セルがインタラクティブな場合、どのテキストにも典型的なリンクスタイルが含まれる(または含まれる)必要があります。これは、非アクティブセルのホバー状態とともに削除できます。
ツールチップの説明を検討してください。これは、ユーザーがやり取りしようとした場合にユーザーにフィードバックを提供します(ユーザーはその理由を調べるためにこれを行います)。これはクリックすることもでき、ホバー状態のないタッチスクリーンを支援するためにタップする必要があります。
境界線とフォントの太さ/スタイルも使用できます。これらは、有効と無効の対比を提供します。これはリンクのスタイリングに少し似ています。
また、表の外側にキーを1つ、2つのセルを提供します。1つはスタイルが有効で、もう1つは無効になっており、内部の作業でユーザーを支援します。これらは、理由が表全体で共通である場合に、理由を説明するポイントになる可能性があります。