It should be clear that this is a "click and click" activity


The biggest issue I experienced during user testing of this content type: 5 of 6 users first tried to "drag" and then realized it is a "clicking" activity.

  • We discussed it and decided the best solution would be to add "drag and drop" functionality so it is possible to do the activity both ways.

  • There is one more option though we did not discuss and it is making a match on "mouse down". So when the user clicks he would instantly move the piece without releasing the mouse.
    Will this content type still be accessible if we make the piece move on mouse down? And will this work well on mobile?
    If this solution is accessible than we might not need additional "dragging" functionality.

Drag and Drop functionality
If the solution above is not accessible we should add "Drag and Drop" functionality

  1. The "dragging" piece can move only up to red line ( line is not included in the design, it is there just for showing the boundaries )

  2. When "dragging" - the matching piece from the other side (piece on the same level) will get dashed border around

  3. When moving up/down - pieces will rearrange. In the attached example if you move "Potato" up to half part of "Mellon" - "Mellon" will take its place and "Apple" will get the dashed border since it is a Matching piece from the other side

  4. When dropped - pieces would match the same way as they do on clicking

  5. Should work both when you drag left to right or right to left

Acceptance Criteria

User should realize that this is "click and click" type of activity




Jelena Milinovic



Code reviewer