I have a situation that I could use help with. I've thought about every scenario possible and have ran out of ideas.


The user changes, make additions, or removes information in the system. Those changes are color coded based on what they are.

However, the 'Other' field in the chart is a free range text box. It should be able to display changes, additions, and removals to the text contents at the same time. Is there any way to display the differences between the 2 sections to compare the 'old value' and 'new value' within the 'other' section.

At present, for the 'Other' field:

• User can enter any text in the field.

• This is a String value.

• Person viewing this chart currently has to compare the old and new value with the eyes. There is nothing to let the user know of the differences.

enter image description here

  • 1
    To clarify, you're asking how to show differences between 2 text area elements so the user can identify any small change - but the columns in the view itself aren't editable so you can include markup in there? – Alok Nov 3 '17 at 17:27
  • right the columns are READ ONLY...they are coming in from a database system. so when the user actually makes a change in the system it will show the OLD VALUE and the NEW VALUE. The 'Other' field is a free text field so therefore if it is a change, addition, or removal - it can takes hours to compare the text which could for example be thousands of lines of text. – Rex Nov 6 '17 at 2:22

You are starting from to strings of text: the old string and the new string.

Then you want to show just these two strings, in a way that allows the viewer to scan the text quickly, even if it is very long, and quickly see at a glance what the difference is between the two strings.

There are multiple ways to represent this information, commonly referred to as a diff between the two strings.

A way to think about a diff between two strings is as a list of substrings that are either:

  • Common (they are both in the old and the new string)
  • Deleted (they are only in the old string)
  • Inserted (they are only in the new string).

For example if the old string is "The sky is cloudy" and if the new string is "The skies were cloudy", then they can be broken up as

  • Common string "The sk"
  • Deleted string "y is"
  • Inserted string "ies were"
  • Common string " cloudy"

The first logical step to showing this information is to compute the diff, i.e. that list of strings that are either common or deleted or inserted. In general the diff between two strings is not unique. For example in the above example it can also trivially be represented as

  • Deleted string "The sky is cloudy"
  • Inserted string "The skies are cloudy"

But that doesn't really help you. So you want a good diffing algorithm. There are plenty of good ones out there, don't bother inventing one.

Next up is presenting this information. There are two main options and a bunch of refinements.

The first option is to show the two strings side by side, highlight in red the bits of the old string that are deleted, and highlight in green the bits of the new string that are added. I don't have colors or side by side here, but for the above example it would look like:

The sky is cloudy

The skies are cloudy

The next option is to represent everything together, but with red highlight and strikethrough for the deletions and green highlights for the additions. I'm not too fond of this personally but some people prefer it. For example it would look something like this:

The sky isies are cloudy

Next up refinements: very long common strings, eg something that takes up a whole page, can be abbreviated in both cases to avoid including a lot of information, but it's good practice to allow the user to expand the abbreviated part.

| improve this answer | |

Show additions and removals.

enter image description here

You cannot (reasonably) discern if a removal of a some content and addition of other content is an edit to that block, i.e. same general gist or type of content, or a completely different sort of content. So don't. Just show what's removed, what's added, and let users do the thinking.

| improve this answer | |
  • So are you suggesting that I create a legend that only displays the changes, additions, and removals? – Rex Nov 6 '17 at 20:26
  • @rex not quite, but sort of. My answer is just about the 'other' field which is one big chunk of text, and thus hard to parse. I don't see very much value in indicating 'change' in the way you do (3 colors but bo detaik) but for names and phone bumbers it's easier to parse. So those fields are up to you. I would personally use only red and green in the textboxes, and use yellow or an icon that a certain text box has changed. This reduces the mental cost of the first step (is it changed) from 4 to 2 options, and gives more detail on further inspection if needed. – PixelSnader Nov 7 '17 at 7:19
  • Ok thanks so much for your help. The reason for the colors is because the system that the users are accustomed to uses the same color scheme. Thats the only reason that I wanted to keep it. – Rex Nov 9 '17 at 4:35
  • @Rex Oh I didn't even pay attention to the colors. Only now I see you use yellow/red/green while the example I googled uses blue/red/green. Using yellow or orange is fine, I focused more on creating a sort of hierarchy for the edits [1 - is it edited, 2 - if yes, how?] But you are right that a traffic light palette is quite often used, and I don't quite understand why my googled image uses blue instead... – PixelSnader Nov 9 '17 at 7:42

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.