UX Iteration: Drawer vs. Modal

Currently, MixFrame keeps your component library in a categorized accordion, nested in a drawer anchored to the right side of the screen. This is great for demoing the project concept because the page and the library are visible in one view.

image00

However, this solution breaks down when you try to do more complex layouts with larger collections of items in your library. As the accordion gets taller it eats away at valuable screen space. Large collections of components can become unwieldy to scroll through, and nested scrollbars start appearing (a UX no-no). As you want to preview the page design, the drawer is always in the way.

So, I’m experimenting with a modal window to house the components instead. In general, I try to avoid modal windows because they are a over-used as an easy solution to a design problem. They force a user into one mode of thinking instead of allowing full freedom. Larry Tesler has even made it his mission to eliminate modes from software design.

But I think if you can quickly open and close the window and it feels fluid with your workflow, it could be an improvement. I’ve attached the Escape key to toggle the window open and closed. With one hand on the mouse and the other on the Escape key, you can jump around and it feels pretty powerful.

image01

I’m putting this prototype in front of my team today and watching how they interact with it. Hopefully it will be an improvement and solve a handful of design issues at the same time.