Re Animations on Web Pages

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Hi, I wonder if could ask people's opinions on the use of animations and video clips on web pages, for example, Flash/Silverlight animation clips or videos, or simply animated GIF's.

I don't know if its just me but I find it pretty annoying when reading a web page to see an animation/video playing on the same page. I find that the eye constantly jumps to it, and makes reading a lot slower process. I wonder if other people find this annoying also, or whether its just me - I do not like distractions if I'm trying to concentrate on something.

Of course there are browser settings to turn off playing animated GIF's, or to disable plug-ins like Flash or Silverlight, but who wants to have to do that just to read a web page, and then have to turn them back on later for other sites where you do want to see the animations (eg YouTube)?

Even if they had an option in the context menu (ie right-click) which says 'Stop' to stop playing the animation/video then that would be a help. (Also I have no problems with videos where you have to click a Play button to start it).

Firefox has a plug-in called 'Nuke Anything Enhanced' which allows you to right-click and select 'Remove This Element' from the context menu. This allows any element of a web page to be removed whilst you are viewing it (and Refresh brings it back). Trouble with this is that with Flash clips, when you right-click you only get the Flash player's context menu (though if you right-click the mouse on the exact spot on the border at the edge of the clip you can get the browsers context menu, but this is quite tricky to do - its too easy to miss and nuke the whole page or a whole section).

I wonder what other people think about this topic. To me it seems a real usability issue, but perhaps I am just being old-fashioned I don't know.

Thanks to anybody for sharing their opinions.

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

It's very annoying, unless it's done well.

Obviously, it's usually used by advertisers for the reason you mentioned - it draws the eye.
Generally speaking, if you want to have an animation on the screen, say as part of your corporate logo or as a page loading effect, it should cycle once and then stop.

If you need an animation to demonstrate a point, of embed a video etc then the viewer should have the choice of if and when they want to play it.

One of the first mistakes that every designer makes as they're learning is to include animated images, scrolling text, flash animation and rollover effects because they're cool when you've just learned how to do them. Then you realise the page gives you a headache and you get rid of them all.

And those little pop-up boxes from the foxy chick who lives in the same town as you and wants to play around a bit? Don't get me started.

 

Yes that's the exact problem in a nutshell, and that's exactly what advertisers don't give us. The problem is though, this detracts from the value of the web - its probably the most annoying form of advertising there is. If you get a cold caller on the phone you can just hang up, when you get adverts on TV you just press mute, when you get junk mail you put it in the recycling bin, in your e-mail program you go through your inbox and delete any spam that got through. But this type of advertising is definitely the most irritating yet.

I looked up a pair of FLI car speakers online last week, and now on the most unrelated web-sites I see rolling advertisements for the FLI range of products at Halfords.

I sometimes even place an 'Always On Top' program like Task Manager over the offending animation/video whilst reading a web page.

Anyway thanks for sharing in my rant!

 

Always happy to share a rant mate!

 

https://addons.mozilla.org/en-US/firefox/addon/1865

what ads?

 

Thanks that look interesting. But I would be happy with a simple right-click option, that would cover most cases for me. Static advertising isn't too bad, but its the animations I find annoying.

 

While I was reading the ‘Rhino’ book on JavaScript it occurred to me I could write a JavaScript ‘bookmarklet’ to help with this problem.

Though it doesn’t work on every web-site the following works on quite a few sites that I’ve tried :-

Nuke IFrames :-
javascript:var iframes=document.getElementsByTagName("iframe");for(var i=0;i<iframes.length;i++){iframes.style.display="none";}void 0;

Also the following can work :-

Nuke Objects :-
javascript:var objects=document.getElementsByTagName("object");for(var i=0;i<objects.length;i++){objects.style.display="none";}void 0;

Nuke Embeds :-
javascript:var embeds=document.getElementsByTagName("embed");for(var i=0;i<embeds.length;i++){embeds.style.display="none";}void 0;

The above ‘bookmarklets’ target the IFrame/Object/Embed tags which enclose the Flash content.

You create them as bookmarks - instead of entering http://, you enter ‘javascript:’ followed by the line of JavaScript code. They don’t navigate away from the page (that’s what the void 0; at the end does). I put them in the IE8 Favorites Bar (or Bookmarks Toolbar in Firefox) where they are easily accessible with one or two clicks.

To remove certain id’s or classes in a web page you can use the following - this is if you know the HTML tag id or class which is used by the animation, or can guess it, eg ‘banners’. You might know it if you’re on the site regularly, eg SkySports.

Nuke Id :-
javascript:var id=prompt("Enter Tag Id", "banners");document.getElementById(id).style.display="none";void 0;

Nuke Class :-
javascript:var cls=prompt("Enter Tag Class", ""); var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++) { if (tags.className == cls) tags.style.display="none"; } void 0;

If you don’t like the result of running the bookmarklet you can of course just hit F5 to reload the page.

Anyway I find the IFrame one in particular is pretty helpful on sites I view regularly.