5

I'm working on the re-design of a web site that displays a large number of highly structured documents that are currently arranged according to a "classification plan" that goes at least six levels deep (I say at least six although I am fairly certain that there are no more). I have looked at quite a few questions on this site and although I have found some useful suggestions there don't seem to be any as complex as I am trying to handle.

Here are the constraints I'm working under:

  1. I don't have the option of changing the classification. The documents displayed are legally binding and users are accustomed to the classification which corresponds to the documents' legal significance.

  2. The classification is big: there are 22 items in the top level (with a total of six levels of indentation this gives you an idea of the total size).

  3. The site must be able to display on mobile and touch screen devices (most typically I think an iPad in portrait mode, but we must also accommodate smaller (phone) screens).

  4. Each menu item can be either a menu which opens another lower level, or a link to a document, or both - so I need to offer the user the distinction between selecting the menu or the document.

The tree structure on the existing web site is quite "classical" and works ok but the problem is that it won't work for touch screens because the links are much too small for the finger, and it takes up too much horizontal space for a tablet (not to mention a phone!).

One possible solution which I like is this slide-in menu, however I'm beginning to think that it will build up too many levels of vertical menu to work visually.

Improve this question
2
  • 2
    I guess it is difficult to provide an answer to this question as six level of depth is problematic enough to manage on desktop viewports let alone on mobile where the screen real estate is even smaller. What is the particular reason for this constraint and can't a better IA solution be proposed?
    – Michael Lai ♦
    Commented Jul 27, 2016 at 14:55
  • The site in question publishes documents which are legally binding on the government, consequently their structure cannot be changed. And since they are legal, they are complicated, hence the 6-level structure. And worse still, I can't guarantee that the administration for which I'm working won't decide to add a level!
    – Martin K
    Commented Aug 1, 2016 at 8:13

1 Answer 1

Reset to default
1

Will Breadcrumbs work in your case?

I have been using Workflowy for a while now. They have a infinitely hierarchical bullet points list. So on their mobile app, they are using breadcrumbs to indicate current zoom level.

Here is a demo.

If you designate a certain percentage of space on the top for these breadcrumbs, will it help?

Improve this answer

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.