enter image description hereHow to design card which contains rich/heavy content that cannot be neglected. In card view image(logo/product) position should be on left or right?

  • 3
    Could you give some example of which data is supposed to be displayed? – Alvaro Nov 24 '16 at 12:46
  • Wire-frame has been uploaded. – NB4 Nov 25 '16 at 7:11
  • Have to clarified with the users what they need to see up front? Be good to see real data to get an example of edge cases (the longest entry for a field etc.) – DarrylGodden Nov 25 '16 at 12:10
  • How can we represent the above data in a better way. In terms of UI & UX. – NB4 Nov 25 '16 at 12:49
  • Maybe this page could help you out a bit by showing you some possible examples. – Edwin Lambregts Nov 25 '16 at 14:07

Taking into account the card guidelines for Material Design I've quickly created a VxD based on your content.

I'm not sure on the priority of some of your content elements like for example if the location (displayed using a map) should take primary space? I also couldn't decide if one of your actions was an action you wanted the user to take? This being the Error action. Anyhow been using cards in my designs lately so enjoyed the task.

enter image description here

  • there is no location map – NB4 Nov 30 '16 at 12:24
  • What does the location mean in your wire-frame? – jamesy Nov 30 '16 at 13:04
  • Only location name. For ex: Location: New York – NB4 Nov 30 '16 at 13:15

You can start with prioritizing each element of card. You need to know what is important to "highlight" on card (what user need to see first) and than, semantic connect elements. Presenting this information or action should by simple to scan for user.

For example: I search on ebay for new socks, cards contain image. price, end time of auction, postage,...etc enter image description here Specific information (or action) has own important for your users. Based of that you can choose not only position of elements on card but also present of inf. (image, video,...) or action (icon,underlined text,..) and manage limited "space" of card.


It really is a broad subject, but I'll do my best in providing what I think might be useful guidelines.

  1. As Matúš said, determine the important information and find a way to highlight it The important information should be placed first and maybe in a bigger and/or bolder font style, you can highlight the important stuff making it a different color too. But beware of not highlighting a lot of things or it may turn out to look cluttered and confusing.

  2. Keep the related information together This way it will be easier to read or scan and find what you are looking for. Here separation of unrelated info is crucial too. You can make use of lines or white spaces to differentiate the content and keep the related information visually related. With this in mind I see in your example that the card is too wide. The items on the right are hard to find because of all the space that's in the middle and they do not look related at first glance (at least I think so). The outer border was a good choice because it gives a hint of where the info starts and ends, but I still think it is too big.

  3. Take into account your target audience and it's culture If your users are used to reading left to right, the important information should be on the left. This is an oversimplification of the concept but can be applied to many situations and decisions.

  4. Look for examples of well achieved cards and try to understand why they work It's really the only way to learn.

Also ask people to see your design and tell them to find certain information or action and look closely how they intetact with it and if they struggle to do what they are supposed to or not. Then improve the design using the feedback and you are set for success.

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.