3

I'm trying to work on a data card and its expanded version.

  • I want a user to access more details of a card body by expanding
  • There are children entity on a card where I also want user to access directly to that section of the expanded version.

I came up with a solution where there are two "Show more" CTA's for different zone's on the card, but I expect confusion. I also feel CTA's should be near to the zone's they are referring to reduce cognitive load.

Do you think showing users two different CTA option in a single card confusing? If yes what would you suggest to overcome this problem?

Here is a draft wireframes for that:

Collapsed Collapsed

Left section uncollapsed Left section uncollapsed

Right section uncollapsed Right section uncollapsed

3
  • How much information do the expanded areas contain? And how relevant is that information for users?
    – Morco
    Commented Aug 8 at 15:32
  • For the left part there will be a couple of tables with 5-6 rows for the right side there will be vertical cards. But long story short the expanded areas will be detailed versions of the zones they have on the first card @Morco Commented Aug 9 at 9:53
  • So in other words, you have a lot of information in those areas that is important to users. Ok.
    – Morco
    Commented Aug 9 at 11:24

2 Answers 2

5

If it is necessary to place buttons to access more information within the card, I don't think there are many more options. I think it is a design issue.

1 - I would place the two buttons together defining an action area rather than a button with each action separately. I don't think that aligning the button centered with respect to the content favors easy understanding due to the difference in width. In this case, I think the content on the right conditions the layout due to its narrowness, so I would opt for button's area with right alignment.

2 - It is essential to put the reference indicator for the expanded content 🔺. The rotation of the button icon is not enough.

more info

There's a similar situation at the SE questions when hovering the tags:

tags

4
  • I think this works better @Danielillo !!
    – Ashumk
    Commented Aug 9 at 2:46
  • 2
    I'd go with a stronger association between the button and the expanded area: changing the background of the active button to match the area, so that it's as if the button is a label tab for the area.
    – Mark
    Commented Aug 9 at 21:22
  • Thank you @danielillo and Mark, those were very helpful. I created a zone approach where user sees CTA's on hover. Left zone goes gray background on hover and a floating "See more" CTA appears when clicked, below expands and same applies for the right zone Commented Aug 11 at 12:22
  • @Burak If you found a different solution, feel free to post it as answer to your own question. You even get a bronze badge for that.
    – Morco
    Commented Aug 11 at 19:22
0

First of all, there are a few things to consider:

  1. Most interfaces that use long expandable cards only offer a single expand option, usually by clicking on the whole card. So that's what users will most likely expect.

  2. Having the "details..." button might be ok for a single card, but when you have 10-20 cards on the screen, it will create a lot of noise, and it will distract users from the card content that actually matters.

To solve that, you need to:

  1. Allow the whole card to be clickable in order to expand its contents.
  2. Remove the "details..." buttons completely to avoid clutter.

The question becomes:
How to show multiple views of an expanded card?

Answer:
A simple solution is to use tabs inside the expanded area.
This will allow you to group the information in various ways, without cluttering the UI.
And you can improve it by adding a shortcut for switching directly to a certain tab:

  • You can use the whole left side of the card as a button that expands the card and selects the 1st tab.
  • You can use the right side of the card as another button that expands the card and selects the 2nd tab.
  • You could even split the card into multiple invisible buttons that open a specific tab.

Expected question:
Will the users know on which part of the card to click?

Answer:
No. But they will learn fast enough when using the card. Clicking on different parts of the card is considered a shortcut, since users can simple expand the card and change the tab manually.


Here is a basic example, with colors representing invisible buttons for opening each tab:

Wireframe showing expanded card with tabs


Of course, you could also have vertical tabs.
This is just a simple solution from which you can improve further.

2
  • Thanks @Morco this is quite helpful, using both tabs and zones were really inspiring Commented Aug 11 at 12:22
  • You're welcome :)
    – Morco
    Commented Aug 11 at 13:30

Your Answer

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

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