4 ms·
Nudge users towards goals with annoying CSS3 arrows
- faulkner 14y agoSurely adult sites will put this to good use.
- 5vforest 14y agoUnfortunate that the arrows aren't actually drawn with CSS3.
- andyshora 14y agov2.0 :-)
- crazygringo 14y agoWow, they're right. It's really annoying. At least they're honest.
- andyshora 14y agoI'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 14y agoMy prediction: it'll have a positive effect on sign ups, but retention will be lower.
- acavailhez 14y agoI'd click the button just to make the arrow go away
- devinfoley 14y agoI still prefer the <blink> tag.
- dr42 14y agoRather 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.
- andyshora 14y agoNice idea, I'll try and think of some additional options to make it configurable for this. Thanks!
- grakic 14y agoIs this faster with real browsers than moving a DOM node offset, or using an animated GIF?
- tobyjsullivan 14y agoAwesome 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.
- andyshora 14y agoThanks 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 :-)
- rhizome 14y agoIt'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 14y agoTypo in the large title at the top? ("nugenudge" - the code and URL says nudgenudge)
- andyshora 14y agowell spotted, thanks :-)
- aroman 14y agoCool 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?
- andyshora 14y agoThanks :-) 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 14y agoWhy is jQuery needed? Shouldn't it be just a few new CSS3 stuff and <img class="nudge>?
- newaccount2 14y agoGIF/PNG/SVG can do it w/ out Javascript or CSS. That said, this is still bloody brilliant.