Jump to content

Reading/Web/Desktop Improvements/Frequently asked questions

From mediawiki.org
< Reading | Web | Desktop Improvements
Revision as of 22:11, 18 July 2023 by Shirayuki (talk | contribs) (Marked this version for translation)
Languages:
Let's change it
Contact and basic information
Design and audiences
The individual features


How to disable or enable Vector 2022?

How can I disable or enable it just for me on one or all Wikimedia wikis?

First of all, check if you're logged in. Logged-out users are not able to change the skins.

One wiki All wikis
Disable
  1. Go to the global preferences
  2. Open the Appearance tab
  3. Check the box to the left
  4. Check "Vector legacy (2010)"
Enable
  1. Go to the user preferences
  2. Open the Appearance tab
  3. Check "Vector (2022)"
  1. Go to the global preferences
  2. Open the Appearance tab
  3. Check the box to the left
  4. Check "Vector (2022)"
  • Showing the setting to enable/disable Vector legacy (the interface without our improvements)
    Showing the setting to enable/disable Vector legacy (the interface without our improvements)
  • Showing the opt-out button in the left sidebar
    Showing the opt-out button in the left sidebar
  • Detail of the opt-out button
    Detail of the opt-out button

See also:

This is because of the limited capability of our servers. The logged-out users can use browser extensions allowing them to personalize their interface, or they can create an account.

See also:

How can Vector 2022 become the default for all on my home Wikimedia wiki?

Contact us. We'll present the project to your community and start the discussion.

How can I enable it on my own/personal wiki?

If you would like to see our changes,

  1. Make sure you have downloaded MediaWiki 1.39
  2. Add following lines in your LocalSettings.php :
$wgDefaultSkin = 'vector-2022';

We are glad to learn that you appreciate our improvements!

How to customize Vector 2022?

Why don't you provide preferences to choose between different versions of the features?

That would be too complicated to maintain and develop.

Each preference is like a crossroad where users can choose between options. Many choices indicate many combinations. Preferences would make us responsible for all the combinations. We would have to maintain them, and also, in the case of building new features, check if the features are compatible with each of the combinations. We can't afford that.

Instead, we give the communities the option to create gadgets, user scripts, and individual settings. As always, we provide the space for bottom-up creativity, and help technical users to maintain their code.

See also:

Why are there no preferences for anonymous users?

Anonymous preferences would make the pages load too slowly.

Most traffic comes from logged-out users. To handle that, we have a few "caching servers" which only save and send "snapshots" of web pages. These "snapshots" are up to 7 days old, are a replacement for generating web pages, and are the same for all logged-out users. This allows us to serve pages quickly.

Preferences require generating different versions of web pages. Making this possible for logged-out users would overload our servers. We don't want to do that also because we need to reduce cache fragmentation.

The only possible way of providing preferences for logged-out users now is making the settings load always after the page. This takes much more time to load and looks odd. For example, if a logged-out user was to see the dark mode in action, then immediately after loading each page, they would first see the light interface for a short moment, and then the interface would become dark.

For context, the only reason we have preferences for logged-in users is we don't serve the "snapshots" to them. And this is because traffic coming from logged-in users is small.

See also:

What do you do for editors who need specific tools and features?

  • We contact volunteers with technical skills to ensure backward compatibility. We ask them to check the code they have written, and offer help if the code needs changes.
  • We make it possible to configure and personalize our changes. We are happy to work with volunteers with technical skills who would like to create new gadgets and user scripts.
  • We do not replace the work of volunteers with technical skills. In principle, we do not make edits to templates or create new gadgets, but can advise when necessary.

Do you fix gadgets which aren't working with your changes?

It depends.

We help volunteers fix gadgets and user scripts. Sometimes, we fix these ourselves. But in general, we work on MediaWiki itself. Gadgets and user scripts are written and maintained by volunteers. By the nature, these are always less stable and predictable.

If you are unsure on how to fix an issue with a script or gadget – contact us! We'll do our best to give advice on potential fixes.

See also:

What CSS classes should be used to customize Vector 2022?

  • skin-vector for both skins
  • skin-vector-legacy for Legacy Vector
  • skin-vector-2022 for Vector 2022

How to restore the full width?

One wiki All wikis
  1. Go to the user preferences
  2. Open the Appearance tab
  3. Uncheck "Enable limited width mode"
  1. Go to the global preferences
  2. Open the Appearance tab
  3. Check the box to the left
  4. Uncheck "Enable limited width mode"


To reclaim further space at the page edges, add the following CSS code to your global.css: 

.mw-page-container {
  padding-left: 2.25em;
  padding-right: 1.25em;
}

#siteNotice {
    margin:0
}

See also:

How to disable the sticky elements?

Add the following CSS code to your global.css:

  • Header – add 
    .vector-sticky-header {display:none;}
  • ToC – add 
    .sidebar-toc {position: static;}

How to restore the inline table of contents

Use the following JavaScript code: 

document.querySelector('meta[property="mw:PageProp/toc"]').replaceWith(
    $('#vector-toc, .mw-table-of-contents-container')
    .removeClass('mw-sticky-header-element' ).removeClass( 'vector-toc.vector-pinnable-element' ).removeAttr('id')
    .removeClass('mw-table-of-contents-container')[0].querySelector( 'ul' ).cloneNode( true )
)
    
$('#vector-toc-pinned-container,#vector-page-titlebar-toc,#vector-sticky-header-toc').remove();

Note, the table of contents will not look like the old table of contents. Additional CSS will be required for that, if necessary.

How to restore section numbering to the table of contents

Add the contents of the following CSS code to your global.css:

User:Jdlrobson/vector-2022/tocNumbering.css

  1. Ask your community to agree to set up the main page heading. (See our explanation why this is a good idea.)
    1. The heading will be displayed in Vector 2010, Minerva, Timeless, and Vector 2022. It will not be visible in Monobook.
    2. The heading can be configured by edits to MediaWiki:Mainpage-title-loggedin for logged in users and MediaWiki:Mainpage-title for logged out users. For mobile logged in users, MediaWiki:wikimedia-mobile-mainpage-title-loggedin is used. See the details about the main page heading settings.
    3. Test what the main page looks like and work with the button at the top by adding the ?vectorlanguageinmainpageheader=1 parameter to the URL. See the example on the Icelandic-language Wikipedia. Note that the Icelandic-language Wikipedia hasn't the heading set up, so only the button appears.
  2. Contact us and ask us to move the button to the top.
    1. We will change the settings for your wiki.
    2. When we do this, the button will be visible at the top of the page in Vector 2022. In other skins, the list with language links will be displayed in the standard place which varies by skin.

How to restore the previous user menu?

It's not possible to do that currently.

How to change the logo to a temporary one?

The logo in Vector 2022 is made of 3 elements, each can be changed independently with CSS.

  • To change the icon image (e.g. globe on Wikipedia): 
    .mw-logo-icon { content: url("INSERT NEW IMAGE URL HERE") };
  • To change the wordmark (e.g. the word "Wikipedia"): 
    .mw-logo-wordmark { content: url("INSERT NEW IMAGE URL HERE") };
  • To change the tagline (e.g. the words "The free encyclopedia"): 
    .mw-logo-tagline { content: url("INSERT NEW IMAGE URL HERE") };

Contact

How can I contact your team?

Choose one of the following options:

How can I follow your activities?

Do you host or attend online meetings?

Yes!

We organize open online meetings for the communities (office hours). At these meetings, Olga (our product manager) makes presentations about the recent developments. Next, community members can ask any questions about the project.

We are also open to invitation to any community event online. These may be local, country-wide, or international meetings.



What are Vector 2022 and the Desktop Improvements?

Is this a redesign?

No.

A redesign would be a single major change which affects how the site works. In the case of this project we have made a series of individual changes. Each feature was a separate small project. At the end, these features were joined together by a cohesive visual design.

What is the timeline of this project?

We have been working on Vector 2022 (originally known as modern Vector) since 2019. Between early 2020 and mid-2022, we were building and releasing different features on "early adopter" wikis. (You can read more about that in the answer to the question below, points 2–4.)

We have finished that part. Vector 2022 isn't "beta" anymore. Currently, we inform about our intention to introduce Vector 2022 on more wikis. By the end of March 2023, we hope that Vector 2022 would be the default skin across almost all Wikimedia wikis.

Why do you use the word Improvements?

The term early adopter is used in the English Wikipedia article Technology adoption life cycle.

Because we have data indicating that the changes are for the better:

  1. We identified problems through research with both readers and editors. During this phase, in 2019, we studied the way people used the sites and identified the largest usability issues. We also identified issues to exploring the site further, becoming more engaged with reading or editing. We did this by interviewing readers and editors across multiple countries, locations, and languages. See: Research and design: Phase 1, Research and design: Phase 2.
  2. We built and tested prototypes. We built out the ideas of each feature and began showing them to the users. Each feature was tested with readers and editors through interviews and wider rounds of prototype testing. For testing with editors, we used central notice banners. We displayed them across multiple language and Wikimedia projects so that we can get a wide and diverse audience. Each prototype was tested by approximately 200 editors on average. (Example)
  3. We refined and built our features. We took the feedback from the prototype testing and refined or changed the prototypes accordingly. In some cases, we asked for additional feedback to ensure we're making the right decisions.
  4. We contacted various wikis asking to join the early adopters ("pilot wikis"). This was the "beta" phase. On these wikis, we performed quantitative tests for whether each feature worked as expected.
    1. We performed A/B testing on logged-in users. Unfortunately, we are not able to perform these on logged-out users. This is why we make before and after comparisons.
    2. When we had the test results, we compared the results with the criteria of success we had previously defined. When we got negative results from our test, we changed the feature and test again.
    3. Since this phase, we have also monitored usage across all wikis, where many account holders have already been using Vector 2022.

See also:

On which wikis have you tested these changes?

The pilot wikis where we have been testing Vector 2022 have been:

Latin script Wikipedias Non-Latin script wikis Sister projects
Arabic Wikisource Yes Yes
Moroccan Arabic Wikipedia Yes
Bengali Wikipedia Yes
Catalan Wikipedia Yes
German Wikivoyage Yes
Basque Wikipedia Yes
Persian Wikipedia Yes
French Wikipedia Yes
French Wikiquote Yes
French Wiktionary Yes
Indonesian Wikipedia Yes
Hebrew Wikipedia Yes
Korean Wikipedia Yes
Polish Wikinews Yes
Polish Wikisource Yes
Portuguese Wikinews Yes
Portuguese Wikipedia Yes
Portuguese Wikiversity Yes
Serbian Wikipedia Yes Yes
Thai Wikipedia Yes
Turkish Wikipedia Yes
Venetian Wikipedia Yes
Vietnamese Wikibooks Yes
Vietnamese Wikipedia Yes

Additionally:

Why do you use this naming: Vector 2022 and legacy Vector?

The new skin is a continuation of many of the ideas in the original Vector skin. It is being built using the code the Vector skin uses. We wanted to maintain functional and visual continuity. Everything built and meant for legacy Vector should be working with our changes, or can be configured to do so fairly easily.

The version built in 2010 and developed until 2019 has been frozen. In other words, we will keep and maintain it, but will not be building new features for it.

We use the name Vector 2022 for purely technical reasons. This name marks when the new Vector was available to third-party wikis as a new skin. (Third parties mean those who install MediaWiki).

On each wiki, the skin name can be overriden by changing MediaWiki:Skinname-vector-2022. However, this may cause confusion since it won't change the associated skin key that is used for site and user styles.

See also:

Will you remove legacy Vector?

No.

Legacy Vector will continue to be available as an option in Preferences, similar to other skins that have been default in the past, such as Monobook.



Target audience

Are these changes made for readers, and not for editors?

Not exactly.

Our team (Web) works on the reading (viewing) experience on desktop and mobile browsers. Those who both view and edit, and those who view but do not edit, are one large group of the interface users. We work for all of them, bearing in mind that new and advanced editors have specific needs.

The goal of this project is to improve the reading experience on desktop without making editing more difficult.

That said, our movement strategy recommendations implore us to improve our user experience in an inclusive manner. In this spirit, the project has a specific goal of ensuring the free knowledge grows equitably in the future. When building, we made sure to collect the voices of readers from different demographics and geographies. We also wanted to make their opinions a focus when defining what we were to work on, and evaluating whether a given idea was able to satisfy their needs.

See also:

What tools are the Foundation building for editors?

At the Foundation, there are other teams working on projects dedicated specifically to editors. Among them, there are:

Do your changes have a negative effect on the editing statistics?

No.

We collect statistics of the editing activity on all wikis. Compared to wikis with Vector legacy (2010) as the default, on wikis with Vector 2022 as the default, there are no negative differences.

Do your changes make it more difficult to explore the community side of the wikis?

No.

Readers and new editors are intimidated by large numbers of links, options, and ways of exploring the editing (in other words, the community) side of the Wikimedia projects. This is a finding of our research.

We want more users to join the communities. We do this by limiting the number of the unhidden links, and bringing additional focus on the most relevant ones. All this is done in collaboration with the Growth and Editing teams.

See also:

Are you focused on Wikipedia articles?

Yes.

Wikipedia articles, as a whole, have the most part of the viewership and readership compared to other namespaces on Wikipedia or any other projects. We also make adjustments to pages from other namespaces and special pages. Pages which we have made special adjustments and configurations for include: main pages, pages specific to some sister projects, special pages, the 2010 wikitext editor, the 2017 wikitext editor, and the Visual Editor.

We have also been working with the Editing team to ensure that the work they are doing for talk pages aligns with our work, and that special configurations for talk pages are put in place.

Have you been mindful of sister projects?

Yes!

We aim to change the basic elements of the interface. Most features work on the sister projects just as well as they improve Wikipedia. We have made sure to test and build for different sister projects from the beginning of the project. We still make adjustments to the default features where necessary.

Non-Wikipedia projects, such as French Wiktionary, were also a part of our partner communities since 2020. We ensured we have had direct communication and feedback from them.

Regarding the adjustments, for example, on Wikisource, the limited width does not apply to the Page namespace provided by the Proofread Page extension.

Are you focused on English Wikipedia?

No.

We take into account the needs of various communities and test our changes across 30+ languages. We are also inspired by the interface and gadgets built on various wikis, for example Korean and Vietnamese Wikipedias.

What do you do to ensure that the change would work on my wiki?

What do you do to ensure that the change is not half-finished?

We make tweaks both before and after we introduce the changes on wikis to make sure they are up to the needs for individual communities. If you think your community would benefit from more adjustments and gadgets, see:

After making these changes on all wikis, we will work on projects related to Desktop Improvements.

Accessibility

Have your changes been tested on users with disabilities?

Yes. We are working with the American Foundation for the Blind. We are asking various questions related to the accessibility of Vector 2022. See more on Phabricator.

Will the wikis be less accessible for users with slow Internet connection?

No.

We want to keep the new skin similarly code-heavy to legacy Vector.

See also:

Mobile, large screens, and responsiveness

Are the changes inspired by mobile design?

No.

These changes are created specifically for desktop interfaces. All research and testing done for this project has been focused on desktop users only. We have, however, considered the experiences of people who use desktop in narrower screens (for example, if you have two tabs open side by side).

At this time, we do not have plans to merge the desktop and mobile experiences.

Will the new interface be responsive?

We've been working towards that goal, but it's not an official goal of the project.

If you want to make the interface responsive now and you're using Wikimedia wikis, add the following to your global.js: 

if

( mw.config.get("skin") === "vector")

{

document.head.innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=0.77, maximum-scale=1.0, user-scalable=0">';

}

If your community would like this to be the default, please start a conversation on your wiki, and contact us when consensus is reached. We can then make the change.

Will you build a dedicated setting for high resolutions?

We don't have plans to build a specific setting at this time. We want the experience to be optimized for the majority of users, while still providing the tools necessary at all resolutions. We believe the current version of the new skin does this successfully. That said, we encourage personal customization!

See also:

Why is the width of the content limited?

Why have you replaced the area used for content by an empty space?

Reading efficiently is crucial to most people using our projects. Our goal here is to improve the readability of the content. There are several factors that affect it – i.e. font size, contrast, font, line length, and empty space.

Shorter lines
  1. When reading short lines, readers don't move their eyes too much, use the eye's muscles less intensively, thus avoiding eye strain.
  2. Narrow paragraphs allow readers to memorize new information better.
  3. On websites, there should be between 35 and 100 characters per line. Numbers closer to the smaller end are preferred.
  4. The overwhelming number of major websites have similar limitations on content width. For example: academic journals like Nature, news websites like The New York Times, government and intergovernmental websites like the United Nations, academic documents like LaTeX, and word processors like Google Docs and Etherpad.
Empty (white) space
  1. White space is used for the eyes' resting spots. It helps readers over the age of 60 focus on content and increases content comprehension by 20%.[1]
  2. People are able to focus more easily without the distraction of sidebars or other elements.
  3. We are using some of this space for other functionality. We have made the sidebar sticky, and have placed the table of contents next to the content. Also, limiting the content area gives us new options for the more distant future. Community members have suggested to put infoboxes, images, or references there. As a separate project, we will consider ways of using this space.

See also:

Why can’t we leave it for readers to narrow their browser windows down?

Most users don't resize their browser windows or use browser plugins to improve the design of the websites they view. Wikis should be good-looking immediately, in their basic form.

Some tables and templates don’t fit within the limited width

We should make sure that all of our content is as responsive as possible to accommodate all visitors. A large percentage of our users, who don’t have large screens and are accessing Wikipedia from their laptops, already had issues with tables and templates even before the change.

Why don’t you just make it a setting?

We want it to be default. We are building a common experience that is shared between editors and readers. This could be helpful to editors when making decisions about page layouts. Currently an editor might be editing a page at a width of 1500px, while a reader reads it at a width of 1200px. By implementing a limited width, we don’t remove this discrepancy (because there would still be variation below the max-width, for people with narrower screens), however we would be greatly limiting the range of variation.

Note: 1024px is mentioned as a minimum size to consider in the English Wikipedia Manual of Style, though that’s not quite the same thing.

Why did you change the list of language links?

Vector 2022 language switcher location

Because from the readers' perspective, the sidebar is not a place for useful links. Most readers focus on the content area. Links in the sidebar are practically hidden from their sight.

Also, we need to promote the variety of language versions of Wikimedia projects.

For more than 15 years, the list has been displayed in the sidebar. The most active users have developed muscle memory to look for that list in that place. This is why in the sidebar, we have placed a box with information about the language button being displayed in a new place.

Yes.

"Add interlanguage links", "Edit interlanguage links", and "Wikidata item" will eventually be part of the menu activated by the language switching button ("language menu"). This is a task for the Language engineering team.

How to fix the coordinates displaying incorrectly near the languages button?

The recommended option A different option (not recommended)
  • If on your wiki, the coordinates are placed by a Lua module (for example, on French Wikipedia, there's Module:Coordinates), use the following code:
    titleText = frame:extensionTag( 'indicator', tostring(htmlTitle), { name = 'coordinates' }    )
  • If on your wiki, the coordinates are placed by a template, follow the instructions on Adding page status indicators.

Use the absolute positioning in the MediaWiki:Common.css, for example: 

.skin-vector.skin-vector-legacy #coordinates { top: 0px; }

.skin-vector #coordinates { top: -20px; }

For those who prefer a working example, details on how this was fixed for English Wikipedia can be found here: https://phabricator.wikimedia.org/T281974#8869238.

Consider pages which use page status indicators, pages which have banners or site notices, and the look of the pages at lower resolutions.

We have discovered that readers focus on the content page and ignore the sidebar. They will be more likely to switch between languages if the button with the language links appears at the top of the page, next to the heading.

On many wikis, headings on main pages are hidden. This is why the button with language links isn't displayed next to it. Instead, it's at the bottom of the main pages. It is possible to make it appear at the top, though.

See also:

Why did you change the table of contents?

Why doesn't the table of contents work well on my mobile device or when I resize the browser?

Users on mobile and resized browsers account for a small fraction of page traffic. Because of this, we chose to build the feature for the majority of our users first. For narrow screens we plan to make the table of contents available as a sticky interface element that's accessible from anywhere in the page.

Note what is displayed to mobile devices differs from what you see when you resize your browser. On mobile devices, the site is currently presented as a zoomed out version of the desktop site.

Why doesn't it appear when I complete an edit?

The feature is still in development (T307251). This will be fixed before we make Vector 2022 the default on more wikis.

Is it possible to change the label indicating the top of the page? ("Beginning")

Yes.

This label should be distinct from the content headings. To do that, wikis written in different scripts (for example, Latin and Japanese) and different Wikimedia projects (Wikipedia and Wiktionary) may need to use different words and/or punctuation marks in this label. It is possible for each community to set up a label that would work just for them. This may be done by editing the page MediaWiki:Vector-toc-beginning.

How can I get both the old and the new table of contents?

This isn't possible.

We intentionally do not add the old table of contents in addition to the new sidebar location. It's a trade off. We have taken it to reduce the work involved maintaining the code and keeping the site work as well as possible. The old table of contents displayed in addition to the new one would have important technical disadvantages. It would increase the overall size of HTML, increase the storage requirement for our parser cache, and require additional CSS to render.

See also:

How do magic words work with this feature?

The __TOC__ and __FORCETOC__ magic words will not work as the table of contents is always in the sidebar and this cannot be changed.

However, magic words relating to the presence of the table of contents, such as __NOTOC__, will continue to work. So will templates which then create an alternate ToC. For example, an article can disable the default ToC and apply its own if necessary.

All magic words will continue to work for other skins which render the ToC within the article.

I can't see the table of contents when the sidebar is open

This is a known problem.

This issue should only impact logged in users who have opened the sidebar. In the long term, we plan to reduce the size of this menu, and make the sidebar overlay content. Details and a prototype of how that will look can be found in T302073. This change is planned in the latter part of the year (October-December 2022). Further information can be found on the page about Page tools.

What is the scope of the project?

Are you changing Monobook or Timeless?

No.

These changes are applied to Vector only. Vector has been the default interface on Wikimedia wikis since 2010. Any other skins such as Monobook, Timeless, Minerva or Modern are not be changed at all.

While working on Desktop Improvements, we did clean up the old skins' code, though. We made it easier to roll out new changes to old skins, removed never used options, and removed 75% of the PHP code of these skins. All this had no effect on the side users interact with.

See also:

Are you improving charts, maps, a-/f-/o-/tmboxes, infoboxes, navboxes, and other templates?

No.

We do not change anything within the light gray article content area (except for the table of contents):

Are you building the dark mode?

No, not this time.

The Desktop Improvements project provides the architectural changes needed to build dark mode. Building it would be a separate project, though. This is because that project would require significant work with the communities. Now, many templates are not compatible with dark mode. We have learned that while working on the mobile apps.

Initially, our dark mode would be based on the user's operating system preferences. We would not plan to add an in-browser toggle. The reason is we currently do not have a system in place for anonymous user preferences. This could be added at a later date, though.

What are the features' success metrics?

Increase utility among our existing audiences, proxied by:

  • Interactions
    • Increase searches per session by 5% over the course of the project
    • Increase language switching per project by 5% over the course of the project
  • Affinity
    • Increase in positive and welcoming sentiments towards the site (via surveys and user testing)
    • Increase in sentiments of trust and credibility (measured via surveys and user testing)

As we define the changes we want to make with more specificity, we will expand and iterate on this list.

My project's logo is incorrect. How do I fix this?

Given the sheer amount of Wikimedia projects involved, we've done our best to ensure that your project logo is consistent between the Vector legacy and Vector 2022 skin, however there is a chance we've overlooked something or had to make a hasty decision without consulting your community.

Notably in the case of various Wiktionary, Wikiversity, Wikibooks projects, we show the project default logo, as we couldn't derive a logo for Vector 2022 from the existing Vector legacy logo. Customizations that localize the logo to your languages are however available on request. More context on this can be found at phab:T341243.

Any project can update its logo or request a change to its logo provided it follows the Site request lifecycle. Please do not comment on any existing task relating to logos.

References

  1. ↑ UI Design Newsletter – December, 2005, Human Factors International
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Frequently_asked_questions&oldid=6032156"