Design elements: Panels


Warning: Use of undefined constant the_modified_time - assumed 'the_modified_time' (this will throw an Error in a future version of PHP) in /homepages/45/d244356241/htdocs/lukevandeman/wp-content/themes/960bc/single.php on line 18
October 19th, 2009    

Over the past years I have noticed an advanced design element make its way from techie applications into common place apps and software. What was once only a geek squad user interface piece is now used on places like Google Maps and Adobe Acrobat. I’m talking about panels.

Mozilla bookmarks sidebar

Mozilla bookmarks sidebar

The main difference between panels and sidebars is the concept of closing. When you close a sidebar, like Mozilla’s bookmarks, you in effect, hide the entire sidebar. If you want it back, you have to hunt through the menu dropdowns to find it or you must know the shortcut keys to reopen it.

With panels, the place where you close the panel is the same place you open it. This is excellent design. It operates more like a light switch than a junk drawer; you always know were it is regardless of if its in use or not. Of course, there may be times when the design calls for using sidebars over panels, but more often I am seeing the advantages of panels.

As the default screen sizes have grown wider, following a the cinematic ratio, panels will only grow in popularity as the users have more available real estate to the sides of their screen. We are already seeing the widgets of Microsoft and Apple as well as narrow applications like Skype, chat software and even twitter apps.

Here is a collection of screenshots from Adobe Acrobat 9 that showcases the closed, hover and open states for the pages panel.

Acrobat page panel closed

Acrobat pages panel closed

Acrobat pages panel hover

Acrobat pages panel hover

Acrobat pages panel open

Acrobat pages panel open

Here are two more examples, one from online, another from a desktop application:

Google maps panel

Google maps panel

Dreamweaver panel open

Dreamweaver panel open

Panels act much like tabs in the sense that you never actually leave the current window, you are just expanding or collapsing a portion of the screen to increase your desktop screen space, or open a set of tools and then put them away. The advantage of panels is clear. It allows the user to stay concentrated on their task while allow themselves the flexibility of the tools and the screen space.

Leave a reply