Improve consistency in user experience: clickable cards

[Jeanne-le-Roux]

Clickable cards are featured throughout the GHGC website. For the most part, if there's a card, the entire card is clickable and clicking on it will redirect you to a different page.

There are some instances where clicking on a card doesn't redirect you, and and blue hyperlinked text within the card must be clicked instead:
E.g. 'Check out relevant datasets' on Data Toolkit page

In cases like this where there's a 1:1 ratio of card -> link, the text could probably just be removed from the card (and the card made clickable).

There are some other cases where 2 or more hyperlinks are featured on a card:
E.g. 'Featured Data Tools' on Data Toolkit page. Here, the L card is clickable (EMIT Methane Plume Viewer), but for the middle and R card, you are only redirected if you click on the blue hyperlinked text:

Are there some design/UI/UX suggestions for how we can make this experience more consistent across the website? Especially when a single card could have 1 to -> a few related links?

[aboydnw]

We can take this into consideration when designing the next iteration of the card component, but that won't come into effect for quite some time. A couple ideas on how this could be addressed in the near-term:

1. Don't use cards when there are multiple links. I wonder if you just treated these like 3 columns of content, removed the styling that makes it look like a card, maybe it becomes less confusing for users but still retains the organizational qualities that it has now.
2. Utilize the feature carousel component. I think that allows for multiple links, and then in that case users would be less confused by clicking on the card, because they've seen the component before, and they would also see the image in the carousel change as opposed to nothing happening.

Both those suggestions are for cases where there are 2 or more links, I would assume with 1 link the card could function as-is.

Side note: personally I don't mind having a little redundancy on the card where there is a blue hyperlink and the card is also clickable. Sometimes users will need a little nudge to know that they can click on a card, and maybe the hyperlink does that.

Any thoughts/ideas that you would add here @faustoperez ?

[faustoperez]

Any thoughts/ideas that you would add here @faustoperez ?

If we use the nasa.gov card designs as a template, I agree that when designing the VEDA/USWDS card component, the entire card should be clickable 👍

[aboydnw]

So maybe the short answer @Jeanne-le-Roux is that if there are more than one calls to action then it's either not a card/shouldn't look like a card and/or the additional CTAs need to live somewhere else