0

In the interface I'm designing, I'm using several cards that work as accordions (they can expand/collapse). Each card has a title, and next to it a " plus " sign. One particular card also needs an information icon.

Which one should be placed first? The plus sign or the information icon? enter image description here

Improve this question
4
  • What is the difference in content between the two?
    – Danielillo
    May 17 at 17:10
  • @Danielillo A tooltip will show when the user hovers over the information icon. If the user click on the "plus" icon, a new card will be created. It's an "add" button.
    – Mourad
    May 17 at 17:13
  • Surely the tooltip should show when the user hovers over the title and the "add card" mechanism should be outside the card?
    – Roux Martin
    May 17 at 18:59
  • That sounds like the best option, together with the answer below. But the client requires the add to be withing the header of the card.
    – Mourad
    May 17 at 19:02

1 Answer 1

Reset to default
2

I believe you're mixing elements and affordances in your current UI design.

The "info" icon is correctly placed next to the title, because the info is related to that title.

However, the placement of the "plus" icon needs reconsideration. Typically, it is positioned on the right side, similar to where you currently have the expand/collapse toggle button. But doing it this way, it could potentially create confusion among users, as they might interpret the "plus" icon as a means to "see more content," which is often associated with accordions that use a similar icon for that purpose.

Considering this, I would suggest removing the "plus" icon and instead using a text link that says "Add New" (or a similar phrase).

Alternatively, if it were up to me, I would consider the following options:

  1. Add an empty space below the accordions with the "Add New" text (and optionally include a "plus" icon). Additionally, you can make the tabs draggable for added flexibility.

  2. Unless the use of an accordion is absolutely necessary, consider using a card (as you mentioned) and eliminate the accordion behavior entirely.

To recap: the "plus" sign should not be placed where it currently is, regardless of the order. It should not be associated with the title, but rather with the corresponding element (card or accordion tab), so it needs to be positioned as far away from the title as possible.

Remember: the UI rule of thumb is that each action should be next to the element to which it relates.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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