Reading/Web/Desktop Improvements/Fifth prototype testing/Feedback

Username:TheRealSerenaJoy
I want to start with a comment - this is a great initiative because "text design" is critical in marketing and advertising. And while Wikipedia is not about markteing and advertising, it is about attracting eyeballs and keeping them on the site, maintaining credibility as a leading go-to educational source and a place to validate facts. I know lawyers who regularly use Wikipedia for research. Therefore, maintaining and improving its use is important. To grab then hold someone's attention is harder than people imagine. Text design is often done wrong, and in attempts to emphasize something, people end up emphasizing ' EVERYTHING... AND THEN THE PAGE IS SCREAMING AT YOU. '

Menus -- I prefer option 1 (blue/blue) but with bold triggers.


 * Blue/blue/bold provides a subtle visual separation from the article itself, as well as other navigational items on the page
 * This makes it visually "easier on the eyes" which would lead people to engage longer because it's easier to focus on the content not the mechanics of the page.
 * The bold triggers and topline menu items maintain a sense of organization without being overwhelming or competing with other elements on the page

Borders & Backgrounds -- Option #9 // outside article background solid


 * The gentle (but solid, no gradient) shading behind the article (which should remain on a white background) frames the article and similar to a photo vignette, brings the eye to the focal point.... the article.
 * It's important however to not have background elements within the article enabled to share the same background color or it loses the framing effect. Elements within an article which may have a background color, should have a different background color - my vote is for very light grey.  Unless of course it's something like a status bar where the background color would be part of the article itself - like green/red/yellow status bars one might see on a project management tool.
 * Framing the article itself contributes to an overall "clean" screen look, as it actually helps "declutter" the page itself, centering attention on the article.

TOC -- Option #2 // bold


 * This maintains a sense of order of the data within the page, keep it simple again so it doesn't compete with the article content for attention. Nobody comes to Wikipedia to see the menus.  They should be a subtle background element that makes the structure of the page content, as well as the navigation clear.

Logo -- Option #2 // square left


 * When brands evolve their logos, they move it forward while maintaining the continuity and heritage of the brand, since brand value is very important. Wikipedia's logo is so memorable and well-known at this point, to disrupt it would be a shame.  Unless a brand is trying to physically "distance" itself from the "old" style for some reason, the other visual changes are enough.  Keep the logo square and to the upper left.

Link Colors -- Keep the current


 * Too much "styling" on the page (and too much change) will be confusing. Different link colors mean different things, (disambiguation, dead link, etc.) there's no need to add more colors here.  Everyone knows a vibrant blue is a link.  But it is good to visually represent links which have been clicked, especially if an editor is checking sources.  It can be easy to get lost in links on larger articles, making editing work more time consuming.... no need for that!  We like to accomplish things as quickly as possible, nobody aims to take longer to do the same amount of editing.

Font size -- 16 point!


 * Mobile first! That's the rule of the day, design for mobile first as most interactions with the web occur via mobile devices.  As a rule of thumb for web design, 14 pt fonts are the MINIMUM in use for design, and google dings you in the SEO algorithm if you use a font size smaller than that on a website since it makes it harder to read, to pinch, squeeze even scroll.
 * Larger type is more friendly. If we want more people to engage with Wikipedia for longer sessions, make the font larger.
 * Smaller type is unpleasant to read. Nobody ever sends good news using small type. It's usually something legal, something bad. I advise people -- the uglier the piece of mail is, the more important it is to read..... because it's something legal.  The flashy, pretty, large headlines, large font mail is all marketing junk.

PS: The form didn't open for me and pre-populate the questions, so I just typed it all, and followed the bullet style others below did.

Username:Klrfl

 * Menus — I like option 4 the most. Use black more often so that readers don't perceive blue as Wikipedia's theme color.
 * Borders and background — Option 3, and option 9 in second place. I would love it if you can combine the two, and make it so that grey can be the bg-color of anything other than the article.
 * Active section in the table of contents — Option 5. I have no other reason than it being aesthetically pleasing
 * Logo in the header — I really don't have a strong preference here, because I would like you guys to make a little square logo with just the globe (and probably a square label with two letters in it to indicate language). But I think option 4 is good, although it is consumes quite a big space.
 * Link colors — strongly prefers the proposed colors.
 * Font size — I use the default setting just fine. If you guys do change the default size, please make it an option in the preferences.

Username:.huepow

 * Menus — option 4, black trigger, black items
 * Borders and background — option 9 (alternatively option 6) makes use of the page and separates the text for readability. other minimalist options leave a lot of empty space and it isn't quite appealing
 * Active section in the table of contents — a mixture of option 2 and 5 would work out. 5 separates the main content from its sub sections adequately and using boldface to indicate what section a reader is on helps for identification
 * Logo in the header — option 4; it adds more style to the page and makes use of the extra space. option 2 doesn't work for me because the "main menu" dropdown seems a bit close together with everything else
 * Link colors — proposed colors are fine.
 * Font size — the increased size would help for many reasons, not only readability but also in proofreading and editing. however since increased size could inadvertently increase page length the width would need to be lengthened to accommodate. consider making larger font sizes an option for this reason

Username:Magicmil

 * Menus -- Option 3, black trigger, blue items. It's useful to see what should lead to an article and what not. The trigger doesn't do that. Immediatly you see that in this design and you can ignore it.
 * Borders and background -- Option 9: I like the contrast. You see more clearly the main text.
 * Active section in the table of contents -- Option 2: Better than the rest for navigating, but not overkill underscoring with backgrounds (would be too fancy)
 * Logo in the header -- Option 2: The drop down menu is (under the wiki-globe) uniform with the top to bottom list of 'useful' links
 * Front size: 16px way more comfortable (but I'm also a heavy desktop user)

Username:Coldbolt

 * Menus — Option 4, black trigger, black items
 * Borders and backgrounds — Option 1, minimalist
 * Active section in the table of contents — Option 4 or Option 1, minimalist
 * Logo in the header — Veeery strong option 1, Rectangle logo left. Logo 2 takes too much space in the new design.
 * Link colors — Proposed colors
 * Font size — Current, Please no, 16px is way too big. Makes you scroll too much, makes it very unclear, just too much. If you do change however, please make it an option. Not everyone has bad eyes (if you have bad eyes I can understand you would want a bigger font as a default). Edit: the more I look at the big font the worse it gets, I'm begging you to make it an option or keep the 14px.

Username:RaresMateovich

 * 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.
 * I prefer option #3 black trigger, blue items, as to distinguish menus from links. I expect a link to have an instant action, whereas menus obviously have tiered actions.
 * 1) 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?
 * I prefer option 8 (although it seems buggy when scrolling a bit), but options 4 and 5 look good too (I would certainly prefer a combination of these two, kinda like option 4 but without the right article border). I think a reading based approach is the best, so going with a minimalistic style will help (but not overly minimalistic, some contrast between the article and the rest of the page is preferable for me).
 * 1) 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?
 * Option 4 looks the best, but perhaps will make the page look unbalanced (too many colors on the left side compared to the right).
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda . Which option do you prefer and why?
 * The first 3 look excellent, but perhaps the first one fits the best (the third one seems a bit odd, but good nonetheless).
 * 1) 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?
 * The proposed colors look cleaner, but I don't think the contrast works better than the current design.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird ). Do you have any concerns with the proposed font size?
 * Definitely the proposed font.

Username:TypeKnight03

 * Menus -- Option 3: black trigger, blue items. Blue trigger makes it look like a hyperlink, which it'ts not. The items however are links to different pages, so they should be blue.
 * Borders and background -- Option 8: The contrast brings out the text more; It almost feels like reading a physical page of paper. The gradiant is a nice touch.
 * Active section in the table of contents -- Option 4: Since the table of contents will always be visible, I think having a single unbroken line on one side will help with intra-page navigation
 * Logo in the header -- Option 2: Similar to the current Wikipedia page design. The location of the Wikipedia globe is part of the brand. Having the globe in a different location just doesn't feel like Wikipedia.
 * Link Colours -- Proposed colours: I've often found that the visited link colour and the unvisted link colour are too hard to distinguish. The new colours definitely help with that.
 * Front size: strongly prefer the old 14x font size. The larger font makes reading slower and harder to read in chunks. I have to move my eyes more for the same amount of text.

Username:Askeuhd

 * 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.
 * I prefer option #3 black trigger, blue items, as to distinguish menus from links. I expect a link to have an instant action, whereas menus obviously have tiered actions.
 * 1) 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?
 * I prefer option 9, alternatively option 8. Visually I feel it is much easier to focus when there is a clear division between background and content, which has been especially challenging with these more recent layouts that have very large amounts of blank space on high resolution monitors.
 * 1) 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?
 * To me, option 4 allows me to find the active item faster than any other option, which is what I find most important in this context.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 1, as it seems to be the most compact and clean option.
 * 1) 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?
 * To my eyes the contrast of the current colors appear higher and more easily read.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I support the change as long as the page width is increased as in the example

Username:Ilovemydoodle

 * 1) Menus — 3
 * 2) Borders and backgrounds — None of these, I prefer the current design.
 * 3) Active section in the table of contents — None of these, I prefer the current design.
 * 4) Logo in the header — 2
 * 5) Link colors — Keep current.
 * 1) Logo in the header — 2
 * 2) Link colors — Keep current.
 * 1) Link colors — Keep current.
 * 1) Link colors — Keep current.

Username:Johnson524
I do really like the way Wikipedia looks currently, and I don't really think anything needs to be changed. If I had to pick one of the options though:


 * 1) Menus — 3 and bolded.
 * 2) Borders and backgrounds — Strong 4
 * 3) Active section in the table of contents — 5
 * 4) Logo in the header — 1 or 2, both look good but the menu on them blocks the table of content.
 * 5) Link colors — Strong current, it's so much easier to read.
 * 6) Font size — Strong current 14px

Username:Phoenix1494

 * 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.
 * 3 - I don't have a strong opinion on the trigger color I prefer black though. For the menu items, they should be blue because they are links.
 * 1) 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?
 * 4 - It separates the sections that move and don't move while not taking up too much space.
 * 1) 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?
 * 5 - The line only existing for subsections nicely shows that all those are associated better than a simple indent. The line extending all the way removes the usefulness of the line.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 1 - It is very standard amongst all websites to put the logo in the top left and that logo will take you to the home page. The square ones take up too much space in my opinion
 * 1) 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?
 * I think the change is fine. I have no strong opinions on this.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I strongly support this. I always zoom in on Wikipedia now and I won't have to with this change.

Username:Alduin2000

 * 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.
 * 1 or 4: individual links within dropdowns should be blue to cohere with design of links on pages, but dropdowns themselves need not necessarily be blue too
 * 1) 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?
 * 4 or 5: in my opinion, these provide the best compromise between minimalism/simplicity and sectioning out the article from other sections of the page
 * 1) 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?
 * 2 or 4: I found these to be the easiest to navigate with. 1 makes the current section too hard to identify as it's still quite similar to the blue links and 5 works against the goal of simplicity of design.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I feel 1 is the most simple; it keeps the logo constrained to one section (the header) rather than straggling between two sections (header and sidebar as in 2/4). I also prefer it to 3 as I feel that the search bar should be placed in a position of prominence so that users are directed to it more easily/immediately - the search bar is the more useful element to be directed towards.
 * 1) 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?
 * Whilst the link colours now have appropriate contrast with surrounding text, their contrast with the background is worse, making the links harder to read. Therefore, I would say additional work is needed to make link colours simultaneously have a good contrast with the surrounding text and the white background. Perhaps the body text and link text could both be darkened to retain the contrast between them whilst also increasing their contrasts with the white background?
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I see nothing wrong with increasing font size as suggested

Username:Urban Versis 32

 * 1) Menus — Option 1, with bold enabled. Honestly, the blue-on-blue looks the most conventional for people reading the wikis, and the bold helps emphasize that it is a menu. I also noticed that when looking at the language menu my laptop rendered it like this:
 * 1) Borders and backgrounds — Option 7. I really liked the header with the gradient. It just made the overall page look very modernistic.
 * 2) Active section in the table of contents — Option 4. I liked how you could scroll the ToC separately from the rest of the page if you needed to. Plus, the way it looked was the nicest of them all.
 * 3) Logo in the header — Option 1. The way the logo was styled looked the best. DEFINITELY not option 4, as it makes it very difficult to actually see the logo.
 * 4) Link colors — Keep it. The proposed colors make it way harder to see on the page.
 * 5) Font size — I like both of them the same. Keep both, and have an option at the top to change it.
 * 1) Logo in the header — Option 1. The way the logo was styled looked the best. DEFINITELY not option 4, as it makes it very difficult to actually see the logo.
 * 2) Link colors — Keep it. The proposed colors make it way harder to see on the page.
 * 3) Font size — I like both of them the same. Keep both, and have an option at the top to change it.
 * 1) Font size — I like both of them the same. Keep both, and have an option at the top to change it.
 * 1) Font size — I like both of them the same. Keep both, and have an option at the top to change it.

Username:Bebiezaza

 * 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.
 * No opinion on this for now
 * 1) 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?
 * Option 9 (outside article background (solid)) because there is a visual separation between content zone and peripheral zone, and no gradient is easier for interface documentation eg. w:th:วิกิพีเดีย:สคริปต์ผู้ใช้ (Revision ID 9348715 if the section happens to change in the future) demonstration picture has gradient; it feels low quality and kind of lower the perceived resolution.
 * 1) 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?
 * Option 2 (Bold), I just like it. :)
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Either option 1 or 2.
 * Option 1 (Rectangle logo left) - not as evasive and looks clean
 * Option 2 (Square logo left) - feels more at home to me (feels more similar to Legacy Vector), does not look really evasive, and maintaining the cleanliness
 * 1) 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?
 * No opinion on this for now
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I would like it to be in the original font size because it is the same size as usually typed on paper and more info could be placed in a screen. 16px feels too large. This is also a complaint I have for Fandom (as in FandomDesktop skin they created).
 * Maybe create a preference option for selecting between 14px and 16px font size.

Username:NGC 54
I also still have the suggestions that I have written at Reading/Web/Desktop Improvements/Fourth prototype testing/Feedback -- NGC 54  ( talk |  contribs ) 15:41, 9 June 2022 (UTC)
 * 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.
 * "1) blue (menu triggers), blue (menu items)" with "Bold (menu triggers)" checked.
 * 1) 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?
 * "9) outside article background (solid)", because the boundary between the article and the allways-shown elements is clearer.
 * 1) 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?
 * "2) bold".
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * "2) square, left", because the Wikipedia logo is beautiful; there is no need to hide it. I also think that a "W" should be shown in the left corner of the sticky header.
 * 1) 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?
 * "Proposed colors".
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * "16px (proposed)". Changing the font could lead to technical issues, as Dexxor said; in this case, I would say "14px (current)". So "14px (current)", with option for "16px (proposed)".

Username:Simeon

 * 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.
 * Option 3 because blue is already used for navigation (e.g., "View history" is blue and it's meant to take one to a particular page). The blue menu items are then also blue as they're used for navigation.
 * 1) 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?
 * Option 9 as it has clear lines and the sides are in a different colour which is nice when scrolling down to read the article. My second preference would be option 4 as all the lines are connected rather than relying on fades.
 * 1) 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?
 * Option 2 because it's clear at a glance. I like option 5 as well but for quick reference to the table of contents (while reading) I think option 2 works better.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 2 because, like in the current version, the logo should take up some space to highlight the project that the reader is viewing.
 * 1) 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?
 * I would prefer a different colour for the visited links, as it's not that different from the normal links. Although this change is made to improve contrast, I think the current colours actually have more contrast between the normal and visited links.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I think 14px is fine. Perhaps it can be made an option for readers that prefer this? It might also be that 16px just takes time to get used to but, at first, it seems bigger than necessary.

Username:Dexxor

 * 1) Menus — No strong preference but the menu items in the search menu and the user menu must be black.
 * 2) Borders and backgrounds — 1 or 9
 * 3) Active section in the table of contents — 4. I like the line to the left. This is makes it more obvious why certain entries in the TOC are highlighted.
 * 4) Logo in the header — 1 or 3. 2 also looks nice but wastes space.
 * 5) Link colors — don't care.
 * 6) Font size — Please keep the current font size. Changing it leads to inconsistencies when templates use a manual font size. —Dexxor (talk) 15:54, 9 June 2022 (UTC)

Username:Iritscen

 * 1) 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?
 * My only concern with this iteration of Vector is that these proposed link colors are almost 100% indiscernible for me as someone with a fairly standard form of red-green colorblindness. The current blue link and visited link colors are discernible for me with only moderate difficulty because the visited link is "darker" than the unvisited blue link. With the proposed #3366cc and #795cb2, I will have absolutely no idea if I have visited a link. Around 1 in 24 people are colorblind in some way, so I know I must not be alone in having extreme difficulty with the proposed colors. I checked the contrast between the proposed link colors using the tool here and the contrast ratio is 1.0:1. Please take into consideration not just the contrast between link and non-link text but also between the two link colors, visited and unvisited. Thank you. --Iritscen (talk) 16:21, 9 June 2022 (UTC)

Username:(a)lizadoolittle

 * 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.
 * I prefer option 2 because it seems to be most consistent with the rest of the page. The all blue text for the menu items seems unnecessary because it is clear that they are buttons/links.

Username:Geraki
Geraki (talk) 16:58, 9 June 2022 (UTC)
 * 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.
 * Option 2: Blue is a standard for links and triggers.
 * 1) 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?
 * Options 7 better than 8 better than 9 better than 2 better than 5. Absolute no to 3.
 * 1) 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?
 * Options 5 and 4 will probably stand better in monochrome screens and bad lighting.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 2, "traditional", makes the grayscale logos (such as the wikipedia logo) stand better. Also option 1 (consistent with mobile) is ok. Option 3 is like we're back in the '90s, 4 is not the logo.
 * 1) 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?
 * You didn't give example for red links, but anyways the change is good, helps me distinguish links from normal text (checked also in a bad screen where I had such a problem).
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * Yes. I prefer the current font size which is better for long texts. If you do implement the proposed, keep the 960px max-width (changes to 1050px in the prototype).

Username:RH Swearengin

 * 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.
 * I like option 3 without bolding. With this option, the color coding seems to best reflect the difference in functionality. I like the contents navigation to the side. However, the font in the navigation should match the section header font.
 * 1) 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?
 * I like the minimalist option. The cleaner look draws the eye to the content of the article.
 * 1) 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?
 * I like option 2. The cleaner look is more readable. Again, I think the section headings in the side navigation should have the same font as in the article itself. Matching the fonts will convey the correspondence more clearly.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I like option 4. I'm not sure why. It feels a bit more thoughtful in terms of design.
 * 1) 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?
 * I like the proposed color. It isn't so light as to give a blurry appearance, but it does make a big difference in contrast.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * Personally it doesn't make a difference for me. I zoom in and out a lot as I'm reading. The larger font, however, might be more user friendly for the average user -- especially new users. I'm a community college professor, and I know from experience that a lot of my students need glasses -- or need to wear the glasses that they already have.

Username:SD0001

 * 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.
 * No preference.
 * 1) 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?
 * Option 4. The solid lines clearly indicate the separation between content areas and avoid the feeling of too much empty space which is apparent in other options (particularly option 1).
 * 1) 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?
 * Anything except option 2 which is too jarring.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 2. A square logo is what works for Wikipedia. Although the rectangular logo also looks fine for projects like this MW instance.
 * 1) 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?
 * No preference.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * No preference.

Username:betseg

 * 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.
 * I prefer the triggers to be blue and the items black, with bolded triggers. Blue items look too busy in my opinion, though the items being blue is also OK because black items might be confused for being non-clickable.
 * 1) 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?
 * I prefer outside article background options, either 8 or 9 is fine. It feels harder to read and concentrate on the content if the surrounding is the same very light colour.
 * 1) 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?
 * I would like an option with both bolded section and the first (#4) line with border option.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 1. Others feel awkwardly placed.
 * 1) 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?
 * Both colours look a bit too light, it's hard to read them on a white background.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * No, it's much easier to read.

Username:Addshore

 * 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.
 * I lean towards black triggers and blue menu items. I think this is mainly as I expect blue links to mostly take me somewhere else.
 * I also noticed that although the user menu is a menu, the icon remains black even when other menu triggers are blue. Not sure if this is intentional, but again makes me lean toward triggers being black.
 * I think it would be very weird to have menu items in black text given all of the other menu like things around that have blue links such as the side bar.
 * 1) 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?
 * Trying to write some thoughts as I click through the prototypes....
 * 1) minimalist: I quite like..
 * 2) article boarders: I also quite like..
 * 3) page title underline + TOC line: I dislike, page odd so divided? I also dislike how it pushes the sidebar down some number of pixels.
 * 4) TOC line + header underline: I quite like this, much better than 3, and the page seems more naturally divided.
 * 5) article borders + header underline: Seems a little odd o me compared with 4. I think this is down to the article boarders not being attached to the header line. If I had to pick I might say 4, but there isn't much in it.
 * 6) article borders + header bg (solid): I quite like the added definition to the header, it gives the page a little more "life" rather than being a totally blank canvas.
 * 7) article borders + header bg (gradient): Personally I like the solid version, more definition
 * 8) outside article background (gradient): Looks weird on my screen (probably as designed), but I don't like it!
 * 9) outside article background (solid): Looks familiar (feels quite like the current version). I like the definition that this puts between sections, quite similar to 6 in that respect which combines solid colour for the header, as well as article boarders.
 * TLDR, 6 is nice, 9 is also nice and closer to what we currently have? 3 I hate. 1 and 2 are maybe too minimal for me, 4 and 5 are also nice enough.
 * 1) 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?
 * 1 doesn't jump out enough for me
 * 5 feels odd
 * 2 and 4 are my favourites, but 2 wins as it is simple and effective (easy to spot, and not doing too many other things like magic boxes etc)
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I quite like the rectangle logos.
 * It perhaps feels slightly odd when the logo is centred and the search is on the left, but I might get used to it?
 * Not sure what any of the designs gains / wins over the others, so I'd just pick 1 which is the closest to no change.
 * Happy to be convinced otherwise though :D
 * 1) 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?
 * Looks fine to me
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * It feels like quite a big change to me.
 * But looking at some other websites I read 16px seems to be used quite often and I don't care there.
 * Perhaps the line spacing makes it all look quite large and spread out? but also perhaps that is the plan?
 * Changing the line-height of the content from 1.6 to 1.5 seemed quite nice to me with the added font size.
 * Changing the line-height of the content from 1.6 to 1.5 seemed quite nice to me with the added font size.

Username: Certes

 * 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.
 * 3) black (menu triggers), blue (menu items), no bold. We're used to clickable links being blue and other text being black.  The v dropdown indicator is enough of a clue.
 * 1) 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?
 * 9) outside article background (solid). Helps us to find the article we came here for now that it no longer occupies most of the screen.
 * 1) 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?
 * 2) bold. If you're going to include this information, make it prominently visible.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 2) square, left. This option wastes slightly less of the critical vertical screen size on blank space above the title.
 * 1) 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?
 * Good colour scheme. This seems to be the one change which actually improves on my current (legacy Vector) skin.  I already use a script to make links more visually distinct.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * It's larger than I would have chosen – I prefer to see more text on the screen at once – but recovering some of the wasted space in the blank right column mitigates the effect.

Username:BappleBusiness

 * 1) Menus —  I think 3 makes the most sense. Links are blue, so menu links should be blue. Menu triggers aren't links, they bring you to links, so they shouldn't be blue. We don't want the page to be a sea of blue; the existing cues are sufficient to identify that they are menu triggers.
 * 2) Borders and backgrounds — I prefer 9. It's clean and avoids too many lines.
 * 3) Active section in the table of contents — I prefer 5 if the color of the background is the same as 3. The only thing is that for further subheadings, the background should take effect for the parent subheading. For example, for the "Japanese folklore" section, "Relation with humans" and "Religion and mythology" should have a background, while "Japanese folklore" has the line, to make clear it is within that subsection.
 * 4) Logo in the header — Definitely 1. The logo doesn't need any more emphasis/space.
 * 5) Link colors — Looks good to me. It's a lot better for non-colorblind users as well.
 * 6) Font size — Please don't do the proposed changes. It will make existing long articles even worse to navigate, especially when there are images/elements on the page. I don't think the current text size with a decreased page width needs to be fixed.

Username:OliCol11

 * 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.
 * Option three. I prefer the black triggers because it clearly distinguishes menu's (which show additional options/links) from links that have an immediate effect. Besides this, I find the black triggers more aesthetically pleasing.
 * 1) 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?
 * A combination of four and nine. I really like the contrast and clear division between article and background that nine gives: it makes reading much easier. However the line that separates what moves and what is sticky, which is included in nine, is also nice.
 * 1) 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?
 * Option two or four. I find that option one just doesn't stand out enough, which means you have to scan the table of contents line per line to find the active page, which negates a large part of the benefit of having a table of contents. Although the boxed background from options three and five stands out slightly more, I have a similar problem with it just not being noticeable enough. That's why I prefer option two, which is more minimalistic, and option four, which I find more aesthetically pleasing, both seeming evenly functional.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option two. The logo just feels like it belongs in this place. It fills in the gab between the header and the table of contents that gets created with options one and three and thus makes the page seem more balanced. The extra space it takes up is unused by the other designs. In fact: options two and three seem to push the text further down, reducing the amount of article shown on the screen (but maybe that's the spacing not being tweaked enough?).
 * 1) 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?
 * No strong opinion. Although I find the difference between unvisited and already visited links too low in both designs, it would be nice if visited links would stand out more.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * I prefer the current 14 px size. An option to switch between the two options might be handy though.

Username:Tryptofish

 * 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.
 * ...I prefer #1, blue-blue. My reasoning is that blue is understood to mean "you can click on this", whereas black is understood to be non-clickable text. Using blue for both is consistent and I had no problem with readability.
 * 1) 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?
 * ...This question confused me. I could not see the differences.
 * 1) 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?
 * ...I like #2, Bold. It was the easiest to see and understand. I found the background option difficult to see, and the lines were overly complicated.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * ...I like #2, Square Left. I found the gradient difficult to see. The rectangles seemed small and less appealing than the square.
 * 1) 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?
 * ...The proposed colors are clearer at showing the difference between visited and not visited, but they are inferior in terms of my ability to see them with a clear contrast against the white background. It would be helpful to try darker colors with a similar difference.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * ...I think the 16px is helpful with viewing the text and not feeling like it's too long to read. But I noticed that the page title and section headers look relatively small this way, so the font size for those should also be increased proportionately.

Username:Pbsouthwood

 * 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.
 * 1) Blue triggers and blue items. We are accustomed to blue signifying a link, something that will produce a change if you click on it. Black means clicking on it will not have an effect. This is a very strong preference, I really do not like the other options at all.
 * 1) 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?
 * 9) Slight preference for option 9, which clearly distinguishes between content and tools, I do not like the gradient options, and think they well date quickly They are less functional and seem to be pandering to fashion. Minimalist is better than gradient, borders have very little impact. so why bother. grey background actually does something useful, which cannot be claimed for the others.
 * 1) 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?
 * 2) Black and bolded shows up best and meaning is intuitive and clear, as this is what happens whenever a link links to the active page. It is easiest to see with poor eyesight. Other options not great., and require significantly more effort to spot and interpret.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 2) Square, left, gives best prominence while staying out of the way. Hate the gradient, don't like the small Wikiglobe Do not sideline our logo by making it too small. I could live with a three bar menu link with the square logo though as it is a very recognizable icon.
 * 1) 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?
 * Not much difference in legibility to me, and I have poor vision for resolution/focus on small print, so though higher contrast between plain text, unused link and used link would be nice, I battle a bit with the used link for both options, so don't really have a personal preference here. I assume the css options for alternative colors for redlinks, redirects (green) and dablinks (orange) would not be affected, they are very useful tools.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * 2) Bigger text YES!, considerably easier on the eyes. If not made default, please make it an option.

Additional comment:

In general, I like where this could be going, as long as it doesn't go the wrong way, as some of the options are just bad. It would be helpful if one could toggle between the demo and a rendering in the current skin one uses, to see the changes. Cheers, P
 * If you hide the menu by accident, you have to go to the top of the page to get it back, This is annoying, and when it happens the first time, may be very frustrating as it is not obvious how to fix it.
 * I am a bit concerned about how wide images will be handled, really don't like the narrow column of lead text on the Panda page caused by the two parallel boxes on the right, and would like to see how galleries will be rendered, particularly if there are side images that overlap. Image placement seems to be arbitrarily changed. This may be a problem.
 * It would be nice to have an option to default to expanded menu
 * Lastly, the rendering of navboxes really needs work, it is unacceptable as it renders in these demos. This may just be unfinished work, but it worries me not to know.

Username:Cumberhache

 * 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.


 * Blue and bold for menu triggers: This to prevent the excessive usage of black (present on "Article", title of page "Brown Bear", and "Read") while still being distinct from nearby clickable items.


 * Black for menu items: Enables contrast from the blue links on the links embedded on the wiki.

User Theanswertolifetheuniverseandeverything

 * 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.
 * Personally, I like the option of black triggers and black items (4), but I think that blue triggers and blue items (1) is more in line with the visual language of the rest of the page. Maybe the user menu could be an exception? The top bar does not use blue to indicate links.
 * 1) 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?
 * I don’t like the fade-out of the lines for the article borders (2) option.
 * I find (3) to be good and bold. It nicely fits in with the border of the overlay title bar when scrolled. Although I would prefer if the title were larger. (3) gives it space and I think it deserves that.
 * (4) is OK & similar to (3) but I personally don’t like it as much.
 * I don’t like (8).
 * I think (9) would be great if the overlay title bar when scrolled wasn’t white with a border. If it was grey without a border, that’d be good.
 * 1) 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?
 * Bold (2) or background (3), although I hope the final design doesn’t jitter around as much.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I like the layout of square-gradient (4), but I prefer it without the gradient. I like how it integrates with the hamburger menu icon.
 * 1) 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?
 * That’s nice! I think the visited links could be darker. As it stands I feel like I’d be likely to overlook them.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * Note: I use a small font as the default font on my system.
 * I like the new font size. As long as it doesn’t go along with a reduction in number of characters per line from the current New Vector, I’m cool with it.
 * Upon further consideration, I think the font size of the menus should also be increased. Maybe very slightly less of an increase.
 * 1) General notes: I think the line between the search icon in the overlay titlebar when scrolled is unnecessary. Actually, the search box should ideally take up a large part of the left top bar, pushing the title further to the middle.

Username:Nihiltres

 * 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.
 * I prefer black menu triggers with blue menu items. Blue is the link colour, and many menu items take the user to a different page, so they should be styled like links to hint that. Black hints that that interface element would not take the user to a different page, and the interactivity of those elements is hinted by icons (like the down-pointing bend symbol currently being used).
 * 1) 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?
 * I prefer the "outside article background (gradient) to subtly indicate the bounds of the page content, but I would settle for the "minimalist" option, too. I generally disfavour lines as needless visual noise—background contrast is preferable—but I do like the "header underline" from the "TOC line + header underline" option as it makes the main header consistent with the sticky header.
 * 1) 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?
 * I most prefer the "line w/ border" option. There's a continuous line that's always present, and there's highlighting to easily see where you are. Unlike some of the other options, I find this option less distracting when I'm not focusing on the table of contents, while some of the others draw my eye away from the content (which is bad).
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I find I like the "rectangle, center" option best: it appears most like a title (or even a "super-title" if you will). On the other hand, it might be seen as distracting; my second pick would be the "rectangle, left" option. Both "rectangle" options are more suitable for a design oriented around a sticky header.
 * 1) 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?
 * No. This is a straightforward and obvious change to meet contrast standards.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird). Do you have any concerns with the proposed font size?
 * This reads as "too large" to me, but I'm way out on the high end of the curve of preferred information density. It is very likely to further upset people (not me!) who are also upset with the width-limit that Vector 2022 introduces. On the other hand, increasing the font size is a good compromise to avoid wasted screen space on wide viewports if the body-content column is made correspondingly wider. I am concerned that it reduces the size ratio between paragraph text and headers, making the latter less visible.

Username:Killarnee

 * 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.
 * #4 black (menu triggers), black (menu items) AND bold, because a) blue is reserved for hyperlinks and b) bold because otherwise its not so easy to find it
 * 1) 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?
 * #1 minimalist PLEASE PLEASE PLEASE no ugly borders
 * 1) 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 line w/ border
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * #3 rectangle, center; menu and search box should be together, the logo doesn't appear too prominent, but it's not pushed into the corner either.
 * 1) 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?
 * The "visited" link looks better in the proposed colors, because its color is more like the background. But the normal links are better in the current color, as its to light to read it easy in the proposed color.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * 16px is good – but why not let the visitors change the font size themselves?

Username:James3141592

 * 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.
 * I like blue bold menu triggers and blue menu items because this is what I'm used to seeing on Wikipedia.
 * 1) 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?
 * I like minimalist borders and backgrounds because the border and background lines are easy to see.
 * 1) 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?
 * I prefer the first option because this is what I'm used to seeing on Wikipedia.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I prefer the first option because this is what I'm used to seeing on Wikipedia.
 * 1) 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?
 * I think there should be more work to be done because new features take some time to test them out.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I do not have any concerns about the proposed font size on Wikipedia.

Username:catsmoke
——————————————————————————
 * 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.
 * search menu: Don't need images, they take up too much space and I don't need the visual aids.
 * user menu: I like the style of the icons
 * tools: it is most excellent to offer the option of either leaving a menu as a pull-down, or embedding that menu in a sidebar
 * talk: My impression is that the proposed new style is more difficult to follow than the old style; it lacks structure, it needs boxes around the topics or something similar.
 * on the menu color combinations (blue+black, etc.): it is excellent to make the menu triggers a different color than the general link text
 * 1) 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?

——————————————————————————
 * 1) No; I don't care for the minimalist style, too bare, lacks of aids to focus, I need more visual structure
 * 2) No; I like it, but not as much as 4 and 6 and 9
 * 3) No; this one leaves the article title too isolated; it cuts off the title from the body, as if the body of the article had more in common with the left sidebar than with its own title
 * 4) No; I like this layout, but not as much as the two-color layout
 * 5) No; do not like the article title sort of merging, or sharing the same area, with the left sidebar
 * 6) No; good, but second color needs to cover more of the page, as it does in 9
 * 7) No; no gradients, I don't like gradients; this is an encyclopedia, it's not a place for subtlety
 * 8) No; no gradients, I don't like gradients; gradients are unencyclopedic in tone
 * 9) Yes; the best and my favorite


 * 1) 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?

——————————————————————————
 * 1) Yes; it is really cool for the TOC headings to change color, to correspond to the reader's location in the article
 * 2) No; the bold is too much
 * 3) No; looks too much like a menu's Selected appearance
 * 4) No; lines make it far too busy
 * 5) No; lines make it far too busy


 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?

——————————————————————————
 * 1) No; second best, a bit too understated; but having the menu icon is ideal
 * 2) Yes; authoritative and reassuring; but the text menu trigger is inferior to the graphic version in #1
 * 3) No; not a good location, distracting, ironically it seems imbalanced regardless of its being centered
 * 4) No; no gradients


 * 1) 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?

——————————————————————————
 * 1) No; colors are far too difficult to tell apart
 * 2) Yes; good contrast of different types of text in the varying colors


 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?

note: Instructions said to go to menu in corner to change font size; I cannot find this option


 * 1) Yes; current
 * 2) No; too big

—Catsmoke (talk) 22:30, 9 June 2022 (UTC)

Username:Yngvadottir

 * 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.
 * No idea. Couldn't really see the differences, it was all a sea of Vector white with stuff hidden in peculiar places or simply not visible, Vector-style.
 * 1) 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?
 * This time I could see the difference. It makes more logical sense in Vector to have it all be white rather than having a cutesy light blue border, but they all look wrong, not like an encyclopedia, because Vector.
 * 1) 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?
 * None, the TOC in Vector is tucked away out of my line of sight anyway.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I like the big globe, rather than making it teensy as if you're ashamed that this is Wikipedia, or Commons, or Wikinews, or whatever, but then I also like the book shaded in behind it.
 * 1) 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?
 * Couldn't really tell the difference, except that the contrast between unvisited and visited links seems to be less in your proposed version? In any event, isn't contrast skin-dependent because some skins don't have white background?
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * A larger font size isn't a bad idea, though it will play havoc with formatting on some pages, but it seems to vary between skins anyway? Many of us still use Monobook, and I had already become aware that you have tinkered with Vector and there are now 2 versions of that in use. Plus the majority of readers and many editors are viewing the encyclopedia on mobile (mostly newer editors, I imagine, because your apps suck so roundly that editors who are used to the desktop editor have no earthly reason to switch, and those who like to use their phones to edit are switching to desktop-on-mobile every session and cursing your refusal to make that a remembered setting). I suspect the same is true for the other project sites. And mobile view presents a completely different challenge with regard to font size. So on balance, font size (on your preferred skin alone, on desktop alone) is not worth changing and breaking things, IMO.

Username:Atsme

 * 1) Menus — open prototype in a new tab: https://di-visual-design-menus.web.app/Brown_bear. Which option do you prefer and why?
 * Blue-bold, can see them better.
 * 1) 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?
 * article borders + header bg (gradient) - can see it all better, and it's a nicer design
 * 1) 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?
 * line with border (2) but would also like see in bold - the lines separate it better, make it more visible for what it is.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * rectangle left - unobtrusive, neat, cleaner look
 * 1) 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?
 * current link colors but there needs to be more contrast or difference in color between the live link and one that was already clicked
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * 16px (proposed) - no brainer. The larger font can be seen much easier, and is less fatiguing.

Atsme (talk) 22:56, 9 June 2022 (UTC)

Username:DrowssapSMM
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.

Black-bold - easier to see

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?

TOC line + header underline - provides structure, looks nice

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?

Line with border with bold - the line looks nice, and the bold makes it more visible

4. Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?

rectangle, center - better positioning, nice design

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?

current unvisited link colors, proposed visited link colors

6. Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?

no issues, looks nice and is easy to read

Username:Ponor

 * 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.
 * Option 1: blue + blue + non-bold, but then the user menu icons shouldn't be black... maybe darkgray?
 * 1) 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?
 * Option 1: minimalist makes most sense to me; all other options just add more clutter (and there are things on wiki that like to go out of the page)
 * 1) 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?
 * Option 2: bold, the simplest and most visible
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 4: square, left (gradient); the hamburger and "Wikipedia" are properly aligned, and our beloved logo is more visible. Move the logo a little bit to the right?
 * 1) 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?
 * Option"Proposed colors"; visited links have always been too close to black for me, thus barely visible within the text. I need this visual difference!
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I would strongly advise against changing the default font size. Many templates have been designed around the current font size. 16px is too big. Our sidebars/infoboxes are already too wide and too tall, this would only make things worse.

Username:forbes72

 * 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.
 * Option 3 Black menu triggers + blue menu items is my preference. Having blue menu triggers is OK, but I like the design choice of blue consistently implying that a click will take you to a new page, while black does not. Having items within the menu be black is confusing, as there are non-clickable menu items which are grey, and the contrast between grey/black is not high, so you may make the mistake and think these are clickable.
 * 1) 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?
 * Article borders seems the best, as it clearly differentiates article content from the sidebar, but doesn't clutter up the header with too much styling. For all the prototypes, the page width is pretty narrow on my desktop monitor, so I would prefer to be able to adjust the text width wider, or perhaps an option to read the text in two columns? (for example) Obviously two columns won't work for small screens, but I much prefer the design to be flexible to the use case, rather than trying to force a common compromise design between desktop/mobile.
 * 1) 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?
 * Bold is my preference. The black works fine, but I don't know if it provides enough contrast to be clear which section you are currently reading. The line stuff seems out of character for Wikipedia, it seems to fit less well.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Square, left seems best, keeps continuity with current design. The other designs have a hamburger button, whose function is not clear at a glance.
 * 1) 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?
 * This looks good. Better clarity about links helps.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I prefer the current (smaller) font size for desktop reading, but the higher width is nice. I would echo what I said about flexible design: on a large screen, smaller font will be preferable, but on a small screen the text will be too tiny. Wikipedia already has separate mobile/desktop versions, so I think it makes sense to optimize these individually. From the study "Preferably, users should be allowed to adjust the font size to their individual needs. " is something I wholeheartedly endorse, preferably in 2-3 clicks rather than deep in menus. Forbes72 (talk) 04:02, 10 June 2022 (UTC)

Username:JoshuaHoschke

 * 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.
 * 3) black trigger, blue items. With a blue trigger there is too much blue on the page. But then once you open the menu, the items should be blue to show they are selectable.
 * 1) 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?
 * 2) article borders. The header underline is unattractive. The minimalist option (1) is also nice.
 * 1) 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?
 * 2) bold. The line with border has excessive elements for the amount of information there is too convey. Bold looks the best.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 1) rectangle, left. I think 'square, left' is fine also. The centered version reminds me too much of cheap websites. The gradient is overly fancy and unappealing.
 * 1) 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?
 * Proposed colors are much better. Although maybe the purple link could be a bit darker? It is a bit tricky to read on the white background.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * 14px (current). I don't understand MaxEnt's clarification but I prefer the smaller font. It doesn't really matter to me though because I can always zoom out if the change is made to 16px.

Username:Sikander

 * 1) Menus — https://di-visual-design-menus.web.app/Brown_bear — Option 1: Blue and blue tells me these are clickable links.
 * 2) Borders and backgrounds — https://di-visual-design-borders-bgs.web.app/Zebra — Option 6, and then Option 9: I like clear separation between different kinds of content
 * 3) Active section in the table of contents — https://di-visual-design-toc-active.web.app/Otter — Option 5: Visually very clear that there are sub-sections
 * 4) Logo in the header — https://di-visual-design-header-logo.web.app/Panda — Option 2: Website identity is very clear
 * 5) Link colors — https://di-visual-design-link-colors.web.app/Salmon — Proposed colours are good, but perhaps the non-visited link colour should be darker with this new colour for visited links.
 * 6) Font size — https://di-visual-design-font-size.web.app/Hummingbird — Proposed font size is all good. No concerns.
 * 1) Logo in the header — https://di-visual-design-header-logo.web.app/Panda — Option 2: Website identity is very clear
 * 2) Link colors — https://di-visual-design-link-colors.web.app/Salmon — Proposed colours are good, but perhaps the non-visited link colour should be darker with this new colour for visited links.
 * 3) Font size — https://di-visual-design-font-size.web.app/Hummingbird — Proposed font size is all good. No concerns.
 * 1) Font size — https://di-visual-design-font-size.web.app/Hummingbird — Proposed font size is all good. No concerns.
 * 1) Font size — https://di-visual-design-font-size.web.app/Hummingbird — Proposed font size is all good. No concerns.

Username:Retswerb

 * 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.
 * Option 3, with bold menu triggers. Looks modern and catches the eye appropriately.
 * 1) 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?
 * Option 9. It does the best job of setting off the content from the menus - subtle, but effective and promotes content.
 * 1) 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?
 * No strong preference other than that 2 through 5 are all better than 1, which is too subtle to be easily noticed.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 1. Takes up less real estate than the square logos and the centered one looks odd to me with the search in the upper left.
 * 1) 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?
 * Strong preference for existing color scheme. I know this change is being made in an effort to improve accessibility, but: as a partially colorblind person, the new color scheme makes it much harder for me to differentiate between read and unread links. The current color scheme includes greater variation in shade as well as hue between the two, whereas the new scheme has hue variance but not much shade variance. Having read the WCGA contrast requirement I see that finding colors that meet the guidelines is difficult, and I recognize that different people's vision have different strengths and weaknesses and it is therefore hard to improve things for everyone. Having said that, I can speak only for myself and my own vision: these new colors make it much more difficult for me to see whether the link is read or not. Please reconsider further options for these two colors. The contrast against the body text/background is great; contrast between read and unread is insufficient.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I prefer the existing size, but this is easy to adjust and I see benefit in increasing the size for the sake of accessibility.

Username: El Grafo

 * 1) Menus — option 4 is my favourite here. Clearly prefer black menu items, mainly because the blue does not look good next to the black icons in the user menu. Also prefer black for the menu triggers for consistency reasons. Blue is used for links that bring you to another page, which menu triggers do not. For links, we need the blue color so show that there's something clickable here, but that's not the case for menu triggers, as they already have the downwards arrow. Bolding the triggers doesn't hurt, but it seem unnecessary to me.
 * 2) Borders and backgrounds — prefer option 1, 2 or 9: keep it simple. 3 seems like a bad choice, as it separates the article title from the contend and makes it part of the header. 5 could work, but I don't think the rule below the header is really needed. 4 is similar to that but subjectively looks worse. Among the ones with a background color, 9 looks best to me and seems to make the most sense, as it directs attention towards the main content in a subtle way. Please no gradients, they feel like it's 2012 to me.
 * 3) Active section in the table of contents — I think I'd prefer a combination of 4 and 5: highlight with a thick vertical line like in 4, but have the thinner vertical lines behave like in 5 (i.e. have them run along sub-sections only instead of running along the whole TOC. Or maybe better: Same as 5, but use bold or plain black for the top level instead of the background. 1 or 2 would also work for me, I really just don't like the background option (3). It feels out of place to me.
 * 4) Logo in the header — 1 is the definite winner for me here. I always felt like that giant puzzleball in the corner was over-compensating for something. People know about Wikipedia now, we can be a bit less in their faces with this now. Keeping it in the corner where they expect it makes sense, though. I've really been appreciating this on Wikivoyage and Commons - feels fresh but familiar. In the center option, the logo looks lost in space. And again: please no gradients. It still kind of works with the grey scale, circular Wikipedia logo, but I don't think it would be a good choice for other projects.
 * 5) Link colors — Not sure if it actually looks better, but if it makes us more accessible: go for it. Just wondering what will happen to visited external/interwiki links? Currently, these are being rendered in a slightly brighter purple than regular wiki links. The same goes for unvisited blue links: external ones are a tad brighter/paler (roughly #0645ad vs. #3366bb). Compare Main page en:Main page. The differences for the non-visited links are so subtle that most people will probably never notice. This would be a chance to either make them identical in color or sufficiently different to serve a purpose.
 * 6) Font size — Maybe it's just a matter of getting used to it, but I feel the old font sizes were more balanced over-all. The infobox now uses 3 different font sizes instead of just 2. There are probably good arguments to be made for the main text being larger than things like "For other uses, see xy", the TOC and other parts, but to me it feels visually noisy. In my opinion, the different sizes are too similar to actually be useful, the old option feels much cleaner. Have you considered just increasing all text by the same amount? Apart from that, I appreciate the increase in general. Still hate the serif font for major headings, though, and still think we should consider serif for body text for better readability. It's just completely backwards ever since that big font update ages ago.

Username: No such user

 * 1) Menus: I most prefer option 1 (all blue), could accept option 3 (blue menu items). I'm of the old school which prefers functionality over sleek look, and blue clearly indicates there's a clickable item. I don't see much point in 2.
 * 2) Borders and backgrounds: I barely perceived any difference between the styles, so I'll pass.
 * 3) TOC active section styling: I think that any version is a vast improvement over what we have now. I slightly prefer bold (#2) over either #1 and #3 (which I don't distinguish, although my monitor has problems discerning very light colors). The last two are a tad overkill, but still acceptable.
 * 4) Logo in header: #1, by far (compact and intuitive), followed by #2. I don't like #3 at all, and #4 is a variation on #1 with oversized globe, so no.
 * 5) Link colors: Slightly prefer current scheme because of smaller contrast between blue and black, but generally meh. Agree with El Grafo above that the difference of visited links is too subtle.
 * 6) Font sizes: I prefer the old option. I also hate serif font for headings since it has been introduced, and override it in my settings. I have never grasped why we need a difference and how the mixture supposedly looks better. No such user (talk) 11:50, 10 June 2022 (UTC)

Username:Pelagic

 * Invert and dark mode – I use Apple's SmartInvert for night-time reading and editing. It makes the blue links orange, and the result no longer looks like Wikipedia's branding, but it's a small price to pay. If you aren't going to make a proper dark mode for Vector, then please, please test the design with the various dark workarounds that are out there.
 * Black-on-transparent icons become invisible when the white page is changed to black, and near-black-on-transparent are not much better. This affects both SmartInvert and custom CSS. Can we please have white outlines around the black graphics?


 * 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.
 * Logically, I think blue text should be used for elements that navigate you to another page (Discussion, History, site-nav, etc.). Conversely, black triggers are in keeping with the black icon-only triggers like the user menu (unless you plan to re-colour those to match). See my comment above about black icons, though. Subjectively, I started out thinking that I would like blue triggers, but flicking between the two, I found the black more attractive. Possibly the blue ones felt like they were blending too much with the Edit ... History tabs? [edit: As I progressed through the other demos, I found the blue triggers increasingly out-of-place and grating. Whilst I respect others who prefer for blue, I'm leaning more strongly to black.]
 * Non-bold trigger text is consistent with the tabs, but I prefer bold. When bold, they tie visually to the icons more. Both bold and non-bold look fine, preference is not strong either way.
 * For the menu-items, black vs. blue is a hard call. There is a slight wall-of-blue feeling to the Tools menu with the latter. Blue contrasts better with the grey section labels (could be fixed with a subtle bgcolor or a horizontal dividing line?). I notice in the demo that choosing black option leaves blue items in the site menu and ToC; with blue option they are all consistent. Plus the aforementioned convention of blue for links that take you away from the page. On balance of all those reasons, am leaning blue, but on pure aesthetics am undecided.
 * Adding that all together: bold black + blue. But other combos work, too.
 * Side note: the grey section headings in Tools menu don't look tappable, but they are.
 * 1) 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?
 * Demo isn't working great at tablet sizes. And borders in several styles are uncomfortably sandwiched at the page edges. I'd have to revisit this question using a bigger screen.
 * 1) 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?
 * Basic black: not enough contrast between current and other sections, it's a bit too subtle. If I visit a section by clicking/tapping on a ToC link, then that turns dark blue and is even more similar to the black. Bold is better, but possibly too strong. Background is good, it's in the Goldilocks zone between the first two, not too subtle and not too strong. Plus it doesn't feel weird when I scroll from a section to a subsection and the highlighting splits from one to two items. Line w/ border: the line distracts from indenting of subsections. Line w/ border (2): interesting hybrid. I like how the line ties together the subsections, and leads the eye to parent and following higher-level headings. Perhaps it would feel less disjointed if there was a darker blue left border on the top-level blue background, echoing the stronger black line for the current subsection. In all styles, the pivoting chevrons feel right for collapsed/expanded state.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Prefer rectangle centre or rectangle left at tablet sizes. With rectangle centre, the search icon and page title are close to their sticky-header locations, but it's still jarringly different between the regular and sticky header. Square-left logo overlaps Article / Talk tabs in tablet landscape. In tablet portrait, 1, 2, 4 all have just the wordmark and no puzzle globe.
 * 1) 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?
 * Though dark blue links are an iconic Wikimedia look, I support the proposed lighter colours for in-text links. Consider whether the links in menus could be a different shade.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * “We are proposing increasing the font size for article text from 14px to 16px.” Yes, thank you! Font size is my biggest beef with Vector.
 * Classic Vector without mods is tiny on a tablet. Waking up bleary-eyed it takes have an hour before i can bring the text into focus. If I pinch-zoom or double-tap the text to zoom on content and push the sidebar off-screen, it's just readable but still small in portrait orientation. I can also rotate to landscape, but then I lose page height and have to scroll more.
 * Note that text in the 14px demo is larger for me than that currently on French Wikipédia, why is that?

P.S. Why is the numbered list here indented more than the bullet list?

P.P.S. I appreciate the instructions overlay when first opening the demos.

Pelagic (talk) 14:12, 10 June 2022 (UTC) Updated to address font size, and minor tweaks, Pelagic (talk) 22:56, 10 June 2022 (UTC)

Reactions to others' comments
It's enlightening to see what others have written...

Pelagic (talk) 00:45, 11 June 2022 (UTC)
 * Mike Peel @ "so it's clear that you can click on it to go back to the start of that section" Wait, what? The current section is tappable, and there is a use case for this? Lacking a mouse to hover with, I never noticed that.
 * Username:RaresMateovich @ "perhaps will make the page look unbalanced (too many colors on the left side compared to the right)". Interesting point. I was using the ToC in pop-over mode. For a pinned ToC, balance and distraction are factors to consider.
 * Iritscen @ : Great to hear input from a colour-blind person. I'm re-thinking my support based on this.

Laptop
Back with a "widescreen" (shortscreen) older laptop. 1366×768, 14" – once upon a time this was considered "high definition", but it's a lot fewer physical pixels than the 9.7" high-dpi tablet. Firefox, maximised to whole screen, https://whatismyviewport.com/ reports 1354 × 602 after allowing for taskbar and browser chrome.

2. Borders and backgrounds &mdash; Now there's a scrollbar beside the pinned ToC which affects that border. Grévy's Zebra has a shorter ToC, so using that. Changing the ToC state was a bit flakey in this demo, had to refresh the page sometimes to reset. (1) Minimalist. Actually not bad at this size. Gutters are large but not enormous with ToC hidden. There is a lot of whitespace between the site header and article title (both site-header and article-container both have their own padding), and between the ToC-text and article text. (2) Article borders. Upper gradient fade is aligned with title when at page-top, but after scrolling down it's too far below the sticky header. With ToC pinned, there a double-padding on the right that creates a big space between the text and the borderline, and the border sits right nest to the window scrollbar. Thought they are only thin lines, they do break up the sea of white. Has promise with some tweaks. (3) "page title underline + TOC line". I'm confused by the name, should it be "nopage title underline..."? The full-page-width line below the tabs, and absence of any dividers above that, makes me expect that the entire top section would be sticky, but it isn't. (c.f. "freeze panes" in Excel) With ToC hidden, the line is still present when at page top, but disappears when scrolled down with sticky header. (4) As for 3, ToC line is odd when ToC not pinned. With the search box, header underline, title underline, and tabs underline, there are a lot of parallel horizontals at the top of the page. (5) combines misplaced gradient of 2 with parallel lines of 4. (6) Header bg. Is okay, but when I scroll up the sticky header is still white not grey. (7) Header bg gradient. Makes the white search box too prominent. (8) Not a fan. (9) outside article background (solid) This is my favourite. Unifies the sides and top. Focuses attention on the article and provides visual relief from wall of white.

3. Logo in the header . The large square logo is such an iconic feature of many MediaWiki-powered sites including Wikimedia ones. Square left looks good with ToC pinned and sufficient window width. The top end of the ToC scrollbar is standing uncapped. When the ToC is unpinned, the logo overlaps the text. I like how it transforms to rectangle left, when the window narrows; need a different breakpoint for this transition with user-unpinned ToC. Logo centre has merits: separation of logo from page title, and of search boc from address bar. Not a fan of gradient.

6. Font size. 14px looks fine, and a bit dubious about 16px, on this screen at normal viewing distance. This is different to my impression on a high-dpi tablet (above). I might still prefer 16px where there is full-width text and no infobox or image. Is  virtual pixels even a good way to specify font sizes across disparate device types?

Pelagic (talk) 03:54, 11 June 2022 (UTC)

TLDR summary
Pelagic (talk) 06:01, 11 June 2022 (UTC)
 * 1) Menus — bold black triggers with blue contents. Because blue links should navigate to another page, and for visual consistency with other black UI elements.
 * 2) Borders and backgrounds — outside article solid, article border with tweaks, or minimalist, in that pref. order.
 * 3) Active section in the table of contents — hybrid, background, or bold, in that pref. order.
 * 4) Logo in the header — big square when ToC pinned and wide window, adjusting responsively to rectangle left when less room. Because brand recognition, and to use the space when it's available.
 * 5) Link colors — research or consult with groups of various visual ability.  Consider different shades for menus because in that context you don't need links to stand out from surrounding text.
 * 6) Font size — depends on client device. Consider the needs of tablet users, and of editors and community participants as well as readers.
 * 7) Dark mode  — test designs with a variety of dark hacks that are out there. Because dark mode is one of the most requested reading features, and it can be considered an assistive technology.

Username:Qwerfjkl

 * 1) Menus — option 1, as it fits in with the other buttons and stands out as a link
 * 2) Borders and backgrounds — option 1
 * 3) Active section in the table of contents — 1/2, not a particularly strong opinion either way
 * 4) Logo in the header — option 1, gives a bigger search bar on my tablet, less obtrusive

Username:Mike Peel

 * 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.
 * Option 1 is by far the best. Since these are links, it's essential to show that they are links - which is normally done by them appearing in blue. If they are black, I think it's less likely people will click on them. I'm neutral with bold vs. not bold, I think it looks OK either way.
 * 1) 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?
 * It's weird seeing the TOC in the side-bar location, I don't like that. Of the different options, I think I prefer #9, since I like the article highlighting that the solid background gives, but it's still not quite right. TBH I think the status quo is the best option of these.
 * 1) 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?
 * Option 2 - bold looks better, but it shouldn't change colour to black, it should stay the same as the link colour so it's clear that you can click on it to go back to the start of that section.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 2 - square - looks the best of these to me. I particularly dislike the gradient since it distorts the logo. Status quo would be better than all of these options though.
 * 1) 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?
 * Either is equally fine.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * Please, just leave this up to the user to define by zooming in/out/resizing their window as needed - both with the font size and with the page width. I also think it's better if the sidebar and the main article text are the same size, otherwise it's confusing. Thanks. Mike Peel (talk) 16:47, 10 June 2022 (UTC)

Username:Eevee01

 * 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.
 * Option 3 + bold
 * 1) 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?
 * Option 7
 * 1) 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?
 * Option 3: It looks better.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Option 4: I like the location of the "main menu" and the length and location of the search bar.
 * 1) 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?
 * Proposed color
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * Current font size

Username:Terasail

 * 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.
 * 3 & Bold menu triggers: Links sending you to another page should be blue, in line with all other links in Wikipedia, menu triggers should be black since they will not change what the reader is looking at. Bold menu triggers since it is better and differentiates them.
 * 1) 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?
 * 6 & 7: since they provide visual seperation from the top bar (Which is not linked to the article) from the article. Also having the article border is good to seperate the contents and tools (The tools overlap the line and would be better to be on the other side of the line like the contents).
 * 1) 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?
 * 2: It is the clearest marker of where you are in the TOC. The line provides nothing (It is too thin and just over-engineered), the background colour box does not look good. Bold over just black as it is much clearer.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * 4 with no gradient: I don't like the way Option 2 has "Main menu" selector over the icon, it appears as if its connected to the TOC. Option 3 is a really bad idea, it moves the search to the side, in line with old vector making search appear as more of an after though as it is in vector rather than a useful main feature. Option 1 leaves a lot of blank space that can be used with the tools on the other side.
 * 1) 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?
 * Proposed colour is good
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * 16px: Works well for me with a larger font, I don't feel it is a major or an important point of change though.

Username:be_an_adult

 * 1) Menus — I prefer option 1 as the blue text has an implied meaning in web design, that the text is interactable in some way. Without that change I feel it would be easy to misunderstand the text.
 * 2) Borders and backgrounds — I prefer option 9 as it helps break up the article and feel less like the sides are wasted space.
 * 3) Active section in the table of contents — I like both option 1 and option 5, option 1 gives you the information unobtrusively and option 5 helps you see that subsections are actually subsections.
 * 4) Logo in the header — I easily prefer option 1, it seems very professional and has a more modern feel than option 2, which seems like a throwback to earlier days of Wikipedia.
 * 5) Link colors — The two colours seem even closer in the proposed update, I'd personally prefer more contrast between visited and unvisited links.
 * 6) Font size — I prefer the density of the current font size, but I feel that if the font size could be a user-selected option that might be preferred.

Username:Devin.halsted

 * 1) Menus — I like option 3) with bold text the most. I think the menu will blend better with the rest of the headline if its black (also when scrolling down) and the blue links will imply that it will take the user to a different page. The bold text + the arrow makes it clear that it is clickable.
 * 2) Borders and backgrounds — I like 2) the most here. The minimalistic white looks good as is (also better for taking screenshots without the background color). The Side borders frame the article nicely and you know where to focus immediately.
 * 3) Active section in the table of contents — I like 2) here as well. Bold is enough to signify clearly where you are (although I think a mix between bold and 5) would be nice too). The other designs are nice but don't really feel like Wikipedia to me (are those design elements used anywhere else?)
 * 4) Logo in the header — I like 2) the most. Makes the left side less empty and is a throwback to the old wikipedia skins, which I like!
 * 5) Link colors — 2) the new proposed colors does make it easier to see, so why not!
 * 6) Font size — I prefer 2) 16 px. I always have wikipedia zoomed in by 10% anyway. Makes it way more comfortable to read large amounts of text.

Username: Matthew T Rader

 * 1) Menus — 3) black (menu triggers), blue (menu items) Bolded looks best. I prefer to reserve the blue for links that will take you to another page/section, whereas the menus do not bring you to another place when opening them. The difference in color and font weight helps make that distinction clear.
 * 2) Borders and backgrounds — 3) page title underline + TOC line with header bg (solid) would look great, very clean and minimal with some nice separation.
 * 3) Active section in the table of contents — 2) bold, it's simple and elegant
 * 4) Logo in the header — 3) rectangle, center looks great it makes the header feel more spacious and the search is easily accessible but not cluttering up the header. To make it even cleaner, you could make the search bar hidden and open when the search glass is clicked. That design will also work well for mobile.
 * 5) Link colors —Current colors look much better because the contrast between the black text and blue text look more balanced, the proposed color is too light beside the black text and makes me strain my eyes a bit. But, if you made the black text #333333 along with the proposed color, I think that would be most ideal.
 * 6) Font size — 16px, I have great eyesight and I still prefer the bigger font, it's definitely a more accessible and it's a bit easier to read for longer periods of time on a screen.

Username:Khairul hazim

 * 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.
 * I love everything. It looks better. The "tools" menu looks neat, better in "move to sidebar" mode.
 * 1) 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?
 * I prefer number 6 and 7, probably because of my preference. Number 3 looks horrible.
 * 1) 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?
 * I prefer number 2 and 4.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * Number 2 looks neat, but it's closer to the previous Vector look. Didn't notice the three bars icon in this option. Number 3 seems distracting because the logo is in the top. Number 4 seems better than number 2 in my opinion but it takes up a lot of space.
 * 1) 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?
 * No comment.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I prefer 12px. Legible to my eyes.

Username: Mitch Ames

 * 1) Menus - (1) blue, not bold. The menu trigger and menu items are clickable links - they should look like clickable links. So strictly speaking they should not be "blue", but rather "whatever colour my browser is configured to show links in".
 * 2) Borders and backgrounds - NOT gradient. Borders/background might add some functionality, but gradients are just annoying with no functionality
 * 3) Active section in the table of contents - (3) Background
 * 4) Logo in the header - (1) rectangle left, because it is small (square is too big, and I definitely don't like gradient) and the search box aligns vertically with the article text, which looks neater.
 * 5) Link colors - These should be displayed in whatever colours my browser is configured to display them in.
 * 6) Font size - 14, because then there's more information on the screen, and I need to scroll less. Admittedly my monitor is relatively old and has a larger pixel size (.282mm) than modern monitors. Ideally font size would be user configurable.

Username:Pseudomugil
For some context: I'm not a designer, but have some interest in design, and particularly in terms of accessibility. I've only looked at the proposals from my desktop (24" screen).


 * 1) Menus —  Black/blue/bold would be my preference (blue/blue/bold coming in second); blue menu triggers generally indicate to me that the link might take you to a new page (although the down arrows reduce the chance of confusion annyway), and black menu items look too much like text (rather than links).
 * 2) Borders and backgrounds —I'm leaning towards #6. Minimalist (without borders) definitely sends my eyes everywhere and they're not quite focused on the article. #3 is my least favourite and feels like the headings (Zebra/article/talk/etc) are going to be a frozen pane (staying in view while scrolling the article) for some reason. The gradient options feel very 2010s. Although #9 is definitely my second preference, the contrast between sidebar links & background is too low for me.
 * 3) Active section in the table of contents — definitely #4. It's the easiest to follow, whilst being less distracting than #2. The plain black is too subtle for me to keep track, and aesthetically I'm not a fan of the backgrounds. The border also helps indicate what the sidebar actually is (when I first saw the sidebar a while ago, I was initially confused by what I was looking at).
 * 4) Logo in the header — #1. The three bars are fairly recognisable as being the main menu, whereas the #2 menu trigger actually looks like it could be a part of the article itself. #3 is a definite no — it's a distracting and strange layout. I'm personally not a fan of the aesthetics of the gradient. #2 would be my second preference.
 * 5) Link colors — This is a bit tricky, as I personally find the #3366CC to be too light against the background. The same shade can still go down to #2B56AB while passing WCAG link requirements (and nears on meeting WCAG AAA for normal text at 6.94:1) — #3366CC is also harder to read against greys e.g. the sidebar background in option #9 (question 2). I definitely appreciate differentiating the colours of visited & unvisited sites rather than the old dark blue, although the purple is still too low a contrast against the background for me (personally). A richer purple like #8F3295 can still achieve the contrast requirements against body text, differentiate itself from unvisited links, and has a better contrast ratio against the background (6.86:1 vs 5.26:1). #104FCB would meet link to body text WCAG A requirements, almost meet WCAG AAA for body text (6.99:1, easier to read against white than the proposed #3366CC of 5.36:1), and has a much better contrast against, say, #8F3295 when simulated for various forms of colour blindness, particularly for people with protanopia (red-blind) e.g. in the image simulated from Brettel 1997(using https://daltonlens.org/colorblindness-simulator). It's still not as easy for protanopes to differentiate compared to the current colours, but it's better than the proposed colours. Definitely would need to be checked against multiple colour blind users, however. Protanopia simulated colours.png
 * 6) Font size — 100% approve of this. I currently have my font size set to 22 anyway, but at 16px I only have to zoom each page by 125%, rather than 150% (pages in general IME are more likely to break the more I have to zoom in to read them, although wiki's site is relatively responsive anyway).

Username:Evil Sith Lord

 * 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.
 * I prefer option 1 with bold triggers. The color blue is widely used for clickable links and items all over the internet, so the blue triggers and items will be immediately recognized as being clickable. Having the triggers be bold helps them stand out on a page already full of blue links.
 * 1) 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?
 * I prefer option 6. It strikes me as neither too much nor too little. The solid background behind the top helps to separate it from the rest of the page a bit, and the border between the table of contents and the article but not all the way to the top feels aesthetically pleasing. All of the other options have something off about them. They feel too simple (options 1 and 2), too geometric from the 90° angle (options 3 and 4), or somewhat distracting (options 8 and 9). I don't mind option 5 that much, but I prefer option 6 because of the slight contrast from the background. Option 7 feels like it's barely there.
 * 1) 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?
 * I prefer option 2 much more than any of the others. It stands out very well and makes it immediately obvious which section I'm in.
 * 1) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Which option do you prefer and why?
 * I prefer option 2. It prominently features the logo in the same location that it's currently at in desktop view. I also like how it specifies that the menu you can open is the main menu. I strongly object to option 4 because the gradient logo looks very strange and it almost seems like it rebrands Wikipedia to have a different logo.
 * 1) 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?
 * I think it's fine, but I'm no expert when it comes to accessibility.
 * 1) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Do you have any concerns with the proposed font size?
 * I think it's fine and a very minimal change. But like I said before, I'm no expert when it comes to accessibility.