0

Users are charmed by the easiness of Trello's way to move cards from one list to another to express actions. The question is, not everything can be expressed by changing column card belongs to. What can be a good solution for having extra actions (which may depend on starting and destination points of the move) in Trello-like UI?

For concrete example: There may be a need to send a message (not automatically - user should review it) in connection with the move. Or there can be extra information needed for the card to be eligible for the destination column. This seems to break the nice and easy interaction.

Or maybe the whole idea to use card view makes no sense if just drag-n-drop is not enough?

Here, each list of cards is understood as a main status of the entity, which the card represents.

Improve this question

1 Answer 1

Reset to default
2

Perhaps you could go for an in context validation to fill up the fields. This can be achieved by modifying the card slightly as it sits in the new state.

For example, you could expand the card and show the required fields for a successful movement of the card. This allows the user to retain the same mental model of shifting the card from one column to the next (the same easy action as in Trello). The card could be treated a little differntly visually (perhaps with a red outline) to show that it's successful movement is conditional on completing these fields.

Please refer the attached image if required.

sample Drag and Drop with validation

Improve this answer
2
  • 1
    Very good suggestion! One question though: If the system can't consider "transaction" to be done until extra actions are performed, there will be different understanding of UI and "backend". Backend can't "move", so showing card under target column is as you pointed out conditional. Should it jump back if the user forget to fill in the info? Then user intention will be lost...
    – Roman Susi
    Jul 30, 2019 at 7:49
  • Yes exactly, So the card is in the target column only temporarily (usually handled in the front end itself). Once the conditions are satisfied (mandatory fields are completed), the card should be permanently affixed to the target column (which will prompt the backend to update). The other cases would be that if the user clicks on Cancel or Closes the browser tab, the card should go back to the first column. This can be supported with some messaging above the mandatory fields or an animation when the card goes back. This will indicate to the user that the 'transaction' is conditional.
    – Sooraj Ramachandran
    Jul 30, 2019 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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