What is the best way to combine a dismissible card with a collapsible panel?

Question

I'm working on a checkout flow where a cart summary panel appears on the right hand side of the checkout form. We want the user to be able to remove a product, but due to legal and compliance reasons we also need to be able to show more information relating the product.

In saying that, there is a lot of information that needs to be shown against each product, so we want to hide it until the user reveals it. There can be anywhere from 1 to 3 products in the cart at once, so showing all the information rather than hiding it makes the summary too large and hard to read/scan.

We're exploring something like the below as I haven't found any similar patterns during my travels. We also looked at swapping the remove and hide/show buttons around so it was more of an accordion/collapsible panel pattern, but it didn't feel right.

My question is does an approach like this make sense? Or is there another way to solve that I'm missing?

Answer 1

You don't have a whole lot of options here.

• The one you propose and it's variants
• If you need to display a lot of data or allow many interactions inside the details, you could show them in a separate view, exclusive for the details, but it seems to be overkill in this use case.
• Some kind of modal dialog, but on these times is kinda deprecated, with only a few exceptions which does not include this one.

So you're in the right path, I'd only try to fine tune your current design and then user test it with small variations to check if people find some annoyance/difficulty or just better flow in one of those. Some variants:

• Keep the show/hide button in the same place (always above details instead of moving it to the bottom)
• Also you could show the "hide details" both at the top (replacing the "show details" when clicked or tapped) and at the bottom. It doesn't add any relevant space or clutter and you get sure they always find the way to collapse it, whether they scroll/swipe up or down.
• If the details usually get quite long in your target-users displays, you may consider floating the "collapsed/main" product container and the "show/hide details" action while the details are in the viewport, so they don't lose context.