Possible Duplicate:
accordions vs tabs

What would the most user friendly experience be to display a the content of a long web page? Display it as collapsible and expandable content sections. Or as tabbed panels.

Or should the user be given the option to choose from both? If so, what is the best way bring this to the user's attention, as the page would by default use one of either methods. The page could use cookies to store the last method used and present the information the same way upon the next visit.

The site currently implements the collapsible and expandable content sections.


The idea behind the current accordion method is to display a small sample of each section, with the intent that the user would be more inclined to explore them.

Tabs on the other hand only display one content panel and hide the rest. The tabs could perhaps be organised in some sort of priority.

  • 4
    Hi and welcome to UX.SE. You have a good question which could be great if it was just slightley edited. Generally we ask just one question on a specific topic and leave out other such as: "I am also looking for comments on the visual cues used on the current page". Link to your own work can be questioned as a too localized question. An image or a mockup/wireframe would make the question better and more general, and also more useful to future visitors. Apr 7, 2012 at 13:50
  • Thanks for the welcome. I am very pleased to find this site. OK, then do you have any answer for the main question then? I have been doing further research on this issue myself, and most suggestions seem to be either or, I have not yet come across a solution that offers both. One thought I have had is to perhaps contain the accordion in the first tab, which would be labelled "All" for instance, and then the subsequent tabs would only display their respective content. That way users get the best of both worlds and can view the content as they wish.
    – leoplaw
    Apr 7, 2012 at 17:21

2 Answers 2


The main difference between tabs and expanders is that tabs remove the old block of content when the user selects a new content block so see, while, with expanders, old content blocks by default remain visible when the users selects a new one. Tabs are thus preferred when the user is zeroing in on a single specific piece of content, and nothing else on any of the other content blocks is of interest. Once the user finds the specific content of interest, they’ve no reason to go to any other tabs. When searching for the content of interest, if the user doesn’t find it on one tab, going to the next candidate tab “automatically” removes the rejected content block, reducing clutter and bulk.

Multiple expanders are preferred when the users are typically interested more than one piece of content in alternative content blocks. This is especially the case if users often return to review content in different content blocks. The user can open all expanders with content of interest and leave them open for reference or comparison.

Tabs versus expanders is sort of analogous to radio buttons versus check box arrays.

User research will tell you how you expect users to use your site, but I suspect that your example web site is probably best with expanders since it seems to be aimed at free-form flexible exploration. For example, a user sees attractive art in Artwork, so looks at events for opportunities to see the art in person. Seeing the artist gives a seminar in Events, the user may want to look again at the art work for techniques s/he might like to learn.

Tabs might be preferred when the content blocks are so lengthy, it would make the page too long if more than one were visible at once as with expanders (e.g., it's easier to click a new tab to see an old content block than to scroll a long to back to it). However, if that’s the case, you’re probably better off putting each content block on a separate page and using conventional links. Expanders can also disrupt the absolute positions of content between or below expanders, so if there is a lot of reference to such content, tabs may be better so the content stays at a consistent scroll position.

I wouldn’t make expanders-versus-tabs a choice for the users. It’s an unwarranted burden and they are not likely going to know the trade-offs to make a correct decision. Only give users choices when they know better than the designer, which is very rare for design choices.

If you expect most users to serially go through all the content blocks in order, then don't use tabs or expanders. Just put all the content on one page, or, if the blocks are long, a series of linked pages.

  • I agree on your thoughts about tabs for lengthy blocks and expanders for a quick overview. However, here's the catch, with the artist profiles, the biographies can be rather lengthy, and the other content sections usually are about the same size. So I have implemented both as a hybrid. The tabs will close the current expanded section and expand the selected one. The section titles also expand and collapse their content.
    – leoplaw
    May 2, 2012 at 13:57

I would definitely go with the collapsible expandable content through a click of a button called [more...]


download bmml source – Wireframes created with Balsamiq Mockups

Blue represents a different state: expanded section

When expanded, the button changes name to [Less...] making it possible for the user to view less of the content. The text should be one section without the line (only visible here to make it more understandable).

Keeping content together if possible is better than opening a new tab.

  • Your last sentence summaries my thoughts on this issue, and seeking such confirmation was the reason I posted here on UX.Stackexchange. My thoughts are to put the "More" and "Less" to the right of the subtitle, as the subtitle is currently the active method to expand the content. I would also put "Less" at the end of the expanded content for user convenience. Perhaps also placing "More" and "Less" at the position you suggested would also assist user interaction. I would make the tabs horizontal in keeping with the site design, and as there will only ever be a maximum of six tabs.
    – leoplaw
    Apr 8, 2012 at 13:25
  • Nice. Come back for more questions if you get in question mode again. There might be answers to questions in the archive already :-) Good Luck with the design! Apr 8, 2012 at 13:50
  • 1
    I have been reading through the archive already, and have found a great deal of useful information there, including external links. ui-patterns.com/patterns is one such example. The whole Stackexchange platform looks like a fantastic resource and community. Thanks for taking the time for the wireframe and suggestions.
    – leoplaw
    Apr 8, 2012 at 14:15
  • I like this idea also. I think it might also be helpful to have the tab bar float at the top of the page even as you scroll down. The Verge does this in their reviews and I really appreciate it sometimes. (e.g. theverge.com/2012/4/3/2921472/lumia-900-review) Apr 11, 2012 at 13:29
  • I have implemented tabs and an accordion on the profile pages. fantasticvisions.net/artists/peter-gric
    – leoplaw
    May 2, 2012 at 13:55

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