Quantcast
Channel: Infragistics Community
Viewing all articles
Browse latest Browse all 2374

Interaction Design with Clutter Free UI

$
0
0
Clutter Free Interaction Design in Indigo Studio

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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

If you haven’t already, why not Go Design Something!? Version 1 is free forever.

If you are using Indigo, we welcome your ideas on how we can better apply and refine these and other good interaction design principles to help you to design awesome UIs. If you have any questions or problems, please don’t hesitate to discuss them with us in our forums. We’re also 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.


Viewing all articles
Browse latest Browse all 2374

Trending Articles