Will users know a CardView is clickable?

Question

I am working on a personal project to sharpen my mobile development and UX skills and ran into a small UX dilemma.

Each CardView contains some data and a start button that, when pressed, will take the user to a new screen marking the start of their workout. However, the user also has an option to view the routine and edit it if they wish to do so.

I've made the entire card clickable so that if the users tap anywhere else, it will take them to a different screen where they can view the routine. Is this a good design decision?

I'm not sure if the user will know to click on the card if they want to view the details of the workout. I thought about adding a VIEW button next to the START button but on smaller screens, it won't fit between the start button and icons.

Answer 1

Make the title of the workout the same as the active click colour, so that it prompts users to click on the title. Even if the whole card is active - it gives the user something to focus on.

Answer 2

I recently did some testing with a similar design where the cards were not tappable, only the button like your "Start". The participants mostly expect cards and tiles to be tappable IF there is only one action. They also tended to click on the headers. In your design, I would think that tapping the card would start the workout, so if you want to have two separate functions on a card, you'd need two buttons and disable the card.

Answer 3

There's nothing wrong with having clickable cards. An example of that is YouTube: when you're browsing a list of videos, each video is represented with a card.

Notice that the card also has a "show more" button, which brings up a dropdown menu with additional actions. Most of the time, however, the user will just want to watch the video, and so that's what clicking the card does. The card itself represents a "primary action", and any other interactive elements inside of it are secondary.

In your case, I assume that the "primary action" would be starting the workout, so it will be more intuitive to have the card itself act as the start button. Other actions, such as editing or deleting, could be hidden inside of a "show more" button.

Answer 4

I think when a big chunky object represents an action by interacting with it directly (clicking, tapping, hovering, etc) there should be an explicit visual hint (especially given "Cards" in Material Design are not usually directly interactive).

Forgive the crude mock-up, but I added chevrons to the cards and I think that makes it obvious they're clickable without using up too much space - and users could also directly click or tap on the chevrons too: