Is scroll within a card good or bad? (In desktop)

Question

I am designing a board view which has card design with huge data in it. So, I am using scroll in a card. Is that a good user experience or is there any better solution?

Answer 1

• Desktop: You can use expand and scroll methods.

According to Material Design:

On desktop, card content can expand and scroll internally

---

• Mobile: Don't use a scroll inside the card, instead expand it.

Card collections only scroll vertically.

Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection.

---

Do.

Cards may be expanded to reveal more content, without using scrolling.

---

Don't

On mobile, avoid placing scrollable space within a card, as it could cause two sets of scroll bars to be displayed, if one is already present.

Answer 2

I can see you are trying to fit two scroll in a single view. This is not preferred.This is against Affordance. There could be two events happening there is lot of chance users could go wrong while scrolling(Swiping). There would also be a sudden jerk when there is a change in event. Try going for Tabs. Hope this helps !!! Cheers

Answer 3

We always talk about context with UX design (the 'it depends' factor), so there are probably times when it is appropriate to introduce scrolling into cards.

In this instance, you mentioned that this is a board so I assume it would have lots of cards inside it arranged in some kind of order, and that you are using scrolling as a way to keep the size of the cards consistent. However, this appears to be to the detriment of the user as the way you have structured and presented the content in the cards makes it overwhelming for users to have to process so much information (just imagine looking at 5-10 of those cards on a page).

The ideal way to create a clear and logical information architecture is to look at the level and depth of information that you are presenting in each card or type of card, and see if you can find the right level where you provide enough information for users to scan on a board, and let them drill into the information by directing them somewhere else rather than trying to scroll and work within the cards when there is so much space on a desktop.

For example you might just want to provide the top three most important growth metrics, and if a user clicks on like a view more link then they can get taken to a detailed information page about the company, or perhaps even a page where companies are sorted and compared by those metrics (it just depends on what the user really wants to do, or how you want them to use the information). I think these are good examples of structuring the data and aligning it to the tasks that users might want to perform rather than just overwhelming them at the first step.

Answer 4

Scrolling within that card with all that small type could put users off.

Have you considered having a "More information" button for the user and then have the card grow vertically to accommodate the additional information? In Material Design this expansion would typically also include increasing the z-index and shadow of the card to indicate it's expanded. Tapping anywhere on the card would send it back to its default view.

Alternatively you could expand the height of the card by clicking on a "More" link that would slide down the additional data.

Answer 5

Let me break down this for you before you design. Ask these questions before jumping to your photoshop or whatever you use...

1. Designing for desktop
2. Is it going to responsive so that it is also view-able on mobile?
3. Is there a need to show huge information inside a single card?
4. Are you sure about your information architecture?
5. Are you sure about your choice of layout?

Two additional things

1. Are you taking UX design decision?
2. Or are you taking somebody else ux input to design the UI?

Now time to answer your question

But first thing first. If you are not taking UX design decision and just participating the UI design exercise then it would be difficult for you to convince other people about your UI design decision.

Okay! lets jump to your design.

Desktop only-Is this just going to run only on desktop, no mobile? If yes, then you can proceed with this. Though still this is a bad design decision. I would tell you about this more in the bottom.

Responsive ui- If no, then it is surely a bad design decision. "On mobile, avoid placing scrollable space within a card, as it could cause two sets of scroll bars to be displayed, if one is already present." - material design guidelines

Why do you need put so much information into that small card? If you have to then it is the sign of bad design of information architecture. You haven't put a lot of thought while structuring your information hierarchy.

Why do you need cards as you layout? are you desinging dashboard or something like that? If yes, then it is better if you think about something else. Cards are good but good for mobile. They are meant to have some action just as expand, dismiss or some other sort of CTA. Though they look good as UI on desktop to but as experience wise they are not as good as expected because cards are useful when you don't have multiple columns. For example, facebook has card ui but it only has one column of cards which is fine. I assume you would have multiple column of cards, right?If yes, then you need to think of something else. Do not let dribbble effect eat. UI's on Dribbble are eye pleasing but not usable.

Also, If it is not in your hand to take decision on this then go ahead. I will suggest some improvement. First don't put scroll-view anywhere in the card, neither on desktop nor on mobile. Rather use a CTA like to click to expand in the same view or open a modal-Window to show full information. Choose whatever you think suits better to your app.

I would probably give you better insight if you have shown us one full screen UI.