8

I need to show a list of hierarchically organized elements in a row set (it can be multiline, yet I need to compress it vertically as much as possible).

There is some similarity to file paths - for example, let's say in one row I want to show a list of paths where images can be found. These are:

  • Documents > Pictures
  • Documents > Photos
  • Documents > Pictures > Photos
  • Documents > Pictures > Photos > Gallery 1
  • Documents > Pictures > Photos > Gallery 2
  • Downloads
  • Downloads > Images
  • Downloads > Pictures
  • Dropbox > Images
  • Dropbox > Images > Screenshots

As you can see, these are hierarchical and independent at each level (meaning that you cannot say that "Downloads" consists only of "Downloads > Pictures" and "Download > Images"). At the same time some levels of this set of paths can be skipped (e.g. there are no "Documents" or "Dropbox" levels).

I have a lot of space for it - horizontally, though. My idea is to show paths as tags (encapsulate each of them, here represented with square brackets):

[Documents > Pictures] [Documents > Photos] [Documents > Pictures > Photos] [Documents > Pictures > Photos > Gallery 1] [Documents > Pictures > Photos > Gallery 2] [Downloads] [Downloads > Images] [Downloads > Pictures] [Dropbox > Images] [Dropbox > Images > Screenshots]

In this case, each path would be separated at least. However, at the cost of recognizability.

A step further is to group them somehow to reflect the structure - but I have no idea how to do it within the limitations I have.

Any ideas?

Improve this question
6
  • 3
    How often is necessary for the user to identify the full "path" of that item/row? Will they consume/need that information all the time? How useful would it be?
    – Alejandro Veltri
    Jul 6, 2015 at 16:51
  • It's very important to have them displayed, as it allows users to recognize which one is which. In the example I said it sums up to "pictures". In fact, it is a business case in which you define the specific sets by what their content is. Proper naming of the "sets" is not enough in this case.
    – Dominik Oslizlo
    Jul 7, 2015 at 6:57
  • Would you consider a button group consisting of multi-select dropdowns? That way you would have three buttons in a group "Documents", "Downloads" and "Dropbox", and if you click on Documents then you'll see a dropdown with the options that you have shown (and you might want to allow users to filter by checking or unchecking the listed items).
    – Michael Lai ♦
    Mar 30, 2016 at 0:38
  • 1
    Not sure if you managed to find a solution, but if you are after some inspirations on different ways to manage information, try looking at tagspace (tagspaces.org)
    – Michael Lai ♦
    Nov 10, 2016 at 23:30
  • @DominikOslizlo So you are saying that you already have a specific hierarchical structure for your content but this structure is not helping the navigation in some cases. But why? And also you are building a reverse structure where the type of the content is the key and the value is your hierarchical folders (imagining it as key value pairs). And now you want to give graphics to that and put everything on the same screen. Again why ?..
    – George Pligoropoulos
    Aug 6, 2017 at 15:54

2 Answers 2

Reset to default
2

One of the ways to do this is to apply the similar treatment apple applies in the finder menu.

Sanshizm_finder

Here you can dig deeper to know about the files and you can also cater the folder or file under the folder in whatever way you want. Here your users might face little hurdle due to the recall and recognition fact

Another way to do this by taking the breadcrumbs in account and practicing them by showing the files names just like the dropbox does.

Improve this answer
0

Here is a concept design that groups items like buckets. The lines help connect the sub-components in the hierarchy.

This design would break down if the depth of folders got too deep. Maybe there are some ways to reduce it by doing something smart with the "docs | pictures/photos | Gallary1, Gallery2" for example.

Showing hierarchy by using horizontal space and vertical alignment.

You might also be able to rotate the top levels to type vertically if there is another level of space required.

Showing hierarchy by using boxes with vertical text separators.

Improve this answer

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.