What's the best UI to use to select between a before and after?

Question

I am currently working on a web application that allows two or more people to collaborate on a legal document, where they can propose changes and either party will be given the option to choose between the original or revised (before/after) version and select a version to proceed with.

I am trying to make it as obvious as possible that they MUST select one or the other, and avoid having an accept/reject button under the before/after.

I have attached an example of some ideas so far.

Answer 1

Some general comments that will help guide your decision, although the best option will probably need to be tested with the users to make sure that they also understand the behaviour correctly:

• You are talking about making the user select between one of two options, so the use of a checkbox, which is commonly associated with multiple selection (in your first couple of examples) may be against the common design patterns.
• You want to give the user a consistent point of reference, and in the naming of your buttons you have put it against the revised text, but it means that the original text has no action against it if some people want to use it as their reference point. So perhaps you can try having a "Keep" button against the original text, and a "Change" button against the revised text to make the layout and design consistent (and you can make it work like a toggle between the two buttons).
• To reduce the amount of visual distractions I would also suggest keeping a clean and simple design with the input controls, as additional images, colours and shapes will be more of a distraction than an aide to guide the users.

Answer 2

Taking a bit from from @Alvaro feedback and focusing on the kind of input the user needs to give, I thought of this solution. Let me know if it helps.

Answer 3

In my opinion, the colors are too loud when scanning the doc and can be intimidating in the case where a lot of changes were made.

Since we are talking about changes that made to a document, in the current solution, the user needs to read the same sentence twice and find the changes by himself. I would show the changes inline so the user could see exactly where the changes affect the text and reduce the amount of cognitive load. see more on Nielsen Norman Group article

so my solution would look something like that: (you can play with the colors, I was short on time :) )

Answer 4

This will depend on the kind of question you want to ask:

• "Which do you want to keep: A or B?" The correct UI element in this case is not a checkbox but a radio button.
• "Do you want to keep the new version (B)?" / "Do you want to update the actual version?" This case is a direct question of "Yes" or "No".

In my opinion, the second question is more relevant in this case as it assumes the new version is an improvement of the original and the user is simply confirming.

A dialog asking to "Keep" or "Discard" the new version might be a good option.

Answer 5

my issue is with the colours. red and green, in the western world, traditionally juxtapose to mean 'bad' or 'stop' and 'good' or 'go' - and this is a bad idea when you are trying to make the user make an undirected choice.

these colours, combined with the use of the colours of the buttons in sample #3, is pretty confusing.

perhaps you should make the original black and white, and make the background of only the revision red/green depending on what they pick, and only after they pick.

other issues:
- check boxes are too small, too easy to make mistakes.
- the vertical toggle on sample #4 goes up when you want to select the lower/revised option and down when you want to select the higher/original option...???