ContentEditable要素のアフォーダンス（背景を変更せずに）
環境
クラシック入力の代わりに ContentEditable 属性を使用したい。
インプレイス編集機能のアフォーダンス の複製のように聞こえますが、実際には、答えが示唆する背景色の変更を避けたいと思います。また、リンクされた質問は2011年から発行されており、UXの実践は常に進化しているため、このテーマに対する新しいアプローチとソリューションがあるかもしれません。
これは私の現在のアプローチです。下の境界線に加えて別の色。
（このgifでフランス語を申し訳ありません）
このデモで試すことができます：http://jsfiddle.net/Lazgp/6
青と点線のボーダーを選んだのは、それとまったく同じ理由がありません。
質問
それを改善するためのフィードバックやアドバイスはありますか？
素晴らしく見える！点線と破線は実際にはアフォーダンスを与えるのに非常に役立ちます。しかし、あなたができる最善のことは、人々がそれが実際に編集可能であることを本当に理解させるために、最初のフィールドを自動的にフォーカスすることです。
これにより、ユーザーに即座に視覚的なフィードバックが提供され、推測する必要がなくなります。
それは本当に非常に珍しく、物議を醸すアフォーダンスを持っています。
通常、いくつかの追加情報を含むポップアップを表示するために使用される点線と破線は、ユーザーに通知するだけです。私をクリックすることはできますが、編集することはできません。
編集モードに切り替えた後、すべての編集可能なアイテムの入力を表示することをお勧めします。それはより大きなアフォーダンスを持ち、また入力はユーザーが情報を入力する動機となります。
相互作用はよさそうです。ここでは、可能であればテストする必要があるいくつかのアイデアを示します。
- ウィキペディアがフォーカスを改善するために行うように、すべてのセクションで
Modiferボタンを提案しないのはなぜですか？
このやり取りは、私の知る限り、英語のウィキペディアにはまだありません
破線の下線と青い組み合わせには注意してください。リンクと誤解される可能性があります。あなたのアプローチは問題ないように見えますが、それはかなり型破りなものであることを認めるべきです。
前のコメントへのエコーとして：入力の1つをホバー/クリックすると、Basecampが行うように、背景の助けをほとんど借りない入力のように見えるはずです。やり取りの理解を助けるために、最初の入力に焦点を当てて例を示します。
