Auto epand and collapse panels

9 Sep 2011 - 9:40am
5 years ago
4 replies
1096 reads
Brett Christenson

Anyone have any experience using Auto expanding panels in web apps in order to gain screen real estate? I was thinking of something similar to pressing F11 in Firefox. This hides the browser controls and tabs unless user mouses over the top portion of the screen. I also find that the pin-able panels like in MS studio offers same advantage of allowing user to use available space to work by hiding less used panels. I have not seen many web apps that do this so I'm wondering if there is a good reason to avoid this model.


9 Sep 2011 - 1:03pm

Perhaps animation speed across various browsers may be an issue?

10 Sep 2011 - 12:59am
Brett Christenson

I do agree that animation / motion  has been found to be an issue (in the past)  for web app UI I can not agree that this is still an issue with current OS and browsers. I just can not find anything that shows were UI that has panels that slide in and out is better or worse than say a disclosure just closeable panel. The only argument I can accept at this time is learnability.  It may be necessary to display panels on start up then hide them and expose some control for user to see what is still available to them even if hidden.

I am wanting to create a canvas area for users with maximum viewable area but still allow them quick access to tools or option palettes as needed. I do not want to use dialogs as that seems to interfere with context. i Love the Photoshop Lightroom UI but that still requires quite a lot of screen to display panels when interacting with actual content is ideal.

I just find it hard to believe that this UI model which seems obvious to me has not become mainstream. Is it because users can not learn how to use?  Maybe it requires that there are visual clues (such as labeled tabs) that the panels can me accessed via mouse over. Even MS windows had the ability to hide toolbar but it would appear on mouse over. With screen real estate at such a high premium I would expect this to be the norm rather than an advanced setting that average users NEVER see/use.

11 Sep 2011 - 10:42pm


I agree with your opinion that UI model requires visual clues, besides mouse over, you can also put some visual tips(something like info bubble when first use, it will disappear after seconds) to let user know it can work that way.

Animation is good but need to consider its performance.



11 Sep 2011 - 9:29pm

I think it's because it's not a significant convention yet, and because out of sight is still out of mind. Non-savvy users -- who tend to overestimate how much damage they can do (and are fastest to blame themselves if the app behaves against their expectations) -- are less likely to just click or mouseover randomly to see what happens. Intermediate users (or savvy users who are moving too fast) will skim to identify what matches their expectations, and miss even clear clues about things like pull-downs, roll-outs, or fly-outs.

I don't know if there's any formally-tested reason to do open/close over expand/collapse. I've used expand/collapse panels in web apps, but from user testing (non-savvy to advanced) the best approach I've found has been to try and riff off an existing convention as best I could. Either by keeping a main menu line across the top that, when moused, drops down like a suckerfish, or by having an accordion quasi-menu (even if it opens to reveal non-menu actionable items). If you can just get users over the hump of clicking on it (beginners) or even noticing it (advanced), then expand/collapse is a pretty easy convention to pick up. It's just hard if your app is the first time they've encountered it as a significant use.

Although I would recommend doing an action onclick, not on mouseover. If it can disappear with a slight jump of the mouse to the left, this will be hard on any users with bad eye-hand coordination or just less-than-perfect mouse control (carpal tunnel, arthritis, bad vision, etc). Expanding/accordion actions seem to be easier for users when the expanding area remains despite mouse movement away, or at least has some period of delay after mouse-off before the area collapses. Just my two dinar.

Syndicate content Get the feed