Log in to like this post! Interaction Design with Clutter Free UI Ambrose Little / Friday, January 18, 2013 If you're much like this fella, you probably get sick of all the garbage that most professional software tools foist on you. Bagillions of floating or docked panels, inspectors, property sheets, menus, etc. that you first have to wade through to learn and then remember; not to mention, they just get in your way. When we were designing Indigo Studio, this was one of our key concerns. I can sympathize with the other software tool makers. It's hard to design a powerful software tool that surfaces all of its capabilities, so that people can learn and discover and use them easily, while at the same time stay out of their way, letting them focus on their content, their design--whatever they are creating. Yet we set this as one of our goals--make Indigo Studio fast and pleasant to learn and to use, yet powerful and flexible, and incrementally engender mastery, all without getting in your way. A tall order, no!? To fill this order, we came up with the term "Clutter Free UI" to describe this aspect of the experience we are going for. You can see some of the aspects of how we have tried to realize it in Indigo Studio here. Briefly, our underlying Clutter Free UI principles are: Minimize global UI--this means the app chrome itself. Every bit of chrome you see fought for its right to exist. It needs to be very commonly used. It needs to be important to achieve the primary activities that Indigo helps you do. It needs to either make these things discoverable or be ready to hand for commonly needed things. With that, as much as possible, only surface UI when and where it is needed. This manifests primarily in the main "contextual panel" that you get when elements are selected, but it is also contributed to by the amount of direct manipulation/editing we allow you to do, which lets us minimize what needs to be in the panel. We iterated on several different concepts and approaches for this context panel, and there were definitely strong opinions on different sides within the team. Make it possible to easily hide any of our UI that significantly encroaches on the design space. This is primarily our toolbox on the right and the interaction/timeline panel on the bottom, but also you can collapse the contextual panel and/or move it to a fixed place on the surface somewhere out of the way, if you prefer. While we love juicy UIs as much as the next person, we know that they can be a distraction, especially if you are designing a UI yourself. For this reason, we have minimized the use of color and stylistic flair in our UI--making an effort to only use it where it actually helps you to visually perceive, process, and use Indigo. At the same time, we didn't want it to feel dead and lacking in personality, so there is a balance, but definitely erring on the useful and usable side when it comes to styling. Enable you to do as much as possible without relying on the big panels and menus. You see this in the alt/opt-click to quick add elements in place (and alt/opt-drag), the direct manipulation/editing of elements, alignment guides/snapping, and the many keyboard shortcuts. Not only do these things help keep clutter to a minimum, they also can significantly accelerate how quickly you design, so you can feel less attached and more free to keep creating alternatives and iterating. Stay focused on and true to the needs of interaction design. We're not trying to be a development tool. We're not trying to be a visual design tool (beyond those aspects involved in interaction design). This enables us to eliminate cruft that, while useful to some people, would not be useful to most for the purposes of interaction design. We err on the side of not including things if we're not sure--you all will tell us where we get this wrong. :) I have no doubt that we have not achieved the perfect balance on all these points, but as you use the tool, we do hope you will appreciate the efforts we made to stay out of your way. Or better yet, we hope you won't notice us at all! ;) About Indigo Studio for Interaction Prototyping Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness. Download Indigo Studio Looking to suggest improvements and new ideas for Indigo Studio? Submit a new idea If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support. Get Support Follow us on Twitter @indigodesigned About the Author Ambrose Little is principal design technologist at Infragistics and has worked on Indigo Studio as interaction designer and product manager along with an awesome team based here in Cranbury, NJ, USA and Montevideo, Uruguay.