Assemble - Alternative Design (2016)

Assemble - Alternative Design (2016)

I've been working on some ideas for making better use of real estate in the Assemble application. Because we have a large dataset (the inventory of BIM data) and visualizations of that dataset, space and layout need to be used efficiently.

The following is nowhere near a finished product nor complete coverage of the issues involved in this design effort, but it's an example of how I'm thinking through some issues and potential solutions based on customer feedback and newer product needs.

First Generation Layout

The original Assemble layout only had to handle a single model/dataset at a time and only the inventory and 3D. There wasn't a lot of wasted space, but it also had to handle less data than we do now.

First Generation Layout

Second Generation (Current) Layout

The second generation Assemble layout had to handle multiple models/datasets at a time, so we have more panels to manage what of that data users want to see. I did a little of the work to more efficiently lay out grid controls and model/version management for the second generation, but most of it was designed and done by another designer on the team. It established a consistent and more forward-looking design style, and included some newer ways of managing data that made it easier for people to find what they want to look at.

Second Generation Layout

The Latest Design Alternative

The following design idea handles some of these issues. In this first screenshot you can see vertical space usage is collapsed quite a bit above the main content. I've been thinking about how opening a view in our product might feel more immersive, since people spend a decent number of minutes on a single view while they work through the model. The usual application-level nav bar isn't needed for administration or profile management, so using space for that is a waste. Instead, we could favor a way to get back to the main application and project, where the main navigation bar would be present. People would need to be aware that they are in a different mode, so changing the color of the top bar or even moving it to the bottom might create that effect.

Second, I have been working on combining the inventory grid and model tree. There are a lot of challenges with this and benefits you get from each component currently, but I've also noticed while watching customers that they often close the model tree and make the grid small and vertical so they can perform a lot of the same navigational interactions the model tree was designed for. Building a nav-version of the grid and then one-click toggling it into a full inventory mode may be a simpler, more learnable, space-saving approach, and would also afford the flexibility of the grouping ability of the inventory,  in a nav form. 

The inventory/model tree, one-click toggled from nav mode (top) into full mode (bottom).

Expanding the inventory from nav mode to full mode where you can see many properties and quantities rolled up, the layout still affords plenty of space vertically and horizontally, and, again, you can always popout a visualization into another screen or two. What's great here, though, is the experiences of the model tree style for nav and the full inventory mode are the same; checkboxes, groupings, style, and controls are all provided and as flexible in both cases.

Even with our upcoming 2D drawings addition (see on the right), the layout with the model tree/inventory holds up nicely at the smallest size of our top 80% resolution usage. And if needed, you can always popout one of the visualizations to a second screen.

This approach overall has legs, but we'll have to mockup a lot more of the common scenarios to see if it holds up. The next step will be to cover it with some devs and the product manager, and then perhaps build out an Invision prototype that could demonstrate some of the feel of the interactions so we get a sense of the immersive mode and the transition from the inventory in nav mode vs full mode. 

It's in the Details

It's in the Details

Spiceworks - Make IT Social (2011)

Spiceworks - Make IT Social (2011)