Food For Thought

Accordion & Toggle Elements – Icon Placement

Tags: Usability

A couple of weeks ago, a co-worker and I had a nice little debate about whether the       “+” / ” -” for an accordion/toggle element should be left aligned or right aligned.

Following my instinct, I felt it was appropriate that it should be left aligned since most readers read from left to right, and having the “+” / “-” icon close to the label on the left also gives it that extra indication that this element is collapsible. I also saw it closely related to how file trees are represented in common applications.

Examples of Accordions/Collapsible Elements

As I try to collect my thoughts, I decided to cruise around the web to see what the most common way an accordion/toggle element was being displayed. Below are some examples, let’s take a look:

Left Aligned

Right Aligned

Towards the end of my investigation, it seemed there were just as many right aligned accordions as there were left aligned.
Some things I noticed that could of impacted the designer’s decisions were:

• Placement (Main Content / Side Column / etc)
• Trigger Icon Shape (Up Down Arrow / + – / Open Close)
• Borders (Outlined vs Non Outlined)
• The Width of the Container (Distance between the icon and label)
• Windows User vs Mac User

Perspective From an Expert

To get a second opinion, I decided to email someone who I look up to as an expert in usability, Dmitry Fadeyev from UsabilityPost.com. Dmitry has an eye for detail and its always great hearing his opinions on usability. Here is what he had to say:

I think first of all you’ll have to look at the design used for the host container. If there is no container — i.e. no visual box or clear lines surrounding the label of the expandable item — then you’ll have to place the arrow or the plus/minus sign on the left of the label because the right hand side would be too far from the text so may be difficult to associate with the label. You’ll also have to put it on the left if the size of the label is very wide and even spans several columns, otherwise people may not notice it given they’ll be likely only scanning the first column. These two scenarios are likely in a file browser with a hierarchical tree structure.

The other scenario would be a more window-like approach where the box has clear boundaries and so looks more like a desktop window title area than a table row. In these cases I think either option would work. Arrows would probably look out of place if you put them on the right hand side though looking back at the label rather than forward.

I also agree with what you mentioned about reading left to right, which means that the user is more likely to see the labels if you put them on the left, and so more likely to deduce the meaning of the control. I doubt it will really make a huge difference, but I’m leaning towards putting it left of the label for the reasons above, especially if unsure about it. Whatever you do though, make the whole label and bounding box clickable, not just the tiny plus/minus icon or the arrow as this will obviously make it much easier to target.

Dmitry Fadeyev – UsabilityPost.com

What Do You Think?

What would you do and why? Are there any other factors we should take in consideration when designing an accordion / toggle element?

Related Articles Elsewhere

• Closable Panels
• Thoughts on Accordion Usability