Reading/Web/Desktop Improvements

Our desktop interface has been changing over time, yet since the introduction of the Vector skin, most of these changes have been led by volunteers and consolidated into 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 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 Wikipedia 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 or development yet. We need your collaboration and feedback on the general focus areas of the problem, as well as some thoughts on the initial design ideas below.

Please edit and add to the 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. Longer comments and thoughts welcome on the talkpage.

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 pages 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

Wikimania Brainstorming Session
We held a brainstorming session at Wikimania 2019, during which we presented basic ideas of the project, and brainstormed feature ideas and technical considerations.

Technical Research
To explore different technical possibilities for the project, the team spent a week hacking on different approaches to a single problem - allowing the sidebar in the desktop experience to be collapsible. We are hoping to use the learnings from these experiments to determine the 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:


 * Building a collapsible sidebar using a fork of the vector skin
 * 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?"
 * Building a collapsible sidebar using user styles only



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. Idea generation and discovery, figuring out where we can create value (May 2019 – September 2019)
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 constraints. The research and design activities we engaged in in order to explore these questions included:


 * Understanding the history of the desktop interface
 * Reading previous Wikipedia research conducted by the Wikimedia Foundation or other research institutions and individuals
 * Conducting an audit of Vector in order to deepen our understanding of it
 * 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
 * Conducting a brainstorm session at our team offsite to generate ideas

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:


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

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 and sketching ideas (July 2019 – November 2019)
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 a presentation at Wikimania
 * Community feedback via MediaWiki (happening soon)
 * User interviews with newcomers and casual readers (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 2019)
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:


 * Focusing on the content, distinguish content from user-interface
 * Potential features:
 * collapsible sections in sidebar
 * Past examples: Hebrew Wikipedia, ...
 * collapsible sidebar
 * Past examples: Wide Skin (enwiki script), Hide Vector sidebar (enwiki script), ...
 * Easier access to everyday actions
 * Potential features:
 * sticky header with search, table of contents, edit links
 * Past examples: Usability-wiki (historical research), Winter (historical prototype), Timeless (alternative skin), ...
 * more prominent language switching (moving the language switcher to the top of the page)
 * Past examples: Timeless skin at 1325px or wider and at 1085px or thinner, ...
 * Putting things in logical and useful places
 * Potential features:
 * Consolidated user menu (e.g. collapsing things like "Log out", "Preferences", and "Beta", inside a dropdown menu)
 * Preferences for logged out users
 * Past examples: Accessibility settings/preferences (T91201), ...
 * Moving article actions from the sidebar to within the article
 * Past examples: Winter, Timeless at 1085px or thinner, ...

A History of Wiki Skins
A summarized history of previous skins and other larger attempts at improving the desktop experience

New editor experiences (2017) - Reboot+WMF

 * “Finding 5. The complexity and separation of how Wikipedia is made, and the community behind it, make it difficult to convert readers to editors, and new editors to experienced editors. Many new editors were confused about how Wikipedia works, or were not aware that their understanding of the model was incorrect. Some thought that Wikipedia was edited only by experts or a small group, until they noticed the edit function or learned that anyone could edit outside of Wikipedia (e.g., through news articles, friends, or social media). Once they started editing, most new editors did not understand Wikipedia’s policies and the rationale behind them, and were not aware of or had not interacted with other editors.” (p19)
 * “Finding 9. Editing processes and the mechanisms that support them (e.g., communication with other editors, help pages) are not intuitive or discoverable, making it difficult for new editors to learn and progress. Many non-retained new editors struggled to remember the basics of editing (e.g., how to login, their username, where the editing interface is located) making it difficult for them to replicate their edits and become repeat editors. Many new editors, both retained and non-retained, were unaware of or confused about the more advanced editing functions and the processes that support them (e.g., how to talk to or where to receive messages from other users, where to find help or ask questions).” (p25)

Readership survey (2011)

 * Broad survey about reading
 * “b. Search is the most desired improvement to Wikipedia About 32% of our readers said they were extremely/very likely (score of 9+ out of 10) to use Wikipedia more if the search functionality was improved. Better search emerged as the most desired feature, over others like more multimedia content, a better mobile site, a more simplistic design, and so on.” … “Some of the search features desired by these readers were: auto-completion for search terms and better keyword search for both Portuguese and Indic languages, and also transliteration plugins for Indic languages.”
 * This proves that search is relevant. While we don’t plan to focus on functional improvements to search it’s helpful to know that it’s an important feature to folks and therefore increasing prominence seems like a good idea
 * They measured trust and other “quality” metrics
 * “Readers compare Wikipedia favorably with most major websites” “Readers from all 16 countries in our sample compared Wikipedia's interface and ease of navigation to other Internet properties. If we look at the sample as whole, Wikipedia (8.09 on 10) was rated a close second to Google (8.44) on these measures.”

New readership data: Some things we've been learning recently about how Wikipedia is read (2016)

 * Similar conclusions as How the structure of Wikipedia articles influences user navigation (2017) - basically people spend more time in the top of the article
 * Interestingly, the top of the article is where the most surrounding clutter us

Academic Papers
How the structure of Wikipedia articles influences user navigation (2017)


 * This paper is focused on how people find the information they’re looking for within “information networks”, specifically focusing on navigating via links. Their main conclusion is that people mostly click the links in the lead paragraph or infobox of an article:
 * “Our results suggest that article structure has a strong influence on navigation. We find evidence that a large share of user clicks are to links in the lead section or an infobox. For free-form Wikipedia navigation, navigation decisions can be best explained by a bias towards the article structure, favoring links located near the top of the article.”
 * They discuss how people initially scan a page to figure out whether or not the page contains the information they’re looking for:
 * “Web users have been found to quickly decide whether a page is worth their interest. Weinreich et al. (2006) report that users stay on most pages only for a short time span and that 52% of all visits are shorter than 10 seconds. Web users frequently skim a page at first to determine its relevancy (Liu, White, and Dumais, 2010; Liu et al., 2014). This behavior also shows in the analysis of click locations: in a study, 76.5% of clicks were made in the area visible without scrolling and 45% on links located near top left corner (Weinreich et al., 2006).”
 * Based on this, we can draw the conclusion that displaying all of these additional links in the sidebar might not be very effective and in fact might make it more difficult for readers to find what they need

Collapsible sidebar/other sidebar work

 * https://en.wikipedia.org/wiki/User:BrandonXLF/FloatSide: user-script that makes a floating sidebar
 * https://en.wikipedia.org/wiki/User:Blue-Haired_Lawyer/Wide_Skin
 * https://en.wikipedia.org/wiki/User:PleaseStand/Hide_Vector_sidebar
 * Usability initiative research on collapsible languages links
 * Timeless skin sidebar
 * Usability initiative mockups on collapsible sections within the sidebar

Other navigation

 * Compact personal bar
 * Sticky sections gadget on enwiki
 * Sticky header user script
 * An older sticky header user script
 * Another (now broken) sticky header user script