2

I've a web page with a lot of elements represented by cards. The cards have some actions: add to, show detail, add to archive, delete. The card can be made up of only text, text and image or image only. The text can be plain text or links.

At this moment the user can do one action at a time. The buttons are in the top right angle and appear at the hover.

I want to introduce multiple selection because the number of the card is always very high and at this time interacting one card at a time is too onerous in terms of time.

As I imagined interaction click on cards to select them and a menu in neutral position with multiple actions: delete, add to, add to the archive. My fear is the action that can only be performed on single card: the detail view. I don't want this action to be accessible in two clicks, but I would prefer to remain in one. The interaction I have described can fit? Do you have any suggestion about the detail?

Improve this question
2
  • Have a look at the Google Chrome bookmarks page: chrome://bookmarks/#p=/me&hl=en-GB
    – Tim
    Commented May 23, 2015 at 15:40
  • could you clarify a little more your fear? Do you mean that the "view details" can be performed only on one card so it can't be an action of many selected items?
    – gpelelis
    Commented May 23, 2015 at 16:26

2 Answers 2

Reset to default
0

If you have a lot of elements represented by cards, and you are including multiple actions in those cards then perhaps another design pattern like list or table should be used instead because cards are not suitable for organising and manipulation large amount of information (that's what lists and tables are for).

I think a good way to deal with the need for different views and methods to manipulate data is to provide different views (i.e. card/tile and list/table view), much in the same way that the file explorer in MS Office allows you to switch views when dealing with different types of files and information that you want to look at.

Another design pattern is the MS Outlook style of hierarchical information presentation, such that individual emails are displayed in a list on the left, and you can drill down into more detailed information progressively, rather than all at once in the case of a full page card view, especially when the cards are not simple (i.e. they contain multiple information blocks and actions).

Improve this answer
1
  • This may have been the best solution for this person who asked but maybe there should be a more abstract version of this question that is just about multi-select for a list of elements represented by cards. ..because, don't use cards, is not the answer I'm looking for. :)
    – pixelfairy
    Commented Jan 21, 2019 at 0:36
1

This can be done using both fixed header for batch operations and keeping the card views. Check out how InVision handled it: http://take.ms/Fm21V

Improve this answer
1
  • I also like looking at how Chrome Bookmarks handles this. While the items aren't styled as cards, they essentially behave as cards with more actions available from the individual card menu and fewer (only delete in the case of bookmarks, or cancel which deselects) options available.
    – pixelfairy
    Commented Jan 21, 2019 at 0:36

Your Answer

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

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