web-dev-qa-db-ja.com

テキストが編集可能な場合、テキストボックス内に(見た目は)テキストを表示することはどのくらい重要ですか?

私たちのアプリケーションの1つに採用した新しいアプローチは、名前などの編集可能なすべてのテキスト、かつてボーダーレスになるように記入された説明です。テキストを編集するには、ユーザーはテキストの上をもう一度クリックするだけで編集可能になります。

これらの例では境界線が表示されます。

  • ボーダーはロールオーバーで表示されます
  • テキストの編集中にボーダーが表示されます

私の質問は、これはユーザーにとって理にかなっていますか?この方法を維持する必要がありますか?これを改善するために他にできることはありますか?

The border-less state vs with the border

8
nuwa

可能な解決策は [〜#〜] jira [〜#〜] のようにすることです。

正常: enter image description here

それの上にホバーしている間: enter image description here

クリックすると: enter image description here

15
Bart Gijssens

ユーザーは、クラシックフォームを使用する前にこれらのフィールドに入力する必要がありますか、それとも編集方法のみですか?最初のケースでは、ユーザーはこれらのフィールドの入力が自分のものであることを理解する手がかりを持っています

「説明:新しい説明を追加...」のように明示的なプレースホルダーを書くこともできます。

または、境界線の代わりに、編集可能領域の背景色を少し変更して、何か違うものがあることを示します。ロールオーバー時の相互作用は、まだ良い考えです。

6
Domz
  1. 編集可能であるという明確なヒントが表示されないテキストフィールド(静的なテキストの色やフォントが異なると、明確なヒントIMOではない)が見つかり、非常に迷惑です。
  2. マウスを少し動かしたときに編集のヒントが表示されるテキストフィールドが見つかりました。
  3. ペンアイコンなどのテキストフィールドが少し煩わしいヒントとして表示されます。
  4. 「見た目は新鮮」ですが、下線や境界線のない無地の背景などの明確なヒントがあるテキストフィールドがうまくあります。
  5. 従来の境界線が少し退屈であるが、それでも問題のないテキストフィールドを見つけます。

答えは、最も一般的な使用例に依存すると思いますか? lookingの場合、lookingを最適化します。2または1でも問題ありません。データ入力の場合は、4または5がしっかりしたアプローチのように見えます。見た目と「統合」された更新の両方を行うページの場合、2または3または4の目立たないバージョンが機能します。

上記は、フィールドが空の場合を考慮していません。正しいプレースホルダーテキストは、オプション1でも耐えられるかもしれません。しかし、重要な状況は、ユーザーが既に入力されたフィールドを編集したい場合、それが可能であればです。

2
hyde

ユーザーは、テキストが編集可能かどうかを知る必要があります。彼はインタラクティブな要素を探し、それが見つからない場合は使用しません。

これがユーザーによって長時間使用されるアプリケーションである場合、使いやすさを向上させるために新しい概念を導入することが役立つ場合があります。この場合、編集可能なテキストの境界線は非常によく確立されたUIの動作です。ユーザーにとって、使いやすさ、ユーザーエクスペリエンス、デザインのトレードオフは何ですか。

私はアドバイスをするか、境界線に固執するか、ユーザーに明らかな良い代替案を見つけます。

0
Gustav