I am designing an editing application in html/js. After a while, I end up with a lot of different "panels", and I am having trouble displaying them all to the user in an efficient way. Sometimes it seems like the user would want access to all of the info/controls at once, without having to navigate through hoops for each element.

Basically, I have a similar problem as Blender does: too many panels, and no efficient way to display them. Are there any good paradigms that I can follow to help alleviate these types of problems?


Here is a mockup of my current design:


As you can see, the presentation area is quite small, due to cluttering. Several of those panels are useful simultaneously; for example, editing the element can change many of the property panels, which the user would want to see immediately as feedback. Some of the panels are actually crunched together there so as to be almost not useful.

I also expect as I play around with it more, I'll have additional perspectives of properties to view/edit.

  • 2
    Can you provide some diagrams or images to help illustrate the problem? How many is "a lot" of panels? How do they relate to one another? Jul 3, 2013 at 18:21
  • agreed that this question is a relevant issue, and better description could provide a high-quality question that would receive more attention Jul 3, 2013 at 18:30
  • 2
    @CharlesWesley, I am writing up a diagram.
    – Realz Slaw
    Jul 3, 2013 at 19:20

1 Answer 1


Three typical options:

  1. You can teach the user a command key that displays all the panels, overlaying everything else, and then disappearing when the command is pressed again. Adobe suite does this.

  2. You can also consider giving access to these assortment of panels through a Pie menu. This is what is used by Alias for their Maya product. It requires a focused training of the user to make the accustomed to it.

  3. You can un-hide a sidebar menu when the user mouses over that region. This regionally-situated gesture activation is comfortable to many users. Windows Metro and many mobile apps use this.

As an alternative, consider adding a layout scheme for when a second-monitor is detected. Many of your users may work with them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.