Desktop Improvements:

Introducing anew skin toWikimedia wikis

Hello!

We are Alex, Olga, andSzymon from the Web
Team at the Wikimedia
Foundation.
Weʼre here to talk about
the new desktop
experience.

We have been working on various
improvements to the desktop
interface for the past 3 years.
Our goal is to make our interfaces
more welcoming to readers andeditors, especially for people new toour sites.

Agenda1. The Desktop Improvements project:
the background
2. Quick demo
3. Discussing deployment andconversations with communities
4. Follow-up Q&A - please add yourquestions to our etherpad:
https://etherpad.wikimedia.org/p/wikim
ania2022-desktop

Summary●

The Web team has built a new look for Wikimedia
wikis, focused on making all readers globally feel
welcome. It is currently in use by 32 wikis●

We hope to bring this new design as the default on
all wikis starting September, 2022●

We are discussing the changes across communities
and working to gather consensus for deployment●

We are also working on a blog post series, aseparate website for the change, press releases,
and other media inquiries01A brief historyof our desktopsiteA history of improvement
2002Classic

2004

Monobook
Usability initiative

2010

Beta features,gadgets,
user scripts

Vector(focus on mobile)2014

Timeless

2016

Advanced Mobile
Contributions

Ongoing

20192022

WinterWhatʼs nextfor desktop?

2019

2002 — Classic
2004 — Monobook
2010 — Vector
2014 — Winter2016 — Timeless2022 — Whatʼs next?

A solid starting point, the DNA of which still remains today.
The initial appearance of MediaWiki, before skins were introduced.

2002 — Classic
2004 — Monobook
2010 — Vector
2014 — Winter2016 — Timeless2022 — Whatʼs next?

The ﬁrst MediaWiki skin.
Attempting to ensure that key elements are prominent, showing messages and alerts, andarticle titles are clear.
Also behind the scenes work on templates and HTML/Document Object Model structure.

2002 — Classic
2004 — Monobook
2010 — Vector
2014 — Winter2016 — Timeless2022 — Whatʼs next?

Based on the Usability Initiative.
The goal was to increase the usability for new contributors. Improve visibility of commonnavigation elements. Reduce visibility of less common ones.

2002 — Classic
2004 — Monobook
2010 — Vector
2014 — Winter2016 — Timeless2022 — Whatʼs next?

Tightly couple page actions and views to the page content itself.
Reduce interface clutter to focus on content. Make search available at all times. Synchronize
design direction across devices and platforms.

2002 — Classic
2004 — Monobook
2010 — Vector
2014 — WinterWhat’s next?

2016 — Timeless2022 — Whatʼs next?

How do we continue the trajectory of improvement to meet new challenges and newaudiences?

02

Why do weneed achange?

What new challenges do we face?
Diversity and inclusion
more people are using
Wikimedia projects fromall over the world

Welcoming new editorsMobile + desktop
ﬁrst experience might bemobile, but desktop is still
approximately 49% of the19.9 billion page views
each month on en.wiki
only

New patterns
new web patterns andcapabilities are available tous (e.g. responsive web)welcome editors from all
backgrounds

What are the communities already doing?
The communities are pro-active. Often they will create their own solutions before wehave time to.
What can we learn from gadgets, user scripts, and other customizations?
Collapsible sidebar gadget on Korean WP

Wikipedia.rehash userscript by KrasjetHow can we support both?

+Will we ever be “done”?

The work of maintaining an active space never ends. Any good librarian would keep theirlibrary well-organized as it grows, so must we with our website. On this foundation we cancontinue to grow and introduce new features.

03

What is animprovement?

What are our goals and targets?
Goals:●●

Make Wikimedia wikis more welcoming to new readers and editors
Increase utility amongst readers and maintain utility for existing
editors

Targets:●●

Measured quantitatively:○ Increase trust and positive sentiment towards our sites○ Increase in utility proxied by usage of common actions such as
search and language switching
Additional:○ Monitor core metrics to identify any other signiﬁcant eﬀects
of the changes○ Discussed A/B testing along with fundraising banners

In what ways will things improve?
●
●
●
●
●

Bring the content more into focus
Provide easier access to everyday
actions
Put things in logical and useful places
Increase consistency withmobile web and the apps
Eliminate clutter

What we don’t want to do:●●●Interfere with the content
Remove any functionality
Drastically change the layout

Our process1.

Problem identiﬁcation research
We did research with both readers and editors across multiple countries andlocations.

2.

Beginning

Prototypes and testing
We build out the ideas of a feature and begin showing solutions to our audiences.

3.

Reﬁning and building
We take the feedback and reﬁne or change the prototype

4.

A/B testing and other testing on wiki
On selected wikis, we perform testing for whether the feature works as expected.
We also monitor usage across all wikis, where many account holders are alreadyusing the new skin.

5.

Scaling
We make the change on more wikis, continue monitoring, and ﬂag issues.

FinalizedfeaturePartner communities:-Vector 2022 ON by default
Logged in people can opt-out
Logged-out people cannot
opt-out

All other wikis:-Vector 2022 OFF by default
Logged-in people can opt-in
Logged out people cannot
opt-inWe are ready to scale our work so that all wikis receive Vector 2022 by default

Current Wikis (36)Arabic Wikisource
Basque Wikipedia
Bengali Wikipedia
Catalan Wikipedia
Chinese Wikinews
Collab wiki
French Wikipedia
French Wikiquote

French Wiktionary
German Wikivoyage
Hebrew Wikipedia
Indonesian Wikipedia
Japanese Wikipedia
Korean Wikipedia
MediaWiki.org
Moroccan Arabic
Wikipedia

Oﬃce Wiki
Persian Wikipedia
Polish Wikinews
Polish Wikisource
Portuguese Wikinews
Portuguese Wikipedia
Portuguese Wikiversity
Serbian Wikipedia

Strategy wiki
Thai Wikipedia
Turkish Wikipedia
Venetian Wikipedia
Vietnamese Wikibooks
Vietnamese Wikipedia
Wikimedia Incubator
WMF Governance wiki

Timeline
We hope to begin bringing these changes as thedefault for all readers and editors in early
September 2022.
Over the next months, we will focus on discussing
the changes across communities and gather
consensus for deployment.
We will also be updating our documentation, ﬁxing
bugs, and working on new requests.

04

What did webuild?

DemoTable of contents
Allows people to immediately
understand the shape and context
of the article, and makes
navigation between sections easier.
Our A/B test showed that clicks to
the table of contents increased by
50% with the new version.

Language switching
Allows more people to know that pages areavailable in multiple languages, and makes it
easier to switch languages.
This change was designed for multilingual readers.
When testing with existing editors, we saw they
had diﬃculty in ﬁnding the new button.
We iterated on the feature and made the necessarychanges to ensure that logged-out and logged-in
did not switch languages less than before.
We worked with the Language Engineering teamand the WMF to ensure the new functionality
included and entry point for translations andWikidata entries.

SearchMakes it easier to ﬁnd the correct
result by including context such asimages and descriptions for eachresult.
It is also placed in a more prominent
location, making the searchfunctionality easier to ﬁnd.
When compared to the previous
search in an A/B test, we learned thatthe people started 30% more searchsessions with the new search.

Sticky header

Makes it easier to access
important tools without having
to scroll back up to the top of thepage.

Our testing showed that
introducing the new sticky
header decreases scrolling to thetop of the page by 16%.

Line length & font size
The changes allow people toread more comfortably.
Research has shown that limiting
the width of longform text leads
to a more comfortable reading
experience, and better retentionof the content itself.
Increasing the default font-size
makes reading long paragraphsof text more comfortable,
especially for those with vision
impairments.

05

Tradeoffs &challenges

Reading experience vs. density
On a high level, the main tradeoﬀ we have made with Vector 2022 is:
An improved reading experienceand a more focused interface(links in menus, and select few
actions emphasized directly)vs.

A more dense interface(more links immediatelyaccessible on the screen)

The majority of feedback has been positive, and we are conﬁdent
that this is a worthwhile tradeoﬀ. However,
we have heard from some editors that they really like density,and we want to support them.

Conﬁguring the default: User scripts & gadgets that modify Vector 2022
Gadgets that
customize theVector (2022)
experienceFuture conﬁgurations: Experimenting with modular menus
Once the new skin isavailable by default, wewould like to continue
improving it over time,with a particular focus on
making our menus more
conﬁgurable.
Example:We have met with theRussian-speaking editors.
One of the concerns theyraised was immediate
access to multiple
language links for the mostactive editors.

[GIF of pinable language menu]Switching to other skins
These solutions wonʼt be satisfactory for some editors,
and they will switch to other skins.
We will continue maintenance to all available skins,
including Legacy Vector and Monobook. We have madethe maintenance process easier throughout thedevelopment of the new skin, as one of our maintechnical goals.
No changes to these skins are considered as a part of thisproject.

06

Deploying incollaboration
with ourcommunities

More discussions
●
●
●
●
●

Taking the conversations outside ofVillage Pumps, Cafes, etc.
Asking diﬀerent communities, using
CentralNotice banners
Involving aﬃliates, having oﬃce hours,
joining community events
Working with ambassadors, translators,
and interpreters
Sending a newsletterOpt-in and communication plans●●

We will launch banners encouraging people to opt into theinterface
These banners will also contain a survey on the experience ofusers with the new site, as well as on whether this improves
opinions towards our wikis

Webpage[[mw:Vector 2022]]
ovasileva@wikimedia.org
sgrabarczuk@wikimedia.org
ahollender@wikimedia.org

07

Q&A
etherpad.wikimedia.org/p/
wikimania2022-desktop
💻wikimedia.zoom.us/j/82355818818☎wikimedia.zoom.us/u/kf YDv7nuo