0

My current UI looks something like this:

mockup

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?

mockup

download bmml source

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

2
  • 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 '14 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 '14 at 11:37

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .