Why this timed-hover "like button"?

Question

I recently caught "Where Good Ideas Come From" by Stephen Johnson on Alex Hillman's blog, and was intrigued by Alex's unique implementation of a 'like button'.

Behaviour

The element's initial state:

Hovering over the element with a mouse cursor or touching and holding on a touch device, the dot grows with the 'don't move' cue (which is huge on touch devices):

Once the circle fills, which takes about 1.5 seconds, the button is 'clicked':

Why?

It seems odd that one would want to make giving kudos slightly more difficult than it otherwise could be. Aside from the obvious answer*, why would one implement this type of user interface behaviour (for what I interpret to be an action without negative consequences)?

^{* The obvious answer (something I'm also somewhat guilty of with my new site design) is implementing something interesting and different just because it's interesting and different.}

Answer 1

Harry Brignull has an interesting post about adding artificial delays to increase perceived value which was inspired by a Hacker News post about locksmiths and their theatrics. In a nutshell:

Purposefully adding a delay to a service may increase perceived value.

In this case, the trivially longer time that it takes to "like" could possibly give the contributor a more invested feeling in contributing "kudos".

Answer 2

Another possible explanation (that also has to do with value to an extent); is because a user can give kudos multiple times in one siting, (unlike 'like' or 'upvote' that can only be done once per user), 2 problems arise:

1. the value of a kudos approaches 0, as a user can hammer away at their mouse and rank up an insane number.
2. Robots can give kudos, unhampered.

A delay can be relevant in this way to any instance where a user can perform the same interaction over and over again in one sitting. Consider that in the stack exchange you must wait a small amount of time between posting comments. Its not so much to add a sense of value to the comment, as it is to prevent abuse.

However, preventing abuse is a form of preserving value. Its not based on user perception through interaction, but in preventing de-valuing users behaviors.

If the goal of the delay is to prevent abuse, then I would argue the delay is on the wrong side. The first "kudo" should be instant, and then make you wait to perform additional "kudos" . After, say 10 seconds, the system should reset making a "kudo" instant again. This way the abuse problem can be mitigated without demanding a delay in the ui.

Answer 3

I think the answers here are very good, and I'd like to add another point. There could be a purely aesthetic benefit to having the beautiful delayed animation on the button. The user could feel compelled to keep hovering (or pressing ) to simply see what happens and to get the ‘reward’ of a beautiful animation which they essentially made happen (I was guilty of hovering and deactivating a number of times just to see it). This ‘reward’ also makes the action much more memorable and therefore would make the user more likely to use the feature in future.

One negative point is when using this hover technique in a browser is that it is easy to activate it by accident. Although it is technically harder to complete the action than a simple point and click (users tend to use the mouse as a focal point and hover over a button whilst deciding to click or not). This could be a bit of a ‘dark pattern’ and implemented intentionally as the ‘KUDOS’ button would sometimes be activated by accident and the article gets more ‘KUDOS’ points without actually earning them.

Answer 4

It's a text book example of pattern interrupt combined with an embedded command. A persuasion technique employed in "Neurolinguistic Programming". (NLP). I am not a practitioner of NLP but I recognize the pattern. You don't expect the response to the hover, it catches your attention and holds you there with the embedded command: "Don't move". the animation adds a pinch of gameification. Overall very effective really.

Answer 5

I would like to add (as a community wiki) a response I received via twitter from a software engineer friend of mine:

@msanford A person becomes more invested in their choice when the choice requires more effort to make. Keeps them hooked into what they did.

Answer 6

One interesting aspect of this button is, at least where I have seen it, an anonymous vote. I think there is a reason why this element works better than a normal button when in an anonymous setting. I think part of it is it's novelty but I think it's more about people associating "like"-type buttons with their twitter/google/reddit/facebook accounts. I think it is also to do with the perceived "work" that goes into a normal click action. People assign value to their clicks and if some random anonymous button shows up that they actually have to click, they may not trust it or find it's worth their "click" if they don't know what it is, they may not buy into it if it's not an established site or system that they know.

In this case, people don't normally associate "hover" as a method of interaction to send a vote, so they are more likely to start hovering over this curious looking icon either by accident or on purpose. After that, I think there isn't much in terms of perceived work to continue hovering, even though in reality this takes longer than a click. It's almost like opting out instead of opting in.

I think it also makes it easier to spam anonymous votes with a button (I have no idea about this part though because I don't know how this is technically implemented.)