Reading/Web/Desktop Improvements



Our desktop interface has been changing over time, yet since the introduction of the url>Special:MyLanguage/mw:Skin:Vector|Vector skin (the default site design), most of these changes have been led by volunteers and are only available in prototypes, user scripts, gadgets, and volunteer-led skins. We think it's time to take some of these ideas and bring them to the default experience. Over the next couple of years, the team>Reading/Web/Team|readers web team will be researching and building out improvements to the desktop experience based on research and existing tools. Our goals are to make Wikimedia wikis more welcoming to new readers and editors, and easier and quicker to use for all (both newcomers and veteran editors).

This project is in the very early stages of discussions. There is no concrete plan. We need your collaboration and feedback on the general focus areas of the problem, and your thoughts on the initial design ideas below.

How you can help
Feedback: Please look through these details and subpages, and share your feedback on the talkpage about the ideas and mockups we have collected so far - How could they be further improved? What important considerations are not currently documented?

Research and ideas: Please edit the "phase1ideas>#phase1ideas|Phase 1: Design ideas" sections below, to add new ideas, notes, links to past discussions, links to existing gadgets/scripts, links to good external design-patterns to consider, etc.

Individual testing: Once development begins, we will make the ongoing work available directly via a new skin option in Preferences. You will be able to individually opt-in and test the changes.

Whole wikis: We are also looking for any wikis that are interested in helping with widespread testing, such as changing the local default for logged-out site users. If you think your community might be interested, please ask us if you have any questions, then start a local discussion, and once there is local consensus add a link to that discussion on the talk page.

Longer comments and thoughts are welcome on the talkpage, in any language.

Updates
Subscribe to newsletter>Newsletter:Desktop Improvements updates|Newsletter:Desktop Improvements updates to be notified when new sub-sections are added here. Major milestone announcements will go to all wikis via MassMessage.

May 2020: First deployment - officewiki and testwiki
This Monday we deployed the first visual change of the improved version of the desktop skin on our first production wikis - Officewiki (used internally by the WMF) and Testwiki (for general testing purposes). On these wikis, you will notice a reconfiguration of the project logo which is the first portion of our improved header. You can also turn the updated skin version on and off from the sidebar and your user preferences. In the next couple of weeks, we will also be deploying a collapsible sidebar for these wikis, followed by a deployment of these changes to our full set of test wikis.

We have also introduced a query string parameter using which you can see the state of the Vector skin on any wiki by adding the parameter ?useskinversion=2 to the url. Example: https://en.wikipedia.org/wiki/Moon?useskinversion=2

March 2020: User Research with Readers - phase 1 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Hureo User Research Report|report
Starting in January 2020 we have been working with Hureo, a user research firm based in India, to perform a user study on how new and casual readers use the desktop interface of Wikipedia. The study was separated in two phases, with the first phase focusing on primarily English readers, and the second phase on bilingual and non-English readers. The goal of the study was to understand the experience of new and casual readers, both in terms of how they feel about the site and how they use the site, focusing in particular on the concepts of trust and welcomeness, as well as on the usability of commonly used features on the site. In addition, we were also interested in uncovering potential areas of improvement in terms of overall and feature-specific usability. The outcome of the first phase of the study is a report detailing their observations from 24 user interviews, which is available below. We will be using these results to inform future feature development for desktop improvements project.

March 2020: Full 1>Special:MyLanguage/Reading/Web/Desktop Improvements/First Prototype Feedback Report|results from prototype feedback
In December, 2019 we published a prototype of the first few features of the desktop improvements project for community feedback. The prototype presented a collapsible version of the sidebar, a fixed-width layout, and a more prominent location for the language switcher. We received detailed, thoughtful feedback from over 200 logged-in users, across five languages. The feedback was mostly positive, with the majority of users seeing the proposed changes as an improvement over the current design. However there were also some areas of concern. Many of the issues raised were due to bugs in the prototype (particularly with the language switching menu), while others exposed areas for improvement that we will iterate on and/or keep an eye on during development. We have published a report which highlights the main points raised, both positive and negative, and our plans going forward in response to this feedback.

February 2020: Update on initial features and overall feature sequence

 * We have began building the opting-in and opting-out structure for the project. The setting for turning the improvements on will be within the user preferences list for logged-in users.  For test wikis, the improvements will be on by default, but logged-in users will be able to turn them off anytime via their preferences or a button in the sidebar.  Please see the 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Opting in and Release Plan|Opting in and Release Plan page for more details and mockups.


 * We have also published the 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Feature sequence|current list of features considered for the project as well as the sequence we plan on building them in. As we will be testing each individual feature prior to building, this list is subject to change based on the feedback we receive.

February 2020: Feedback Round 1 Summary
We have finished our first round of feedback for the prototype of the first few features of the desktop improvements project: the new header, collapsible sidebar, and improved language switching. So far, the results have been mostly positive, with the majority of users seeing the changes as a significant improvement over the current design. However, we also found a few areas for improvement that we will iterate on and consider during development. Here are a few highlights of the results so far:


 * A majority of the editors who tested the prototype really liked the new location of the language switcher.
 * A few editors raised concerns around internationalization and the ability to switch languages using one click.
 * A majority of the editors liked the collapsibility of the sidebar, especially for readers
 * There were some concerns around the amount of white space introduced with a collapsible sidebar and fixed-width layout
 * We saw many requests for a dark/night mode for the site

We are currently running the second feedback round on English and Polish Wikipedias. If you haven’t had a chance yet, please let us know your thoughts on the prototype page. Once both feedback rounds are completed, we will be publishing a more in-depth report.

January 2020: Language Switching Users Tests
In December we did some usability testing to compare the current placement of the Universal Language Selector (in the sidebar) with the proposed location in the article header. We lsut>Special:MyLanguage/Reading/Web/Desktop Improvements/Language Switching User Tests|tested a prototype with 21 users in order to determine if people have an easier time switching languages given the new location of the language switcher. The results of the test confirmed our hypothesis — participants in the test group (new location) were able to switch languages more quickly than participants in the control group (old location). Based on these results we plan on continuing to explore moving the language selector to this location as a part of the desktop improvements project.

December 2019: Prototype testing
Between December 2019 and February 2020, we will be performing tests on a prototype for the first few features of the desktop improvements project. We will be gathering feedback from a variety of test wikis by encouraging editors to participate using a central notice banner. We ran the banners and received feedback from the majority of our test wikis during December 2019. In February 2020, we will continue running the banners on English and Polish Wikipedias. So far, the feedback we have received is mostly positive but we have also identified some areas of our prototype that we will iterate on based on the feedback. We will be publishing the results of the first round of feedback over the next few weeks, and of the second, sometime in February. In the meantime, we encourage you to give us feedback (if you haven't yet) on the proto>Special:MyLanguage/Reading/Web/Desktop_Improvements/Prototype_testing|prototype page.

October 2019: Technical Research pt 2
We have published the results of our technical research in preparation for beginning the work on the project. In particular, we have focused on gathering more information on the following:
 * abtest>Reading/Web/Desktop_Improvements/AB_testing_and_Opt_Out_possibilities|The possibility of serving a different version of the site to logged-out users (for opt-in/opt-out and A/B testing purposes)
 * search>User:JDrewniak_(WMF)/notes/Seach_widgets_at_Wikimedia|Search and the differences between the current search widgets
 * langsw>Reading/Web/Desktop Improvements/Language Switching Research|Language switching and possibilities on improving the language switcher
 * techrfc>phab:T234907|T234907 - A technical RfC on what code-base to start with
 * Changes to EventLogging and how they will impact our work

We outreach>Special:MyLanguage/Reading/Web/Desktop Improvements/Outreach|reached out to all wikis with a MassMessage, and asked for communities to test>Special:MyLanguage/Reading/Web/Desktop Improvements/Opting in and Release Plan|volunteer to be test wikis for this project.

September 2019: Wikimania research report


During Wikimania 2019, we interviewed editors with the goal of sharing the plans for our upcoming Desktop improvements project, and collecting valuable feedback on a number of preliminary design ideas. Our research consisted of user interviews, a free-form feedback exercise, and a presentation with breakout groups for more focused discussion. We have published report>Special:MyLanguage/Reading/Web/Desktop Improvements/Wikimania Stockholm research report</>|a report and (in English) of the feedback we received. Overall, we received positive feedback on the focus areas selected, as well as the individual prototypes for ideas. However, we were also able to identify areas for improvements.

We will be iterating over this feedback over the next few weeks and plan on developing a prototype that we can test with a wider audience across wikis.

In the slideshow below is a sample of 19 of the ideas we tested. For more context, please read the full report>Special:MyLanguage/Reading/Web/Desktop Improvements/Wikimania Stockholm research report</>|report and then give us feedback on the talk page!

September 2019: Desktop usage and behavior data analysis
As a part of our research process, we wanted to learn more about the way people currently use the site. In particular, how often they use available functionality such as links in the sidebar, language switching, and search. We have published our phab>phab:T229926#5491420</>|results. Overall, usage of sidebar links is low - only about 0.5% of all logged out users and 1.6% of all logged-in desktop users clicked on one of the pages linked in the sidebar. Language switching usage varied, generally based on the size of the wiki, with smaller wikis switching languages more often.

August 2019: Research and brainstorming at Wikimania


Wikimania provided us with the opportunity to speak with experienced members of our communities. Over the five days of the conference we were able to share the plans for the project, and collect valuable feedback on a number of design ideas. Our research consisted of user interviews, a free-form feedback exercise, and a presentation + brainstorming session (you can see the slide-deck we used at the side). We will soon be publishing the summary of the feedback, as well as interview session results.

August 2019: Technical Research
To explore different technical possibilities for the project, the team spent a week hacking on different approaches to a single problem - how to enable the sidebar in the desktop experience to be collapsible. We are hoping to use the results from these experiments to determine the technical architecture for the improvements, as well as the skin we would like to build these improvements within. Here is a list of the experiments themselves:


 * nickhack>Reading/Web/Desktop Improvements/Nicks Hack Results</>|Building a collapsible sidebar using a fork of the vector skin
 * jonhack>Reading/Web/Desktop Improvements/Jon Robson's Hack Results</>|Building the desktop sidebar within the Minerva skin. An exploration in the question: "is there a world where we have the same skin for desktop and mobile?"
 * janhack>User:JDrewniak (WMF)/notes/Desktop refresh hackweek findings</>|Building a collapsible sidebar using user styles only

Problem statements

 * 1) Wikimedia wikis do not feel welcoming
 * Wikimedia wikis’s desktop sites are not a welcoming or familiar experience for new readers. It does not match the expectations created by the modern web and our other platforms (the Android and iOS apps as well as the mobile website).  It feels disorienting and disconnected due to the haphazardly organized navigation and interface links. In turn, this causes readers and editors to have less trust in Wikimedia wikis, to be less likely to explore Wikimedia wikis, and eventually, to use our sites less than they otherwise would (i.e. a decrease in retention).
 * 1) Wikimedia wikis are not easy to use
 * Readers (new readers especially) are unable to intuitively perform basic functions like switching languages, searching for content, or adjusting reading settings. Additionally there is a lot of clutter that distracts from the content they are interested in. New editors are faced with a similar barrier; an interface that is not welcoming or intuitive and is cluttered.  It is difficult for them to perform basic tasks necessary for contribution, such as setting up an account, opening the editor, or learning how to use special pages for moderation purposes (e.g. history pages to find&revert vandalism). All users can have problems with the sites not being properly "responsive", which leads to issues like really wide content or really narrow content (depending on screen and window sizes). By keeping the status quo, we are preventing people who are eager to contribute from being able to do so (i.e. experience bias).
 * 1) Wikimedia wikis’s model is not easy to understand
 * Currently, a very small percentage of readers understand how Wikimedia wikis function. Our interfaces do not highlight the inner workings of the site in an intuitive way. Many readers are not aware that the content they are reading is written by volunteers and updated frequently, or that they can potentially contribute as well.

In addition, the large difference in experiences among our various products (desktop, apps, and the mobile web), makes it difficult for readers to know the connections between our products and to associate them with the content itself. This creates a lack of unity in the concept of Wikimedia sites.

Summary by audience:

Goals
Here are the outcomes we're working towards:


 * Make it easier for readers to focus on the content
 * Provide easier access to everyday actions (e.g. search, language switching, editing)
 * Put things in logical and useful places
 * Increase consistency in the interface with other platforms - mobile web and the apps
 * Eliminate clutter
 * Plan for future growth

Constraints
Here is a list of things we would explicitly like to keep in mind:


 * Not touching the content - no work will be done in terms of styling templates or to the structure of page contents themselves
 * Not removing any functionality - things might move around, but all navigational items and other functionality currently available by default will remain
 * No drastic changes to the layout - we're taking an evolutionary approach to the changes and want the site to continue feeling familiar to readers and editors

Timeline
Here is the roughly planned timeline, which will change based on progress:


 * Phase 1: May – September 2019: Investigation and research, figuring out where we can create value, finding focus
 * Phase 2: July – November 2019: Developing focus areas, sketching and prototyping ideas, starting conversations
 * Phase 3: October 2019 – January 2020: Continued user testing and design refinements


 * Phase 4: January 2020 - May 2020: Prototype feedback and iteration. Building out first features - new header and collapsible sidebar


 * Phase 5: May 2020 - July 2020: Prototype, user test, and ship at least 4 features to test wikis


 * Phase 6+: July 2020 - TBD: Continuing with feature sequence

Metrics
Below is a draft of the core metrics we want to measure through the course of the project. As we define the changes we want to make with more specificity, we will expand and iterate on this list.

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)

Feature Sequence
This is a summarized overview of the features we are considering adding or iterating on throughout the course of the project. A more detailed list is available on a separate page - we encourage looking through that page for more information. As we go through with design, requirements gathering, and user testing for each feature, we will also publish a separate page per feature with more detail. These will be linked from the title of the feature.


 * 1) New Header
 * 2) Collapsible Sidebar
 * 3) Moving language links to the article title bar
 * 4) Sticky site and article headers
 * 5) User Menu
 * 6) Improved search
 * 7) Improved language switching
 * 8) Table of contents
 * 9) Article tools
 * 10) General aesthetic refinements

Research and design process
General note: our process is not particularly strict. It is based loosely on research and design process best practices, however it is also relatively emergent and flexible, in that we are engaging in ad hoc activities and explorations as they feel appropriate. While we've outlined the research and design process in three phases below, in practice the phases overlap. Additionally, for the time being there doesn't seem to be a clear way of separating research activities from design activities (they are interrelated) so we're discussing them together.

Phase 1. Investigation and research, figuring out where we can create value, finding focus (May 2019 – September 2019)

 * Main page: phase1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1</>|/Research and design: Phase 1

We began by considering the current default experience on desktop (Vector) and asking ourselves: in what ways can we improve upon this? Where are opportunities to modify the interface in order to create a better experience for all readers and editors? How can we make it easier for people to do the things they want to do? How can we create a more pleasing reading environment? Of course while exploring these questions we kept in mind the project's constraits-section>#Constraints</>|constraints. The research and design activities we engaged in in order to explore these questions included:


 * 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1#History of the desktop interface</>|Understanding the history of the desktop interface


 * 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1#Previous research</>|Reading previous Wikipedia research conducted by the Wikimedia Foundation or other research institutions and individuals


 * 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1#Discussions at team offsite</>|Discussions at our team offsite to develop a shared understanding of the project and generate ideas


 * 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1#Winter, Timeless, and other Wikipedia redesigns</>|Winter, Timeless, and other Wikipedia redesigns


 * 1>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 1#Redesigns of other large websites</>|Reading about redesigns/updates of other large websites (Reddit, Twitter, etc.)


 * Conducting an audit of other large websites to try and glean common structural elements

The output from phase 1 was: a better understanding of the desktop interface, and proposed focus areas for improvements. We didn't have strict criteria for what a focus area could be. Generally speaking it was an idea of an improvement we could make, though at varying levels of specificity, such as: a less cluttered reading experience, or language switching ease. The proposed focus areas are:


 * Creating a more focused and "quiet" reading environment by consolidating or optionally collapsing navigational links, including:
 * Main sidebar navigation
 * Article tools
 * User tools
 * Language switching
 * Search
 * Article navigation / table of contents

Additional, more feature-specific, ideas that came up: reading preferences (e.g. dark mode), share button, larger edit button / add new article button (for smaller wikis) / making it more obvious how to "get involved", article stats / activity summary.

Phase 2. Developing focus areas, sketching and prototyping ideas, starting conversations (July 2019 – November 2019)

 * Main page: phase2>Special:MyLanguage/Reading/Web/Desktop Improvements/Research and design: Phase 2</>|/Research and design: Phase 2

The research activities and conversations in phase 1 helped us develop a better understanding of the landscape we were working within (i.e. the desktop interface). It also helped us develop potential focus areas to further investigate (while still remaining open to new ideas). Our next goal was to dig a bit deeper into the focus areas through sketching, prototype, and most importantly conversations with the community. The research and design activities included:


 * Understanding past work, research, and experiments in respective focus areas
 * Obtaining general usage data about the respective focus areas
 * Sketching out and prototyping early ideas to help facilitate conversations
 * Forming early hypotheses
 * User interviews and other feedback at Wikimania
 * Community feedback via MediaWiki (happening soon)
 * User interviews with newcomers and casual readers (happening soon)
 * User testing on usertesting.com (happening soon)

The output from phase 2 will include: reactions to sketches of specific interface improvements within the focus areas, a refined (i.e. more opinionated and informed) sense of which improvements are worth pursuing, a proposal for the sequence in which we could implement proposed improvements.

Phase 3. Continued user testing and design refinements (October 2019 – January 2020)
Phase 3 will be a cycle of: further testing the specific ideas that came out of phase 2, then refining our designs in response to what we learn. There are potentially some things that need to be tested as betas on actual wikis. We will be working to identify these things and figure out how we plan to test them in beta (i.e. what data we would be tracking, and what decisions we'd be making based on what behavior we see).

The output of phase 3 will include: nearly finalized designs (though we usually leave room for additional iterations during implementation) and a plan for what we want to learn as we roll things out in beta, and what decisions/changes we would make based on that information.

Phase 1: Design ideas
A few of the many ideas that have been suggested are below. Please add any prominent ideas and links you know of:


 * NOTE for editors: Please phase1ideasedit>Reading/Web/Desktop Improvements#phase1ideas</>|edit the English version to add ideas and links, or comment on the talkpage. Don't worry about the "tvar" markup if you don't know it. We will add it in afterwards.

Focusing on the content, distinguish content from user-interface

 * Collapsible sections in sidebar
 * Examples: hewiki>w:he:</>|Hebrew Wikipedia, ...
 * Research: usabilitycoll>usability:Opinion Language Links</>|Usability initiative research on collapsible languages links, usabilitycitron>usability:Citron Designs#Left%20Navigation</>|Usability initiative mockups on collapsible sections within the sidebar
 * Collapsible sidebar
 * Examples: scriptblue>w:en:User:Blue-Haired Lawyer/Wide Skin</>|Wide Skin (enwiki script), scriptplease>w:en:User:PleaseStand/Hide Vector sidebar</>|Hide Vector sidebar (enwiki script), timeless>Special:MyLanguage/Skin:Timeless</>|Timeless skin sidebar (responsive-layout), [<tvar|ww>https://www.wikiwand.com/en/Wikipedia:Unsolicited_redesigns#/Live_sites</> WikiWand], mv>MediaWiki:Gadget-mobileVector.js</>|mobileVector (mediawikiwiki gadget), ko>w:ko:MediaWiki:Gadget-CollapsibleSidebar.js</>|CollapsibleSidebar (kowiki default gadget), ...
 * Floating sidebar
 * Examples: scriptbrandon>w:en:User:BrandonXLF/FloatSide</>|FloatSide (enwiki script), ...


 * Tabs in sidebar to organise all the tools and navigation: 1) TOC, 2) Site navigation, 3) Tools (for editing, page info, gadgets), 4) Bookmarks (feature request)


 * The tab icons serve also to collapse/reveal the sidebar.


 * TOC in sidebar: fixed to the screen, separately scrolled.
 * Example: [<tvar|ww3>https://www.wikiwand.com/en/Wikipedia</> WikiWand]
 * Pin-able infobox: show a pin icon in top-right corner of the infobox. When pushed, pin the infobox on the right side of the screen in a column that stays on-screen and scrolls on its own, similar to the sidebar on the left.
 * Collapsible article sections: see at the bottom of the [<tvar|ww2>https://www.wikiwand.com/en/Wikipedia#/See_also</> WikiWand] page + add a short scrolling effect.


 * Responsive width
 * resp>w:en:User:TheDJ/responsiveContent</>|Responsive content (enwiki/mw gadget), 3col>:File:Wikipedia three column CSS Barack Obama.png</>|3 column CSS (personal css),

Easier access to everyday actions

 * Sticky header with search, table of contents, edit links
 * Examples: scriptbrandon2>w:en:User:BrandonXLF/FloatHead</>|FloatHead (enwiki script), scriptrez>w:en:User:Rezonansowy/scripts/FloatHead</>|FloatHead (another enwiki script), scriptequa>w:en:User:Equazcion/Floater</>|Floater (enwiki script), winter>toolforge:winter/</>|Winter (historical prototype), [<tvar|timeless2>https://meta.wikimedia.org/wiki/Main_Page?useskin=timeless</> Timeless] (alternative skin), ...
 * Research: usabilitysearch>usability:Usability,_Experience,_and_Progress_Study#No_Searching_for_Search</>|Usability-wiki
 * More prominent language switching (moving the language switcher to the top of the page)
 * Examples: Timeless skin at 1325px or wider and at 1085px or thinner, ...
 * Sticky table-headers
 * Examples: gadgetstickytable>w:en:MediaWiki:Gadget-StickyTableHeaders.js</>|Gadget-StickyTableHeaders (enwiki gadget)
 *  Jump to the top of the page 


 * Examples: 1>w:en:User:BrandonXLF/ToTopButton</>|ToTopButton (enwiki script)
 * Paragraph (¶) symbols on headings: visible only when hovering, next to the edit icon, to easily copy links to sections.

Putting things in logical and useful places

 * Consolidated user menu (e.g. collapsing things like "Log out", "Preferences", and "Beta", inside a dropdown menu)
 * Examples: Skin:Timeless, cpb>Compact Personal Bar</>|Compact personal bar
 * Preferences for logged out users
 * Examples: phabaccess>phab:T91201</>|Accessibility settings/preferences (T91201), ...
 * Moving article actions from the sidebar to within the article
 * Examples: winter>toolforge:winter/</>|Winter, Timeless skin at 1085px or thinner, ...
 * Easily navigate through articles - load page content using JS in background without loading the whole page
 * Examples: revslide>Special:MyLanguage/Extension:RevisionSlider</>|RevisionSlider, an extension to easily navigate through diffs, and Weekipedia.