1

I am writing a UI for configuring a big system.

The typical workflow for a person using the product is to open a configuration form, which can contain hundreds of fields, make some small changes and then close it.

Because there are so many fields, I think that it will be useful for users to be able to see which fields they edited before saving their changes.

What visual cue would you use to indicate to the user that he has changed the value of a given field.

Follow-up question: Besides editing fields, users can add new sections from my UI. Ideally the cue for "edited field" could also be used to indicate which sections have been added with the current edit operation.

2
  • How many fields on the original form and how many could be potentially added? May 27, 2014 at 10:15
  • Don't know. they will be specified via XML files for the different modules of the program.
    – Jencel
    May 27, 2014 at 10:40

4 Answers 4

4

I think you can solve the visualization as a secondary matter to the added functionality of undo-ing field-specific changes.

Place a small red x or a backwards-swirling arrow next to each field to indicate that there are changes which can be undone. If the user clicks on the x or the arrow the field contents will revert to their original state. These icons will only show up on fields they edited before saving their changes, which solves the visualization issue you currently have.

1
  • Good. This solves my problem.
    – Jencel
    May 28, 2014 at 12:08
0

Would this work?

Multi-Section Review

Points to note:

  1. Colour indicates a modified question, an icon may be preferable
  2. Sections are accordions to preserve space, due to the unknown number of questions
  3. Sections and question would be clickable to quick view or return to that section/question
2
  • Colour looks like a visited link to me; not necessarily edited. Perhaps simply having (Edited by X at XX:XX) next to each question and section title would help?
    – user43251
    May 27, 2014 at 12:15
  • Sounds good, as per point 1 - the type of indicator I left open. May 27, 2014 at 14:16
0

In a recent design, I used checkmarks beside the fields to indicate that a field had been edited and contains valid information:

enter image description here

4
  • So what would the field look like if it has been edited but does not contain valid information?
    – Michael Lai
    May 27, 2014 at 22:52
  • No checkmark, and a red "glow" around the field. Also, invalid contents colored red a little darker than my spiral logo above. Finally, the form submit button is disabled. Contrary to what I've seen some people do, the fields are not shown in "invalid" state until the user leaves the field. I don't want to make users feel like they've made a mistake just because they're not finished with the field yet.
    – Dave Land
    May 28, 2014 at 3:29
  • This looks more like "Contains valid information", than "Edited"
    – Jencel
    May 28, 2014 at 10:06
  • @BobbyMarinoff — I understand. The check won't appear unless the field has been edited. It also happens to contain valid information. If there's no validation required (for example, a comment field), the checkmark appears to show that it contains new (and implicitly valid) info.
    – Dave Land
    May 28, 2014 at 21:15
0

Would it be possible to segment the large system into smaller ones? I think if I were going to approach this, I would try to break the inputs up into logical smaller sections.

I'm also interested in if you have any research to show people need to be reminded that they entered data into a field. Are the fields pre-populated? If so, maybe that's driving the confusion?

Smaller chunks with a summary of inputs at each section would seem to be a winner. In a multistep process I worked on recently, I had a summary of the first screens input that went along with the other screens to maintain context, maybe that's something you could do as well.

1
  • It is a system configuration, which is created only once and edited many times, so yeah, the fields are prepopulated.
    – Jencel
    May 28, 2014 at 10:05

Your Answer

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

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