5

I want to ask a question of my website that has users match items up.

For example:

Match the animal with its sound:
Cow    Bark
Dog    Neigh
Horse  Moo

If this were a question on paper I would ask the user to draw lines from one to the other. How should the interface to answer this question look on a website. Is there an existing JavaScript widget anybody has already built for this?

Improve this question
5

For a simpler implementation, use colors.

They are just buttons. You click one, and then click another one from the other side to pair them up, sort of like that puzzle game.

enter image description here

Improve this answer
3
  • What if you have 100 options on each side? Or more? What would be the visual affordance here? There are too many to use colors. – themack Aug 3 '16 at 17:40
  • @themack You could use the alphabet to create the visual associations. e.g. (b) [option #2] -> (b) [matched response item #12] – BradGreens Sep 23 '19 at 16:52
  • @themack having 100 options on each side would be bad UI. If the user has to pick something from 100 options twice, then it's better to break them into 2 steps. – Andy Sep 24 '19 at 23:22
4

Drawing lines can feel like dragging and dropping... You're dragging a pencil to make a connection between two things.

How about dragging an object on the left on top of an object on the right? Then they would be displayed as "stacked"? The stacking also means you have less and less options on the left as you go, making it easier to read your remaining options.

Of course this assumes that people are comfortable with drag and drop...

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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