2

I would like to highlight any changes made to a long list of form checkboxes. That way the user can review all the changes made (whether checked or unchecked) before saving. Are there any examples for checkbox dirty states? I looked at material design and there is no mention there. Any ideas?

3
  • 1
    What does highlighting the changes help the user do? Is it potentially preventing a serious problem, or is it more of an FYI?
    – Izquierdo
    May 20 at 20:31
  • These checkboxes can be used by multiple users during different sessions. The idea is that the user can easily distinguish between changes made during current session and other changes. For example a user might open the form and see 10/20 items have been checked. He can check 5 more. Before saving he wants to easily see which changes are going to take effect
    – Yoav Barak
    May 21 at 19:10
  • This might be useful for your case. https://uxdesign.cc/new-ux-pattern-meet-the-double-check-8fc3895bebb2
    – PrakashGD
    May 22 at 6:50

3 Answers 3

2

You could highlight all changed items in the form in a background colour, such as Yellow. I don't know whether this is good practice, but I have seen this already.

2
  • Do you have any example?
    – Yoav Barak
    May 21 at 19:13
  • 1
    Sadly I don't, because I saw it in an internal application which I can't publish images of. May 21 at 21:20
1

Use a combination of versioning and element styling to highlight the changes. Since the case is, "As a user I want to learn about what's changed by myself and others", you might have a "Show changes since last login" mode that highlights each changed item - could be a background color on the checkbox and label, could be a different color font, could be a dotted line box around the changes - I'd play around and see what looks good. Perhaps the user can hover on the changed items to see who made the change. Perhaps you can include full versioning to see which changes were made each time the form was altered.

0

You can use a different styling on newly checked items to differentiate them from previously checked items, such as different background color, borders, or font weight. For example, you can use a background color same as or similar to the background color of the 'Save' button. That way you will be correlating updates to the saving action.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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