How to make connected lists on a website comprehensible for non experienced users

Question

We have two lists on our website. One on the left listing activities, one on the right listing resources.

• When clicking on an item on the left list, more information about the activity is displayed and some resources are highlighted on the right.
• When clicking on an item on the right list, the user is redirected to the dedicated resource webpage.

Homepage:

After clicking on the Activity 1:

Our first UI tests with non-experienced users are pretty bad. They understand that the lists are connected only after clicking around 4 or 5 times.

How can we improve, graphically, the webpage so the user instantly understand that these lists are connected?

Answer 1

For what I get from your mockups, I think your problem is the lists are not connected, but the elements inside those lists may (or may NOT) connect to another element, thus lists are hard to connect. If you take a closer look, you're trying to connect elements from left list to resources that may fit into the following statuses:

• true the activity contains resource X
• false the activity doesn't contains resource X (but contains another resource)
• empty the activity doesn't contain any resource

Similarly, the following happens with the right list, with same logic:

• true the resource belongs to Activity X
• false the resource doesn't belongs to Activity X (but belongs to another activity)
• empty the resource doesn't belong to any Activity

Therefore, my suggestion would be to simply get rid of the right column, and show sub-sets of an element inside its appropriate set. For this, I'd use an accordion:

Just in case it's not clear from the mockup, the resources displayed are ONLY THE ONES THAT BELONG TO THE ACTIVITY, and nothing else. There's no point in displaying null sub-sets, it just adds noise to the communication.

Now, if you still want to show those resources lists, you can add then in a clearly isolated block element that has absolutely no relation with the activity list. And once an user click on a resource, you can send the user to another page or open a modal and display the activities this resource belongs to.

Hope that helps!

Answer 2

Why do you present an extra list with the ressources, where only a few of them will be enabled/ highlighted and most are disabled? This doesnt make sense.

I would recommend to skip the ressources extra list and just put the dedicated ressources at the end of every article. Thus the connection is clear, it is in focus and chances are high users will click on it.

Answer 3

I think you need to make it more obvious they are connected. Consider making it so instead of the groups on the right simply highlighting, have the ones that are relevant appear and move to the top, and the rest disappear.

Animation should grab the users attention and make it obvious that:

I clicked on the left -> Elements on the right appeared/disappeared, I should investigate.

Answer 4

What is the primary area of focus for users on your site? I'm going to take a guess and say Activities?

If so, you might want to steal a concept from blogs dealing with categories & tags for linking information.

Here's a typical example on the "our activities" page:

If you click into an activity. You probably don't need to show list of all resources anymore. And just the relevant activities. You can easily do that with the "tags" concept. If you must have all resources to accessible on activity pages, consider de-emphasizing the resources section so it becomes an alternate navigation list.

Hope that helps.