2

First, I know it depends on the content. And after reading through ux.se, blogs and observing websites; the results are quite less.

What I've found so far:

  • Text is readable at best ~100 characters (like ux.se), but people prefer 50-75 (like popular websites like facebook, google)
  • Cards should be as small as possible

Those 2 are already tricky. Google+ shows between 50-80 characters on the card, mostly depending on the screen size (they have three different card sizes). They use 13px Arial, which is quite small. At least according this article from smashingmagazine proposes to use at least 16px. Does big font size even coincide with card patterns?

Luckily in my position I usually don't have long text. It's a business software and we use a lot of data fields, mail, name, etc. And that's the problem: data field length is unpredictable. How long can a mail address be? Should the card size be designed to fit for 99% of all occurences? For the 1% use truncation?

3 examples of cards

And what about responsiveness?

Should the card:

  • keep always the same width (as described in Material Design)
  • adapt to screen-size (min-width and max-width, depending on available space and how the rest of the UI adapts)
  • using an amount of fixed sizes like google+ (360px, 440px, 520px)

Are there any additional guidelines, best practices, thoughts?

  • 1
    Fixed pixel size is going to be fun when those 4K screens become common. Other than that, I'm finding not nearly enough information in this question to answer it. What kind of card is this even? Until the last paragraph, I didn't even know whether this was on-screen or physical. – MSalters Feb 18 '15 at 15:38
  • Simplified it's close to the cards definition of Google's Material Design. The data can be pretty much everything, mostly business data, but also charts, forms or documents. – Gustav Feb 19 '15 at 8:25
1

I'm quite sure that there is no "optimal" card size, because as you say, it depends on the content and a lot of factors.

For example, cards containing newspaper headlines will obtain better results with different aspect ratios than cards containing photographic thumbanails (e.g. pinterest).

And for sites where user attention is directed towards a focused narrative (e.g. comic strips or curated collection), cards may be formatted so the user's eye travels linearly through the collection. For other sites (e.g. Amazon, ebay) the focus is on discovery so cards will be laid out and formatted to promote broad scanning.

So my firm answer is: there is no optimal card width.

What may be constructive is:

  1. Learn (by observing and reading) the relationships between UX Goals and card format and layout. e.g spatial and grid alignment, the paradox of choice, breathing space, linear vs brownian scanning, etc.

  2. Create a clear hierarchy of your UX priorities (do you want to convey a narrative or a collection, do you want readers to see the title or the image first?)

  3. Design by matching #1 to #2, and then iterating quickly.

Designing card layouts is very difficult, because cards tend to represent several complex hierarchies of information on a single page. So it is very difficult to express good UX with these constraints. It gets even harder if the cards need to be interactive.

So there is no single optimal width or method for getting card design right. Even Google's Material Design outlines a set of tools and principles rather than a prescription on how to lay out cards, and Google itself has not settled on a single width for its card layouts (compare cards in Google Now, Keep, Maps, Plus, etc.).

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.