When a user hovers over a project card (found on home page and discipline pages), the entire card animates a few pixels upward. This is an affordance that indicates that the entire card serves some sort of function. In this case, the function would be that it's clickable and would bring the user to the project page. However, the only interactive element on the card is the link. Thus, this is a false affordance to users, which may cause frustration or confusion as they expect a certain behaviour.
The solution to this is to make the entire card component interactive, by wrapping it in an a tag.
Steps to Reproduce
Go to the home page (karinasong.com).
Scroll to the Featured Work section of the page
Hover the cursor over one of the project cards, for instance, Linmon.
Click on the project card.
Expected Result
The cursor turns into a pointer and the user is able to click anywhere on the project card area to navigate to the project page.
Actual Result
The cursor remains to show the default state. The project card is not clickable. Only the "View Project" link can be used to navigate to the project page.
Environments
This issue is present on all environments across all browsers.
Description
When a user hovers over a project card (found on home page and discipline pages), the entire card animates a few pixels upward. This is an affordance that indicates that the entire card serves some sort of function. In this case, the function would be that it's clickable and would bring the user to the project page. However, the only interactive element on the card is the link. Thus, this is a false affordance to users, which may cause frustration or confusion as they expect a certain behaviour.
The solution to this is to make the entire card component interactive, by wrapping it in an a tag.
Steps to Reproduce
Expected Result
The cursor turns into a pointer and the user is able to click anywhere on the project card area to navigate to the project page.
Actual Result
The cursor remains to show the default state. The project card is not clickable. Only the "View Project" link can be used to navigate to the project page.
Environments
This issue is present on all environments across all browsers.
Screenshots
Large Project Card:
Small Project Card: