I am making an application where the user can perform multiple replacements after one another (eg. replace all "is" with "was", all "will" to "would have").

The problem I am facing UX-wise is how to signify the changes that will happen in the original text. I was thinking about highlighting the pending changes in the original text, as if highlighting text. Each replacement would get its own color.

What I am worried about is that the user would be able to replace all "to" with "an" and then all "anmato" with "pineapple", then "tomato" would first become "anmato" and then "pineapple" (bad example, I know).

Changes would be able to overlap and thus highlighting would become problematic. I am able to figure out an algorithm that would highlight these both with the color of the first replacement, and the color of the second replacement, mixing the colors where they overlap.

I'm not sure if this is the best way to implement this, so I thought I'd ask you guys if you know of a better way.


According to your description of the issue, I suppose that the goal is to preview a text before performing replacements to help users figure out the result of these replacements. If it is, then it's important for a user to have visual hints where the replacements will be applied (or else the user will have to read the whole text thoroughly again) and at the same time it's not important for a user to see at a glance or to have visual hints (like different colours) what exact replacements will be applied in a particular part of the text.

So, my vision:

  1. preview a resultant text
  2. in the resultant text, highlight the parts generated by replacements with one colour (because a user needs to see at a glance where in general the replacements will be applied but not what exact replacements will be applied in a particular part of a text)
  3. provide an opportunity for a user to figure out how replacements will be applied in a particular part of the text on demand. I mean, if a user is surprised by some replacement he/she needs to get an explanation. For example, you may provide a window with a chain of applied replacements that emerges by mouse-over event on the highlighted text, like this: enter image description here

To minimise chances of error all over the document, allow users to apply replacement to a selected block of text.

Highlighting affected areas will be expected and so will be the option to 'Undo'.

To prevent overlap, replacements may be carried out one after another instead of applying them together. Just leave the replacement toolbox open till the user selects some other edit option.

If edit history is being maintained by the application, the replacements will be visible there, providing an extra option for the user to go back to recently saved states.

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.