User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
We all know how accordion work, as set by the web. You have a list of items, each containing sub content.
We also know that the standard for accordion is to have a single interaction on the top items: click to open/close to reveal or hide the content within.
Question:
Have you ever seen or designed an accordion that has two target area (see design for clarification)? Can you see something wrong with this?
Having two target actions on accordion will always create confusion for the users.
The proper convention for the accordion is that the whole accordion is clickable and the item expands if the user clicks anywhere on the accordion row.
If the action which you are trying to perform relates to selecting a particular List item, then I suggest showing radio options parallel to the accordion rows. For example:
And if you want to add the list item specific action then, you should include it inside the content area of the expanded list item. For example:
If your content can be longer then you can stick the actions to the top. For example:
It's a typical case and can be found very often in some "install app wizard".
But if it's mobile app better put expand/collapse and toggle in different edges, for example: expend/collapse List Item Label toggle control.
It will reduce mistakes when user what tap one control but picked another one because it was too close
