Mobile tree structure with 2 tappable areas

Question

I am designing a tree structure displaying the course content for mobile.

Each row has 2 tappable areas:

1. caret for the unfolding
2. text area for detail content page.

In the usability tests, most users prefer this way of navigating the content, yet they tapped the text area to expand and missed the caret.

Relevant instances are: Notion app (exact same case) and desktop File browser

I've tried adding chevron on the right, yet it brings noise to the UI. What else can I improve the affordance? Or should I give users chance to do the trials and errors instead?

Answer 1

1. Caret/Chevron icon conveys similar message, that might confuse users further.
2. White background makes it look more like content and that's the reason most would click on the text and not anywhere on the row. Here is what can be done, replace the white color with some solid color, have the divider line edge to edge. Also it is recommended to use another color to highlight the selected one, this gives a quick visual reference that the entire row is clickable.

Test and let us know how that goes.