Posted by & filed under Cards.

Overview

Card View displays content in a graphical way that is not possible with a Table or List View. The characteristics of this view can be used to tuck actions out of the way until they are needed, or to place emphasis on actions that are crucial to the correct use of the product.

The Proposal

This design follows the convention set by the toolbar actions pattern and breaks actions into two categories depending on importance and frequency of use.

Actions front and center

actions on a card 1

  1. If a card has one or two actions that are important to the utility of the object. They may be placed as buttons on the card itself.
  2. Optionally, a single action may be emphasized as the primary action. If showing action buttons does not leave enough space on the card for other information, consider transferring nonessential actions into a drop-down menu.

Actions in a drop-down

actions on a card 2

  1. Actions that are not used frequently are placed in the kebab (vertical ellipse) menu. This menu can be found on the top right corner of the card and becomes visible on hover. Any actions that can be performed by dragging and dropping the card, or through a similar interaction method, should also be duplicated as items in this menu.  Very large numbers of actions should be placed in the Actions section of the Toolbar rather than on the card.

Open issue

  • Is there a reason for buttons to contain a group or category of actions rather than just a single action?

After review, this pattern will be moving into the final design phase. High-fidelity visual assets and examples in context will be created, and the revised, polished design will be posted.

Voice your opinion! Comment on this post with thoughts, suggestions, or requirements that we may have overlooked. Any and all feedback is helpful to us as we refine the design in the next stage of the process. Thanks!

Chris

9 Responses to “Actions on a Card”

    • We could also replace the kebab with an “actions” dropdown, or a dropdown placed in the primary actions location. Do either of those sound like good alternatives to you?

      Reply
  1. Can we make sure there is enough padding around the kabab icon, so that users wouldn’t accidentally click on the card itself and drill down. A tooltip might also help, but maybe not required.

    Reply
  2. I completely agree. The toolbar actions pattern has a note about this, but I think maybe that’s the kind of thing that should go with the icon page itself rather than being repeated on every pattern that uses it.

    Reply
  3. Another question – if view is intended to be like the list and table views (functionally), does it support multi-select for actions? Would you be able to select multiple cards and then apply toolbar actions?

    Reply

Leave a Reply to Leslie

(will not be published)