On our homepage, we have these irregularly shaped elements that are clickable above the fold (actual images are not cats, just for demo):
http://codepen.io/aguerrero/pen/pgvJoa
And this is how it's laid out in the homepage:
The issue is that the irregularly shaped elements (arrows) look like they're just images and are not clickable. It's not a typical way to navigate content.
How do I make it so that the images look like you can interact with them by clicking on them? They already have hover effects but it's not apparent until you happen to mouseover the images.
Answer
You should NOT rely on hover states.
Even if you’re not developing a responsive website, now that we have touch devices, the days of relying on hover states to imply "interactability" are gone. I think you have 3 options here:
1. As long as you don't have other animations, subtle movement is all you need to draw attention to the UI elements—and a user will likely assume they can interact with them.
Example:
2. Instruct the user explicitly they can click/tap on the elements.
Example:
3. Embrace the reality that your aesthetic taste here may not be the best design choice, and explore alternatives that better suit your goals and user’s expectations.
No comments:
Post a Comment