It's in the Details
Our customers often mention ease of use in Assemble as a big selling point. The data in Assemble can be overwhelming, so the interactions have to be predictable and fluid so they don't get in the way of the real value.
Even when you're targeting the right goals and you've come up with a workflow that makes sense, interaction details can make or break an experience. Here are some examples of the details we paid attention to in Assemble.
Choosing and Comparing Model Versions
In Assemble a person can see Building Information Model (BIM) data grouped in a spreadsheet format for managing and scheduling items in the project. You can view any version of the model (like a GitHub for the building industry) or compare one version to another to see what changed. The design above achieved a simple way to:
- By default, show the most recent version
- Change to another version
- Compare two versions
- By default when comparing, compare to the previous version of the model (customer feedback and usage data suggests this is the most common)
- Change the compared version
- Stop comparing
Grouping Dialog
Data in Assemble is shown in a spreadsheet-like format, grouped by properties by our users in ways in which they worked through the model to perform various tasks. This grouping dialog was built to:
- Make finding properties fast by auto-focusing to the search field and enabling the enter and arrow keys for easy navigation and selection.
- Make the grouping hierarchy feel right when editing by mimicking the hierarchy shape as the groupings are changed.
We thought we'd find significant patterns in grouping usage and eventually adjust this UI to provide the most common properties at the top. It turns out grouping data is very different from project to project and model to model, so this UI is still in use 4 years into the life of the product. You never know how long the v1 of a feature will be used, so you better make it good while you can.
Responsive Layout
One of the major benefits of Assemble from the start was that it made BIM data available on the cloud for use throughout a construction project. We got early feedback that people were using or planned to use Assemble on their tablets, so we targeted a solid experience at even 1024x768.
To provide the amount of information necessary at a tablet size, I made some adjustments and assumptions about which components were necessary to have available at any time, and then made auto-adjustments to manage the layout for smaller resolutions. Above you can see panels collapse and expand based on the size of the screen and toggling of components. Our sales people ended up being the greatest proponents of this UI handling; they used iPads almost exclusively for demoing the product in person in the first year. Sometimes salespeople are an overlooked persona that matters :)
Scroll Helper
Assemble provides access to a large amount of data per project. Navigating a grid of that much data can be difficult, especially when you want to get to something quickly. To this end, I designed and developed this scroll helper (over the scrollbar in the example). When you start scrolling, tick marks appear where the highest level groupings exist in the data so you can speed to the next set, and then as you scroll it displays the title of the grouping you're currently seeing so you know where you are.
Feel free to check out the code, available on GitHub.
