Which To Use, An Accordion Or A TabbedPane

Going through my mail recently, I have noticed that there are many questions relating to the differences and similarities between an accordion and a tabbedpane. In truth the accordion is not intended to be used as a blanket replacement for tabbedpanes. Although these components are extremely similar, they are not perfect replacements for one another. In some situations an accordion would be the preferable and in other situations a tabbedpane would be more appropriate. The purpose of this blog is to help you know when to use which component.

Lets start by discussing the similarities between these two components. Both the accordion and tabbedpane fulfil the same roles i.e.

  • Grouping related information together into separate taps.
  • Restricting the user's interactions to the current selected tab.
  • Providing a visual cue to the existence of unselected tabs.
  • Providing a mechanism to navigate between the different tabs.
  • Making the best use of limited space.

The main benefits of using these components is that you save space and group information together into separately accessed group. However knowing which component is appropriate is based on where the component will be located on the screen and whether this component will be the center focus of the screen.

An accordion is a component that groups data together at the periphery of the screen. An accordion works best when located at either the North, South, East or West of the screen. It should never be used as the center focus of the screen and should also not take up a substantial portion of the screen.

A quick rule of thumb is to think in terms of swing's borderlayout, an accordion works best when placed anywhere other than the CENTER position.

I personally like to think of it as a component that holds metadata relating to a central object that I am interacting with.

A tabbedpane on the other hand can be placed in any of the 5 locations. The key advantages of a tabbedpane is that it performs fantastically as the primary center focus component of a screen (something an accordion does not).

I think the best way of driving this point home, is to look at some examples of applications we use on a regular basis. Lets start by looking at appropriate use of a tabbedpane as the central focus point of an application. Firefox, Thunderbird and Notepad++ are a few of my favourite applications that make use of central tabbedpanes.

Now lets look at some applications that make use of an accordion or accordion like components. You will notice that the accordion is always located at the periphery, often providing meta data relating to the central object. WindowsXP explorer and Outlook are great examples of such applications.

Lastly lets look at some examples that combine the two. Netbeans, Firefox and Excel all conform to the pattern of using tabs as the central focus, but also making uses of accordion type components on the periphery, providing supporting information.

So in summary, an accordion works best when living on the periphery providing supporting information to a central object, a tabbedpane (like a giant gorilla) gets to go anywhere it wants!

Reply to comment | Custom Swing Components for the Java™

Great post. I'm facing many of these issues as well..

The LATEST chatter

  • Halted all development on the twitter client. The application in its incomplete state is available at: http://tinyurl.com/6ktd8xw 6 years 13 weeks ago
  • Java Swing Components is currently undergoing a rebranding exercise to Custom Swing Components. The url however will remain the same. 6 years 36 weeks ago
  • Java Swing Components is proud to announce the release of our rater component. http://www.javaswingcomponents.com/product/rater 6 years 37 weeks ago
  • Java Swing Components is proud to announce the release of our first bundle including a fun demo. http://www.javaswingcomponents.com/products 6 years 42 weeks ago
  • New post: New Component Teaser http://tinyurl.com/35hxfnn 6 years 42 weeks ago

User login


Syndicate content