Recommendations for improving tree navigation

I'm looking for direction on my prototype, extremely rough website UX. Website link and further down.

Navigation Goal

For users to browse the site like they would a bookstore; jumping between different sections - grabbing a book here and there, flicking through chapters or the index and trying to get an overview of whats available. The site is specifically for browsing, not searching for specific items.

The audience this site is intended for is expected to have a broad topic they want to browse, or even more likely, multiple topics they want to jump between e.g. News & Filmmaking, or Discussion and Streaming.

Key aims:

  • Fixed, consistent navigation across all pages.
  • Top 3 tiers of the heirachy to be easily accessible, below this level the navigation can change to fit chosen topic.
  • Ability to easily filter between major item types; website, book, social media

Navigation Problems

I'm aware of lots of problems with the current design BUT I'm struggling to find solutions, for example:

  1. With current vertical navigation when topics are expanded too much on smaller resolution screens it disappears below the fold with no way of scrolling the navigation. I could make the navigation pane scroll independently but feel this is a horrible experience. I could also force all but the active topic to automatically collapse but on smaller screens this may still cause problems.

    I went with vertical because key to the experience is being able to see as many of the available topics at all time in an easy-to-access manner. I don't want mega-menus or similar hidden between drop-down menus that appear when you click or hover the mouse. That experience of hovering your mouse on a top nav, having a big menu expand and cover the page, clicking the link and having the content load is for this project cumbersome, especially if being done reptitively.

  2. When you get to a fourth tier topic for exmaple Filmmaking > Production > Cinematography > Visuals & Movement the menu changes to be specific to the Cinematography topic but I think it is clumsy, also it is horrible to get back to the main menu again.

  3. Under the main sections I have added All [topic name], this is a poor substitute. My dilemma is I want people to be able to view all the items for a topic without going through individual sub-topics, at the same time though they need to be able to click on a topics to expand the sub-topics below.

I have done lots of research trying to find navigation examples I can borrow from but I'm really struggling to find something that fits the concept of 'browsing' quickly around topics.

Thanks in advance for any feedback. The website is:

www.explorecinema.com

Screenshot:

enter image description here

Notes

  • I am considering offering minimised list view and grid view depending on feedback
  • I am prioritising a desktop design with responsive following
  • Sorting of lists will be added
  • There are plenty of bugs and inconsistencies! Will fix when final :)
  • I'm not a designer/UX expert. The current version is a v0.1 to demonstrate the idea and gather feedback with a a designer to be will be hired once that has been collected.
Tags: , , , , , ,