フィールドが編集可能であることをユーザーに知らせる
大量のデータを持つグリッドがあります。一部のフィールドは編集可能であり、データを更新するポストバックを引き起こします。ユーザーにそれを示す最良の方法は何ですか？つまり、UIの観点から編集可能と編集不可を区別するためのベストプラクティスはありますか？
私は通常、編集可能フィールドを白にして、編集不可フィールドを灰色に保ちます（または、白フィールドでない場合は単色、淡色：編集可能、濃色：編集不可）。
ええ、ベストプラクティスがあります。編集可能なフィールドをテキストボックスのように見せ、編集できないフィールドをテキストのように見せます。これら2つのUI要素の外観が異なるのには理由があります。
テキストをミュートしたfa-鉛筆アイコンをフィールドの右側に追加することを選択しました。
テキストボックスは、要素の主な用途が編集である単純なレイアウトに最適です。コントロールが無期限に繰り返されるグリッドでは、ボタンや他のコントロールのように、それらが視覚的な混乱を増やします。グリッドを使用する理由の1つは概要を提供することなので、これは問題です。
私は、編集可能なフィールドがインターフェイステキストのように非常に中立的に見えるデザインが本当に好きですが、ホバリングすると、編集可能であることを示す状態に切り替わります。これは、ホバーしたときにのみ表示される色またはアイコンを使用して実現できます。クリックすると、実際の編集モードに入ります。 JiraのWebアプリは、このアプローチの優れた例です。
ベストプラクティスは、通常、編集可能なコンテンツには入力を使用し、編集できないコンテンツにはプレーンテキストを使用することです。入力を微妙にすることができるので、人口密度の高いグリッドでさえ、それほど乱雑になりません。
公開された入力が原因で発生する混乱が高すぎる場合は、ホバーに表示されるコントロール（編集アクションアイコン）を使用するか、ホバーでプレーンテキストを入力フィールドに変換する（1行のコンテンツで機能し、複数行のコンテンツでも注意が必要です） ）。
ただし、ホバー時にのみ編集可能な手がかりを提供するという点では、使用の主なコンテキストは何かを自問する必要があります。モバイルタッチデバイスの場合、ホバーに頼ることはできず、すぐに可食性を公開する必要があります（編集アクションのアイコンを使用するか、入力フィールドを公開します）。
通常、灰色の背景と白い編集可能なフィールドがあります。フィールドを編集できない場合は、背景を同じ灰色に設定します（技術的には透明と同じですが、ユーザーは気にしません。同じであることがわかります）。
Webのテキストボックス。ユーザーは、フィールドがテキスト入力用であることを区別できます。可能であれば、最初のテキストフィールドにフォーカスすることをお勧めします。このフィールドは、フィールド内にカーソルがある薄い青で縁取られているか、単に縁取りで強調表示されています。
モバイルの場合は、キーボードを起動します。点滅するカーソルで最初のアイテムを選択できる場合は、そのようにします。残りのフィールドをグレー表示しても問題ありません。
これは個人的な偏見を明らかにするかもしれませんが、どのフィールドにいるのかをユーザーに示すある種の「フォーカスビジュアル」を好む傾向もあります。柔らかい背景または境界線は、これを実現する方法です。