What are good UI patterns for selecting exactly two items from a list?

Question

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?

EDIT

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:

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

Answer 1

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

_{(source: hbs.edu)}

Answer 2

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.

Answer 3

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.

Edited

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.

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

Answer 4

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 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.

Answer 5

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}

Answer 6

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:

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.

Answer 7

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}

Answer 8

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.

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

Answer 9

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.

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.

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

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.

Answer 10

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.