Reading/Web/Desktop Improvements/Features/Page tools

From mediawiki.org

One of the main goals of the desktop improvements project is to make it easier for users to intuitively use all the links and tools within our interfaces.

Currently, our interface does not distinguish between the links and tools that are relevant to the website and the links and tools that are relevant to the page itself. Main page, random article, recent changes, are in the first group. What links here, related changes, cite this page, belong to the second one. This mix is confusing to new readers. Also new editors are not familiar with what each link does. Mixing these groups makes it significantly less likely for people to explore these tools naturally.  

Background and Goals[edit]

We would like to revisit the way we display our page tools in order to:

  • Make it easier to distinguish which tools are for the individual page and which are for the entire website
  • Make it easier to understand what the purpose of each link intuitively, without having to interact with it
  • Continue providing persistent access to these tools

Our previous testing with the table of contents highlighted the importance of our tools and the significance of persistent menus. When designing this feature, we were focused on ensuring access was easy for those who needed it. It was also important not to make it preventing or intruding upon the reading experience.

Use Cases[edit]

  • As a reader or editor, I want to quickly distinguish between page tools and global tools so that I can better understand the structure of the page
  • As a reader or editor, I want quick access to page tools and global tools so that I don’t spent a lot of time finding the tool I need
  • As a reader or editor, I want the ability to select which tools I want to see all the time, so that my experience is catered to my needs

Feature description and requirements[edit]

  1. A new menu is created that contains the only the page tools
  2. The new menu is located in a place more intuitive for the page tools, making a visual link between the location of the links and their purpose
  3. People have the option of making the global tools or page tools persistent to fit their reading or editing needs
  4. The global tools and page tool menus are available persistently by default for logged-in users
  5. The global tools and page tools are not available persistently by default for anonymous users

Research & Design[edit]

One of the changes we’re most excited about is moving the table of contents to the side of the article, and making it sticky so that it’s available while you scroll down the page. We’ve learned through research and testing that this change will benefit people by allowing them to get an overview of the article as soon as they land on the page, and will help them navigate the article more easily throughout their reading experience.

The majority of the feedback was positive. Most community members like the new location and functionality of the table of contents, and support the change overall. As with most changes to the interface, moving the table of contents comes with some challenges. The main challenge community members raised was: where should we put the sidebar menu, which is currently located in the space that we’re moving the table of contents to? Below we explain our proposal for addressing this challenge, which will also be the subject of our next round of prototype testing.

Our short-term solution[edit]

As a short term solution the entire sidebar will remain available in its current location, will remain collapsible, and the state (i.e. open vs. collapsed) of the sidebar will continue to persist between pages (so if you open it, it will stay open as you navigate around the site). What will change is: when it is open, it will push the table of contents down the page. Here is a screen recording of how it will work:


We don’t think this is the optimal solution, it is more like a quick fix that will allow us to release the table of contents and keep moving forward. And we understand how this might feel like a step backwards to some, because the table of contents is now further down the page than it was previously. But don’t worry — we too think we can do better. Below is our proposal for a long-term solution.

Our proposal[edit]

A few things we learned from recent community feedback, and from data collection, are informing our proposal:

  1. Most editors like the new location of the table of contents
  2. For some editors it is important to have article tools (e.g. What links here, Related changes, Wikidata item, etc.) available as soon as they land on a page
  3. Most of the global navigation items in the main menu (e.g. Current events, Contents, etc.) are used infrequently
  4. Some editors have large screens and would like the interface to make better use of the space on the far side of the article

Additionally, something that we’ve been trying to accomplish throughout this project is moving things into logical places. We think it makes sense for all of the article tools to be in one area, rather than the current situation where some of them are in the sidebar and others are in the article toolbar above the article.

There are two main parts of our proposal:

  1. Splitting the sidebar into two menus: a main menu with global links, and an article tools menu with article-specific links
  2. Moving the article tools to the far side of the article, so that they are near the other article tools (History, Edit, Move, etc.)

Here is a visualization of those two parts:

Step 1: Splitting into two menus

Sidebar split into two menus.jpg


Step 2: Moving article tools

Moving article tools.jpg


The updated interface would look something like this:

Interface with sidebar split into two menus and article tools moved.png


Here is a screen recordings showing some of the possible configurations of the updated interface:

Notes[edit]

There are two additional changes included in the above proposal:

  1. Moving the Article title bar above the Article toolbar.
    • In general we see the title bar being useful to all users, whereas the toolbar is more relevant to experienced users and contributors. Therefore we think it makes sense to have the titlebar come first, and the toolbar below
      • Specific example: the titlebar now has the language switcher in it, and we think language switching is more valuable to most people visiting the site than the items in the toolbar
      • Possible future example: in the future we're hoping to add additional reader tools to the interface (such as Share, Font settings, etc.) and plan on putting them in the titlebar, next to the language switcher
    • From an information architecture standpoint the links and tools in the toolbar are related to the page you are on, so it makes sense to have the title above and the related links and tools below
    • From a readability standpoint it's nice to have the page title be the first thing you see
    • Our mobile skin, Minerva, shows the titlebar above the toolbar, and it's generally a best practice to be consistent when possible. Possible supporting evidence:
      • Timeless and Winter both place the titlebar above the toolbar
      • Google Docs places the page title above the toolbar
  2. Restyling the tabs and other elements on the page
    • This is an ongoing process. The styles included in the mockup above are not final, rather they are just stripped down versions to serve as placeholders while we continue to work on visual design stuff.

Qualitative Testing[edit]

Prototype testing with editors[edit]

In December 2021, we ran prototype testing of our table of contents across 30 wikis. The results of this prototype testing were crucial to the development of the page tools menu. Please see the results of our ToC prototype testing and our ideas for next steps for details.  

We decided to run the next prototype testing. Logged-in users across many wikis can share their feedback on the prototype of the page tools proposed above.