Reading/Web/Desktop Improvements/Fifth prototype testing

Background and context
Over the past two years we have made various structural changes to the interface. We have moved the search box, the language switcher, and the table of contents. We have organized certain links and tools into menus. And we have limited the content width, added a sticky header, and moved the page title above the page toolbar. Now, with all of these various elements situated in the updated interface, we are turning our attention to the visual design of the interface. By visual design we mean the styling of text, buttons, borders, backgrounds, and spacing in the interface.

Historically our approach to visual design has been simple and functional. We add little styling, if any, to the HTML elements which simplifies the interface both for people using it and for people designing and building it. It also means that our visual design is rather timeless (versus us chasing visual style trends, and then needing to change the visual style every couple of years). Looking at the screenshots below we can see how in Monobook and Legacy Vector visual design is used primarily to divide the regions of the interface, including separating the content from the interface. Both of the skins also have a small amount of personality: Monobook has a black and white image of a book in the background, as well as dark border around lists and tabs, and Vector uses a light blue accent color for some borders and gradient backgrounds.

Visual design for Vector 2022
Some initial questions that have guided our visual design process for Vector 2022 are: can we use visual design to further improve the interface? Do we think that visually dividing the regions of the interface, like Monobok and Vector do, is helpful? Do we think the skin needs some additional personality? At what point does the visual design become too much, such that it might become distracting or make the interface confusing? What if we do as little as possible, and take a super minimalist approach similar to the original Wikipedia interface?

Design decisions
So far we have identified the following visual design decisions:


 * 1) How should we style menus and toggle switches?
 * 2) Should we add borders and backgrounds to help divide up the regions of the interface, and if so how should they look?
 * 3) Can we update the blue link color so that it is consistent with our Design style guide?
 * 4) Can we increase the font-size for improved readability?
 * 5) How should we style the tabs in the toolbar?

We would appreciate if you could take the time to review each section of this page and let us know what you think. If you have other ideas for how things should look feel free to describe them in words, or post a mockup.

1. How should we style menus and toggle switches?
The original Wikipedia interface was mainly text, links, and buttons. Over time we have developed new elements, such as menus and toggle switches. These new elements are not quite links or buttons in the traditional sense, and our approach to styling them has not be entirely consistent. We have an opportunity, with Vector 2022, to develop a consistent approach to the styling of these elements.

1.1 Menus
We use several menus in our interface. In their most simple form menus have two elements: a menu trigger, and menu items. We need to decide how to style both parts of the menu. Below you will see four main options for how we might style menus, and an accompanying prototype that allows you to view the four options (there is also an option to make the menu triggers bold, which you will see in the prototype). Please keep in mind that there might be other good options that are not presented here. Feel free to suggest something else if you think it would work better than the options below.

Our proposal is: blue menu trigger, blue menu items (not bold). Even though menu triggers technically aren't links, we think that styling them similarly to links will make the interface the easiest for people to use. As for the menu items, since they are usually links we think it makes sense to style them the same as we style other links.

Prototype
Link to the prototype: https://di-visual-design-menus.web.app/Brown_bear

You can switch between the different options using the panel at the bottom-right of the prototype. The menu triggers and menu items will update accordingly. There are four different menus to view: search, user menu, language menu, and tools menu.