So I was in discussion with another front-end developer about a hover state on a block which is not a call to action.

It is a regular teaser item without link to another page or any other interaction. My question here is, are hover states only good if it lets a user know that he/she can do anything with it? Or can it be used for design/(fake) interaction purposes?

EDIT: This is the block which it is about:The image

So I believe that the block should not have to be a CTA to have a on-hover statement. I just want to place a hover state on the blocks and let it float a little bit upwards + spread the box-shadow to add some sense of interaction. But is that right? Or should I, like my co-worker suggested, leave it without a hover state?

  • 1
    Please add a bit more context to your question. It's not specific enough. Provide an example if you can. Feb 14 '18 at 9:55
  • 1
    Is it specific now? @RobEarle Feb 14 '18 at 10:18
  • 1
    I think there is a possibility that this will divide opinions. Some people will agree and some will disagree. My argument would be that hover states are commonly used on CTAs. Therefore hover effects are associated with click events in the users mind. Hover effects that are not associated with click events could give rise to feelings of frustration in the user. Having said all that, I'm sure someone else will come up with an equally compelling argument in opposition. Feb 14 '18 at 10:23

Hover states, as defined by Usability First:

The appearance or behavior of a button or other control while the pointer is over it but the item has not been clicked or dragged; most often used to hilite buttons as the pointer moves across them to indicate that they are clickable or to show labels or instructions indicating what the button will do.

Thus, having an element that indicates possible interaction will most likely lead to confusion when users will not be able to perform an action they would suspect to be able to execute. At best, it would gain the user's attention - but distract them as they figure out why the effect is there in the first place.

The static blocks (as in the example provided) are fine as they are right now: simply and effectively informing the user without any noise.

  • 1
    Appreciated, thanks for your feedback and the comment. Feb 14 '18 at 10:32
  • Yea, adding hovers to these blocks is a design fix for a problem not encountered by users. Consider expanding the size of the promo blocks, if the text is that important.
    – RobC
    Mar 19 '18 at 16:36

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.