1

I'm working on code diff view design, and would like to gather your opinion on two existing patterns.

Below are screenshots of two different side-by-side diff view designs.

One is leaving white space for code that didn't exit in the old version (on the left), and the line numbers don't continue. Scroll-aligned code diff view

The other design is similar to sankey diagram where the white spaces are removed on the left side, you can see lines of code in its original flow. Sankey diagram-like code diff view

Which design do you prefer and why?

  • The first style is ok too, but is missing the indicators for a absent lines. WinDiff for example shows dark gray lines where the file has no equivalent line. – scunliffe Aug 19 '17 at 12:36
1

I personally prefer the 2nd one.

Why?

  • For the simple reason that it shows me both the states as-is.

If one version has one 20 lines of code then I see it altogether rather than it being dependent on the other version which might have say 1000 lines. Imagine having to scroll through 1000 lines of code on one side just to reach line 2 on the other side!

  • I like the added and removed code highlighting. It's cleaner and only highlights the relevant code rather than the whole line.

  • It makes code comparison easier when comparing more than 2 versions (see the screenshot below)

Alignment of more versions is easier with the Sankey-style lines Code diff with more than 2 code versions

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.