Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Tree comparison

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

share|improve this question
    
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 Jul 18 at 0:52
    
Desktop. The list typically fits on the screen, around 20 items. –  Emiswelt Jul 18 at 3:02
    
Two drop down lists sounds like the most intuitive to me. First choice: [box], Second choice: [box] –  Fiona Taylor Gorringe Jul 18 at 10:42
1  
Is it random 1-1 compare or user usually will compare one specific item with others one by one? –  ADOConnection Jul 18 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 Jul 18 at 14:30

10 Answers 10

up vote 23 down vote accepted

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

share|improve this answer
    
Yes, it's better to have two lists with a limitation of one. Good example –  Vixen Jul 18 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 Jul 18 at 12:49
    
I personally dislike radio buttons for selecting more than one item, because I breaks a well-established convention. –  sergiol Jul 19 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. –  kapep Jul 19 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 Jul 20 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.

mockup

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.

share|improve this answer
    
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 Jul 18 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. –  ADOConnection Jul 18 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 Jul 18 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 Jul 20 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.

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.

enter image description here

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

enter image description here

share|improve this answer
1  
What if you select an incorrect first item by mistake? –  Jason C Jul 18 at 12:41
2  
Just tap on it again. it will be unselected. –  Dinesh Golani Jul 18 at 12:48
1  
@KrisHarper - Exactly, A swap button can also do the work. –  Dinesh Golani Jul 18 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 Jul 18 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? –  ADOConnection Jul 18 at 14:47
  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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Item selector:

mockup

download bmml source

share|improve this answer
    
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 Jul 18 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...) –  ADOConnection Jul 18 at 14:29

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.

share|improve this answer

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.


mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
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 Jul 18 at 10:40
3  
When both are selected, and the user wants to select #4 instead, how do you know which ball to move? –  Vixen Jul 18 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 Jul 18 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 Jul 18 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 Jul 18 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:

screenshot

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.

share|improve this answer
    
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. –  3nafish Jul 20 at 0:29

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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