1

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.

enter image description here

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!

Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
1
  • Thanks @celinelenoble! SUCH a great point, something I shouldn't have overlooked. Will definitely keep this in mind, thanks so much again!
    – Conor
    Sep 18, 2018 at 17:13
1

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

Improve this answer
1
  • I guess the question might be: should you be using a card pattern to show content with 12 lines?
    – Michael Lai ♦
    Sep 20, 2018 at 21:06
0

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.

Improve this answer
1
  • thanks @micheal, thats a really good point. Will try to broaden the scope of my approach before settling on final version
    – Conor
    Sep 18, 2018 at 17:12

Your Answer

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

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