Reading/Web/Desktop Improvements/Updates

: Visual changes, more deployments, and shifting focus


New styling inspired by Zebra prototype

As part of [ https://di-content-separation.web.app/Moss Zebra #9 prototype], which we wrote about in the last two updates, we introduced two kinds of visual changes: color-based area separation, and other CSS modifications. As we reported previously, the A/B test didn't prove that the color-based separation was an improvement. We focused on the other CSS modifications instead, and we're implementing these changes now. To preview the difference, you may use (without the changes) and  (with the changes). The changes are:


 * Dropdown menus (the sidebar, table of contents, user menu, and tools menu when not pinned) have a lighter outline and drop-shadow.
 * The " "/ "  " buttons in the dropdown menus have a gray background instead of the square brackets.
 * The main menu no longer has a gray background when it is placed in the side column (when it's pinned). Instead, all menus have the same appearance when placed in the side columns.
 * The left and right columns have equal width.
 * Due to the change above, the content width gets slightly narrower when menus are pinned in both columns.
 * The gap between the table of contents and content area is smaller.

In mid-November, we shipped these changes to the following Wikipedias: French, Catalan, Hebrew, Polish. We are planning on introducing these changes across all the wikis within 2-3 weeks. These will enable future modifications, like the Accessibility for reading menu.

Continuing deployments of the Vector 2022 skin

Since our last update, we have changed the default skin on a few Wikipedias: Dutch, Hindi, Hungarian, Norwegian (bokmål), and Swedish. We have also released a short video about the skin. In addition, after receiving all logos from our Design team, we were also ready to continue the wide-scale deployments on sister projects.


 * The Vector 2022 skin is now the default on all non-English Wikibooks, Wikinews, Wikiquotes, Wikiversity, as well as on Meta-Wiki.
 * We are continuing conversations and scheduling deployments to the remainder of sister projects, beginning with non-English Wikisource, Wiktionary, and Wikivoyage.

Some of these projects may need adjustments, like default settings for limited/full-width at namespaces unique to Wikisource. Gadgets or user scripts may need to be updated, too. We gladly make fixes or assist in making them, depending on whether changes need to be made in the skin itself or a community-controlled code. Reach out to us on the Desktop Improvements talk page or write directly to SGrabarczuk (WMF) if you have any questions or requests for further changes.

Focusing on further desktop and mobile readability improvements

The team has shifted focus onto the Accessibility for reading project. We will work on improvements in typography and introduce dark mode to the Vector 2022 and Minerva skins. Please visit the project page for more details and information on how to get involved.

: Results from the Content separation (Zebra #9) A/B test
In June 2023, we ran an experiment which compared different content separation layouts of the interface. [ https://di-content-separation.web.app/Moss This prototype] shows the tested design; we're calling it "Zebra". The goal was to improve readability and focus on the content of the page. The experiment tested the prototype design and compared it to the current all-white Vector 2022 design. The results of the experiment showed:


 * 1) A 3% increase in pageviews per session in the treatment group attributed to Zebra
 * 2) A 3.4% decrease in edits per session in the treatment group attributed to Zebra
 * 3) A 17% decrease in the click rate of the table of contents
 * 4) An 87% increase in the page tool pins per session

After reviewing the settings of our test, we did not find any issues that would result in data inconsistencies. Next, we studied other factors which might affect the results of the test. We noticed that a significant amount of the decrease in edits and pageviews came from screen sizes narrower than 1200 px. We combined these results with the results of our user tests. These did not indicate significant differences in readability between the test and control designs.

Our conclusion was that the prototype did not, in its tested form, improve readability and could negatively affect edits. We decided not to proceed with the deployment of this prototype in its tested form. Instead, we plan to improve readability and focus on the content through the following:


 * 1) Introducing changes to the typography, focused on improving readability and content comprehension.  This is the goal of the new project, Accessibility for reading
 * 2) Introducing improvements to Zebra, optimizing for narrower screens, and repeating the tests.

: Continuing work on Vector 2022, and making plans for the new fiscal year
We have been focusing on continuing deployments across remaining wikis and running experiments for further improvements. We have also done some work on the plans for future projects.

In the update, they have also shared some details on how we would be working on this project.
 * Rollouts. Vector 2022 is now the default skin on Polish and Spanish Wikipedias, and French Wikinews.  We are also discussing with the Chinese Wikipedia community.  Special gratitude to everyone who helps us and editors have better understanding in the discussions, find and resolve bugs, and explain decisions.  If the community of your wiki would like our skin to become the default, please reach out to us!
 * Experiment: toggle indicator. We have launched an experiment which introduces an indicator pointing to the fixed width toggle.  This is to ensure that readers are aware of the location of the toggle and able to switch between full and fixed width.  (T335307)
 * Vector 2022 Zebra9 prototype with framed menus logged-in.png Content separation (Zebra #9) A/B test. We will run an experiment that compares different content separation layouts for the interface (based on [ https://di-content-separation.web.app/Moss this prototype]).  The experiment will be run in May across a set of 10 large to medium-sized Wikipedias.  Once the experiment is complete, we will analyze the data and continue the process of selecting the best page layout.  Read more about the on-wiki test here.  For more information, check our documentation on the previous user testing experiment.  Many thanks to everyone who has commented on this topic on our project talk page, on other wikis, or at online meetings with us!  (T333180, T335972)
 * Plans for the future. In the next fiscal year of the Foundation, we'll be working on new projects.  We invite you to read the draft of the Wikimedia Foundation annual plan, section Infrastructure, Bucket: Wiki Experiences.  Also, read the more detailed description "WE2: Reading and media experience".  This is the part our team will focus on.  Among others, dark mode and reading lists are mentioned as examples of the possible projects.  We will be glad to read your comments on the talk pages of the linked Meta-Wiki pages.  Post in any language!  The deadline is.
 * For more information about dark mode, see the Community Tech's team update where they have handed this most popular Wishlist proposal over to us.

: Vector 2022 on more wikis and other updates
Over the past few months, the team has been preparing and changing the skin on the largest Wikipedias. Vector 2022 has become the default for all logged-in and logged-out users on Czech and English Wikipedias.

Since then, we have been discussing further improvements to the skin with the communities. As a result of these discussions as well as working on the previous plans, we've implemented many changes. These include:


 * Screenshot of the Vector-2022 skin's fullscreen toggle.png Persistence and availability of the full width toggle.  The full width toggle (available at the bottom of the page) is now persistent for both logged-out and logged-in users. This means that they see the width of their choice in spite of refreshing the page or opening a new one.  The toggle is also available at narrower screen widths.
 * Moving article tools.jpg New page tools menu. 
 * It allows for a separation between navigation related to the entire wiki and tools related to a specific page. In the first group there are, for example, Main page and Random page.  In the second group there are, for example, What links here, Related changes, and Cite this page.  The new menu also collects the page-specific tools in a single menu.  Before, some of these links were the main menu (sidebar) or in the More menu (next to History).  Our goal is to make it easier for new readers and editors to understand what these links do.  Users also may pin and unpin the new menu.  More information is available on the project page.
 * Making this change also has the benefit of showing the table of contents further up the page. Now, people need to scroll down to see the table of contents more rarely.  This is one of the concerns we've been hearing over the last couple of days and hope this addresses it.
 *  Moving the log-in link outside of the drop-down menu for logged-out users.  This change makes it quicker to reach the log-in link, without requiring logged-out users to open the drop-down menu.
 *  Various small improvements to the Table of Contents (ToC) :
 * Increase the height of the ToC. This will allow the ToC to appear longer, and for more sections to be visible (T319315).
 * Where the page lands when clicking on a ToC link (T314419). We've heard that the ToC opens too close to the beginning of a section, without giving any space for the title and previous section.  This change will increase this space, making it more comfortable when navigating.
 * Threshold for when a section is considered active, and marked in the ToC (T317661). We have also heard that a section is considered active only after the user has scrolled the previous section out of view.  This had lead to some confusion on the active state.  This change will allow sections to be shown as active earlier, when the majority of the section is displayed on the screen.
 * Navigating directly to sub-sections and expand the parent section if collapsed (T325086). Some of the feedback relates to the way that subsections appear on the page.  We've heard that subsections should appear more consistently when needed.  This change ensures that subsections are open when the user opens a direct link to that subsection.

 Upcoming changes and explorations  We are currently working on the following changes: It will be especially useful on pages like the Village Pump or coordination pages in the Wikipedia namespace (T317818).
 *  Page layout.  We wanted to address one of the main concerns which has come out of the feedback around the skin so far. It's about the separation of content, and the brightness of the interface.  We've developed a prototype we would like to get your feedback on.  How should we measure the potential changes as compared to the current layout? We've posted more details and specific questions on the talk page.  There are a few sections for discussions in different languages.  Add your comments and questions there!
 *  Configuration of the table of contents.  We want to allow the ToC to be more configurable. Then, editors could determine when the ToC needs to be expanded or collapsed by default, and how many sections of the ToC can be shown by default.  This will replicate the functionality of some of the "magic words" used in the ToC.

: More deployments, full width toggle, page tools, and other updates
For the past few months, our focus has been on discussing deployments across various large wikis. This includes English Wikipedia. Its community has agreed to have Vector 2022 as the default under some conditions. We have addressed those. Currently, we are discussing next steps with the English Wikipedia community.

We have also been switching the skin on in the majority of Wikipedias. Currently, there are ~300 Wikipedias with the default of Vector 2022. Last week, the skin became the default on Arabic and Greek Wikipedias. We hope to get to all the Wikipedias by the end of February 2023.

As a result of the feedback we've received, we've made more changes to the skin itself:

Limited width
 * We have built a preference for logged-in users which allows for the width to be set across pageviews and wikis. The preference is available in the appearance section of the preferences page ("  ").  It may also be set as a global preference.
 * We have built a toggle for logged-in and logged-out users. The toggle is available on every page if the monitor is 1600 pixels or wider.  Selecting the toggle increases the width of the page.

Page tools


 * Moving the page tools to the right side of the page. This change is about grouping the page tools, and creating separation from the wiki-wide tools.  This change also addresses the concern for the location of the table of contents.  It makes the sidebar (left menu) shorter and thus shifts the table of contents further up in the page.
 * We hope to make the updated tools menu available by the end of December, 2022. If you want to follow the development by previewing how the feature works, add  to the URL (if you're using Vector 2022 already) or  (if you're not using Vector 2022).

Accessibility

We have completed our review of the accessibility of the new skin with the American Foundation for the Blind (AFB). No major concerns were found. We are tracking the suggestions for further improvements. We are also addressing potential future improvements. The details are documented in T323634.

Sticky header

We have added an edit button to the sticky header to make access to editing the full page easier (without requiring scrolling to the top of the page). After testing across a number of wikis, we concluded the following:


 * People were more likely to complete the edits they start using the sticky header in comparison to the edits initiated using other edit buttons on the page.
 * The edits people started by clicking the edit button in the sticky header, and ultimately published, were reverted less often than those initiated using other edit buttons on the page.

: Plans and conversations about the deployment across the Wikimedia wikis

 *  High usage on the early adopter wikis.  According to the recent study by the Product Analytics team, 87% of contributors active on the early adopter wikis use Vector 2022. Here, active contributors mean users who made at least 5 edits between 1 November 2021 and 31 August 2022.  Thank you!
 *  Visual refinements.  We have completed the list of visual refinements. We planned to complete these before the deployments across more wikis.  These changes included work on link colors, icons, and overall look and feel of Vector 2022.  We welcome feedback and questions on any of these changes.  Write to us on the project talk page.
 *  Decision of the English Wikipedia community through the Request for Comment.  For the past two months, we have been discussing with the English Wikipedia community. English Wikipedians have identified issues blocking the deployment of Vector 2022 on their home wiki.  They have also requested that the decision on the deployment be made through the Request for Comment process.  Our draft is now available.  We're planning to launch the RfC on Wednesday, September 21.  If you edit English Wikipedia, we encourage you to take part!
 *  Deployment plans across other projects.  We are planning deployment conversations across all of the other Wikimedia projects. We will first begin with the smallest wikis.  By the smallest, we mean smaller than top 30 largest active communities.  We hope to complete this during the first week of October, 2022.  Then, we will begin conversations on medium to large-size wikis.  Dates will depend on the consensus across individual communities.
 *  More community-facing activities 
 * We have posted a new essay on the Diff blog. It has a title [ https://diff.wikimedia.org/2022/08/18/prioritizing-equity-within-wikipedias-new-desktop/ Prioritizing equity within Wikipedia's new desktop].  The essay is about why and how different groups of users were represented throughout the process of building Vector 2022.
 * We have published the expanded Frequently asked questions page. Take a look and tell us if it's useful.  Soon, we will make it possible to translate it.
 * We also display banners encouraging to try out Vector 2022. The banners are only visible for logged-in users having Vector legacy (2010), the current default skin.

: Wikimania, visual refinements, and more changes
Having the structural changes to the features done, we are finishing development of Vector 2022. In particular:


 * We are working on the visual refinements. We will be changing the styles, link colors, font size, content area width, and more.  This is based on the results of the feedback we received from our last round of prototype testing.
 * We are releasing updates to the table of contents (ToC) based on the feedback we've received from communities. These updates will make the ToC easier to use on smaller and larger screens.  There will be more customization than before.  Over the next few weeks, you will see the following changes:
 * The table of contents will be collapsible at all screen sizes
 * Once collapsed, the ToC will be available at the top of the page, next to the article title, as well as in the sticky header
 * The Editing team, whose focus is currently on improving talk pages, has added an "add topic" button to the sticky header on talk pages. This will make it easier to start a new topic on a talk page from any part of the page, without having to scroll to the very top.  See their project page for more information on this change and the project overall.

We have also continued discussions on how to make Vector 2022 the default for more communities. Your feedback is helping us make the skin better. We appreciate that. Let's meet again! On Saturday August 13, we are having a session at Wikimania, and a separate meeting for questions and answers right after that.

: Page title/tabs switch
We are deploying one of our latest updates. The page title will be displayed above the tabs such as,  ,  ,  , or.

With this change, we are improving two things. First, we are making it clear that the items in the tabs are related to the the page that's being viewed. It's becoming apparent when we put the page title first. This change also makes switching languages easier. It moved the language button into an even more prominent position at the top of the page. Learn more on Phabricator.

We have been introducing this change in small steps. Since the last days of June, it's been available to all users opted into the Vector 2022 skin, and some early adopter wikis. During the week of July 4, the change will become visible on all the early adopter wikis.

In addition to that, our next office hours will be on July 26 instead of July 12. This will allow us to prepare the communication about making Vector 2022 the default across more wikis. We are also working on better language support for office hours in the future. More information on this coming soon!

: Table of Contents is available
We have deployed the new table of contents. It makes it easier to gain context of the contents of a page and navigate the page without needing to scroll to the top.

It is currently available to three groups of users. First, all who use Vector 2022 and are not on our pilot wikis. Second and third - 50% of logged-in users of Hebrew and Basque Wikipedias. Next week, we will be A/B testing the table of contents across the rest of our pilot wikis. We would like to check if there's a decrease in the need to scroll to the top of the page.

Before all that, we prepared a series of prototype tests with both readers and editors. To read more about how we worked on the feature based on feedback, please see the project page.

Now, we are working on the feature based on the feedback from users mentioned in the second paragraph. In particular:


 * ToC on narrower screens. We have increased the threshold for which the ToC currently hides to 1000px.  (See T306904 for more context).  This was to make it more comfortable to read on narrower screens.  This is a temporary fix, though.  The conversation about the best solution will continue in T306660.  By the end of April/early May we hope to have clear next steps on our preference of the options presented there.
 * We are beginning the work on reducing the margins for screens between 1000px - 1200px. This will make the table of contents smaller and create more space for text.  We will track this in T307004 and will probably have the implementation ready within a few days.

: Development of the Table of Contents
The results of our 3rd prototype testing showed an overwhelming support for the proposed table of contents. Based on that, the team focused on developing this feature. The new table of contents will be persistent - users will have access to it at all times. It will also make it easier to understand the context of the page. In addition to that, it will be possible to navigate to different parts of the page without having to scroll all the way back to the top. We are expecting to deploy the new table of contents to our pilot wikis in the first half of April.

: Page tools feedback
The team is beginning work on page tools (sometimes referred to as article tools). Our goal is to make it easier to distinguish the purpose of individual items within the sidebar. We are currently collecting feedback on our proposed prototype. We look forward to hearing your thoughts! Please go to our prototype testing page and fill out the form.

: Sticky header confirmed to decrease the need to scroll to the top of the page
From January 5 to January 31, 2022, we ran an A/B test. We wanted to assess the impact of deploying the sticky header. The test ran on 22 of our pilot wikis. Logged-in users who were assigned to the treatment group with the new skin version saw the sticky header. Users in the control group saw the old feature.

The primary goal of the AB test was to test our hypothesis. We had been expecting that the sticky header would decrease the need to scroll to the top of the page. Overall, we saw an average 15% decrease in scrolls per session by logged-in users on the 15 pilot wikis in the treatment group (with the new sticky header), compared to the control group (without the sticky header). On the remaining 7 pilot wikis, there was too little activity and we excluded them. The results indicate that our hypothesis was correct. Adding the sticky header to the page reduced the need to scroll to the top of the page significantly. [ https://jenniferwang-wmf.github.io/Web_sticky_header/ Read the full report].

: More pilot wikis
The Desktop Improvements are default on twelve more wikis. These are, above all: Moroccan Arabic, Indonesian, Thai, and Vietnamese Wikipedias, French Wikiquote, Portuguese and Polish Wikinews, Vietnamese Wikibooks, and MediaWiki wiki. In addition to these, we have enabled the changes on the Wikimedia Foundation-related wikis: Wikimedia Foundation Governance wiki, Collab wiki, and Strategy wiki. Currently, there are almost 30 pilot wikis. Among them, there are wikis of different scripts and sizes, written on all continents, and run both by the communities and the Foundation. We hope that soon, at least one Wikisource will be added to that list.

: Sticky header developments
The team has been working on building a sticky header. It will allow logged-in users to have access to important functionality (search, talk pages, history pages, language switching, and more) throughout the page. We have completed the development of the first version of the sticky header. Now, we are expecting to deploy an A/B test to the pilot wikis by the end of January. The header was based on the results of our user testing and volunteers' answers to the prototype testing.

: Language switching iteration
Earlier this year, we moved the language button to a more convenient location at the top of the page. However, the results of our A/B test indicated that the new location of the button might be difficult to discover in the following cases:


 * For users that are accustomed to the previous location of the language switching functionality
 * For users that tend to switch languages across multiple wikis. In the latter case, this created a situation where the language switching functionality was available in different locations depending on the wiki used and whether that wiki was a part of the pilot wikis.

To improve on these issues, we are changing the new language button. Our goal is to make it easier to find across all scenarios. We hope to release these improvements in January 2022.

: Prototype testing for the table of contents
Over the next few months, our main focus will be on making the table of contents persistent. Currently, the table of contents is available only at the top of the page. It is difficult to gain context on an entire article or page, or to navigate to individual sections, when outside the top of the page. We hope to make the table of contents easier to navigate through a page, as well as to understand its context.

We will be publishing our research, further documentation, and mockups, over the next few weeks. In the meantime, we welcome you to give us feedback on our current prototype on this page.