0

I have a card with an accordion with 2 related but separate functions.

I'm cautious about a design pattern that puts Tabs in Accordion to seperate this functionality.

Firstly its not something you see often but I'm trying to list the reasons why.

Would there be anything else you would add to this list?

  • Uncommon design pattern
  • Accordion getting bigger/smaller based on what tab you have open
  • Less discoverable for the user
  • Harder to show a state when beneath an Accordion and Tab (ie: something is switched on in the tab)

Also are there any well regarded UX products that use this pattern.

Thanks.

Sketch to help visualise:

enter image description here

Improve this question
2
  • Could you add a sketch? I'm having trouble visualizing it.
    – Ken Mohnkern
    May 7, 2018 at 13:35
  • @KenMohnkern Sketch added
    – Rhys
    May 9, 2018 at 0:26

1 Answer 1

Reset to default
1

If I understand correctly, you have a card which contains an accordion, and that accordion also contains tabs? Wow. Cards are generally reserved for small(er) bits of information that needs to be clustered together in order to make sense. They tend to function as a gateway for more information. This means they're not very usable when your users needs to make a direct comparison in the cards' content. An accordion in a card might be workable, but not when tabs are also involved. You'll create many additional clicks for a user when the amount of space saved does not justify the card's behaviour. Sounds like your card needs its own dedicated page.

Improve this answer
1
  • Thanks! Yeah Accordions in cards are in design systems (Material Design) so I agree that seems reasonable (yet wouldn't over do it) but the tabs felt too much so I wanted to justify why. "Additional clicks" is definitely another reason, thanks. I'm not sure a page is the right approach exactly. Let me give you more context. Take Google Drive, (with display documents like a card), each card has its own settings; sharing, star, open with, people added. This is essentially the type of functionality the client wants for the card. Google use a bottom sheet so thats what I'm pushing.
    – Rhys
    May 9, 2018 at 0:17

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.