Reading/Web/Desktop Improvements/Fifth prototype testing

We would love your feedback on some visual design decisions for Vector 2022.

Instructions

 * 1) Review this page for context
 * 2) Create a new section on this page using the form below (it will be pre-filled with the questions for you to respond to).
 * 3) Fill in your feedback about the prototypes in your newly created section.

Please keep in mind:


 * These are prototypes, the links may not work, and there might be other bugs or quirks that you’ll come across.
 * The "new section form" unfortunately isn't compatible with the VisualEditor (VE). If you are using the VisualEditor, please manually create a new section and copy & paste the feedback questions (listed below).
 * You do not need to review every section; focus on the ones that are most interesting to you.
 * Design, and visual design specifically, can be subjective. While we are all entitled to our own opinions we ask that you do your best to explain yours, and how they relate to our design goals of simplicity and usability.
 * There might be good options that are not presented here. Feel free to suggest something else if you think it would work better than the options presented. If you are comfortable with design and/or coding please feel free to include mockups or prototypes of your ideas (this is not required).
 * If you are submitting your own ideas please do not edit this page; include them in your feedback form.
 * We appreciate amateur designers, and respect experienced designers. We will review all feedback and ideas, and ultimately we will rely on the judgement of experienced designers to make the final decisions.

ⓘ If you would prefer to send feedback via email, please contact Olga Vasileva at olga@wikimedia.org.

Preview of Feedback Questions

 * 1) Menus — open prototype in a new tab: https://di-visual-design-menus.web.app/Brown_bear. Which option do you prefer and why? Please make sure to check the search menu, user menu, language menu, and tools menu.
 * 2) Borders and backgrounds — open prototype in a new tab: https://di-visual-design-borders-bgs.web.app/Zebra. Which option do you prefer and why?
 * 3) Active section in the table of contents — open prototype in a new tab: https://di-visual-design-toc-active.web.app/Otter. Which option do you prefer and why?
 * 4) Logo in the header — open prototype in a new tab: [add link]. Which option do you prefer and why?
 * 5) Link colors — open prototype in a new tab: https://di-visual-design-link-colors.web.app/Salmon. Is there any additional work you think needs to be done before we make this change?
 * 6) Font size — open prototype in a new tab: https://di-visual-design-font-siz.web.app/Hummingbird). Do you have any concerns with the proposed font size?

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 Monobook and Legacy Vector use visual design sparingly (mainly borders and background colors). Some initial questions that have guided our visual design process for Vector 2022 are: how 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 there is value in the skin having some additional personality (like the blue lines and gradients in Legacy Vector)? 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?

Menus
We use several menus in our interface. Thus far our approach to how we style menus has not been consistent. We have an opportunity, with Vector 2022, to develop a more accessible and consistent approach to the styling of our menus. In their most simple form menus have two elements: a menu trigger, and menu items. We're considering blue vs. black (for both the menu trigger, and the menu options), and bold vs. non-bold (for the menu trigger).

Link to prototype with options: https://di-visual-design-menus.web.app/Brown_bear

Borders and backgrounds
Should we add borders and backgrounds to help divide up the regions of the interface, and if so how should they look? As we mentioned in the Background and context section above, both Monobook and Vector use backgrounds and borders to separate the interface from the content. Backgrounds and borders can also add personality to the interface. However it is difficult to know how functional or necessary they are. We've created several options with progressively more/darker borders and backgrounds.

Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra

Active section in the table of contents
The table of contents is now on the side of the article, and is fixed in place so it remains visible as you scroll down the page. A new feature is that the table of contents indicates which section of the article you are currently reading (we call this the "active section"). Currently, following from a pattern used on the Article/Talk tabs, the active section in the table of contents is black, and the non-active sections are blue. We like this pattern because it is simple, not distracting, and used elsewhere. We could also use additional styling to indicate the active section.

Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter

Logo in the header
...

Link colors
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.

Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

Font size
The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading text, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.

In a previous phase of the project we evaluated the line length of text and concluded that between 90–140 characters per line is optimal (link to writeup). Recently we have spent time researching font size. The most convincing research we have found thus far is ...

Link to prototype with proposed font size: https://di-visual-design-font-siz.web.app/Hummingbird

Design files: Sketch, Figma, Google drawings

Code: GitHib repository with base prototype