On a card UI with less than usual text, should I leave the card size as is, or make the card smaller?

Question

I'm making a timeline with multiple card UI elements, and I'm curious as to what I should do with the card size (in particular height) when the subheader text is only a single line long as opposed to the usual two lines (see image); it leaves kind of an awkward amount of space given the relative size of the card.

Should I leave the card the same size, or should I make the card smaller? The smaller card looks a little "nicer," but my concern is that cards being different sizes makes for a visually inconsistent UI.

Your thoughts and feedback are much appreciated, thanks in advance!

Answer 1

Size is unconsciously / automatically associated with relative importance.

If you have large and small cards, then the large cards will appear as more important, and the small cards might be overlooked, even though the information they convey have the same importance.

Answer 2

Well let me just ask you this question in a different way, I hope you will get your answer as we move along. So here it goes...

Should I change the shape of cards if one has 4 lines, other card has 12 lines and the next card has only 1 line?

I hope we are thinking in the same direction and what I am thinking is Clearly a NO!

You should probably keep a definite size which works out for most of your cards and leave white space for the cards which have less content and a read more... for the cards which have extra content.

Hope that helps

Thanks

Answer 3

Consistency is something that is usually not absolute, but relative to your design philosophy/system.

While you can be consistent in the size of the card UI element, you will invariably lose consistency in the content density of the card UI element if there is a variable amount of content being displayed.

So rather than thinking about the consistency of the UI element, you can design or consider the consistency of the overall user experience when using the app. Do you want the user to have a consistent readability and legibility throughout the entire journey?

If so, how can you create design guidelines and implement a design system so that this is the case. There is more work involved from the design and development perspective, but the outcome for the user will be much better.