7

Suppose I have an edit box that gets prepopulated with text. For example, in tax prep software, there may be a function that computes a value that is displayed, but then also allows you to change that value to something arbitrary.

How should the user be informed of the modification (so that they are later aware that they've done it) and allow a restore to the calculated value?

It seems too verbose to have a label 'overwritten' plus a button that says 'restore' that only appear when the value displayed is changed and then go away when restored.

  • is there a more compact way to do it?
  • is 'overwritten' the right way to label it? Some version of 'override' might work, but is there anything else?
4
  • Would you want to reset individual fields or the entire form?
    – ChrisF
    Commented May 9, 2012 at 21:01
  • 1
    @ChrisF: just the individual field that was overwritten.
    – Mitch
    Commented May 9, 2012 at 21:02
  • I'm guessing individual fields. But here's a different question: Will this technique be used for many fields on a page, or just one? And how important is it that it's been overridden? Overriding the TOTAL on a purchase is rather important and should be emphasized far more than, say, overriding the CONTACT EMAIL for the same purchase. Commented May 9, 2012 at 21:03
  • @MyrddinEmrys: any field can be modified, intermediate values/entries, and any dependent fields. But I think the importance of the field is independent of whether one is allowed to or has overwritten it. (i.e 'TOTAL' would be emphasized anyway).
    – Mitch
    Commented May 9, 2012 at 21:06

5 Answers 5

14

I'd try something like this:

enter image description here

When pre-populated, show an icon next to the field with a tooltip on hover.

When modified, swap the icon for a link that, when clicked, restores the calculated value.

1
  • Instead of the "revert" wording I would use, restore or recalculate.
    – sirtimbly
    Commented May 10, 2012 at 15:37
2

If you display the default greyed or italic and the entered values normal or bold (as examples) this would show that the user has overwritten some previous value. You could use the same scheme for any modified value - even if the user has just modified a previously entered value.

It would be more difficult to be able to show that you can revert individual fields. A "back arrow" type icon by the side of each field might work, but it would make the form very cluttered.

1
  • Yes, the cluttered feeling is worrying me.
    – Mitch
    Commented May 9, 2012 at 21:19
2

I would highlight the border of a field to mark it as edited - this should appear as soon as the user starts to edit the value inside a field. The user shouldn't have to guess what the border colour means but once the user sees that the act of changing the value also changes the border colour they will know what the visual cue means. Maybe an orange would work well (entirely depends on your colour palette obviously).

Reverting a change is trickier. I would have the word "Undo" with a suitable icon appear when a user Mouseovers or focuses on the field since this is what the user will probably first do if they want to revert the change. It's also important that "Undo" also appears as soon as the user starts editing the field for the first time (at the same time as the border change above) to let the user know that Undo-ing is an option. It should disappear when the input loses focus. That should keep the clutter down.

2
  • 1
    I would think that adding a border tends to indicate that the field value is invalid. It could therefore be a bit confusing.
    – GotDibbs
    Commented May 10, 2012 at 3:25
  • Yes border colours are used a lot for feedback on input validation so maybe use a different mechanism for that. The point Jørn E. Angeltveit makes below is a good one - my answer works best if the initial data entered was by the user in the first place. If it's pre-populated by the system you need to make clear where the values are coming from - like cravr's answer above. Commented May 10, 2012 at 12:21
2

This really depends a lot!

First of all, some default values are pretty obvious. If your asking a person many months he has lived in his home country. The default should be 12, not 0. And you don't need to show that this value was changed. And you don't need any revert feature - the user just enters the correct value and he knows what the value should be.

For fields with suggestions or "unknown" default values, the user will probably want to see what the default value/suggested value is compared to his own value. We use this a lot in our own software (tax report software), and the feedback is very good. When the user enters a blank form, he looks trough the suggested values and accepts them one by one by clicking the "use this value" button. These are values that are calculated on other forms or imported from other parts of the system, so they don't apply to every field on the form.

On top of that, you can use an icon (as cravr suggests) to indicate if the values on the tax form are equal to the suggested values.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

I have done this through visual indication. So the field looks like normal fied when auto calculating. When over-ridden, then it has a visual indication - I normally add a thick bar to the left. it should appear onChange event.

Next time the user focusses on the field, they see an "Auto-calculate" button, which removes the override.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.