The learner in the edtech platform are having issues in accessing this nested structure, which is currently available on click. They want a single area where they can access this structure. I don't want a accordion because it will give a bad UX. What could be my other options?

For reference, I have a structured program that follows this pattern

Course 1
   -topic 1
      -Activity 1
      -Activity 2
      -Activity 3
   -topic 2
      -Activity 1
      -Activity 2
      -Activity 3
  • 1
    I don't want a accordion because it will give a bad UX . What makes you say that? Accordions are specially made for this type of situations. Now, if users demand to see it all at first glance, that's another story
    – Devin
    Jun 5, 2023 at 17:08
  • Does this need to serve a navigation/menu function, or could the area be a landing page?
    – Izquierdo
    Jul 5, 2023 at 19:12

1 Answer 1


The general idea is to use font size, spacing, and colour to differentiate between the different sections.

Here are a few examples of how you could layout the data:

Mockup 1

design of courses with topics and activities

Mockup 2

design of courses with topics and activities

This is just a quickly done design mockup, nothing serious, but just a way of showing how the activities could be laid out. Also please make the activity items more actionable (i.e. users must think to themselves, from just looking, "I can click on this item").

Also, please make sure that it's the structure and not the UI elements that are leading to low click through rates.

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.