Nudge users towards goals with annoying CSS3 arrows | Hacker News Reader

Nudge users towards goals with annoying CSS3 arrows

andyshora.com

15 pointsandyshora22 comments

Wow, they're right. It's really annoying.

At least they're honest.

I'm going to split test it on a new site soon, have no idea if it will have a positive effect on sign ups. What do you reckon? I'll do a post on the results, either way!

My prediction: it'll have a positive effect on sign ups, but retention will be lower.

or it just moves bounces to a different page

You are probably right. I've made a 'hideAfter' option, so it can maybe do 2 or 3 small nudges then disappear, so as to initially draw the eye to a CTA. Although by default it's set to annoying mode :-)

I'd click the button just to make the arrow go away

Surely adult sites will put this to good use.

Why is jQuery needed? Shouldn't it be just a few new CSS3 stuff and <img class="nudge>?

Awesome concept and I think it has some potential to evolve but for now I see two problems. 1) The motion makes it too distracting from other page content (at a sub-conscious level) so you may as well just have a blank pages with the action item as nothing else can be consumed. 2) If you're trying to use the arrow to identify the real action item on a page littered with ads, this will just make it look more like an ad.

Thanks for the feedback! I've made a 'hideAfter' option, so in a serious scenario I'd probably set it to hide after a couple of nudges, so as to draw the user there initially. But for the demo I've set it to infinite so as to annoy all of you as much as possible :-)

I still prefer the <blink> tag.

Typo in the large title at the top? ("nugenudge" - the code and URL says nudgenudge)

well spotted, thanks :-)

Cool idea, but at least for me (2012 13" MacBook Air), scrolling smoothness suffers slightly (yet noticeably).

I wonder how it performs on iOS/Android devices?

Thanks :-)

It performs surprisingly well on iPhone 4, no additional work done for mobile support, the mobile browsers tend to handle CSS3 animations pretty well. Perhaps if the animation was constant (as opposed to an easing transition) it would be less jerky, but then it would be extremely annoying!

GIF/PNG/SVG can do it w/ out Javascript or CSS. That said, this is still bloody brilliant.

Is this faster with real browsers than moving a DOM node offset, or using an animated GIF?

It's the blink-tag form of a CTA.

Also, inevitably there will eventually come a need for an orange one pointing to their how-to video. "Don't forget to sign our guestbook!" "Also, this other thing is kind of important." Just use better page design rather than greebling your existing one.

Unfortunate that the arrows aren't actually drawn with CSS3.

v2.0 :-)

Rather than use this do the call to action, a better usage for me would be a 'help mode', user clicks help and a wucik walk through of functionality is presented using these arrows to draw attention to some area of the screen.

Nice idea, I'll try and think of some additional options to make it configurable for this. Thanks!

Reply on news.ycombinator.com