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
-
1What does highlighting the changes help the user do? Is it potentially preventing a serious problem, or is it more of an FYI?– IzquierdoCommented May 20, 2022 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 BarakCommented May 21, 2022 at 19:10
-
This might be useful for your case. https://uxdesign.cc/new-ux-pattern-meet-the-double-check-8fc3895bebb2– PrakashGDCommented May 22, 2022 at 6:50
Add a comment
|
3 Answers
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.
-
-
1Sadly I don't, because I saw it in an internal application which I can't publish images of. Commented May 21, 2022 at 21:20
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.
answered May 21, 2022 at 23:09
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.
