The iterative design of the Vector interface: the case of moving interlingual links

Translate this post
Diagram of the iteration process

Today I’d like to shed some light on how the iteration process works as part of the Desktop Improvements Project. I’m going to tell you about a particular case concerning the update of the Vector skin on French-language wikis: the displacement of interlingual links.

Once successfully tested on a small scale as a prototype, the features are offered to test wikis to refine. At the end, they will become default on all wikis.

This iterative implementation (iterative design) allows the Web team to make the best use of user behavior information. The information is collected with A/B testing when launching a new feature on the early adopter wikis. Iteration also allows the Web team to step-by-step improve the proposed functionality based on the results of the quantitative data analysis. I hope this will also give you some insight into the usefulness of your feedback and comments, which incorporate and complement data analysis. Because a prototype that works in theory is good, but a prototype that works in practice for various uses… is better.

This has been happening over several months, so I’ll do a summary with links.

The new Language Selector was announced on French test wikis by Diane in February 2021 (Le Bistro, Wikidémie), then by Szymon in May (Le Bistro) and June (Le Bistro, Wikidémie). 

This change is not only aesthetic.

During its initial research, the Web team found that many Wikipedia readers were unaware that they could change language editions from within the wiki itself, without relying on external search engines such as Google. The readers concerned were in particular those who were already used to reading Wikipedia in several languages. The team wanted to make the ability to switch languages more obvious, moving the feature to the top of the page.

The new Language Selector also allows you to include in the new button a list of suggested languages, personalized for each Internet user. It’s called ”Universal Language Selector” and features a list of ‘Compact Language Links‘ that the Language engineering team maintains. One-click access to favorite languages highlights the languages a user is most likely to select. Secondly, the tool will allow you to change the language without having to open the menu.

Sketch of the new Language Selector presented at Wikimania 2019
Animation of a first version of the language list

On June 22, 2021, the new feature was rolled out to half of logged-in users of the French-language Wikipedia. This made it possible to perform and evaluate the A/B test, by comparing its use to the previous position. After the A/B test was completed, from July 20 all test wikis displayed the new version of the Language Switcher. It was only an intermediate step before being integrated into the sticky header on January 5, 2022.

In the first months, this move of interlingual links to the top right of the page confused some users. Many believed that the interlingual links had disappeared. The location at the bottom right of the homepage due to a technical limitation has increased the confusion.

Those most affected by the difficulty of discovering the new location were users accustomed to the location on the left of the page and those who often switch between language editions via interlingual links.

The latter, if they did not activate the new skin in the global preferences, found themselves having to look for interlingual links in different places each time they changed languages. For example, going from a test wiki to a wiki that was not a test wiki, as in the case of French Wikipedia to English Wikipedia and vice versa.

Especially in the first two months of deployment, these “lost” users left several comments in the project’s talk page and in the Wikipedia talk pages (Bistro, Newbie Forum, Technical Questions), until they made the French equivalent of a perennial proposal in July 2021.

Again in October, a contributor sounded the alarm about regional or minority languages ​​on the project’s discussion page. 

Highlighting the displacement of the interlanguage links of the Vector interface before the deployment of the sticky header.

Throughout the summer, I forwarded your feedback to the Web team, which was able to immediately see the mood and perception of the French-language community and begin to reflect on the subject. The team had to wait for the analysis of the A/B test to favor a scientific approach and propose solutions.

Other targeted reports (1, 2, 3) have been requested to integrate the analysis, identify and understand the different uses. They concerned the specific behavior of logged-in and non-logged-in users and the change in the number of clicks from anonymous users in the past few months.

In line with feedback from French-speaking users, the results of the analysis revealed a substantial drop in clicks on interlingual links in the first months of the rollout.According to the October 2021 report regarding the A/B test from June 22 to July 20, 2021 and the September 2021 report, carried out by WMF data scientist Jennifer Wang, on the French Wikipedia the decrease in the number of clicks was 52.42% for connected users and 54.59% for non-connected users. On Wiktionary, the decrease was 29.67% for logged-in users and 57.28% for non-logged-in users during the analyzed period.

Change in percentage of clicks on the interlingual links button during the A/B test

After the drop at the time of rollout, currently the adoption of the new feature is progressing slowly, but users are struggling to adapt to the change.

To correct this, the Web team proposed a series of new iterations of the design of the interlanguage links button, with the aim of making it easier to find in all possible scenarios. The team has built up the first of these iterations and hopes to complete the remainder by the end of January 2022. Some ideas on the style and color of the language switcher were proposed in September. A color change on hover has been deployed. A tooltip that would indicate the new location using the GuidedTour extension was suggested in December. Also, the idea of an alert displayed at the old location of the interlanguage links on the left of the page had emerged during a discussion. It was implemented in January 2022. These proposals are accessible and dialogue and your feedback are welcome. 

Screenshot of the September 2021 language button iteration proposals on Phabricator

The Language engineering team is also reflecting on the subject. They hope to be able to offer you direct access to interlanguage links from the Universal Language Selector, with the option of customizing the list.

For interlanguage links on the home page, a task on Phabricator presents several proposals and is also open to suggestions.

Other ideas from the community will be welcomed or discussed with users, such as interlanguage links accessible in editing mode. The goal is to arrive at a common and shared proposal in the next iterations, with the broadest possible consensus and support from the community.

While waiting for the iterations to move towards an optimal solution, one can wonder if the integration of interlanguage links in the sticky header will change habits again. A new analysis of the results of the iterations will reveal this.

This occasional annoyance on test wikis allows us to act in advance and prevent potential large-scale annoyance when the new Vector interface is adopted by default. The Web team understands the effort the test wiki communities are making and thanks them, apologizing for the inconvenience. Home renovations are not very pleasant when they are in progress at home and in the immediate future, however they promise a positive impact on the comfort of all its inhabitants over time.

The Language Selector after the iterative implementation: the style of the button on the French-language Wikipedia in January 2021
The language selector integrated into the sticky header for users logged into the French-language Wikipedia in January 2021
The language selector integrated into the sticky header for users logged into the French-language Wikipedia in January 2021
Screenshot of the proposals for the integration of interlanguage links on the October 2021 homepage on Phabricator

Letizia Baccarini – Francophone Ambassador for the Desktop Improvements Project

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?