I'm trying to create a friendly ui that will allow users with little or no computer experience to make pairs from two huge lists (around 2000 items each). Above each lists there will be a search field (not in the picture) which will limit the items shown.

I'm stuck as I think this is not really user friendly. Me, as a programmer, find it easy.

Is there a better way to present those two lists and allow the user to make connections among them?

Simple rules: Once an Item is in a pair, it cannot be selected again. It can also be removed from the list.

This UI is about a windows application in a machine with mouse etc. Not for touch interfaces.

edit: Both lists contain text describing medical examinations, meaning that they would be very lengthy. Also, as Juan Lanus suggests, I've already added search boxes above lists in order to let user filter data.

mock design

  • Is the user looking for specific items, or are they browsing? In other words, are they more likely to use the search to than they are to browse down the list? – Matt Obee Sep 13 '12 at 8:31
  • They might do both. Non experienced users tend to scroll instead of searching – Odys Sep 13 '12 at 8:41
  • Is there any way to categories the items so they can be more easily found? Seems like it might be difficult to find a match in a list of 2000 items of just text. – Jessica Sep 18 '12 at 17:45
  • Could you give some details on the type of items, and the actual task of the users? There are good comments for fine-tuning the "two lists" approach, but i wonder if that's the best you/we can do. – peterchen Sep 20 '12 at 9:52
  • @peterchen I've edited my question – Odys Sep 20 '12 at 13:48
up vote 26 down vote accepted

I'd be tempted to tweak the layout slightly to avoid having lots of columns:


download bmml source – Wireframes created with Balsamiq Mockups

  • Would it make sense to remove the "Make Pair" button? This would have the issue of requiring the removal of a pair after the 2nd list selection if a mistake was made (which could be frustrating). It would also mean having to select in the 2nd list even when the selection is unchanged. If 2nd list item reuse (likely with 2K items?) and mistakes are rare—and several pairs are typically selected—, this might be easier to use, though a new, computer-inexperienced user would generally prefer a commit action (sense of control) rather than just an undo. – Paul A. Clayton Feb 19 '15 at 13:59
  • By the way, "Remove" would probably be friendly than "x" to "users with little or no computer experience" both in understandability and "scariness", as "x" has a "Kill" connotation. Similarly, such users might not recognize the magnifying glass image as indicating "Search". (I realize such is unrelated to the core of the question.) – Paul A. Clayton Feb 19 '15 at 13:59
  • 1
    Hi Paul. I wouldn't want to create a pair immediately after two radio buttons are selected, for the reasons you mention. Your point about replacing the 'x' icon with a word is fair, if perhaps bulky. With regard to the magnifying glass icon for search, that could probably be made clearer simply by adding some placeholder text to the field, such as "Search". – Matt Obee Feb 19 '15 at 16:46

Since you mentioned that users of all age and computer usage competency should be able to use this UI, here is a simple and intuitive approach I've came up with. It utilizes suggestive flow icons, command texts for instructions and it visually separates component items from paired items.

enter image description here

To my experience, introducing unconventional interaction patterns to inexperienced users can sometimes prove very efficient. Look at the iPhone for example, everything was new with that and it could attract people from all types of focus groups. Even people with no previous interest with cell phones, other than calling, still found the use in it and got spellbound.

Therefore considering these are inexperienced users I would like to suggest to use something that relates more to the real world than what three individual lists with an action button do.


download bmml source – Wireframes created with Balsamiq Mockups

This is a solution that utilizes drag and drop, an interaction pattern which utilizes direct manipulation which is a very well received interactive strategy for users that are not used to virtual representations. The user pulls one item from one of the lists, leaving eg. silhouette behind, the other list lights up (cueing dropability) and the user drops it on an item in the other list. Upon drop the items are combined into one item in the adjacent list that holds the paired items, visually suggesting that they are now paired.

Another feature could be that when a paired item is selected a popup action to release the pairing could be provided, if you'll include that feature that is, which I hope you do.

Edit: Another way to Unpair/release pairs could be to use the same action as pairing them, just dragging the pair outside the pair container:


download bmml source

  • Interesting. This is probably better than my initial though, although we still have to use three lists. – Odys Sep 13 '12 at 8:50
  • I thought of that. The problem if you want to do it in two lists, one for each type, the pairing will be hard to represent. But, maybe you will have more suggestions coming soon, with other interaction patterns! =) – AndroidHustle Sep 13 '12 at 8:52

You can achieve the same by only showing one list at a time.

Depending on whether the list's content is the same (I guess it is, but you didn't explicitly specify), the content of the list shown would – of course – have to change. Since the user will most likely always do this in a Step-by-Step way ("locate first item", "locate second item", create pair), there is no advantage of seeing both lists at the same time.

Depending on how likely it is that a user may select an unwanted item, the next step could be invoked either on selection or through a button at the bottom of the list.

here is a rough mockup

All options seem valid, and I would implement (almost) all of them.

1- Two lists with a text filter in each one so the users can shorten them by typing data. IMO the ideal filter finds the typed characters wherever it appears in the list item, as opposed to finding it at the stert of the item text or at the start of the words of the item text. Also, if the user types two words (or partial words) the filter finds all the item that contain both pieces of text. When the user types the filter shortens the list after a short while, that is, no need for the user to click a "find" button. As the lists are long, the text inputs where the user would type the search text should be positioned in fixed locations, as when one freezes a headers row in Excel.

2- The user clicks an item in one list, then clicks an item in the other, and a "make pair" button glows. The user clicks it and a match is made!

3- The user clicks an iten in one list and double-clicks an item in the othar and the pair is made.

4- The user drags an item in one list, sweeps it over an item of the other, and drops the pair in the macthes list. If it's not in sight there would be a "drop here" target, always visible, and if possible always positiones in the same place.

5- Matched item dissapear slowly from the source lists. The amimation would signal the user where was she looking to hel her get back where she left.

As a practical recommendation, don't use jQuery UI Autocomplete. I tried it yesterday with a 1300 items list and it takes too long to display. Last year I used another control, simpler and more responsive, that I don't remember now. Contact me later if you want the information.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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