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?

scroll within a card

share|improve this question
3  
"Inception scrolling" should be avoided, according to the smart folks at Baymard, who base their design principles on research. – Ken Mohnkern 14 hours ago
    
Bad. (plus 10ch) – R.. 14 hours ago
    
@R.. what's 10ch? – Ooker 12 hours ago
    
Additional ch[aracters] needed to meet the minimum comment length. – R.. 10 hours ago
  • Desktop: You can use expand and scroll methods.

According to Material Design:

On desktop, card content can expand and scroll internally

enter image description here


  • 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.

enter image description here


Do.

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

enter image description here


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.

enter image description here

share|improve this answer
    
Also on desktop, never use a scrollable area that can't be resized, because it will always be too small. – Medinoc 14 hours ago
7  
@Medinoc: Or even worse, too large. I often find nested scrollable areas that are taller than the screen, so that you have to use the outer scrollbar and the inner scrollbar while browsing the nested content. Utterly awful. – R.. 14 hours ago
    
You're right, I remember seeing these on the PCs of coworkers who can't seem to use Remote Desktop (of which we sometimes need multiple levels due to our partners' VPN rules) properly. – Medinoc 14 hours ago

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

share|improve this answer
    
This is the use case for deskop(Not mobile) – jyo 17 hours ago

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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