Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
What is the feedback you get from users? Can you add a screenshot or mockup of the current situation? –  jazZRo Jun 20 '14 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. –  Jonathan Hell Jun 20 '14 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 Dec 18 '14 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 Jun 16 at 21:49

4 Answers 4

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.

share|improve this answer

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.

share|improve this answer
    
Graying out the rest while highlighting some would achieve a better result IMHO. –  Ben Aug 19 '14 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.

share|improve this answer

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!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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