Nudge users towards goals with annoying CSS3 arrows

http://andyshora.com/demos/nudgenudge/

by andyshora • 14 years ago

15 22 14 years ago

andyshora.com

5vforest• 14 years ago

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

andyshora7• 14 years ago

v2.0 :-)

crazygringo• 14 years ago

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

At least they're honest.

andyshora7• 14 years ago

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!

noahlt• 14 years ago

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

acavailhez• 14 years ago

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

devinfoley• 14 years ago

I still prefer the <blink> tag.

dr42• 14 years ago

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.

andyshora7• 14 years ago

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

faulkner• 14 years ago

Surely adult sites will put this to good use.

grakic• 14 years ago

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

tobyjsullivan• 14 years ago

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.

andyshora7• 14 years ago

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 :-)

rhizome2• 14 years ago

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.

jcurbo• 14 years ago

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

andyshora7• 14 years ago

well spotted, thanks :-)

aroman• 14 years ago

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?

andyshora7• 14 years ago

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!

slig• 14 years ago

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

newaccount2• 14 years ago

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

Nudge users towards goals with annoying CSS3 arrows

Related Stories