Page MenuHomePhabricator

[Language switcher] Language switcher button design
Closed, ResolvedPublic

Assigned To
Authored By
alexhollender_WMF
Nov 23 2020, 6:17 PM
Referenced Files
F34161838: image.png
Mar 15 2021, 6:40 PM
F34161836: image.png
Mar 15 2021, 6:40 PM
F34161982: image.png
Mar 15 2021, 6:40 PM
F34020623: iphone-keyboard.jpg
Jan 25 2021, 10:27 AM
F34020622: android-keboard.png
Jan 25 2021, 10:27 AM
F33934645: Screen Shot 2020-12-03 at 10.49.21 AM.png
Dec 3 2020, 4:48 PM
F33923373: langbutton.jpg
Nov 23 2020, 7:01 PM
F33923371: Screen Shot 2020-11-23 at 1.53.41 PM.png
Nov 23 2020, 7:00 PM

Description

Description

As part of the Desktop Improvements (Vector 2022) project we are moving the language links from the sidebar to a button/menu in the article header (details: T256023). We need to decide on the design of that button. There are two components:

  • icon
  • copy

In terms of similar buttons already in production:

compact language links
Screen Shot 2020-11-23 at 12.59.04 PM.png (98×153 px, 5 KB)
ULS (wikidata, commons, etc)
Screen Shot 2020-11-23 at 12.59.12 PM.png (41×139 px, 3 KB)
mobile web
Screen Shot 2020-11-23 at 12.59.28 PM.png (189×285 px, 16 KB)
Minerva
Screen Shot 2020-11-23 at 1.05.31 PM.png (157×329 px, 14 KB)

Using the existing icon, and following from the button in compact language links we get something like this:

image.png (30×157 px, 2 KB)

Explorations

langbutton.jpg (1×3 px, 432 KB)

Additional context: in T210865 (and other places -- cc @Amire80 to add links if you have them) we've discussed improving the language icon.

Event Timeline

Regarding the icon: anecdotally it seems there's a general opinion that the icon could be more recognizable (the icon being recognizable is particularly important on mobile because it is shown without a label). Having a dynamic icon seems like it could be impactful in improving recognition. @Jdlrobson suggested the idea of using our current language icon structure, but replacing the characters based on the current language. I've seen something similar done using flags, e.g.

Screen Shot 2020-11-23 at 1.53.41 PM.png (225×660 px, 14 KB)

Without user research I'm not sure how we might determine if any of these other icons (static or dynamic) are more recognizable than our current one. I also wonder if that eventual research & decision might be better suited for the language team? @ovasileva @Pginer-WMF

1. About the icon

I'll (briefly!) repeat what I wrote in T210865#4837020: There is 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. (Read the whole comment at T210865#4837020 if you're curious about the history, albeit it's reconstructed and probably not totally precise.)

Sure, we can have an icon if we have room for it. It's nice, some Wikimedians are familiar with it, and similar ones are used on other websites like https://www.rferl.org/ , https://www.churchofjesuschrist.org , and https://www.jw.org (yeah, ideological and religious websites are sometimes very multilingual; if you have better examples, send them my way). But is the icon, by itself, effective? It probably isn't.

Using different letters for different cultures, as you suggest in the exploration is a very cute idea, and it's worth exploring further, but I'm still not sure that it's enough by itself.

2. About the label

The label "languages" or something along these lines is probably necessary, and more important than the icon. However:

  • It's probably not helpful to people who don't know the content language of the wiki at which they are looking. (This is one of the reasons I repeatedly suggest running user testing of this feature with people who don't know English at all.)
  • In addition, we can't be sure that the label is localized. Some languages are more active in translatewiki than others. It's possible that
  • If the button appears next to a list of languages, then perhaps the label "Languages" is not necessary, but it should be tested with users.

3. About the flag

Flags are for countries, not for languages, and even with countries they are sometimes controversial. Which flag represents Spanish and English? Which flag represents Marathi and Hindi in the same screen? These problems are just the tip of the iceberg. So please don't use flags. Apple, for example, used flags in its keyboard selector on macOS, and it's moving away from this practice, which is the right thing to do. We have never used flags, and we should never start.

4. About the language name

Languages are best represented by the name of the language in that language.

Another options are the title of the target article, although it also cannot be perfect by itself, given that quite a lot of articles have the same title in multiple languages ([[ASCII]], [[António Guterres]], etc.) Nevertheless, perhaps you can experiment with it and see whether user testing shows anything useful.

5. About showing the current language in the button

For a long time I've been a bit uncomfortable about the practice of showing the current content language name and using it to tell the user: "Here you can change the language". Sure, we already do it ourselves on Commons, Wikidata, and other multi-language wikis, and I'm comfortable with it as a user, but then I'm a member of the team that developed this selector, so I'm really not representative. Yet again, it's probably useful to show the current language somewhere on the page, but by itself it's probably not a good enough indicator that says "you can find other languages here".

Strong +1 to @Amire80 's comment about not using flags for the reasons stated, plus another which is ideally we want an icon that is works in monochrome, and works well in small sizes.

I also agree that having the icon without a label is more of the issue rather than we not having found the right one that will be universally recognised. FWIW on Android the label used to be "Other languages".
Finally, I do think it could be worthwhile testing the existing icon with the globe icon (used on Android and iOS keyboards), and others to see if there is one more recognisable than others for non-English speakers.

This comment may be more related to T210865, since it concerns the treatment of the icon itself, but I'm putting it here since it’s in the context of the new language switching button.

For languages that use either Chinese or latin script, I’m concerned that the language icon does not distinguish itself enough from the plain text surrounding it, thereby not communicating it’s “icon-ness” enough to draw people’s attention.

The font, weight, size and color of the "文” and “A” are very similar to the plain-text label beside it. Because of that, I think that on a page like the one below, it would be hard for a non-Chinese speaking user to identify the language switcher, not because the icon doesn't have the right meaning, but because they might not notice the icon at all.

Screen Shot 2020-12-03 at 10.49.21 AM.png (1×2 px, 492 KB)

Regarding the icon:

  • Both current and the globe may work well with a label next to it. Without a label, the current one can generate uncertainty (what's that?) but the glob may be misleading (location/map/geography?). I think it is worth observing users using whichever options we consider more promising.
  • The globe is a promising option. We may need to consider replacing other uses of the globe. for example, coordinate indicators (and possibly others using the globe) may use an icon based on a location pin instead.
  • The dynamic pair of characters is an interesting idea, but I'm concerned that by changing the symbol we may actually make the switching process harder. that is, a user in a language looks for the language icon, changes language and tries to go back by looking for the same icon (but a slightly different is provided).
  • I'd discard flags for the reasons given.

Regarding the copy:

  • I think that displaying the current selection ("English" in the example) helps to communicate both the current selection and the option to select more (the dropdown with its icon communicates that).

I think that on a page like the one below, it would be hard for a non-Chinese speaking user to identify the language switcher, not because the icon doesn't have the right meaning, but because they might not notice the icon at all.

It is nice to support usecases such as a user landing to a page in a random language they don't speak, but that does not mean we need to optimize the experience for it as if it was the highest priority to support. I think the most common case is for multilingual users to switch across the languages they know. I think we should try to provide the best possible solution for those, while checking that makes it possible to operate in other cases.

User landing to a page in a random language they don't speak, will rely on the icon (which we know is not going to be perfect) and placement consistency.

Persian native speaker here.

Regarding flag, highly seconding what Amir said, flags are nasty can of worms in matter of identity and (for lack of better word) cultural imperialism. My example: Persian is mainly spoken in Iran and half of Afghanistan (as Dari a dialect of Persian), Should we go with flag of Iran? The flag which lots of Iranians including yours truly don't feel alliance to. Then what about Afghanistan's flag? If we go with Iran only, It'll enforces the oppressive ideology of "one true Persian" and the racism Iran does to Afghanistan (long story). Also culturally, flags are different in different countries, for example. In Germany, if you put up the Germany's flag in your house (except in soccer matches) everyone will consider you a racist, while in US it's not like that.

Regarding dynamic letter: When I saw the Persian one, at first I thought it was a footnote (we sometimes use English letters for footnote), I just mistake it as content than actual icon.

One thought on globe, even though at first I was following alongside Pau's thinking that it might be a promising option, it is often used (last time I saw it was adobe.com a while ago) for location on the globe, less for language. It might be seen as localized content geographically, not “just” language-specific, which doesn't seem perfectly right for our Movement.

One thought on globe, even though at first I was following alongside Pau's thinking that it might be a promising option, it is often used (last time I saw it was adobe.com a while ago) for location on the globe, less for language.

There are some really heavy usage contexts such as mobile keyboards where the globe is used for language:

AndroidiOS
android-keboard.png (186×271 px, 5 KB)
iphone-keyboard.jpg (405×780 px, 83 KB)

It might be seen as localized content geographically, not “just” language-specific, which doesn't seem perfectly right for our Movement.

I agree we want to check what works in our context. The challenge with the language concept is that it is so abstract that any specific representation is going to lose some aspects from the idea.

I ran a simple test to try and understand if the globe icon is more or less obvious as a language icon than the one we currently use (I'll call it the character icon). Summary: no clear results.

image.png (79×189 px, 3 KB)

Test limitations (!important)

The main limitation of the test, I believe, is that all of the participants speak English (in addition to one, or several, other languages), and are therefore familiar with the character A which is part of the current icon. As you, @Amire80, have pointed out it is necessary to test with people who speak no English at all (and particularly people who wouldn't be familiar with the character A).

The second limitation with this test is that there were not enough participants (ie data points) to get a statistically significant result.

Test details

There were two groups: Group A (20 participants) and Group B (20 participants). All participants were multilingual. Participants were told to imagine they were reading an article on Wikipedia, and then they were shown six buttons and asked to guess what each button would do. The difference between the two groups is the order in which the two relevant buttons appeared.

Group AGroup B
image.png (337×170 px, 11 KB)
image.png (336×172 px, 11 KB)
Test results

Out of the 40 participants:

Guessed the character icon was for switching languagesGuessed the globe icon was for switching languages
Group A186
Group B177
total3513

*some participants guessed that that both the globe and the character icon were for switching languages

Next steps

Given the limitations of these tests I'm not sure we can conclude anything. It seems likely that the globe icon is not more recognizable than the character icon to people who speak English, however even that we can't really know. Before any further discussion regarding the icon we should figure out an accurate way to test this : )

In T268514#6915135, @alexhollender wrote:

I ran a simple test to try and understand if the globe icon is more or less obvious as a language icon than the one we currently use (I'll call it the character icon). Summary: no clear results.

image.png (79×189 px, 3 KB)

Test limitations (!important)

The main limitation of the test, I believe, is that all of the participants speak English (in addition to one, or several, other languages), and are therefore familiar with the character A which is part of the current icon. As you, @Amire80, have pointed out it is necessary to test with people who speak no English at all (and particularly people who wouldn't be familiar with the character A).

The second limitation with this test is that there were not enough participants (ie data points) to get a statistically significant result.

Test details

There were two groups: Group A (20 participants) and Group B (20 participants). All participants were multilingual. Participants were told to imagine they were reading an article on Wikipedia, and then they were shown six buttons and asked to guess what each button would do. The difference between the two groups is the order in which the two relevant buttons appeared.

Group AGroup B
image.png (337×170 px, 11 KB)
image.png (336×172 px, 11 KB)
Test results

Out of the 40 participants:

Guessed the character icon was for switching languagesGuessed the globe icon was for switching languages
Group A186
Group B177
total3513

*some participants guessed that that both the globe and the character icon were for switching languages

Next steps

Given the limitations of these tests I'm not sure we can conclude anything. It seems likely that the globe icon is not more recognizable than the character icon to people who speak English, however even that we can't really know. Before any further discussion regarding the icon we should figure out an accurate way to test this : )

Thanks for running these tests @alexhollender - I agree it is in no way conclusive, but think it is still quite helpful to see that a big majority (35/40) people recognised the existing character icon we use over the 13/40 for the globe, and that the spread between A & B indicates they were not influenced by seeing one before the other. Maybe the takeaway here is that there is less urgency/priority to change the status quo (existing character icon) until there is more bandwidth to test with more folks who are non-English speaking?

Alright, going to resolve this. Seems like we'll be keeping the current icon for the time being, with the note that we should add a label whenever possible (and preferably in the user's language if available).