Page MenuHomePhabricator

Improve the language icon
Closed, DeclinedPublic

Description

Problem statement

The language icon looks too similar to font settings icons in other popular software and could be improved. This task initially spikes considering alternatives and eventually implementing one.

Summary for declining task

Citing from
T210865#4837020: We have no reason to think that any language icon is actually effective. We need to define the goals for various scenarios of language selection, and find an effective solution by doing proper design research and testing.
T210865#7165248: An icon is as strong as its context, its consistent usage, onboarding for it and also, but not exclusively as its design.


Current iconography

en.m.wikipedia.org_wiki_Barack_Obama (4).png (26×61 px, 1 KB)

For me, I think the trouble is that the A is far too emphasized and there's no movement to suggest it's being transformed into another language. An accompanying text label would also fix this issue.

Conflicting font settings iconography in other software

Screenshot from 2018-11-30 10-39-05.png (115×309 px, 7 KB)
Gmail
Screenshot from 2018-11-30 10-37-06.png (92×100 px, 4 KB)
GIMP
Screenshot from 2018-11-30 10-42-32.png (109×61 px, 4 KB)
Inkscape

Alternative iconography for language settings in other software

Peek 2018-11-30 10-46.gif (231×213 px, 30 KB)
Webpack
material.io_tools_icons_.png (120×112 px, 3 KB)
Material Design

Notes

  • Related but distinct improvements discussed in T204839.
  • an excellent history lesson T210865#4837020
  • a possible way to improve things (but unlikely) T211985
  • We used to show a button that said "read in another language" at the bottom of the page. When we replaced that with the icon at the top of the page, while intuitively moving to the top should make it more convenient and easier to find, the data we collected showed the opposite - that less people were clicking it (somewhere under T137932). Thus we do have evidence that the icon is fundamentally flawed for some.

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptNov 30 2018, 6:01 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson lowered the priority of this task from Medium to Low.
Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.
Jdlrobson subscribed.

@alexhollender there's quite a few of these language icon tasks now. This one, T204839 and another I can't find about how most people don't even realise this is a language button. I imagine this might be visited as part of AMC so I've tagged it as such for when you get round to that....

This is a classic: for many people this is a cool language change icon (me), but on the Czech Wikipedia time to time we get a question, how to change the language on mobile.

@Jdlrobson adding your idea here of including the language icon (whatever it ends up being) next to the "Language" list title in vector

language-icon-vector.png (479×480 px, 228 KB)

Whatever solution is used, I hope it can use a text label accompaniment as no other solution can be as clear and explicit. Pictures may say a thousand words but icons captioned well with text say one and leave no ambiguity.

Anecdotally, you can see how confusing these buttons on the Google search screen and Photos app look without text:

Screenshot_20181211-074652-mystery-meat.png (2×1 px, 511 KB)
Screenshot_20181211-074652.png (2×1 px, 538 KB)

Screenshot_20181211-080756-mystery-meat.png (2×1 px, 2 MB)
Screenshot_20181211-080756.png (2×1 px, 2 MB)

In my view, they're nearly indecipherable without text and simply adding a single word to each is almost a magical transformation to clarity.

This is a very long comment, but here's the TL;DR: We have no reason to think that any language icon is actually effective. We need to define the goals for various scenarios of language selection, and find an effective solution by doing proper design research and testing.

So, a bit of background...

There's this icon:

Peek 2018-11-30 10-46.gif (231×213 px, 30 KB)

As far as I know, its first appearance in the Wikimedia world occurred at https://lists.wikimedia.org/pipermail/foundation-l/2010-June/058813.html , although it's possible that it was earlier.

The icon is advertised at the very convenient URL http://www.languageicon.org/. This icon was born in 2008, a bit before the modern thinking on design research, and certainly before Wikimedia engaged in proper design research as it does now.

At that site and on its companion page https://competition.adesignaward.com/design-interview.php?ID=22868 there are explanations about this icon's background and meaning, but I cannot see anything there about the icon's effectiveness: is it actually good at telling people "hi! if you click me, you'll find the language you're looking for!"? The website also doesn't explain why was the Hangul (Korean) letter ㅊ chosen to appear there.

I am not totally sure, but I suspect that the current variants of the Wikimedia language icon evolved from the icon at languageicon.org. At some point the Wikimedia icon featured the Chinese character 大, possibly because its appearance (but not meaning) is similar to the Korean character ㅊ. Later it was changed to the Chinese character 文, which means "language". This is possibly meaningful to people who can read Chinese, but even though quite a lot of people know Chinese, most people don't, so I'm not sure that this letter's presence there is helpful to everyone.

Very important comment: A lot of what is written in the paragraphs above are my own guesses in a naïve attempt to reverse-engineer the history of the current icon. It's possible that @Pginer-WMF, @RHo, @Eloquence, @Volker_E and some other people know better. Please correct me if I'm wrong about anything.

My very anecdotal and informal observation of people trying to switch languages on Wikimedia's desktop and mobile sites tells me that people don't associate the shape of Wikimedia's "文A" icon with language switching. If they somehow learned about it, they use it, but the whole point of this icon is that it's supposed to be obvious, self-evident, self-teaching—and I very strongly suspect that it isn't.

Another hypothesis that I have is that no icon can, for better or worse, represent the concept of language switching in a universal way. By "universal" I mean "understandable to people from all countries, cultures, ages, education and economic backgrounds, and native languages". The consequent hypothesis is that the thing that can represent languages in an effective are languages themselves: Either names of the languages that are most likely to be known by the reader, or names of pages in these languages.

In compact language links we show a different list of language names by choosing the languages on which the current user clicked previously, the languages of their operating system and browser, the languages of their Babel boxes, and of their country; then we show languages that appear in the article, languages of featured articles, and finally some major world languages. As you can see, preference is given to user first, then to the user's equipment and location, and finally to the article.

We have a reason to believe that this is more effective than showing a full list of languages, as Wikimedia sites have done before Compact Language Links: the number of clicks on the links doubled after the feature's deployment. However, we can probably do even better. Perhaps, instead of just showing the language names we could show the names of the target articles. This idea, of course, is good for switching between articles; there are other kinds of language switching that don't involve article titles. And in any case, this is just a hypothesis that needs proper design testing with real people—both experienced Wikimedians (whose workflows shouldn't be broken) and casual readers who aren't familiar with how Wikimedia sites work.

For more food for thought see https://www.mediawiki.org/wiki/Interlanguage_links/Implementation_comparison and https://www.mediawiki.org/wiki/Universal_Language_Selector/Design.

Jdlrobson updated the task description. (Show Details)

The description was edited to say:

We used to show a button that said "read in another language" at the bottom of the page. When we replaced that with the icon at the top of the page I believe it didn't perform so well. So we have evidence that the icon is fundamentally flawed.

I agree with the conclusion, but I'd present the story a little bit differently.

The "Read in another language" button was placed inconveniently in the end of the article. Inconveniently for me, at least. I was happy that it moved to the top because I use this button frequently and I don't have to scroll to the bottom, but I clearly have a bias: I know what the icon means. It's quite possible that the current location is convenient for experienced Wikipedians, but it probably doesn't help the general public of readers, and the data appears to support it.

Redesigning the appearance and the location of the language switcher is desirable, but it has to begin from agreeing on a goal. I suspect that the moving of the button to the top wasn't done with a clear goal in mind, and that's one of the reasons it didn't have a significant impact. (Even though, again, I personally appreciate this change.)

The goal for the compact language links project on the desktop was "make access to knowledge in different languages easier". It was tested in user testing sessions (by Pau and Daisy) and in measuring the clicks. While we found further things to improve, we found that we reached this goal: people are finding the links more easily in testing sessions, and the number of clicks doubled. Setting the same goal on mobile is probably the right thing to do.

I suspect that the moving of the button to the top wasn't done with a clear goal in mind,

There was a goal see T121919. The problem was we didn't see the success we hoped in the A/B test and then the project got deprioritised. There is clearly more that can be done here!

I suspect that the moving of the button to the top wasn't done with a clear goal in mind,

There was a goal see T121919. The problem was we didn't see the success we hoped in the A/B test and then the project got deprioritised. There is clearly more that can be done here!

Thanks a lot for this link!

Language is an abstract concept, all the different ways to represent the concept had always some risks to be confused with some related concepts. To provide some context I wanted to share some of the metaphors we explored and the potential collision in meaning that we identified:

  • Earth/globe, overlaps with the concept of geography with potential confusion with other information such as coordinates or maps.
  • Speech bubbles overlaps with the concept of communication with potential confusion with discussion pages, comments, etc.
  • Multiple writing scripts overlaps with the concept of writing with potential confusion with text manipulation, input methods or translation (the later two close enough to our intent).

With the later I think the overlap in meaning is less problematic than the alternatives. The use of a character is consistent in representing content and in the same way that two characters with a different size next to each other represent a change in size; having them in different languages illustrates the change of language. It has its drawbacks, and a label with the language name (or code) can help to add the needed clarity.

Agree with @Pginer-WMF and @Amire80's point that there is unlikelt to be some universally accepted language icon we could be using instead of the current one. I'd also advocate for appending with more signifiers that this is a change-able language settings by adding the language code and/or a dropdown arrow after the icon, rather than trying to amend/change it to some other icon.

As an aside, I'm wondering if there is any data behind the task description's comment that the "A" in the icon may be too large and "conflicting" with other font settings iconography? That would be a greater argument for changing the icon if there are a lot of people mistakenly thinking this is to change font/display settings, but it could just be that people don't realize that articles exist in other languages and may not expect this setting to be available.

Volker_E closed this task as Declined.EditedJun 21 2021, 10:44 AM

I deliberately close this task as “Declined”.
An icon is as strong as its context, its consistent usage, onboarding for it and also, but not exclusively as its design. The current choice doesn't seem confusing by design, more by missing context if at all. The original task description tried to build a connection about possibly misinterpreting the lone-standing icon for text formatting functions.
That seems a wide-reaching thought without backing by other volunteers/Foundation employees over last 5+ years watching discussions around language discovery and language icon here.

Later the discussion was derived to strengthening user's context of the icon meaning. For example by adding it to “Language” section titles (or further references) in the interface – again that's about providing context.
Desktop Improvements project features languages label to the icon. One actionable question could be to add such a label to the icon only treatment on mobile, but that should be tackled in a different task. Maybe under the angle of comparing user interactions/discovery of the other content languages available and increase of switching between desktop and mobile now that we feature the link similarly prominent on desktop as on mobile:

MobileDesktop
image.png (824×1 px, 125 KB)
image.png (526×1 px, 105 KB)

Note, that mobile already adds the label on wider viewports.