My goal is to create a three vertical lists where user can filter them using tags and a search bar, move elements between them using drag and drop (similar to trello) and display explicit connections using lines.

Here a quick mockup of my idea:

enter image description here

My questions are:

  • search bar with a lot of tags are a mess or could be simplified with groups between tags ?
  • are card the right choice for display a quick summary (title, ref image), some actions for elements or is better to have a more simplified element with less data, because of connections between them ?
  • because lists can have more elements than 3, so scrollbars involved, what if a line connect a card on bottom to one on the top ? I think will be a mess soon
  • there are similar interfaces around ?

2 Answers 2

  • I don't think you'll need to worry about too many tags. If the user is putting in a bunch of tags, then I don't think they're using the feature correctly. The majority would want to use a few to target the elements that they want.
  • Depends on the number of elements you're expecting in each column, having a smaller "card" could definitely help, if the ref-image is important, then maybe a UI for "quick view" on click/hover could help, something like what JIRA is doing.
  • Yes this could get messy, maybe don't show the connections by default, create a UI element to show connections specifically for a particular card, and change the columns to only show related cards.
  • You can look at JIRA's interface or look at some images of kanban boards to get some inspiration.
  • Thanks! Quick view on select is a nice touch, thanks for remind me about this solution! Also with connection will be for sure messy, I wonder if is possible to mix kanban with mindmap, there connection are easily displayed using connections, with zoom out
    – Vokail
    Commented Oct 2, 2018 at 7:40

My main concern is that every column can have a scroll bar and the connections between the cards can be quite messy. You need to test this with more items to verify it scales.

Trello is also a good option(and free) to view some good example of similar view. another option is to have a button displaying and hiding the connections. in the display connections mode, you filter to view only the connected ones.

  • Thanks, I agree that another test is useful and "connection mode" will provide right context when user select a card
    – Vokail
    Commented Oct 2, 2018 at 7:38

Your Answer

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

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