1

So I'm designing a page to compare some data without using table. My company wanted to reuse a page that I've designed before to this case as it almost have same flow but not the comparing data case. So the case is, the user can only see the before and after data, then user can either approve or reject the data that has been changed (due to some rules, it has to display before the data changed). But I'm confused as I seem never really seen comparing data without using tables.

here's what I designed, on the right is displaying new data while the blue one is the data that has been changed. enter image description here

Is it okay to displaying like this or it has to be table? thank you.

0

Structuring the two sides where the form fields are in the same positions on both sides, as you have shown, should be sufficient to allow the user to compare the unmodified to the modified data.

Highlighting the modified data is good to help indicate that there has been a change to the field.

Assuming that all of the form fields on the right side are editable, I'd recommend that you remove the grey backgrounds from the right form. Typically, a grey background is used to show a disabled, read-only input field. For example, if I was trying to update the Email field, I might see the grey background on both sides and think that I am not able to update that field because it appears disabled. Additionally, you can lighten the left form's font color slightly to more clearly show that they are actually read-only fields, and the editing occurs in the right-side form.

In the end, you should have something like the following, where the two sides are more clearly representative of read-only and editable forms.

Disabled form holds old data, while editable form holds new data

1
  • thank you so much!
    – odp
    Sep 24 at 3:41

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.