My current UI looks something like this:


download bmml source – Wireframes created with Balsamiq Mockups

A 3 column layout with a list of tasks with titles/details in the middle. I need a way to allow the users to somehow specify that an item is a prerequisite of the other. For example: A could be prerequisite of B and C. And C is also a prerequisite for B (Not everything needs to be a prerequisite, like in the mockup above).

What would be good way to handle something like that? That could work well for both, desktop (mouse interaction) and tablets (finger touch/swipe/drag).

One way: Is to have a graph with titles displayed for each node and have them draw lines manually. Similar to diagramming systems. But this doesn't really scale up if you have 50-100 such elements.

Another way: Have two scrollable columns for the same elements and drag and drop prereqs from the right most column to the middle column. This seems better than the previous one, IMO but not sure if there is a better way to do this. Suggestions?


download bmml source

1 Answer 1


Why not embed the prerequisites into the modules themselves? That way you can see all prerequisites at one place. No lines to other places, no other place to look up associations.

I added one possible draft using a drop-down box for addding prereqs and an X button which will remove it again.

Depending on further factors (size of list, knowledge about module relationships), it may be needed to replace the simple drop-down list by something more sophisticated. My general proposal is to keep the list of prerequisites "inside" the module description.

enter image description here Here's an idea how to handle large lists of modules in the selection: Instead of a drop-down list, open a pop-up containing the (alphabetically sorted) list of modules, grouped according to whether they are selected yet, with search capability.

enter image description here

  • Good point. But what about a long list of items? It could be a cognitive and UX overload. Any suggestions on this?
    – PhD
    Nov 5, 2014 at 18:22
  • 1
    @PhD I added a design draft for selecting from long lists. Regarding overload, what helps most to avoid it, is to localize the information and interaction as much as possible. This was my goal: The user can look at a single module without needing to look anywhere else. Nov 12, 2014 at 11:37

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.