32

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

  • 8
    "Inception scrolling" should be avoided, according to the smart folks at Baymard, who base their design principles on research. – Ken Mohnkern Dec 22 '16 at 13:52
  • 1
    @R.. what's 10ch? – Ooker Dec 22 '16 at 16:21
  • 2
    Additional ch[aracters] needed to meet the minimum comment length. – R.. Dec 22 '16 at 18:06
  • 2
    @KenMohnkern Inception is scrollable area within a bigger scrollable area. Here it doesn't look like there is a full-page scroll. If the small box is the only vertical scroll, there is no inception here. – Agent_L Dec 24 '16 at 13:28
  • 1
    Good point, @Agent_L. I didn't catch that. – Ken Mohnkern Dec 27 '16 at 13:29
32
  • 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.


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.

  • 2
    Also on desktop, never use a scrollable area that can't be resized, because it will always be too small. – Medinoc Dec 22 '16 at 14:31
  • 17
    @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.. Dec 22 '16 at 14:39
  • 1
    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 Dec 22 '16 at 14:42
5

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

  • This is the use case for deskop(Not mobile) – jyo Dec 22 '16 at 11:40
4

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.

3

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.

3

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.

  • I have multiple columns to show and this would be a compact view. We are flexible with the height but not width. It has to go on mobile as well. – jyo Dec 23 '16 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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