Last modified: 2014-11-04 22:51:50 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T15070, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 13070 - Replace the "magnify" symbol used below thumbnails by a more explicit one
Replace the "magnify" symbol used below thumbnails by a more explicit one
Status: NEW
Product: MediaWiki
Classification: Unclassified
Interface (Other open bugs)
unspecified
All All
: Low enhancement with 13 votes (vote)
: ---
Assigned To: Nobody - You can work on this!
: design
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2008-02-19 15:22 UTC by Guillaume Paumier
Modified: 2014-11-04 22:51 UTC (History)
9 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
First hack at a dual magnifier-info symbol to replace the present expand boxes. (1.05 KB, image/png)
2008-02-22 18:35 UTC, David Gerard
Details
Second attempt: circle-i then magnifier. (1.05 KB, image/png)
2008-02-22 23:56 UTC, David Gerard
Details
Better second attempt. (1.04 KB, image/png)
2008-02-23 00:00 UTC, David Gerard
Details

Description Guillaume Paumier 2008-02-19 15:22:03 UTC
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".
Comment 1 Huji 2008-02-19 16:41:22 UTC
>> ...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.
Comment 2 Raimond Spekking 2008-02-19 16:47:23 UTC
>> ...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.
Comment 3 Guillaume Paumier 2008-02-19 17:03:40 UTC
(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.

* http://ar.wikibooks.org/wiki/Template%3A%D9%85%D8%B5%D8%AF%D8%B1 Wikibooks in Arabic
* http://zh-yue.wikipedia.org/wiki/Template%3A%E6%AD%A3%E6%96%87%E6%95%B8 Wikipedia in Cantonese
* http://ru.wikinews.org/wiki/MediaWiki%3AAnontalkpagetext Wikinews in Russian
* http://tools.wikimedia.de/~daniel/WikiSense/CheckUsage.php?i=Information_icon.svg&w=_100000#end Usage of the proposed 'i' icon across Wikimedia projects
Comment 4 Huji 2008-02-19 20:58:44 UTC
>> 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.
Comment 5 Guillaume Paumier 2008-02-19 21:05:27 UTC
(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).

Comment 6 Huji 2008-02-20 07:04:01 UTC
(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.
Comment 7 Guillaume Paumier 2008-02-20 08:59:54 UTC
[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.

Comment 8 Huji 2008-02-21 13:01:08 UTC
(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".
Comment 9 Guillaume Paumier 2008-02-21 14:24:54 UTC
(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.

Comment 10 Huji 2008-02-21 19:06:29 UTC
(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.
Comment 11 David Gerard 2008-02-21 21:38:49 UTC
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.
Comment 12 Huji 2008-02-21 22:32:40 UTC
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?
Comment 13 David Gerard 2008-02-21 22:37:24 UTC
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.)
Comment 14 Cary Bass 2008-02-21 22:39:37 UTC
(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?" ~~~~
Comment 15 David Gerard 2008-02-21 22:41:59 UTC
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?
Comment 16 Huji 2008-02-21 22:53:34 UTC
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.
Comment 17 Hay Kranen 2008-02-22 12:24:01 UTC
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.
Comment 18 Huji 2008-02-22 18:16:24 UTC
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.
Comment 19 David Gerard 2008-02-22 18:35:29 UTC
Created attachment 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).
Comment 20 Guillaume Paumier 2008-02-22 21:34:33 UTC
(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. 
Comment 21 Huji 2008-02-22 21:38:34 UTC
(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?
Comment 22 David Gerard 2008-02-22 23:56:22 UTC
Created attachment 4667 [details]
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.
Comment 23 David Gerard 2008-02-23 00:00:53 UTC
Created attachment 4668 [details]
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!
Comment 24 Huji 2008-02-23 06:57:09 UTC
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.
Comment 25 David Gerard 2008-02-23 13:14:32 UTC
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!)
Comment 26 David Gerard 2008-02-24 14:53:17 UTC
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
#* eventually: arrive at, say,  [[Mohandas Karamchand Gandhi]]
# ask user: who do you think made this image? how would you find out?
#* 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>
# ask user: who put this image on this page? how would you find out?
#* '''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 :)
Comment 27 Kotra C. DeNies 2008-04-30 21:52:00 UTC
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?
Comment 28 Huji 2008-05-02 16:15:02 UTC
(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.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links