I am working on a mobile app and i have designed cards. So user screen will have lot of cards and should i add Know more CTA on all cards. Will it not be annoying.
Card action is - click on card to go to detailed full info.
-
2I believe it is alright to use such button in the example you propose. Just make sure the "Funded" label doesn't look like another button, because right now it is getting the focus out of the "Know more" (possibly removing the background or making it very subtle). – Alvaro Dec 12 '16 at 11:07
You have two actions available from the card:
- Visit website
- Learn more
You need to decide which of these is the primary action, and make sure the rest of the content doesn't conflict with these actions. At the moment "Funded" also looks like a button.
If you're aiming to move people through to the details page, you could drop the link to the website at this level and just make the whole card a link through to the details page.
If you do want to keep both actions, this structure has a clearer hierarchy of information:
Google's Material Design Guidelines has some useful guidelines on card design.
-
-
Yes, these principals are true for any platform. The iOS human Interface Guidelines don't specifically mention cards though. developer.apple.com/ios/human-interface-guidelines/overview/… – Matt O'Keefe Dec 12 '16 at 12:09
-
1this is a nice solution, +1. Personally, I'd drop the "visit website" on the card and leave it for the next page. After all, if the OP is aiming for conversions, then taking the user away of the site will go in detriment of that. Nice answer anyways :) – Devin Dec 12 '16 at 17:09
In my opinion CTA should be designed if you want to rise your conversion rate (aka you want the users to click on that button). If this is not the case you can simply add an info icon ("i") with the "info" label. If you want your design to be lesser visually "annoying" try a lesser contrasted palette and reduce the use of images (for example, I would avoid the basket icon on the left)
download bmml source – Wireframes created with Balsamiq Mockups
PS. you should try other colors for the buttons and labels, I found the readability low.
-
ya conversion is required as there is lot of details on next screen and real conversion happens on details page(book mark,get in touch etc) – Harshith Dec 12 '16 at 10:13
-
-
Understand. Then I would keep it. Rather I would simplify all the details stuff (funding year, webrank, funding stage). – Marco Tatta Dec 12 '16 at 14:29
