3

I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation.

On our project, we display a list of cards, each card having a varying number of items presented with bullet points.

Each card can be touched to open a new page containing more information on what this card represent.

For ease of use, each item has a secondary action (in our case, it's a reservation system) directly displayed in the card.

Example

During User-testing, it came out that half of the users did not understand that the card was clickable to see details.

Their reasoning was that, since there is a button on the card, they didn't understand that the card itself was an interactive element.

Therefore, my question would be: How to make it clear that each card can be interacted with to see the details?

A proposition I got from a colleague is to put an arrow on the card, which honestly I don't think is a good idea, I have never seen anything like that in Material Design.

EDIT#1: In this case, you can see that the rounded button on the left, the secondary action, has three states, and changes color and text based on it.

On the right, there is a date that is not clickable, that has an orange background when it's close to expiration.

Also, since we are in a Mobile Environment (Using IONIC to be specific), we can't rely on Hover effects or cursor.

Improve this question

4 Answers 4

Reset to default
4

You have nested actions: a clickable card with a clickable button on it. Your testing has shown that users did not understand that.

Instead of having the card clickable you should provide a second action and do not make the card itself clickable at all.

In this case you can distinguish the importance of the actions by designing a primary and secondary action or even have two primary actions (depending on the usecase you have).

As stated by locationunknown there is an additional problem with the date. On the first card the orange date screams 'click me'. If it should be clickable, it is unclear what it does, so the action should always state what to expect. If it is not clickable, you should probably consider a different design for it.

Improve this answer
3
  • 1
    Thank you for you comment, this is indeed something that should be taken care of. I will see with our team how to change this design to add a "See details" button, and test it again to see if it improved. As for the date, we will probably remove the background to add an attention sign.
    – Okaa-Pi
    May 21, 2021 at 14:03
  • Agreed. A "See Details" or "More Information" button will have the desired outcome.
    – PhillipW
    May 22, 2021 at 9:16
  • should there be a hover on this card then?
    – harshikerfuffle
    Jul 23, 2021 at 17:03
0

If you try look at your cards as a user with no prior knowledge of your system, what would you think being the primary action of the card?

Probably your users thought as I did. What I see as the primary action of the card is the button "Add to bag" the date being secondary action. If the date is a button at all?

If you look at the secondary actions on Material's Card guidelines, you'll see that they are clearly less imposing than the ones you have.

enter image description here

Also answers to Make Cards more clickable question may be helpful.

Improve this answer
2
  • I thought this was going to be a really good answer, but then it just seemed to stop... you have pointed out some obvious issues in the current design, but it would be good to also include some suggestions for changes to make the answer complete. Specifically as the current design doesn't have much of a "Rich Media" area (like an image.)
    – musefan
    May 21, 2021 at 13:23
  • Thanks for your answer. As through I don't think the link provided would help me since the advices resolves around changing the cursor or the hover effect, and we don't have such things in a Mobile app. If I understand correctly, your suggestion would be to change the button and date design to fit their "secondary" aspect?
    – Okaa-Pi
    May 21, 2021 at 13:27
0

Another way of handling this is to add a click target on the card someplace (an icon in the upper corner maybe), but leave the card itself clickable. New users will probably go directly for the icon and it will launch the card click, and veteran users might discover that the entire card itself is clickable.

I don't see a reason to remove the card's clickability, drastically reducing the click target area. Just give a little visual hint that something there is clickable.

Improve this answer
1
0

I saw this exact same problem in some concepts I was putting together. Commonly interactive cards are interpreted as containers if they appear to have a lower level of interactivity than the card itself.

I proposed two solutions to this:

  1. Remove CTAs from the cards, and provide affordances to indicate the card is clickable. Such as hover/depression effects on desktop, or perhaps a chevron (Apple style on mobile). To do this, all your actions would be nested, so you have to weight up the interaction cost tradeoffs.
  2. Move the action of "more details" as you describe it to an element on the card. Depending on it's relative hierarchy and frequency of use, you may decide this is a secondary CTA in the form of a button, but perhaps it could be a "three dots/kebab menu" type of action which could perhaps open a menu for contextual options on the card, e.g. Delete, view details etc.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.