Page MenuHomePhabricator

Replace the "magnify" symbol used below thumbnails by a more explicit one
Open, LowPublicFeature

Assigned To
None
Authored By
gpaumier
Feb 19 2008, 3:22 PM
Referenced Files
F33997318: Screen Shot 2021-01-12 at 6.45.32 PM.png
Jan 13 2021, 2:46 AM
F4647: icon-magnifier.png
Nov 21 2014, 10:03 PM
F4646: icon-magnifier.png
Nov 21 2014, 10:03 PM
Tokens
"Like" token, awarded by Jdlrobson."Like" token, awarded by Nemo_bis.

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

Details

Reference
bz13070

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 10:03 PM
bzimport set Reference to bz13070.
bzimport added a subscriber: Unknown Object (MLST).

...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.

...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.

(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.

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.

(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).

(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.

[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.

(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".

(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.

(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.

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.

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?

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.)

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?" ~~~~

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?

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.

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.

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.

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:

icon-magnifier.png (17×36 px, 1 KB)

(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.

(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?

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

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:

icon-magnifier.png (17×36 px, 1 KB)

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.

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!)

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 :)

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?

(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.

Jdlrobson changed the task status from Open to Stalled.Jan 13 2021, 2:46 AM
Jdlrobson subscribed.

this task doesn't make sense to me as written. I believe we no longer use a magnifying glass?

Screen Shot 2021-01-12 at 6.45.32 PM.png (476×642 px, 542 KB)

Stalling for now until it can be clarified that this is still relevant.

Aklapper changed the subtype of this task from "Task" to "Feature Request".Feb 4 2022, 11:01 AM
Aklapper removed a subscriber: wikibugs-l-list.
Jdlrobson changed the task status from Stalled to Open.Dec 7 2022, 7:20 PM
Jdlrobson added a project: Accessibility.

This icon has also been flagged as an accessibility issue.

Unstalling as I think I had a gadget installed that was hiding the icon.

@Jdlrobson I'm removing T323634 from this parent task because I believe the AFB results were not flagging the icon itself as an issue, more so that all the buttons in MultimediaViewer are unlabeled and inaccessible, which is covered by T325016