Conventions for expanding accordions

Question

It seems like there is a lot of variations and confusions about the control element used to expand and collapse panels or sections of a page. I believe some refer to it as a 'twistie' and others call it a expand/collapse button, but the function is to show and hide specific sections of the page when there is not a lot of screen real estate or if you want the user to see summary level information before drilling down into more specific details rather than overwhelm them at once.

In the context of a mobile device display, should the control be placed on the left or right hand side of the screen, and is there any different between the styling used to show the expanded (arrow pointing down) or collapsed state (arrow pointing to the right) compared to the desktop?

Answer 1

I assume you refer to this pattern:

Or its variant:

I can only share the following pointers:

Toggle-state-action-ambiguity

These controls suffer from the toggle-state-action-ambiguity, where the state is opposite from the action, yet the two are packed into one control. Toggle switch buttons famously have the very same issue.

What makes it even more confusing is that with down/right arrows the convention is for the images to show the state, where with the plus/minus icons the conventions is to show the action.

Although there are many exceptions to these conventions, I believe that if it's arrows you show you show stick to state display.

What is also important to mention is that nearly in all cases (and for usability sake as well), the whole heading is clickable for the purpose of collapse/expand. This, to an extent, promotes a state behaviour from the icons rather than action behaviour (the control is the container rectangle, the icon only shows state).

Left or right aligned?

The left positioning of the arrows is reminiscent to where these are placed on tree controls. In the first example above, sufficient visual distinction was made between the icons and the headings, so the left alignment isn't an issue.

In the second example, the arrows are right-aligned, which makes them somewhat easier to spot (and if we're getting really picky here, it spares the left-to-right reading eye from having to skip the icons to get to what's really important - the heading text, although I doubt that with eye-tracking you'll see anyone's eyes following such line; like ad banners - it's peripheral cognition).

On a small mobile display this isn't an issue as the arrows are still well within the narrow peripheral view. However, on a desktop application these icons may be so far away to the right, that they can be missed by the eye, which could have a lot of more attractive content between the left-aligned headings and the right-aligned arrows.