Page MenuHomePhabricator

Two Column: Symbol and visual marker changes
Closed, DeclinedPublic5 Estimated Story Points

Description

Update markers so that they can better represent the type of edit that was made.

Feature Summary

  • Improve UI of two-column diff to be able to better identify the changes that were made.

Use cases

  • As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to recognize which part of the text has been updated looking at visual markers (highlights) and symbols.

Benefits

  • Improve UX of diff view

Details for QA

  • Make sure markup/css changes to wikidiff do not break PHP engine output
  • Add test coverage for existing functionality, if missing
  • Acceptance Criteria: This change must ensure "functionality parity" in all other diff stress tests

Designs

  • Addition: The current experience may be confusing and not intuitive for some since the representation for addition has both colors, yellow and blue, and both symbols, minus and plus. For the new design for addition we got rid of the minus symbol on the left, and the yellow box, since these two are associated with deletion. Only addition happened here, so we kept what represents addition only (plus symbol and blue color).
Current experienceProposed design
addition current experience.png (216×1 px, 36 KB)
addition mock up.png (327×920 px, 49 KB)
  • Deletion: The current experience may be confusing and not intuitive for some since the representation for deletion has again both colors, yellow and blue, and both symbols, minus and plus. For the new design for deletion we got rid of the plus symbol on the left, and the blue box, since these two are associated with addition. Only deletion happened here, so we kept what represents deletion only (minus the symbol and yellow colour).
Current experienceProposed design
deletion current experience.png (210×1 px, 36 KB)
deletion new design.png (335×937 px, 48 KB)

Impact

  • users that able to better understand new changes/users that are new to diffs

Contact Person / Team

  • Community Tech

Related Conversations

Slack channels

  • better-diffs
  • diffs-working-group

Timing

  • TBD

Event Timeline

HMonroy renamed this task from Better Diffs: Two column - Symbol and visual marker changes to Two Column: Symbol and visual marker changes .Feb 15 2023, 7:10 PM
NRodriguez changed the point value for this task from 3 to 5.Mar 7 2023, 6:12 PM

addition mock up.png (327×920 px, 49 KB)

This to me is a bit counter-intuitive, but it's perhaps me just being used to the status quo...

When I see a gray box, that tells me nothing changed. In this case, something did change, though, only nothing was removed. As a patroller, I may quickly scan through the left side to see what changed (perhaps the last version was my version, hehe, and that's why I'm concerned about what words of mine were changed). In this situation, I would expect to see some indication of where a line changed, whether it was something added or removed, doesn't matter, I just need to know it was changed. I suspect other patrollers may operate in the same way.

Hypothetically, let's pretend this is a much bigger diff, and with moved paragraphs (I know those are handled separately, but bear with me, just a hypothetical example). In that case it may appear the gray content on the left was completely untouched since the corresponding block on the right isn't directly adjacent. That wouldn't be true, though, and I would be misled into thinking that block didn't change at all. In the small example in the above screenshot, it's easy to see what changed because it's there immediately on the right side, but that may not always be the case.

I believe we're going to ping some of the voters of the wish to ask what they think of this, which I definitely recommend. The proposed design might be great for newcomers, but patrollers who have to view diffs every day at high speeds should probably get the final say. However again, I imagine a lot of it is just patrollers being used to things looking one way, and any visual change will disrupt them, but (hopefully) only temporarily!

In short, gray boxes to me are only there for context (i.e. where am I looking in the source wikitext?). Seeing them means there were no changes to that block of text in any way.

Just my 2c. Please don't change designs solely because of my opinion :)

@dmaza You asked about moved paragraph changes, those should remain the same if a paragraph was moved. Let me know if that answers your question!

@dmaza You asked about moved paragraph changes, those should remain the same if a paragraph was moved. Let me know if that answers your question!

It does. Thank you!

JSengupta-WMF changed the task status from Open to Stalled.Jul 20 2023, 4:47 PM
JSengupta-WMF subscribed.

I will explore a different version of marker which will require another round of usability testing. We can park this ticket for now.