Using hierarchy to make complexity easier to digest
A small amount of structure can make complex workflows feel safer, clearer, and less chaotic.
What happens when the sidebar fills up? Lumeo’s had been growing steadily since the MVP.
The options for dealing with it were the usual suspects: collapsible sections and a scrollbar. Or a bigger refactoring, only showing navigation for the product domain you’re actually working in.
I agonized over this longer than I’d like to admit. Scoping the navigation to one domain at a time means hiding things, and hiding things means friction for anyone who needs what’s hidden. The page frame was also the one part of the product I’d only dared to visually dust off since the MVP. Everything else had evolved around it while the navigation sat there, load-bearing and untouched, the way load-bearing things tend to.
I looked into what makes good navigation, and found the article The fastest navigation layout for a three-level menu by UX Movement. The research generally favors left-anchored primary navigation. In Lumeo, however, primary depended on the user’s workflow.
Switching between applications was infrequent, while navigating sites and devices happened continuously. Moving the application switcher into the header allowed the sidebar to focus entirely on the high-frequency hierarchy, while also reclaiming valuable horizontal space for dense data views and the visual pipeline editor.
Top-left-left navigation hierarchy exploration for Lumeo
Top-top-left navigation hierarchy exploration for Lumeo
There’s more to it, of course; by the time I was picking between these two, the genuinely hard calls were already made — what “primary” meant when it depended on the user’s workflow, and which load-bearing bits of the old frame I was allowed to touch.
The lesson for me was that keeping friction low is not the same as “don’t add structure.” A flat list feels simpler on paper. Fewer clicks are measurable impact. But simplicity for the person maintaining the menu and simplicity for the person using it are different things.
The navigation in production, carrying the density it was designed for.
That header switcher is easy to miss in a screenshot, which is sort of the point. Three levels of hierarchy, a large list of managed cameras, and the camera detail panel all fit on one screen because the navigation stopped competing for the user’s attention with the data it exists to organize. The final result was supported by a better understanding of users and how they prioritize the different domains and views in the application, identifying the high-frequency touch points.