3

I have a requirement to show the comparison between 2 versions (updated and previous) of a form. The form has too many form fields which are vital and cannot be further reduced or grouped.

For instance: There is a form which was updated and the user wants to see the previous version? what is the best way to show the comparison?

  • Show entire form and the mark the changes with the different colors? (like git / svn)
  • Show only modified values (with labels or headings) by marking with different colors?
  • Any other thoughts?
| improve this question | |
  • Can you explain the context more? As in, is the form changing in real-time? or Does the user return to this form? and why? – Saurabh Kumar Suman May 13 '17 at 17:25
  • Why would a user want to see previous changes in the form? Who are the users? Are you making this form for external/internal users? – NB4 Sep 11 '17 at 9:05
1

Depending on the space you have and the complexity of the fields in the form, maybe consider showing strike through text for older values

Or maybe have some a small icon/ tool tip for those fields that have been updated. Mouse over/click on this icon will show the old value.

| improve this answer | |
0

Why does the user want to see the previous version? Can they roll back to previous versions? Understanding the scenario may help inform the solution.

Another factor that could impact the solution is the complexity of the form. If the form contains a large amount of data then it could become a little overwhelming.

The first solution that I would consider would be showing the two forms side by side, clearly indicating which is the latest and which fields have been updated. This allows for quick identification of any updates, along with providing the two values side by side for easy comparison.

Example:

File comparison in Atom

Alternatively if comparison is more of an edge case, you could highlight fields that have been updated and allow the user to interact to see previous field entries.

Example:

LastPass password history

| improve this answer | |
0

Some diff tools have an overlay functionality, for example https://www.perforce.com/video-tutorials/using-image-diff-tool

That could be an approach to take. If you are only comparing two different versions, you could toggle between the versions and/or have a side-by-side comparison view (colour coding selection of version with the version's content).

| improve this answer | |
-1

Print them off, walk over to the user's desk and lay the examples on their desk. Handwrite 'Version 1' on the old form and 'Version 2' on the new form.

I'm not kidding. Sometimes the best way to communicate is in the real world.

| improve this answer | |
  • Hey Lord, welcome to UX.SE. This question is about UI/UX design, not about workplace communication. Please consider editing your answer to better fit the task at hand. – Alan Oct 11 '17 at 16:36

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.