Im with some doubts about card design. Im using bootstrap and there is a card that has an image at top, then a title, below the title some summary and below the summary a button like a "Read more" button. My doubt is if there are some good practices or something about the summary and the "Read more" button.

My doubt is if the summary text is necessary since its usually a really small text and turns the card more long. In terms of UX there is some good practice about if this summary should exist or not? Or is not really about UX but its just a way to inform the user a little bit more about the content of the article?

Also Im with doubt about the "Read more" button, for example in the homepage if there are 8 cards and each card have the button "Read more" it doesn´t make much sense or it does? Its better dont have a button "Read more" and the whole card itself is a link?

Card with title, summary and button: http://jsfiddle.net/kzatw2r6/

Card with title and summary: http://jsfiddle.net/kzatw2r6/1/

Card with only title: http://jsfiddle.net/kzatw2r6/2/

  • Can you show us a mock with your efforts so far? What's the domain? How many cards? Please provide more context about what you're asking the user to do.... – Mike M Nov 21 '18 at 14:55
  • Thanks, Im talking about a really generic example of blogs with articles, in the homepage typical the last posts are presented and each post is usually presented in a card. My doubt is about the design of that card, like "jsfiddle.net/kzatw2r6". – user10676579 Nov 21 '18 at 14:59

About the summary text: It is a resource. You can use it or not depending of the needs of your design and users.

About the "read more" button: When I have a layout with more than 2 or 3 card, I tend to add the link of the article to the whole card. When a user hover the card, it can be highlighted with shadows or any colour to make him/her notice that it is a link and can open it. Other good practices could be add the link of the article to the title of the card.

| improve this answer | |

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.