Hi,
A while ago I made a bookmarklet that blurs images in articles on the english Wikipedia and reveals them when the user hovers over the image. I now had a chance to test this as a skin.js extension.
http://en.wikipedia.org/wiki/User:BlurredImages/vector.js http://en.wikipedia.org/wiki/User:BlurredImages/vector.css
To try this out you would have to copy or import this code into your own skin.js and skin.css files which are available e.g. under
http://en.wikipedia.org/wiki/Special:MyPage/vector.js http://en.wikipedia.org/wiki/Special:MyPage/vector.css
This only works in recent desktop versions of Opera and Firefox and only on devices where you can easily hover. It may show some images that it ought to blur for boring reasons. Spoilers ahead if you want to try it.
Browsing around with that is quite interesting. Some findings: it is a bit annoying when UI elements (say clipart in maintenance templates) are blurred. The same goes for small logo-like graphics, say actual logos, flags, coat of arms, and actual text, like rotated table headers. I did expect that blurred maps would be annoying, but I've not found them to be. Take http://en.wikipedia.org/wiki/Dageb%C3%BCll as example, the marker and text are overlayed so they are not blurred, and I can recognize the shape of Germany fine.
I note that there is a perceptual problem if you click around to explore how blurring affects the experience as that does not reflect what a user would do. I noticed that my impression changed a lot when switching from actually paying some attention to the articles to randomly moving to the next article just looking at the images.
Pages, or parts of pages, that largely lack content (say all you get on a screen is lone line of lead, table of contents, and image plus map on the side, or a stub that has four sentences and an image). There it's a bit odd, in stark contrast to an article like BDSM where I felt blurring is very unobtrusive.
Another thing I've noticed is that I pay a whole lot more attention to the images when I focus them, decide to hover over it, reveal it, and then look at it, maybe read the caption and so on. I also noticed I do not really bother to read the captions before I hover and rather decide based on the blurred picture itself (I ignore most captions usually, so this is unsurprising). There are also many surprises, where images do not come out in the clear as you would have expected from the blur.
My impression is that it actually makes it much easier to think about if an image is well placed where it is. If there are several images, you can focus more easily on just the one, and you remove to some degree the "status quo" effect, where you may be biased to agree with the placement because someone already placed it there.
Images where red tones are used a lot seem to be rather distracting when they are blurred. Blue and green and yellow and black and white and so on are no problem, and the red tones are no problem when the image is crisp. Not sure what's up with that, I have not noticed this before. It would of course be possible to manipulate the colours in addition to the blurring.
Largely black and white bar charts and tree diagrams and illustrations of data like them are also annoying when blurred, in part because there is inconsistency as some of them are not blurred because they are made not as image but using HTML constructs. They are perhaps too much like text so unlike a photo with many different colors they are harder to just ignore using one's banner blindness skills. There is also a noise factor to this, http://en.wikipedia.org/wiki/Electromagnetic_induction for instance compared to http://en.wikipedia.org/wiki/Morse_code -- in the former the graphic in the infobox is fine blurred while the latter irks me when blurred.
Generally though the added nuisance is hardly worth mentioning, it works surprisingly well (well, this was the first thing I thought about when I learned of the image filter, but it does work a bit better than I had expected initially, and some issues would be easily fixed, like blurring only images larger than 50x50 would take care of most of the UI graphics for instance). So having conducted this experiment, I think the need to have some images hidden while having others in the clear, where the com- munity as a whole decided to show rather than hide, as in omitting them for all users, is not a legitimate need.
regards,
On Sat, Oct 01, 2011 at 02:46:52AM +0200, Bjoern Hoehrmann wrote:
Hi,
A while ago I made a bookmarklet that blurs images in articles on the english Wikipedia and reveals them when the user hovers over the image. I now had a chance to test this as a skin.js extension.
Constructive solutions FTW. :-)
sincerely, Kim Bruning
Bjoern Hoehrmann wrote:
Hi,
A while ago I made a bookmarklet that blurs images in articles on the english Wikipedia and reveals them when the user hovers over the image. I now had a chance to test this as a skin.js extension.
For a start, users would have to opt in to this, which may not be appropriate for casual readers brought to us from Google and other external links. I'm not sure it's a good idea to make it a default for unregistered users, many, if not most, of whom, might not want to be presented with a pre-filtered version of Wikipedia, and would be surprised to be so presented. It also presents a "slippery slope" argument in that nobody is realistically qualified, nor would want to be tasked with, drawing the line as to what images should and should not be treated thus. A similar argument applies to textual content of articles; however we try to achieve neutrality, it seems that there will always be some POV-pushers who will argue the toss ad infinitum, and we don't accommodate them. Neither should we accommodate those who do not understand that a value-neutral, world value, is not the same as their value. These people have their own texts, and I think that our response should be that they are welcome to them. Nobody is being forced to use Wikipedia, after all.
http://en.wikipedia.org/wiki/User:BlurredImages/vector.js http://en.wikipedia.org/wiki/User:BlurredImages/vector.css
To try this out you would have to copy or import this code into your own skin.js and skin.css files which are available e.g. under
http://en.wikipedia.org/wiki/Special:MyPage/vector.js http://en.wikipedia.org/wiki/Special:MyPage/vector.css
This only works in recent desktop versions of Opera and Firefox and only on devices where you can easily hover. It may show some images that it ought to blur for boring reasons. Spoilers ahead if you want to try it.
Browsing around with that is quite interesting. Some findings: it is a bit annoying when UI elements (say clipart in maintenance templates) are blurred. The same goes for small logo-like graphics, say actual logos, flags, coat of arms, and actual text, like rotated table headers. I did expect that blurred maps would be annoying, but I've not found them to be. Take http://en.wikipedia.org/wiki/Dageb%C3%BCll as example, the marker and text are overlayed so they are not blurred, and I can recognize the shape of Germany fine.
I note that there is a perceptual problem if you click around to explore how blurring affects the experience as that does not reflect what a user would do. I noticed that my impression changed a lot when switching from actually paying some attention to the articles to randomly moving to the next article just looking at the images.
Pages, or parts of pages, that largely lack content (say all you get on a screen is lone line of lead, table of contents, and image plus map on the side, or a stub that has four sentences and an image). There it's a bit odd, in stark contrast to an article like BDSM where I felt blurring is very unobtrusive.
Another thing I've noticed is that I pay a whole lot more attention to the images when I focus them, decide to hover over it, reveal it, and then look at it, maybe read the caption and so on. I also noticed I do not really bother to read the captions before I hover and rather decide based on the blurred picture itself (I ignore most captions usually, so this is unsurprising). There are also many surprises, where images do not come out in the clear as you would have expected from the blur.
My impression is that it actually makes it much easier to think about if an image is well placed where it is. If there are several images, you can focus more easily on just the one, and you remove to some degree the "status quo" effect, where you may be biased to agree with the placement because someone already placed it there.
Images where red tones are used a lot seem to be rather distracting when they are blurred. Blue and green and yellow and black and white and so on are no problem, and the red tones are no problem when the image is crisp. Not sure what's up with that, I have not noticed this before. It would of course be possible to manipulate the colours in addition to the blurring.
Largely black and white bar charts and tree diagrams and illustrations of data like them are also annoying when blurred, in part because there is inconsistency as some of them are not blurred because they are made not as image but using HTML constructs. They are perhaps too much like text so unlike a photo with many different colors they are harder to just ignore using one's banner blindness skills. There is also a noise factor to this, http://en.wikipedia.org/wiki/Electromagnetic_induction for instance compared to http://en.wikipedia.org/wiki/Morse_code -- in the former the graphic in the infobox is fine blurred while the latter irks me when blurred.
Generally though the added nuisance is hardly worth mentioning, it works surprisingly well (well, this was the first thing I thought about when I learned of the image filter, but it does work a bit better than I had expected initially, and some issues would be easily fixed, like blurring only images larger than 50x50 would take care of most of the UI graphics for instance). So having conducted this experiment, I think the need to have some images hidden while having others in the clear, where the com- munity as a whole decided to show rather than hide, as in omitting them for all users, is not a legitimate need.
regards,
Hi Björn,
excellent! We need experiements and creative ideas.
On 10/01/2011 02:46 AM, Bjoern Hoehrmann wrote:
This only works in recent desktop versions of Opera and Firefox and only on devices where you can easily hover.
How good are chances it can be implemented in a feasible way for other browsers?
Regards, Tobias
* church.of.emacs.ml wrote:
On 10/01/2011 02:46 AM, Bjoern Hoehrmann wrote:
This only works in recent desktop versions of Opera and Firefox and only on devices where you can easily hover.
How good are chances it can be implemented in a feasible way for other browsers?
Webkit-derived browsers support the blurring but do not seem to support removing the filter via :hover so that would need some mouseover script to compensate which is easy, for Internet Explorer the proprietary CSS filter extensions would have to be used probably in combination with the mouseover scripting needed for Webkit, so for the mainstream browsers on the desktop I'd say give it two hours. The minimum you need to blur on the client side is scripting, access to image data (likely via <canvas>) and a way to render in-memory image data (likely via data:image/png,), below that you would some fallback, like showing a single-color image as temporary replacement instead of the blurred images. So, quite good.
wikimedia-l@lists.wikimedia.org