1

I'm creating a flat-ish responsive website, which let's you vote 4 certain topics.

I'm displaying songs (but it could be whatever) in a flexbox grid system with 4 different colours. Each song is clickable and adds 1 vote to the counter. (NOTE: These 4 options are over displayed over the full screen, such as kahoot)

Here is a screenshot of what I've made at this point.

enter image description here

My problem is that these cards just don't feel clickable yet. I know, as the conceptor of the design, that it is clickable. However, I feel like it is not obvious - or not enough at least - for any random user.

  • 1
    Have you tried testing it on anyone? – RobbyReindeer Apr 13 '18 at 6:33
  • @RobE I currently only tested it with some friends who knew about how the buttons work, but I'll try and give it someone else to test and give me feedback. Good idea! – Gabsii Apr 13 '18 at 17:00
2

You can do the following to make them seem more clickable:

1.Change the cursor to pointer on hover.

2.Provide raise(shadow effect) on hover.

OR

Assuming you are already doing the above:

1.Kill the padding so that when he hovers the cursor will change making it clickable. or

2.Put the button the image so that he knows that it's clickable[Not recommended] or

3.Make the title look like links by changing the color, to make them more clickable.

2

You don't nessecarily have to make the whole thing LOOK clickable for people to DISCOVER that it's clickable.

If in a large square, you have a smaller square that LOOKS clickable, people will notice hover/click effects once they interact with it. The on:hover effect for example can be attached to the larger area.

So adding a small "full album", "read more", "vote now" or whatever, can be enough, if it looks clickable.

Alternatively, you could use some form of animation. A "click me!" pop-up once every so often. A little jiggle. A zoom. A glow. Something to indicate that it can be interacted with.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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