How 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?
-
3Could you give some example of which data is supposed to be displayed?– AlvaroCommented Nov 24, 2016 at 12:46
-
Wire-frame has been uploaded.– NB4Commented Nov 25, 2016 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.)– DarrylGoddenCommented Nov 25, 2016 at 12:10
-
How can we represent the above data in a better way. In terms of UI & UX.– NB4Commented Nov 25, 2016 at 12:49
-
Maybe this page could help you out a bit by showing you some possible examples.– Edwin LambregtsCommented Nov 25, 2016 at 14:07
|
Show 3 more comments
3 Answers
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.
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
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.
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.
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.
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.
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.
