In a piece of desktop software, I have a around 20 items.
These items should be shown in a list, which fits on the screen.

The user should be able to select exactly two items in the list, then, a diff-like result is shown in a user control next to the list.

What patterns would be nice to use here, so that the count of actions necessary to select two items is minimized?


Due to the resonance and the questions in the comments, here some context.

The program is about comparing trees.

In my case, the user would usually select random items, but I would like to have a nice solution for both cases, selecting two random items or keeping one item selected and changing the other item.

The items themselves represent the trees, however a short tag is available for each item which would be shown in the list.

For the diff, both trees might be shown side-by-side, wheres the nodes which are missing in the other tree are highlighted, for example like this:

Tree comparison

The program is going to be used by computer scientists in academia, so elderly people or children are not of concern.

  • Desktop or mobile? In other words: how large is the screen and screenspace? And how many items are in your list? Can they all be shown at once, or does the user need to scroll the list?
    – CodeManX
    Commented Jul 18, 2014 at 0:52
  • Desktop. The list typically fits on the screen, around 20 items.
    – Emiswelt
    Commented Jul 18, 2014 at 3:02
  • Two drop down lists sounds like the most intuitive to me. First choice: [box], Second choice: [box] Commented Jul 18, 2014 at 10:42
  • 1
    Is it random 1-1 compare or user usually will compare one specific item with others one by one? Commented Jul 18, 2014 at 13:57
  • 1
    @Emiswelt Can you give a little more information about the nature of the items you are comparing? Are they some set of attributes that can be compared side-by-side, or something more complex with insertions/deletions or something e.g. multidimensional?
    – Jason C
    Commented Jul 18, 2014 at 14:30

10 Answers 10


two rows of radio buttons as e.g. on the wikipedia http://en.wikipedia.org/w/index.php?title=Wikipedia&action=history

picture of the wikipedia history
(source: hbs.edu)

  • Yes, it's better to have two lists with a limitation of one. Good example Commented Jul 18, 2014 at 12:04
  • +1 This is great and super clear what's going on; and never takes your eyes too far from the list itself.
    – Jason C
    Commented Jul 18, 2014 at 12:49
  • 1
    I personally dislike radio buttons for selecting more than one item, because I breaks a well-established convention.
    – sergiol
    Commented Jul 19, 2014 at 8:46
  • 2
    @sergiol It's not clear from the screenshot, but there are actually two radio button groups, each organized in a column. So you can still only select one item per button group. The only convention it breaks is that the visibility of some radio buttons in one column is depending on which radio button is selected in the other column.
    – kapex
    Commented Jul 19, 2014 at 12:32
  • I decide to go with this answer because it promises a clear and very fast workflow on a desktop. Please note that for a touch-based application I would have chosen differently.
    – Emiswelt
    Commented Jul 20, 2014 at 23:02

You could use a source area (list of items) and a target area (drop zone), to which the user can drag items from the list.


download bmml source – Wireframes created with Balsamiq Mockups

The drop zone should clearly state how many items are need to be placed there. I suggest to use a text message that emphasizes the remaining count of items, i.e. the number first, or otherwise in a larger size, bold or highlighted in a different color than the rest (so it's easily scannable). In addition, you might want to give a visual hint, like dashed rectangles in the shape of the source items in the target area.

A pictogram between the source and target areas like an arrow, a stylized hand that drags something or similar can imply the action required by the user.

  • A downside is an extra step is required to change the selection after it is made - you have to explicitly remove an item to change it. It would be a challenge to eliminate this step (e.g. you could drop onto an existing item to change it although the effect might not be immediately obvious the first time you do it, and you have to decide if you want to treat a selection of only one item as a special case - replace the one item on drop vs. always add a second.)
    – Jason C
    Commented Jul 18, 2014 at 6:32
  • Too much work for user. I imagine how much dragging I will have to do to compare 20 to 20 items. also, I will have to be accurate not to miss drop area. Btw. older people are usually (no reference) not familiar with dragging and dropping. Commented Jul 18, 2014 at 14:43
  • It only works if the target area requires a few items indeed. The item drop areas in the target area should only be used to indicate how many items are needed, but not require the user to drop an item exactly on it. To suite the elders as well, one could add small arrow-buttons for every item in the source area to provide an alternative interaction pattern.
    – CodeManX
    Commented Jul 18, 2014 at 15:10
  • 3
    But the question asked about how to do it for just selecting two items, and I think this is a very good solution for that.
    – Almo
    Commented Jul 20, 2014 at 14:00

enter image description here

You give the entire list on the left side. Once the first item is selected show the selected item in right top window.

Once the second item is selected show you can show the comparison between the two.


Components List (Collection of Nodes)

Box A (For Node A)

Box B (For Node B)

On Mouse Over on any node show the option to select A or B (No matters the node is selected or not, the right slide menu will ask for both the options)

Now Cherry on top of this approach is that you can show a preview of the tree in the respective box as soon as user mouse over on A or B.

enter image description here

Once the node is selected show the label against the item.

enter image description here

  • 1
    What if you select an incorrect first item by mistake?
    – Jason C
    Commented Jul 18, 2014 at 12:41
  • 2
    Just tap on it again. it will be unselected. Commented Jul 18, 2014 at 12:48
  • 1
    @KrisHarper - Exactly, A swap button can also do the work. Commented Jul 18, 2014 at 13:22
  • 1
    @DineshGolani +1 A swap button right on the border between A and B would make this perfect I think. You could also display an "A" and "B" near the check mark or something to show which is which in the list and make it even clearer what happened when you clicked.
    – Jason C
    Commented Jul 18, 2014 at 13:36
  • 2
    Bad thing about this UI is that to change one item I will have to deselect something first. While there are should be a way to switch items in one click IMO. Maybe two lists on a left and on a right side? Commented Jul 18, 2014 at 14:47

If you want a two item selection for diffing, I think you can look to WinMerge as a good inspiration:

  • If you are inside the app and click the "Open" icon it will launch a dialog with two textboxes for entering left and right files:

Winmerge Select files

WinMerge also integrates itself with Windows Explorer and puts a "WinMerge" entry in the Right mouse button context popup menu:

  • If you select zero files, and right-click > WinMerge, it will open with that dialog having the "Left" field with the path of Current Directory, leaving the "Right" field empty, hoping that you enter a directory path there.

  • If you select only one file/folder, and right-click > WinMerge, it will open with that dialog having the "Left" field with the path of the selected file/folder, leaving the "Right" field empty, hoping that you enter a file/folder path there.

  • If you select two files/folders, and right-click > WinMerge, the dialog will not be shown, as it is not needed, and the left and right file/folder are loaded directly to the main window for diffing.

  • If you select more than two files/folders, and right-clic, the WinMerge option will be simply disabled as it does not make any sense.

For your specific case, I think I would implement it like this:

  • A form with a list and a "Diff" button

  • If the user picks exactly two entries, the button is enabled and executes the diffing.

  • Else the button is disabled and grayed, doing absolutely nothing.

  1. Diff tools are usually aligned vertically: item 1 on the left, item 2 on the right.
  2. What is a "compare"? As for me, it is something like "select first item" then comare it with others. Once new item is better, I switch to it and another iteration begins.
  3. I will probably be iterested to mark some items i like and compare only these items.
  4. When screen is opened item 1 and item 2 is already selected

So it may look like this:


download bmml source – Wireframes created with Balsamiq Mockups

Item selector:


download bmml source

  • This is great as long as the original item list is such that a select few are "interesting"; e.g. when comparing items in an online store (an interface I see on a lot of stores is you check 'compare' next to the item, then go to the compare page to see all of them; although its a little odd to limit to only two at a time if more than two are selected for compare). The "like" step should probably be omitted for e.g. a list of files or daily reports or something where really you'd probably want to just star all of them and defer to the selectors on the compare page.
    – Jason C
    Commented Jul 18, 2014 at 14:24
  • 1
    @JasonC, you are absolutely right. But I see a problem with this question: we dont know the context and the process. Items to be compared could be store products, files, services, offers, etc. For some reason only "two" can be compared (it could be file comparing tool...) Commented Jul 18, 2014 at 14:29

I would combine the two existing answers here.

They are both very good; but the drag and drop list:

  • The concept of two distinct items is lost as the items are just added to an amorphous group of 2.
  • Changing the selection requires explicitly removing an existing item. It would be a challenge to eliminate this step (e.g. you could drop onto an existing item to change it although the effect might not be immediately obvious the first time you do it, and you have to decide if you want to treat a selection of only one item as a special case - replace the one item on drop vs. always add a second.)

The WinDiff style dialog:

  • Requires the trivial and familiar, but still existent, step of expanding a drop-down list, likely of limited height (therefore scrolling may be required), for each item.

A simple combination of the two would be something like (pardon my mspaint), where you drag from the list to one of two distinct boxes on the right:

enter image description here

A modification to that could be to also allow the user to double-click a selection in the list to place it in the first free box on the right / the last box clicked on the right (alone the user may end up fighting this system but combined with the drag it could be a good "advanced user" shortcut, when the user is sure of what they want to put in the boxes).

Another option, minimizing the amount of clicks, is to have left-click place the selection in one box and right-click place the selection in the other box. However, you may need on-screen instructions for this as the use of right-click to select is not particularly intuitive (and not touch-screen friendly either). Edit: But Dinesh's design is a much better variation of this.


I would do something like the following. Simply allow the user to pick an Item from the list and then click the arrow to which box you want it to go in (if something is already there, it will be replaced). Also, putting the list in the middle and the details on either side give it a much cleaner and simpler layout in my opinion. I've done this in many different scenarios.


download bmml source – Wireframes created with Balsamiq Mockups


I would keep it simple: Two drop down lists. Having 20 items in a list is a good reason for using a drop down anyway.

Selection of first item

The lists could disable already selected items if it doesn't make sense to compare items with themselves.

Selection of second item


How about something like this? I think it can work pretty well for both desktop and mobile and it also uses less screen space. This also scales nicely to more than two options.

No items selected. Next to your list of options there is a list of "tokens" that serve as a visual indicator of how many options you have to select.

No items selected

Only one item selected. When one of the options is selected, its circle is highlighted and one of the tokens is removed. The item can be deselected, in which case the token would return to its initial position.

One item selected

Both items selected. All tokens are used up and the two selected options are highlighted.

Two options selected

One nice thing to implement would be to allow tokens that are already assigned to items to be click-and-dragged to another item, to allow the selection to be changed more easily.

  • 3
    I downvoted because it is already a well-established convention that radiobuttons are for unique selections and this proposal gives the user a illusion he/she can only select one item, even having the two balls at the top.
    – sergiol
    Commented Jul 18, 2014 at 10:40
  • 3
    When both are selected, and the user wants to select #4 instead, how do you know which ball to move? Commented Jul 18, 2014 at 12:05
  • It would be more consistent with current practices to use checkboxes. The meaning of the visual indicator isn't clear at first either (can I interact with it?), maybe replace it with "Select first item" / "Select second item"
    – Jason C
    Commented Jul 18, 2014 at 12:48
  • 1
    @JasonC Just as I replied to sergiol, a different graphic style might indeed work better, but that does not invalidate the mechanics.
    – Paul
    Commented Jul 18, 2014 at 12:55
  • 1
    @Paul True; although there is an issue if the first and second are distinct and not interchangeable (e.g. an ordered diff), in which case the "Wikipedia diff" style (shown in another answer here) is a good next logical evolutionary step from this design.
    – Jason C
    Commented Jul 18, 2014 at 14:28

Here is a live demo to demonstrate how easy this is to use.

Keeping it simple and user-friendly is probably a good idea, so I would use something like this:


It has concise yet easy-to-understand instructions at the top, and it's fairly obvious what you have to do. Here is what it looks like when interacting with it:

You can also deselect items by clicking on them again. To see how easy this is to use, you can try the demo linked at the top of this post.

  • I'm not sure about the label "Choose 0 more items." It seems like a confirmation that you have chosen all the items you need to might be better. Commented Jul 20, 2014 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.