web-dev-qa-db-ja.com

上書きできる事前入力されたテキストボックスの適切なUIは何ですか?

テキストがあらかじめ入力されている編集ボックスがあるとします。たとえば、税金準備ソフトウェアでは、表示される値を計算する関数があり、その値を任意の値に変更することもできます。

どのようにしてユーザーに変更を通知し(後でユーザーが変更したことを認識できるようにする)、計算された値に復元できるようにしますか?

「上書き」というラベルに加えて、表示された値が変更された場合にのみ表示され、復元時に表示されなくなる「復元」というボタンを追加するには、冗長すぎます。

  • それを行うためのよりコンパクトな方法はありますか?
  • 「上書き」はそれをラベル付けする正しい方法ですか? 「オーバーライド」の一部のバージョンは機能する可能性がありますが、他に何かありますか?
6
Mitch

私はこのようなものを試してみます:

enter image description here

事前入力されている場合は、フィールドの横にアイコンを表示し、ホバー時にツールチップを表示します。

変更した場合、アイコンをクリックしてリンクをクリックすると、計算された値が復元されます。

14
Calvin Chong

デフォルトの灰色または斜体、および入力した値を通常または太字で(例として)表示すると、ユーザーが以前の値を上書きしたことを示します。ユーザーが以前に入力した値を変更したばかりの場合でも、any変更された値に同じスキームを使用できます。

個々のフィールドを元に戻すことができることを示すことができるようになるのは、より困難になります。各フィールドの横にある「戻る矢印」タイプのアイコンmightは機能しますが、フォームが非常に乱雑になります。

2
ChrisF

フィールドの境界線を強調表示して、編集済みとしてマークします。これは、ユーザーがフィールド内の値の編集を開始するとすぐに表示されます。ユーザーは境界線の色の意味を推測する必要はありませんが、ユーザーが値を変更すると、境界線の色も変化することがわかると、視覚的な合図の意味がわかります。たぶん、オレンジがうまく機能するでしょう(明らかに完全にカラーパレットに依存します)。

変更を元に戻すには注意が必要です。ユーザーがマウスオーバーするか、フィールドにフォーカスすると、適切なアイコンが付いた「取り消し」という単語が表示されます。これは、ユーザーが変更を元に戻す場合に最初に行うことになるためです。また、ユーザーが最初にフィールドの編集を開始するとすぐに(上記の境界線の変更と同時に)[元に戻す]が表示され、元に戻すことができることをユーザーに知らせることも重要です。入力がフォーカスを失うと消えます。それは混乱を抑えるはずです。

2
omichowdhury

これは本当に大きく依存します!

まず最初に、いくつかのデフォルト値はかなり明白です。あなたが人に何ヶ月も尋ねるなら、彼は母国に住んでいます。デフォルトは0ではなく12です。この値が変更されたことを示す必要はありません。また、元に戻す機能は必要ありません。ユーザーは正しい値を入力するだけで、その値が何であるかがわかります。

提案または「不明な」デフォルト値を持つフィールドの場合、ユーザーはおそらく、デフォルト値/推奨値が比較自分の値と何であるかを確認する必要があります。私たちはこれを自社のソフトウェア(税レポートソフトウェア)で頻繁に使用しており、フィードバックは非常に良好です。ユーザーが空白のフォームを入力すると、提案された値が表示され、[この値を使用]ボタンをクリックして1つずつ受け入れます。これらは、他のフォームで計算される値、またはシステムの他の部分からインポートされる値であるため、フォームのすべてのフィールドに適用されるわけではありません。

さらに、アイコン( cravr が示唆する)を使用して、税務フォームの値が推奨値と等しいかどうかを示すことができます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2

私はこれを視覚的に示しています。したがって、フィールドは自動計算時に通常のフィールドのように見えます。上書きすると、視覚的に表示されます。通常、左側に太いバーを追加します。 onChangeイベントで表示されます。

次にユーザーがフィールドにフォーカスすると、オーバーライドを削除する「自動計算」ボタンが表示されます。

0
Alok Jain