2

I'm using card UI for a project and while some cards maybe we in a row or a column many make up a grid. The issue is some cards have one action like "share" while others have 2 or 3 actions. I want a consistent look that doesn't mess up the grid.

What are my best options? Putting the actions at the bottom of the card seems popular at least on mobile. But this doesn't account for the grid on web.

Any ideas on best practices?

  • 2
    Could you illustrate what "card UI" is? An example would help us understand what you're asking. – Ken Mohnkern May 13 '15 at 15:06
  • Be very careful about using 'cards' for any type of UI work... if you are not careful you'll find that it becomes a dumping ground for information and functionality :p – Michael Lai May 14 '15 at 0:38
  • Read google design guidelines man! – Kristiyan Lukanov Feb 12 '16 at 10:58
1

The Google Material design guidelines on cards is a good read, recommended.

You didn't specify whether your cards are of equal size or not but based on not "mess up the grid" they probably are of equal size.

Grid of different sized cards is a possibility but you should be extra careful not to overload them with actions.

From Google Material design:

The primary action in a card is typically the card itself.

Supplemental actions can vary from card to card in a collection, depending on the content type and expected outcome; for example, playing a movie versus opening a book. Within cards in a collection, position actions consistently.

also:

Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.

Limit supplemental actions to two actions, in addition to an overflow menu.

and:

Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.

So consistency and restraint is the key here as Michael Lai said:

if you are not careful you'll find that it becomes a dumping ground for information and functionality

So your grid could look something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

These cards are really similar with media on each and supplemental actions at the bottom. But at the same time kind of inconsistent with different amount of supplemental actions.

0

There are two design strategies I can think of, and I think it would depend on the actual content that you are putting into the cards.

  • Option A - associate action with content, assuming content is modular and act as subsections within the card
  • Option B - separate content from action, assuming all actions are relevant and apply to all content (where content is a discreet block of information)

Anything else in general will cause in no uncertain terms a lot of grieve as you watch the 'clean' and simple card UI term into a dumping ground for information and functionality (don't say I didn't warn you).

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.