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: enter image description here

After clicking on the Activity 1: enter image description here

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?

  • What is the feedback you get from users? Can you add a screenshot or mockup of the current situation?
    – jazZRo
    Commented Jun 20, 2014 at 14:08
  • Thank you for your quick reply JazZRo. I added 2 screenshots of the demo page. As mentioned on the description, the only feedback we get is that the interface does not seem to be relevant on the first look. Users do not know what will happen after clicking on an activity. Commented Jun 20, 2014 at 14:45
  • it sounds like the ultimate goal is to get them to click on a resource? if that is the case then perhaps you can only list the resources (with, activity, links, over, here)
    – DaveAlger
    Commented Dec 18, 2014 at 0:40
  • Shouldn't the resource list not be there initially, but a list of resources associated with that activity appear when an activity is selected? In other words, is the resource list useful when no activity is selected?
    – obelia
    Commented Jun 16, 2015 at 21:49

4 Answers 4


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:

enter image description here

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!


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.


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.

  • Graying out the rest while highlighting some would achieve a better result IMHO.
    – Ben
    Commented Aug 19, 2014 at 15:34

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: enter image description here

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.

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.