I am designing a tree structure displaying the course content for mobile.
Each row has 2 tappable areas:
- caret for the unfolding
- 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?