Replace the "magnify" symbol used below thumbnails by a more explicit one
OpenPublic

Assigned To
None
Priority
Low
Author
gpaumier
Subscribers
gpaumier, Nemo_bis, waldyrious and 5 others
Projects
Tokens
"Like" token, awarded by Nemo_bis.
Reference
bz13070
Description

Images with the 'thumb' parameter are currently rendered with a frame and an icon labelled "Enlarge" that links to its description page. Unfortunately, the current icon http://meta.wikimedia.org/skins-1.5/common/images/magnify-clip.png is really not self-explanatory and doesn't indicate that more information can be found by following the link. In particular, no indication of how to get information about the image licensing is given. This causes attribution issues, since many visitors have no clue about how to reuse the file or who the author is (we regularly receive emails about this on Wikimedia OTRS).

Proposed solution

  • New symbol

This issue was recently discussed on the mailing list for Wikimedia Commons. It was proposed to replace the current icon by a white lowercase 'i' on a blue background; this is globally recognised as a symbol for a source of information (http://www.bristol.ac.uk/imagelib/i.html). Some public-domain images meeting these requirements are available on Wikimedia Commons http://commons.wikimedia.org/wiki/Image:Information_icon.svg. One of them could be used a a replacement of the current "magnify-clip.png" image.

  • New label

There is an existing MediaWiki message for the word "Information" http://meta.wikimedia.org/wiki/MediaWiki:Info_short. This message could be used as a replacement for the label "Enlarge", or both words could be used as the label, e.g. "Enlarge / Information".


Version: unspecified
Severity: enhancement

bzimport added a subscriber: wikibugs-l.
bzimport set Reference to bz13070.
gpaumier created this task.Via LegacyFeb 19 2008, 3:22 PM
Huji added a comment.Via ConduitFeb 19 2008, 4:41 PM

...the current icon is really not self-explanatory... <<

I don't share this feeling. I find it a lot like the "restore" button you see on the title bar of windows in Windows and Linux environment.

Oh, and as for the proposed (i) icon: It is more self-explanatory in terms of letting the user know there is some more inforomation, but unlike the magnify icon in use, it doesn't imply a larger image can be seen on that page.

Raymond added a comment.Via ConduitFeb 19 2008, 4:47 PM

...the current icon is really not self-explanatory... <<

Why not a magnifying glass icon ( http://commons.wikimedia.org/wiki/Category:Magnifying_glass_icons )? Probably more international than the character 'i' which is for latin script languages usable only.

gpaumier added a comment.Via ConduitFeb 19 2008, 5:03 PM

(In reply to comment #1)

Oh, and as for the proposed (i) icon: It is more self-explanatory in terms of
letting the user know there is some more inforomation, but unlike the magnify
icon in use, it doesn't imply a larger image can be seen on that page.

Well, this doesn't really matter, since the point is to conduce readers to click on the link. They will then land on the description page, where they will find both the larger image and the author / licensing information. For this purpose, a change of symbol is necessary, since the current one is too discreet. As a sidenote, I feel the "Information" message includes the "larger resolution" one.

(In reply to comment #2)

Why not a magnifying glass icon (
http://commons.wikimedia.org/wiki/Category:Magnifying_glass_icons )? Probably
more international than the character 'i' which is for latin script languages
usable only.

It seems to me that magnifying glass icons are too small due to their shape. Some tests have been conducted on http://en.wikipedia.org/wiki/User:Thebainer/thumbtest#Test.28s.29_by_Gmaxwell and because of the magnifying glass's grip, the symbol is hard to recognize. In my opinion, the replacement symbol should have a regulat shape (circle, square, etc.) in order to make it easier to recognize.

As for the "internationality", I think this white lowercase 'i' on a blue circle is quite internationally recognised as a source of information, even in places and projects using non-latin script languages. Below are some examples.

Huji added a comment.Via ConduitFeb 19 2008, 8:58 PM

Well, this doesn't really matter, since the point is to conduce readers to click on the link.

The point is the let the readers know what that icon stands for, not to conduce them to click on it. As soon as they understand what it is for by looking at it, they will decide whether they want to click on it or not.

gpaumier added a comment.Via ConduitFeb 19 2008, 9:05 PM

(In reply to comment #4)

The point is the let the readers know what that icon stands for, not to conduce
them to click on it. As soon as they understand what it is for by looking at
it, they will decide whether they want to click on it or not.

Yes, and the current solution admirably fails in making the reader understand that he will find /both/ a larger image when clicking the image (which is the general behaviour on the web) /and/ all the relevant information about the author and the conditions of reuse (which is quite specific to MediaWiki websites).

Huji added a comment.Via ConduitFeb 20 2008, 7:04 AM

(In reply to comment #5)

Yes, and the current solution admirably fails in making the reader understand
that he will find /both/ a larger image when clicking the image (which is the
general behaviour on the web) /and/ all the relevant information about the
author and the conditions of reuse (which is quite specific to MediaWiki
websites).

But you know what I' thinking? Maybe the magnify icon is "not" there to guide people to more information. Thumbnails, like all other images used on pages, are clickable. If someone needs more information, he can click on the image. Magnify icon only appears for thumbnails (which are by definition small-sized copies of the original image). So the addition icon may only be there to let the user know that the image he is looking at is a small-sized copy, and a bigger image is available too.

If we want to change the icon just to let it have an (i)nformation tone, then we need to add it for all images (like those framed). This is not desirable, I think.

gpaumier added a comment.Via ConduitFeb 20 2008, 8:59 AM

[sorry for spamming the wikibugs list, I didn't expect anyone to argue about this bug]

(In reply to comment #6)

But you know what I' thinking? Maybe the magnify icon is "not" there to guide
people to more information. Thumbnails, like all other images used on pages,
are clickable. If someone needs more information, he can click on the image.

I know that, you know that, but most readers don't.

Besides, there is a real attribution issue: on all text pages, the "history" tab is a direct link to the list of authors. On templates used to include videos, sounds, etc. in articles, there is almost always a direct link to the description page (example: http://es.wikipedia.org/wiki/Plantilla:Wikipedia_grabada). Despite images being the most used media on articles, they are currently the less credited, since there is no explicit link to the (list of) author(s).

The argument " If someone needs more information, he can click on the image." can be exactly rephrased as "If someone needs a bigger image, he can click on the image." The issue is still that there is no explicit link to the description page.

Magnify icon only appears for thumbnails (which are by definition small-sized
copies of the original image). So the addition icon may only be there to let
the user know that the image he is looking at is a small-sized copy, and a
bigger image is available too.

If we want to change the icon just to let it have an (i)nformation tone, then
we need to add it for all images (like those framed). This is not desirable, I
think.

Well, this page is, as its name says, a bug report: the current situation is causing a serious issue of lack of transparency (readers don't know they can get more information by clicking) and lack of proper attribution (there is no explicit link to the name of the author and the license). I proposed a solution, but you are welcome to propose a better one, as long as it helps fixing the current bug.

Huji added a comment.Via ConduitFeb 21 2008, 1:01 PM

(In reply to comment #7)

I know that, you know that, but most readers don't....

Is there evidence supporting this? Has there been a huge complaint by new comers that they can't figure how to reach the image description, unless they ask for help or dig lots of help pages? I guess no. In my view, when a user notices that his mouse icon changes to a "hand" when it hovers the image, he will automatically understand that he can click the image; new comers do this sooner or later, and understand why images are clickable! After being active in the wiki world for about three years (in different form, from an anonymous user to a sysop, a developer, or a user who regularly answers questions asked by new comers) I have exactly "never" encountered a person asking how to reach the image info. This experience "may" be biased, but if you really want to approach the situation as a "bug", I can't help expecting evidence showing that I'm totally wrong here.

In breif, I basically disagree with "the current situation is causing a serious issue of lack of transparency".

gpaumier added a comment.Via ConduitFeb 21 2008, 2:24 PM

(In reply to comment #8)

(In reply to comment #7)
> I know that, you know that, but most readers don't....
Is there evidence supporting this? Has there been a huge complaint by new
comers that they can't figure how to reach the image description, unless they
ask for help or dig lots of help pages? I guess no.

Are 7 requests in the last 3 days enough?

https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1364707&ArticleID=1664547&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1362368&ArticleID=1661681&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1361288&ArticleID=1660394&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1361028&ArticleID=1660053&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1359906&ArticleID=1658752&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1358736&ArticleID=1657301&QueueID=60
https://secure.wikimedia.org/otrs-2.1.3/index.pl?Action=AgentTicketZoom&TicketID=1358447&ArticleID=1656986&QueueID=60

If you want more links, you're free to browse the "info-en::Reuse" queue in Wikimedia's OTRS system.

In my view, when a user
notices that his mouse icon changes to a "hand" when it hovers the image, he
will automatically understand that he can click the image; new comers do this
sooner or later, and understand why images are clickable!

Then why do you oppose a new symbol? What is the fundamental harm in changing the current symbol to one that would be more explicit? It's not like this required a big amount of work from a developer.

Huji added a comment.Via ConduitFeb 21 2008, 7:06 PM

(In reply to comment #9)

Then why do you oppose a new symbol?

I don't oppose "a" new symbol! I just don't think the proposed new symbol is appropriate. I've already said why.

bzimport added a comment.Via ConduitFeb 21 2008, 9:38 PM

dgerard wrote:

Huji, this has been discussed at length - we clearly need something better than the present meaningless icon. I'm one of the people who gets to deal with prospective users who have NO IDEA that clicking on an image will get to more information. A circle-i communicates precisely that. I get really quite a lot of calls about this, and Guillaume has linked you to real-life examples of the present situation being quite simply not good enough.

Huji added a comment.Via ConduitFeb 21 2008, 10:32 PM

I just talked with Guillaume about it, and we discussed our viewsed more. In the end, I decided to draft a new icon: http://commons.wikimedia.org/wiki/Image:Information_magnifier_icon.png

You can see it in use here: http://commons.wikimedia.org/wiki/User:Huji/Magnify

The icon is a draft. It is in public domain, so if there is agreement on it, someone with experience with graphical design can modify it to look the best in the desired size. It both serves the "magnify" meaning and the "information" meaning.

What do you think?

bzimport added a comment.Via ConduitFeb 21 2008, 10:37 PM

dgerard wrote:

Casual tests on a couple of people here suggest the circle-i magnifier just means "magnify" - not "further information" at all. I suggest the second meaning is what we're direly in need of here. (A pity, as I'd really have liked the circle-i magnifier to work for both.)

bzimport added a comment.Via ConduitFeb 21 2008, 10:39 PM

bastique.bz wrote:

(In reply to comment #13)

Casual tests on a couple of people here suggest the circle-i magnifier just
means "magnify" - not "further information" at all. I suggest the second
meaning is what we're direly in need of here. (A pity, as I'd really have liked
the circle-i magnifier to work for both.)

What about a magnifying glass with a "?" (question mark) in the center. That would seem to indicate "what is this?" ~~~~

bzimport added a comment.Via ConduitFeb 21 2008, 10:41 PM

dgerard wrote:

I'd have thought the "i" in the middle would have said that, but it appeared the magnifier took precedence in their perception.

I think we'll need actual UI tests on actual uninvolved people rather than discussing it in the bug. "What does that symbol indicate to you?" Anyone able to set such up with people who aren't Wikipedians?

Huji added a comment.Via ConduitFeb 21 2008, 10:53 PM

Yes, I agree. Actually, it is not bad if the first meaning it implies is the "magnification" part, as long as the other message is also passed. But if people really ignore the "i" or "?" inside the magnifier, we should think of another solution. Unfortunately, I'm not able to run such an examination with uninvolved people.

Husky added a comment.Via ConduitFeb 22 2008, 12:24 PM

Another solution might be to add an 'info' icon *on* the image (not underneath), in the bottom-right corner. Clicking the icon can either lead to the Image page, or maybe even replace the contents of the image with some information or a small credit caption. I've seen this solution on some weblogs and it seems to work pretty well. It would also work on images that do not have a caption.

Huji added a comment.Via ConduitFeb 22 2008, 6:16 PM

What about having "two" icons down there? One (i) icon and one magnifier, right next to each other. This doesn't even have to be in two images; it can be one image with two icons in it.

bzimport added a comment.Via ConduitFeb 22 2008, 6:35 PM

dgerard wrote:

First hack at a dual magnifier-info symbol to replace the present expand boxes.

Two icons sounds good to me and is certainly an improvement over the current icon!

In my experiments a circle-i needs to be at least 15x15 px to be clearly a circle-i. Here's a first hack at a PNG (since it'll be rendered by the browser as part of the skin, and in-browser SVG is nowhere near good enough to rely on as yet).

Attached:

gpaumier added a comment.Via ConduitFeb 22 2008, 9:34 PM

(In reply to comment #19)

First hack at a dual magnifier-info symbol to replace the present expand boxes

Two icons sounds good to me and is certainly an improvement over the current
icon!

Indeed, I was thinking about this solution but I was still figuring how to design it.

Huji added a comment.Via ConduitFeb 22 2008, 9:38 PM

(In reply to comment #19)

Created an attachment (id=4665) [details]
First hack at a dual magnifier-info symbol to replace the present expand boxes

Two icons sounds good to me and is certainly an improvement over the current
icon!

In my experiments a circle-i needs to be at least 15x15 px to be clearly a
circle-i. Here's a first hack at a PNG (since it'll be rendered by the browser
as part of the skin, and in-browser SVG is nowhere near good enough to rely on
as yet).

Would you please: (1) put the magnifier to the right, and (2) upload a bigger version of it in SVG format to commons, released to public domain?

bzimport added a comment.Via ConduitFeb 22 2008, 11:56 PM

dgerard wrote:

Second attempt: circle-i then magnifier.

Here's the same thing with the circle-i then the magnifier.

I haven't made an SVG version because this bitmap is the actual image - it's not a rendering of an SVG. This PNG has been tweaked down to the pixel level for readability - the circle-i from the original SVG was far less usable before being tweaked at pixel level.

And, as I noted, this is part of the skin to be rendered directly by the browser, so it's got to be a PNG - in-browser SVG rendering is not good enough, fast enough or available enough to make an SVG part of the skin.

attachment icon-magnifier.png ignored as obsolete

bzimport added a comment.Via ConduitFeb 23 2008, 12:00 AM

dgerard wrote:

Better second attempt.

Here it is with the circle-i and magnifier a bit further apart. Maybe they need another pixel room? It's all tweakable!

Attached:

Huji added a comment.Via ConduitFeb 23 2008, 6:57 AM

I think the magnifier's height should be equal to that of the (i) icon, not larger.

In the mean time, I talked to brion. He thinks this new icon "might be nice"; an important thing pointed out was that, it would be better of ImageMap would also use the same icon. I also proposed skin-specific icons; he liked the idea and advised me to make sure caching will not interfere with that.

That is why I asked for the SVG. In order to create different colors of the same icon more easily.

bzimport added a comment.Via ConduitFeb 23 2008, 1:14 PM

dgerard wrote:

To make different versions, you may need to do the pixel-tweaking by hand. As I said, this image is not just a shrunken SVG. I made it starting from SVGs, but I was pixel-tweaking very early on - this PNG is the actual image.

In any case, these attachments should be regarded as rough sketches, not as finished products!

For magnifier height, I made the circles the same size. But we could do with someone with actual professional user interface and/or graphic design knowledge and experience to decide the final icon. (The trouble with UIs is everyone considers themselves expert enough, particularly developers - I refer you to the rant at http://weblog.obso1337.org/2006/developer-designed-uis/ - and I certainly don't consider myself expert enough to do more than float ideas and know when to ask someone who really knows the area!)

bzimport added a comment.Via ConduitFeb 24 2008, 2:53 PM

dgerard wrote:

Possibly-useful response from the mailing list! We should all go off and test these with a few people ...

From: Michel Vuijlsteke <wikipedia@zog.org>
To: English Wikipedia <wikien-l@lists.wikimedia.org>
Date: 24 Feb 2008 13:51
Subject: Re: [WikiEN-l] Fwd: [Commons-l] Musing with professional photographers: further lessons learned

sit user in front of wikipedia, ask them to find an image of, say, Ghandi

#*cringe as they go through
http://en.wikipedia.org/wiki/Special:Search?search=image+of+ghandi&go=Go and
the like

    1. eventually: arrive at, say, [[Mohandas Karamchand Gandhi]]
  1. ask user: who do you think made this image? how would you find out?
    1. sit back and try not to get worked up that they don't click the image to

see a larger size and the author information :)
#* eventually: arrive, at e.g.
<nowiki>[[Image:Gandhi_studio_1931.jpg]]</nowiki>

  1. ask user: who put this image on this page? how would you find out?
    1. '''note''': you could switch q2 and q3, and you could add things like "do

you think you are allowed to use this image on your own web site" -- the
questions are asking for various aspects of the information present on the
image detail page

Lather, rinse, repeat with different icons and variations of credits
under/around/near the image. I think this may be one of those rare occasions
when eye tracking *might* be useful.

Oh, and this may also help improve the design of the image detail page,
which, frankly, is horrendous.

Michel Vuijlsteke
Deisgn advisor, www.namahn.com :)

bzimport added a comment.Via ConduitApr 30 2008, 9:52 PM

kotra.cd wrote:

What still needs to be done? After a long discussion at the Village Pump ( http://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28proposals%29#Photograph_attribution_in_image_captions ), it seems that this feature is still desired. I am a graphic/web designer by trade (though admittedly not a UI designer), so if I can assist in any way I would be happy to. I would also be willing to conduct a survey to determine how average web users respond to these icons, if necessary. Is the implementation of this feature waiting on such a survey?

Huji added a comment.Via ConduitMay 2 2008, 4:15 PM

(In reply to comment #27)

I would also be willing to conduct a survey to determine how
average web users respond to these icons, if necessary. Is the implementation
of this feature waiting on such a survey?

I believe running such a survey and reporting the results here will boost us reaching a solution here.

Nemo_bis awarded a token.Via WebDec 12 2014, 8:44 AM

Add Comment