Reading/Web/Desktop Improvements - MediaWiki

Reading/Web/Desktop Improvements - MediaWiki
Jump to content
From mediawiki.org
Reading
Web
Translate this page
Languages:
Bahasa Indonesia
Nederlands
Tiếng Việt
Türkçe
Yorùbá
català
euskara
italiano
kabuverdianu
kurdî
magyar
polski
português
português do Brasil
română
suomi
svenska
tarandíne
vèneto
čeština
Ελληνικά
русский
українська
עברית
اردو
العربية
فارسی
हिन्दी
বাংলা
ไทย
中文
ꯃꯤꯇꯩ ꯂꯣꯟ
한국어
Overview
Features
Repository
FAQ
Wikimedia Foundation projects
Desktop Improvements
A series of new features and rearrangements to the Vector skin
Start:
2019-05
End:
2023-06
Team members:
Web
Backlog:
Phabricator workboard
Lead:
Olga Vasileva
(Product Owner)
Updates:
Updates sub-page
Advanced mobile contributions
Preference Persistence For Anonymous Users
The previous default Wikimedia skin (
Vector
) came out in the year 2010.
Over the following decade, the interface was enriched with
extensions
gadgets
and
user scripts
Most of these were not coordinated visually or between wikis.
At the same time,
web design, as well as the expectations of readers and editors, evolved
Finally, we decided to take some of these ideas and bring them to the default experience of all users, on all wikis, in an organized, consistent way.
Between 2019 and 2023, we were building a new skin.
We wanted to make Wikimedia wikis more welcoming, and to increase the utility amongst readers and maintain utility for existing editors. We were measuring the increase of trust and positive sentiment towards our sites, and the utility of our sites (the usage of common actions such as search and language switching).
In 2022, the new skin became ready to be the default.
Since then, we are introducing it on more and more wikis.
Ultimately, we need to have one skin as the default everywhere.
This is because keeping two as the default indefinitely is impossible.
Updates
edit
Main page:
Reading/Web/Desktop Improvements/Updates
What was our objective?
edit
Imagine a bookshelf
edit
We have gradually rearranged this…
…into this :)
Before, the interface…
edit
…didn't match the expectations. …was cluttered and not intuitive. …didn't highlight the community side. …wasn't consistent with the mobile version.
An annotated version of the Wikipedia Vector interface as a logged-out user
The desktop interface did not match the expectations created by the modern web platforms. It felt disorienting and disconnected. Navigation and interface links were organized haphazardly.
Readers were unable to understand the purpose, terminology, and concepts of available tools such as the main menu, user menu, and page tools.
Editors found the hierarchy of the navigation to be confusing for newcomers.
Editors and other contributors wanted easier access to tools they used frequently.
Editors expressed interest in having fewer, but more prominent, ways to begin contributing.
There was clutter that distracted users from focusing on what they came for. It was challenging for readers to focus on the content. New editors were unable to use their intuition to perform simple tasks not related to reading.
Too much information density and navigational elements on the page made it difficult to focus on a particular reading or editing task.
Readers found it difficult to navigate the page and spent a lot of time scrolling.
Readers found it difficult to search for information that is relevant to them.
Multilingual readers were not aware of language switching functionality.
Readers wanted to have an easy way to view the table of contents throughout the page.
Character count per line was more than three times the recommended value.
A very small percentage of readers understood how Wikimedia wikis functioned. Many readers were not aware that the content they were reading was written by volunteers and updated frequently, or that they could potentially contribute as well.
The large difference in experiences among our desktop interface, apps, and the mobile web, made it difficult for readers to connect our products. There was a lack of unity in the concept of Wikimedia sites.
How we were making the changes
edit
Principles
edit
We were not touching the content. We did not change skins other than Vector. We did not remove any functionality. We did not make major changes in single steps.
We work on the interface only. No work was done in terms of styling templates, the structure of page contents, map support, or cross-wiki templates.
Skins other than Vector were out of the scope of our project. We have frozen Vector to Legacy Vector, and begun deploying our features as parts of the new default Vector.
We were moving around the elements of the interface, but all navigational items and other functionality available previously by default remained.
We took an evolutionary approach. We wanted the pilot wikis to continue feeling familiar to readers and editors. Each feature was discussed, developed, and deployed separately.
Process for developing the features
edit
2019: Problem identification research with both readers and editors
– We studied the way people used the site. We identified the largest usability issues as well as obstacles in becoming more engaged with reading or editing. We did this by interviewing readers and editors across multiple countries and locations. We also surveyed gadgets and user scripts. Some of them deserved to be surfaced and be a part of default experience. (See the links:
Research and design: Phase 1
Research and design: Phase 2
.)
2019–2022: Prototype development and testing
– We built out the ideas for features and began showing prototypes. Each feature was tested with readers and editors through interviews and on-wiki prototype testing. We used Central Notice banners across multiple languages and Wikimedia projects. Each prototype was tested by approximately 200 editors on average. (
Example
2020–2023: Refining and building
– We refined or changed the features based on the outcomes of the prototype testing. In some cases, we asked for additional opinions to ensure we were making the right decisions.
2020–2023:
A/B testing
and other quantitative testing on wikis
– This was the "beta" phase:
We performed tests for whether the features worked as expected based on the previously defined criteria of success. We made "before and after" comparisons or performed A/B tests. As the latter, we gave a new feature to 50% of users and compared them to the other 50%. After two weeks we compared the results.
If we received negative results, we identified the reasons across different audiences and made changes to the feature. Then, we would test the feature again. In the case of significantly negative results, we rolled back our changes. (
Example
We tested these changes in collaboration with a diverse set of volunteering
early adopter
(pilot) wikis
, both Wikipedias and sister projects.
We also monitor usage across all wikis, where many account holders have been already using the new skin.
2022 – onwards: Deployments on more and more wikis
– The results of testing and subsequent analysis concluded that our changes result in improved usage of the skin, and save time previously spent in scrolling, searching, and navigating. We interpret this as an easier and more comfortable reading experience. There are no negative effects to pageviews, account creation, or edit rates. Knowing this, we continue to roll out the skin on more and more wikis.
What features were added
edit
Main page:
Reading/Web/Desktop Improvements/Features
Deployment plan and timeline
edit
Year
Month
Deployments
2019
May
First team discussions
2020
July-August
The
new logo
collapsible sidebar
, and
limited content width
are introduced
on the first
pilot wikis
, including French Wikipedia
September
The new
search widget
is introduced
2021
March
Deployments
on more pilot wikis, including Korean, Portuguese, Serbian, and Turkish Wikipedias
June
The new
language switching
is introduced
2022
January
The new
sticky header
is introduced
Deployments on more pilot wikis, including Indonesian, Thai, and Vietnamese Wikipedias
February
The changes are separated out from the Vector legacy code to a new skin "Vector 2022"
May
The new
table of contents
is introduced
June
The skin is introduced on the last pilot wikis, including on Catalan Wikipedia and
on Japanese Wikipedia
The first
visual refinements
are introduced
August
The new
user menu
is introduced
October
Deployments
on the smallest Wikipedias
November
The new full/limited-width toggle button is introduced
December
Deployments
on Arabic and Greek Wikipedias
2023
January
Deployment
on English Wikipedia
February
The full/limited width preference becomes persistent for logged-out users
March
The new
page tools
menu is introduced
April
Deployment
on Polish Wikipedia
May
Deployment
on Spanish Wikipedia
August
Deployments
on Chinese (zh) and several smaller Wikipedias
October
Deployments
on Swedish, Hungarian, Dutch, Hindi, and Norwegian bokmål Wikipedias
Deployments
on Meta-Wiki and most Wikibooks, Wikinews, Wikiquotes and Wikiversity wikis
November
Deployments
on most Wikivoyages and Wiktionaries
The last visual refinements (known as Zebra 9) are introduced
2024
March
Deployments
on most Wikisources, some small Wikipedias, and some internal wikis
October
Deployments on most affiliate, committee, functionary, and ArbCom wikis, and some English sister projects
November
Deployment
on Italian Wikipedia
Deployments
on Kazakh and Telugu Wikipedias, English Wiktionary and Wikivoyage, and some smaller wikis
December
Deployments
on Ukrainian Wikipedia, English Wikisource, and two smaller wikis
2025
January
Deployment
on Azerbaijani Wikipedia
February
Deployments
on Commons and Finnish Wikipedia, and four smaller wikis
April
Deployment
on German Wikipedia
Contact
edit
Subscribe to the newsletter
Opt-in individually
: in Preferences, check the option
Vector (2022)
. You can also enable our changes using the
Global preferences
Promote
: Inform your community. Share our
updates
and
blog posts
Report bugs
: to report a bug, create a task in Phabricator and add
#Desktop Improvements Vector 2022
project.
Translate
: help us translate related pages:
Priority translations
TOP3
Reading/Web/Desktop Improvements
Reading/Web/Desktop Improvements/Frequently asked questions
Reading/Web/Desktop Improvements/Features
Other priority translations
Template:Reading/Web/Desktop Improvements/Talk page intro
Template:Reading/Web/Desktop Improvements/Features/Navigation
Template:Reading/Web/Desktop Improvements/Header
Reading/Web/Desktop Improvements/Updates
Reading/Web/Desktop Improvements/Repository
Template:Reading/Web/Desktop Improvements/Office hours announcement
Direct link to all translations
Retrieved from "
Category
Desktop Improvements
Hidden categories:
WMF Projects 2019q2
WMF Projects 2019q3
WMF Projects 2019q4
WMF Projects 2020q1
WMF Projects 2020q2
WMF Projects 2020q3
WMF Projects 2020q4
WMF Projects 2021q1
WMF Projects 2021q2
WMF Projects 2021q3
WMF Projects 2021q4
WMF Projects 2022q1
WMF Projects 2022q2
WMF Projects 2022q3
WMF Projects 2022q4
WMF Projects 2023q1
WMF Projects 2023q2
Reading/Web/Desktop Improvements
Add topic