How to visually and interactively represent deeply nested physical objects?

Question

I'm in the process of trying to represent storage of physical items in potentially complex, deeply nested locations, let's say up to 5 levels deep.

We want to do this in a visual way that approximates an accurate visual representation of the physical storage unit they are interacting with.

As an example of the complexity, we might have a set of storage shelves with five shelf surfaces that can hold products. Let's just look at one shelf: If it is just products on the shelf, lined up horizontally, not a real problem:

If, however, there are stacked bins on the shelf with different products in each one, that produces more complexity:

Now say that one of those bins is actually a long drawer with multiple compartments, each of which can hold a discrete product:

And finally, to play devil's advocate (and this is not an edgy-case scenario), let's say one compartment in that drawer unit has a divider and thus that one compartment can contain four tiny products:

If one had a full set of shelves with this level of complexity, and one needed to provide both a full visual planogram ALONG WITH a table view of all the objects in each of those locations (to display more info about products, to sort and filter and interact with in a more tabular way, but still show the equivalent location in the visual) - how might you consider representing that, and how would you represent the coordinates of, say, an object at the lowest level? How might you break this up differently to present it for users to interact with best? How might you handle the visual planogram when there are more products on a shelf than the viewport can accommodate?

For the record I have MANY of my own possible solutions in flight, still to discuss with my team, but I need to see what other people's brains hold and how other perspectives might approach or solve this.

Thanks for any ideas or insights you might want to share!

Answer 1

Looking at these, I can't even figure out if it's a top view or a front view of the shelf so I would incline toward making it match the real aspect of the shelves rather than focusing on the nesting by watching shelve systems in real life, drawing it, looking at how things are disposed in boxes within boxes and try to represent that.

Of course, I don't have any context on your limitations, restrictions and ultimately purpose of having this represented in the UI but at a glance it seemed that you are complicating things in trying to represent a hierarchy when the shelves are designed to do just that including the expected labeling of the shelves, boxes, etc.

My sketch tries to visually show the shelve and show at what level is the box being placed and inside the box a summary of it's contents & on hover (or click or when the user searches for a specific item in the table, different interactions possible to meet the user where he needs it) shows an expanded view inside that box ( that if you know how things are laid in the box can be represented even more visually accurate.

Excuse the ugly sketch.

Answer 2

We want to do this in a visual way that approximates an accurate visual representation

I would like to understand why? The physical setup sounds like a large room, and why should that be squeezed into a few-inch monitor? I.e., which tasks are to be supported? Do users need to search the location of products, do they need to see which products are stored at a certain location, do they need to find an empty location to put something inside, ... These are tasks coming to my mind, but none of them really requires an approximate representation of the physical room. So I'm interested to hear about your use case(s).

Even if you need an approximate representation, a caveat from experience: How do you ensure changes in the physical layout will be reflected in your design? I once created a design showing work progress at several stations on a shop floor, but before the design was going live, the company had the need to squeeze in an additional work station, rendering the design useless (because changing the shop floor layout had not been in the use case description, and thus being neither designed nor implemented :-(

potentially complex, deeply nested locations, let's say up to 5 levels deep

The boring (abstract, non-approximate) representation for this would be a tree (table, if you need additional properties to show), and depending on your user population, this can be manageable. There are examples of deeper nesting, most notably on your own file system.

I have MANY of my own possible solutions in flight

It would be interesting (and help our understanding) if you shared the two "best" ones with some commentary why they are considered good, or what their drawbacks are. Maybe you can give us some inspiration as well (esp. considering the capitalized "many", I'm curious).