1

I'm using Bootstrap 4 for my websites layout, and recently wanted to create a nested Table of Content. Considering https://graphicdesign.stackexchange.com/help/on-topic, I'd say this is about

the look & feel aspect of web design;

A nested table of content is basically a table of content with topics, subtopics, subsubtopics etc...

So, here are my two concepts, using nested list groups; which do you think is better, especially taking into account intuitivity, what should I change ? How do you feel about the use of colors & spacing ? How should I implement the nesting ? Are they suited for mobiles ?

Concept N°1Concept N°2

Improve this question
2
  • 2
    Are there additional subitems under "Home", "Profiles" And "Messages"? If not, I do not see the need for the hierarchy. In any event, the left bordered tables are merely too visually cluttered for my taste.
    – Scott
    Commented Jan 13, 2019 at 19:25
  • @Scott No, there are no subitems waiting to be revealed.
    – Luatic
    Commented Jan 13, 2019 at 20:40

1 Answer 1

Reset to default
4

The purpose of a hierarchy is to visual separate contents which may otherwise be confusing.

If there are main topics, then several sub-areas under each topic a visual hierarchy assists the user in distinguishing different topics quickly, then being able to "tunnel down" to more specific subjects related to that main topic.

However, if there are no sub-categories and there are only main topics, any visual hierarchy may lead a user to think some topics are more important than others, when they are not.

Given the simple list of 4 topics, there is no need for any visual hierarchy beyond the order the topics are stacked. I would remove all indents and nesting. They are entirely unwarranted in my opinion.

enter image description here

Simple, clean, clear.

Additional...

If you were to have sub topics, an easy way to handle it for the web/mobile is via expanding divs with an indicator that the topic expands....

enter image description here

Essentially it all boils down to a menu or navigation tree. That's all a TOC really is. So don't do anything in a TOC that you wouldn't do in a menu.

Improve this answer
5
  • Thanks for your answer ! +1 - But actually I want to preserve the hierarchy, as I may have to deal with large TOCs especially when parsing documents like docs.
    – Luatic
    Commented Jan 14, 2019 at 16:06
  • Well, if hierarchy is needed, you can add small triangles and then use things like a sliding div to show "more content" when one of the top levels is clicked. To be frank, I don't grasp your comment. You want to design a TOC which is forward-thinking and suitable for all use cases?
    – Scott
    Commented Jan 14, 2019 at 20:16
  • Sort of. I want to have up to 3 layers of hierarchy - ranking from h1 to h3. What would be the min amount of topics that would benefit adding hierarchy ? Sorry if I sound strange, I'm more of a dev than a designer... And currently I want to create a mobile friendly website for personal projects.
    – Luatic
    Commented Jan 14, 2019 at 21:05
  • Well, hierarchy can be beneficial whenever there's a single subcategory. i.e. if you have ---------------------- Home / Profile [posts] / Messages / Settings -------------------- then hierarchy for "Profile" would be helpful and reduce the amount of clicks needed to get to the subcategories (posts). I would still align all main topics to the left, then merely indent, lower type size slightly, and alter color (desaturate or lighten) for the sub-items. This all starts getting into my design preference though. There are no rules.
    – Scott
    Commented Jan 14, 2019 at 23:18
  • @LMD Answer updated
    – Scott
    Commented Jan 15, 2019 at 10:15

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.