Side nav hierarchy of information above three levels

Hi there,
I’ve been running usability test sessions during the last ten days. About +65% of users fail to recognise the hierarchy of information from the side nav when more than three levels of information hierarchy are available.

Any suggestion/advice on the design to make every level of information more prominent when there are more than three levels or perhaps keeping the focus on the last three levels?

Many Thanks


Hi @Ashkan.deravi, Thanks for the feedback! That’s very interesting and something we definitely want to look into further. Was there any particular feedback on what caused the confusion, ie the indent wasn’t obvious enough or use of bold text wasn’t clear?

We’d be keen to work with you on improving the component, did you produce any alternative designs from testing that visually group the lower levels in a different way that you’d be able to share with us?

Hi @amy.howard,

Users believe they couldn’t recognise the indent.

I observed they confused when:

  • The page gets cultured with a lot of elements headline, sub, quick links … users can’t group the information (visually)

  • The number of subsections grow to over three with the long section headline; users couldn’t follow the indent anymore.

  • The number of levels and sections grow to over three; the red highlight loses its value as an indicator for hierarchy and becomes an eye magnet.

I will share some samples with you soon!


Thanks @Ashkan.deravi, your feedback is invaluable! We’ve started a new thread to call out to the wider community for findings and feedback on the update. Thanks again for all the work you’ve done on this and excited to see the improvements we can make.