0

I am working on a web project where users can write content and share it – this content is mixed (text/image/video), massive and a bit complicated – so obviously it should be divided into sections (chapters, e.g. 'Introduction', 'Chapter A', 'Chapter B', etc.) to make its easier to navigate through and don't show it like a wall of text on user's screen.

So if there were just 3-4 sections I would simply use traditional tabs, but the problem is that there are 12 sections (and even more can be dynamically added by user if needed) and I have less than 800 pixel width of the content block, so all these tabs would not fit in this width (considering that majority of sections' titles consist of two words).

I don't want to use multi row tabs because it would seem complicated to user and hard to navigate, let alone the unaesthetic look.

I could use side bar on the left (aka 'vertical tabs'), but considering less than 800 pixel width, tabs would use a big amount of contents' space.

Any ideas on the best approach with many sections?

2 Answers 2

0

I would expand on your side bar idea but keep it hidden instead of fixed. This would save that valuable horizontal screen space. Maybe have a tab like so:

Side Bar Hidden Menu with Floating Tab

The tab could be moving subtly or have a subtle color change to indicate its importance.

When a user wants to make a selection/navigate to a different section, they would click on the hamburger menu and then be presented with their options:

Side Bar Hidden Menu when open

You could play with the font-size to see what fits best for the number of selections you have. Or, you could make the menu take up the full screen and gain more screen space to work with.

(I apologize for the layout of content as I just threw something together for the mockup.)

2
  • What tool did you used to create these mock-ups ?
    – adrianTNT
    Jul 28, 2016 at 15:37
  • @adrianTNT Balsamiq Jul 28, 2016 at 16:52
0

Please have a look at both the screens, just my 2 cents

User will click to the category (user data) to select, Chapters > Chapter 6 https://au.pinterest.com/pin/180284791312462804/

User can see which Category (Chapters), and "Chapters 6" they are in https://au.pinterest.com/pin/180284791312462809/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.