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

Username:FrederiqueDube

Menus — 1
- Le déclencheur du menu et les éléments du menu doivent avoir une couleur qui diffère de celle du texte courant. La couleur bleue est souvent associée aux hyperliens, c’est un indice visuel bien connu par les internautes qui signifie que l’on a affaire à un élément cliquable.
Fonds et contours — 1
- Cette option respecte l’idée d’un design minimaliste. L’alignement des éléments du menu de l’en-tête suffit à comprendre que c’est bel et bien un en-tête. Mais ce qui me fait pencher le plus pour cette option, c’est que le sommaire n’est pas séparé de l’article. Lorsque l’article a des contours ou lorsqu’il y a un fond, on a l’impression que la colonne de gauche, c’est un menu, alors que c’est le sommaire de l’article – sommaire et article étant selon moi indissociables.
Section active dans le Sommaire — 1 ou 4
- L’option 1 est épurée. Peu d’effets visuels, le minimum pour comprendre quelle section est active et quelles sections se développent. Ce que j’aime de l’option 4, c’est que la ligne de gauche nous fait comprendre que ce bloc (sommaire) fait corps avec l’article.
- Je me demande si le Sommaire peut être dans la colonne de droite plutôt que dans celle de gauche. C’est que dans les conventions du web, la colonne de gauche est parfois utilisée pour un menu secondaire. On pourrait croire que le bloc Sommaire est le menu secondaire de Wikipédia, alors qu’il est le sommaire de l’article qui est au centre. Bref, l’article pourrait être davantage poussé vers la gauche et le sommaire à droite.
- Autre observation : le titre Sommaire est très petit, pale, peu visible, il n’a pas de contour comme les autres titres. Cela nuit à comprendre ce qu’est ce bloc.
Logo dans l'entête — 1
- L’option 1 est quant à moi la seule option qui tient la route. Elle est alignée avec le reste des éléments de l’en-tête et elle présente le menu (outils). Les options 2 et 4 accentuent l’impression que le sommaire ne fait pas partie de l’article, l’option 3 ne respecte pas les conventions du web qui privilégie le logo à gauche.
Couleurs des liens — 2 couleurs des liens proposées
- Les couleurs des liens proposées ne varient pas trop de celles que l’on a actuellement et si cela permet de respecter les contrastes WCAG, aussi bien changer tout de suite. De plus, cela rend plus lisible les liens visités (couleur moins similaire à celle du texte normal).
Taille de police — 16px
- Ah oui! Excellente idée de passer à 16px. Si l’on met le sommaire à droite et que l’on aligne davantage à gauche l’article, on vient d’améliorer énormément la navigabilité. Tout est repérable facilement.

FrederiqueDube (talk) 16:02, 20 July 2022 (UTC)[reply]

Username:Duchampignon

Menus — 1 (ou à la rigueur 3)
- Les éléments du menu sont des liens qui mènent sur une autre page, il doivent absolument rester en bleu. Les déclencheurs sont aussi cliquables, c’est bien qu’ils restent aussi bleus.
- The menu items are links to another page, they absolutely must remain blue. Triggers are also clickable, so it's good that they stay blue too.
Fonds et contours — 9
- Permet de différencier clairement l’article sans surcharge.
- Allows the article to be clearly differentiated without visual overload.
Section active dans le Sommaire — 5
- C’est la seule option qui permet de comprendre qu’il s’agit d’une arborescence. Les autres menus sont très perturbants et on ne comprend pas qu’il s’agit d’un sommaire. À mon avis, même l’option 5, qui est la moins pire, n’est pas assez claire.
- This is the only option that makes it clear that it is a tree structure. The other menus are very confusing and you don't understand that it is a summary. In my opinion, even option 5, which is the least worst, is not clear enough.
Logo dans l'entête — 3, 2 ou 1
- Le 3 sans dégradé (comme dans le skin Timeless) serait bien aussi
- Option 3 without gradient (as in the Timeless skin) would be good too
Couleurs des liens — 1 (ou à la rigueur 2)
- Les liens ont tendance à me déconcentrer mais pour l’accessibilité mieux vaut quelque chose de plus lisible, surtout les liens déjà visités qui sont quasiment noirs.
- The links tend to distract me but for accessibility it's better to have something more readable, especially the already visited links which are almost black.
Taille de police — 16px
- Sans hésitation. C’est le plus gros problème d’apparence des wikis selon moi.
- Without hesitation. This is the biggest problem with the appearance of wikis in my opinion.

Duchampignon (talk) 20:24, 1 July 2022 (UTC)[reply]

Username:Flouille

Menus - 1 looks good, since everything is clickable
Borders and backgrounds - 6, 7 and 8 all look fine
Active section in the table of contents - 2 or 4
Logos - 2 or 4 as well
Link colors - the new colors are indeed better

Username:Doalo10

Menus — 3/ Il est parfait, car il permet de différencier les menus (qui pourront être noir) d'autres boutons (qui sont bleus) puis quand on clique de savoir que c'est un bouton parce qu'il est bleu.
Fonds et contours — 9/ Il permet de rester concentré sur l'article et donc de le différencier de l'interface.
Section active dans le Sommaire - 4/ Il permet de savoir que c'est le Sommaire avec sa forme de liste et non de simples liens.
Logo dans l'entête — 1/ Le meilleur de tous, les autres ont tous un logo trop gros (et le 3/ est peu visible).
Couleurs des liens — J'aime bien les nouvelles couleurs.
Taille de police — 16px/ Parfait pour lire (en ne laissant pas trop de blanc sur les côtés).

Username:Ibuprofène Véracétacoule

FR : J'aimerais vraiment que le choix du langage soit rétabli sur le côté comme avant, au lieu d'être caché dans un menu. L'ouverture de ce menu m'embête vraiment, je change souvent de langage.

EN : I really want the languages to be back on the side, instead of being hidden inside a menu. I change a lot between languages and this additionnal click is really annoying.

Menus — 2
Borders and backgrounds — 9
Active section in the table of contents — 5
Logo in the header — 2
Link colors — I like the proposed colors
Font size — 14px

Username:Nicolas sénéchal

FR : Utilisent le skin nouvelle génération de vector, j'ai remarqué un seul défaut, sur les pages de discussion longue/ édition , l'entête de recherche de suis pas l'entête ou de retour chariot qui apparaît c'est impeu frustrant de tout remonté. exemple Extension talk:Gadgets - MediaWiki

EN : I use the new skin generation vector, and I notice only one bad point. In the edition of an article or in reading a long talk, the user tool and the search don't follow or there no button to go to the start of the article. So it's a bit frustrating to roll up. exemple Extension talk:Gadgets - MediaWiki

Menus — 1
Borders and backgrounds — 9
Active section in the table of contents — 4 we know where we hare in the article I like it
Logo in the header — 1
Link colors — 1 or 2
Font size — 1

Username:Mxa.rn

✅ feedback recorded

Menus — #3 is perfect, the menu stays discreet, but the language choice call to action once you opened the menu.
Borders and backgrounds — #9 is excellent because you are focused on the article and not on the interface, however #1 looks better. #3 isn't good, the tittle is separated from its article.
Active section in the table of contents — I prefer #3, it stays minimalist, but we understand better where we are. #4 looks more modern. Bold attracts our attention too much.
Logo in the header — #1 is better. in #4 , the image is too big and take over the article pictures. otherwise, centered elements break the balance of the page.
Link colors — the new colors are better , but I think you'll have to update the other colors to match with these.
Font size — 16px is nicer, there is also less white space on the right wich is good

Username:Hb1290

✅ feedback recorded

Menus — #3 with bolding. Black menu triggers look way nicer (especially bolded), blue menu items emphasise clickability and allow you to keep track of where you've already been.
Borders and backgrounds —#9. Having the grey outside the article field breaks up the white, helps you focus on the text more and makes the whole thing easier to look at.
Active section in the table of contents — After some thinking and several chenges of mind, I'm going with #5. It's intuitive, clear and looks nice too.
Logo in the header — #1 is my first choice. However, I would prefer to see the search bar centered. I wuld also accept #3. Strongly opposed to either of the square options because they don't work at all in this layout (especially #4).
Link colors — Happy to go with the proposed changes.
Font size — 16px is definitely a nicer size to read.

Username:Pronoia

✅ feedback recorded

Menus — #2 seems good.
Borders and backgrounds —I like #5 and #6.
Active section in the table of contents — I prefer #2 (bold). It's the most visible option.
Logo in the header — #1 is the best solution. The other logos are too big. We are losing space. The research toolbar is less visible on the left. It's better in the center.
Link colors — Current colors are better.
Font size — The both are OK when I'm on computer. I'll realize additional tests later with a mobile phone.

Username:ShapeOfMatter

✅ feedback recorded

Menus — I think #2 (blue triggers, black items) without bolding is the best option, but I don't feel confident.
Borders and backgrounds — I do not like #3 (page title & TOC) or #4 (TOC & header); they're not a kind of old-school that speaks to me. #5 (article & header) is my favorite. #2 (article only) is also good.
Active section in the table of contents — I think #1 (black) and #4 (line w/ border) are too subtle. #2 (bold) feels unsatisfying, IDK why. #3 (background) is ugly but effective; I think with some tweaking it could be the best. #5 (line w/ border 2) feels nice to me; a pleasant balance between clarity and subtly.
Logo in the header — I like #1 (rectangle, left) because it emphasizes the contents of the page. I do not like #3 (rectangle, center). #4 (square, left, gradient) is pretty, emphasizes the branding, and would be an ok choice.
Link colors — This is slightly more distinct from the un-visited link color, but also slightly harder to read. Maybe something in the neighborhood of #80004e?
Font size — I'm ambivalent about this because I'm used to zooming pages on any site so that it's comfortable to read. Sometimes I zoom Wikipedia in, which suggests the proposed larger font is better :)

Username:Nick_Karlovich

✅ feedback recorded

Menus —Option 3) Black (menu triggers), blue (menu items): With Bold, bold distinguishes that it is something to click, but making it blue makes it seem like a link when it's not.
Borders and backgrounds — Option 9) Most of the other options have too much white and everything just blends together. Having a solid distinct background and foreground where the information lies I believe is better than the other options.
Active section in the table of contents — Option 5) line w/border. It's just very clear as to where you are located and the vertical line (in my mind) better displays how you can travel up and down the page, rather than just a simple highlight.
Logo in the header — Option 2) square, left: I strongly prefer the bigger square logo. option 1 would work if it also appeared in the bar when you scrolled down but it feels oddly disconnected when I start to scroll and the logo doesn't come with, same with option 3, but option 3 (centered) is just weird. option 4 is not good imo. The gradient does nothing and only makes it more distracting.
Link colors — Both? and Neither?: I like the current blue color, as making it lighter just makes it harder to read on the white background. But I like the proposed already visited purple color better than the current option, as the current option isn't purple enough.
Font size — 16 px (proposed) is way easier to read, but only if headings are scaled as well, because otherwise the headings blend into the text.

Username:Maxwxyz

✅ feedback recorded

Menus —Option 1) blue (menu triggers), blue (menu items): Visual aid that the menu and all the items are clickable.
Borders and backgrounds — Option 2) article borders: Very simple and minimal approach, clearly frames the article without annoying features like solid/gradient fills and boarders.
Active section in the table of contents — Option 2) bold: Very clear on a large and nested table of content. I like the line in option 5 (the boarder) in the nested items to highlight the hierarchy better!
Logo in the header — Option 2) square, left: I strongly prefer the bigger square logo. Maybe a tough smaller so the table of contents starts at the first line of the article text. I do like the hamburger menu from option 1 as the main menu on option 2 is not appealing and can be confused with the table of contents! The small rectangle is not necessary as no logo is shown when scrolling down.
Link colors — Proposed colors: Better differentiation between text and links and already visited links. The links are now more visible but on sites with many links the optical flow is better with the current color as it is more similar to the black text.
Font size — 16 px (proposed) is way better to read the content. The headings must be increased too as they are now too similar to the bigger text!

Username:Msagredo93

✅ feedback recorded

Menus - Option 1, blue on blue. It's easier to identify as clickable. It should also use bold styling.
Borders and backgrounds - Option 9, outside article. Makes clearer which area of the screen corresponds to the article itself.
Active section in the table of contents - Option 4, line with borders. It's the only one that makes evident that this is the table of contents and not the old site links, also serves to follow the length of the article.
Logo in the header - Option 2, square logo left. I'm personally more favourable to option 4, but I think there's a risk of confusion if something as identifiable as the position of the logo gets changed.
Link colours - Option 2. Guidelines are guidelines, even if some amount of contrast with the background is lost at small font sizes.
Font size - Option 2, 16 px. It's much clearer, specially with the recent trend of high resolution screens even at small sizes. Headings should follow the resizing proportionally.

Username:NatKingCrosby

✅ feedback recorded

Menus —Option 1) blue (menu triggers), blue (menu items): I do enjoy the colour blue being a representation for some form of change to what you're seeing, wether it is a new page completely or just a change of language, makes it very easy for the brain to navigate the website.
Borders and backgrounds — Option 2) article borders: the useful, but very subtle framing is perfect in my opinion.
Active section in the table of contents — Option 1) black: I think the bland/minimalist approach is key. It shouldn't have too much information going on to pull the eye away from the article as one scrolls through it. It should only establish itself when one actively looks at it, which option 1 does perfectly.
Logo in the header — Option 1) rectangle, left: I do actually enjoy the large logo taking up some space in the corner, however I strongly prefer the menu button in option 1 and it's not like the logo disappears.
Link colors — Proposed colors: I do prefer the darker blue personally (might be my screen as well), but the proposed colour for an article already read is miles ahead of the current one.
Font size — Incredibly subjective, I prefer 14p and if one desires a larger font, then using the browser's zoom in function is usually adequate, the zoom out is less reliable. I do think this is something that could be a website option so people can choose. Some people will read 14x better and some 16x better. It's a bland answer, but I think the option to choose is the most inclusive.

Username:TheRealSerenaJoy

✅ feedback recorded

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

✅ feedback recorded

Menus — I like option 4 the most. Use black more often so that readers don't perceive blue as Wikipedia's theme color. Update: I now prefer uption 3, both bold and not bold. I think the language links should be blue
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:Bbn 1998

⚠️ confused by this reply...the various responses seem to be copy & pasted from other responses on this page, ShapeOfMatter, NatKingCrosby, and Geraki]

Menus — Option 4, black trigger, black items
Borders and backgrounds — #5 (article & header) is my favorite. #2 (article only) is also good.
Active section in the table of contents — I think #1 (black) and #4 (line w/ border) are too subtle. #2 (bold) feels unsatisfying, IDK why. #3 (background) is ugly but effective; I think with some tweaking it could be the best. #5 (line w/ border 2) feels nice to me; a pleasant balance between clarity and subtly.
Logo in the header — IIt 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.
Link colors — I do prefer the darker blue personally.
Font size — I prefer the current font size which is better for long texts. If you do implement the proposed, keep the 960px max-width.

Username:.huepow

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

Username:Johnson524

✅ feedback recorded

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:

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

Username:Phoenix1494

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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:

Firefox rendering the language menu.

...
Borders and backgrounds — Option 7. I really liked the header with the gradient. It just made the overall page look very modernistic.
...
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.
...
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.
...
Link colors — Keep it. The proposed colors make it way harder to see on the page.
...
Font size — I like both of them the same. Keep both, and have an option at the top to change it.
...

Username:Bebiezaza

✅ feedback recorded

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
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.
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. :)
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
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
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

✅ feedback recorded

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.
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", "2) article borders" or "9) outside article background (solid)"; because the boundary between the article and the allways-shown elements is clearer.
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".
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.
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".
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)".

I also still have the suggestions that I have written at Reading/Web/Desktop Improvements/Fourth prototype testing/Feedback#Username:NGC 54 --NGC 54 (talk | contribs) 15:41, 9 June 2022 (UTC)[reply]

Username:Simeon

✅ feedback recorded

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

✅ feedback recorded

Menus — No strong preference but the menu items in the search menu and the user menu must be black.
Borders and backgrounds — 1 or 9
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.
Logo in the header — 1 or 3. 2 also looks nice but wastes space.
Link colors — don't care.
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)[reply]

Username:Iritscen

✅ feedback recorded

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)[reply]

Username:(a)lizadoolittle

✅ feedback recorded

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

✅ feedback recorded

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

Geraki (talk) 16:58, 9 June 2022 (UTC)[reply]

Username:RH Swearengin

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

Username: Certes

✅ feedback recorded

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

✅ feedback recorded

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.
Borders and backgrounds — I prefer 9. It's clean and avoids too many lines.
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.
Logo in the header — Definitely 1. The logo doesn't need any more emphasis/space.
Link colors — Looks good to me. It's a lot better for non-colorblind users as well.
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

✅ feedback recorded

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.
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.
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.
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?).
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.
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

✅ feedback recorded

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

✅ feedback recorded

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

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.

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

Username:Cumberhache

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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

——————————————————————————

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?

No; I don't care for the minimalist style, too bare, lacks of aids to focus, I need more visual structure
No; I like it, but not as much as 4 and 6 and 9
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
No; I like this layout, but not as much as the two-color layout
No; do not like the article title sort of merging, or sharing the same area, with the left sidebar
No; good, but second color needs to cover more of the page, as it does in 9
No; no gradients, I don't like gradients; this is an encyclopedia, it's not a place for subtlety
No; no gradients, I don't like gradients; gradients are unencyclopedic in tone
Yes; the best and my favorite

——————————————————————————

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?

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

——————————————————————————

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?

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

——————————————————————————

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; colors are far too difficult to tell apart
Yes; good contrast of different types of text in the varying colors

——————————————————————————

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

Yes; current
No; too big

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

Username:Yngvadottir

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

✅ feedback recorded

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.
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
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.
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
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
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)[reply]

Username:DrowssapSMM

✅ feedback recorded

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

✅ feedback recorded

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?
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)
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
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?
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!
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

✅ feedback recorded

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.
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.
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.
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.
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.
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)[reply]

Username:JoshuaHoschke

✅ feedback recorded

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.
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.
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.
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.
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.
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:Retswerb

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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.
Borders and backgrounds: I barely perceived any difference between the styles, so I'll pass.
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.
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.
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.
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)[reply]

Username:Pelagic

✅ feedback recorded

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?

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.
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.
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.
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.
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.
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)[reply]
Updated to address font size, and minor tweaks, Pelagic (talk) 22:56, 10 June 2022 (UTC)[reply]

Reactions to others' comments

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

Mike Peel @ #Username: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 @ #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 @ #Username:Iritscen: Great to hear input from a colour-blind person. I'm re-thinking my support based on this.

Pelagic (talk) 00:45, 11 June 2022 (UTC)[reply]

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.

Details...

2. Borders and backgrounds — 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 px virtual pixels even a good way to specify font sizes across disparate device types?

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

TLDR summary

Menus — bold black triggers with blue contents. Because blue links should navigate to another page, and for visual consistency with other black UI elements.
Borders and backgrounds — outside article solid, article border with tweaks, or minimalist, in that pref. order.
Active section in the table of contents — hybrid, background, or bold, in that pref. order.
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.
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.
Font size — depends on client device. Consider the needs of tablet users, and of editors and community participants as well as readers.
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.

Pelagic (talk) 06:01, 11 June 2022 (UTC)[reply]

Username:Qwerfjkl

✅ feedback recorded

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

Username:Mike Peel

✅ feedback recorded

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.
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.
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.
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.
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.
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)[reply]

Username:Eevee01

✅ feedback recorded

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

✅ feedback recorded

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

✅ feedback recorded

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.
Borders and backgrounds — I prefer option 9 as it helps break up the article and feel less like the sides are wasted space.
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.
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.
Link colors — The two colours seem even closer in the proposed update, I'd personally prefer more contrast between visited and unvisited links.
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

✅ feedback recorded

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.
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.
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?)
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!
Link colors — 2) the new proposed colors does make it easier to see, so why not!
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

✅ feedback recorded

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.
Borders and backgrounds — 3) page title underline + TOC line with header bg (solid) would look great, very clean and minimal with some nice separation.
Active section in the table of contents — 2) bold, it's simple and elegant
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.
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.
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

✅ feedback recorded

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

✅ feedback recorded

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".
Borders and backgrounds - NOT gradient. Borders/background might add some functionality, but gradients are just annoying with no functionality
Active section in the table of contents - (3) Background
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.
Link colors - These should be displayed in whatever colours my browser is configured to display them in.
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

✅ feedback recorded

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

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

✅ feedback recorded

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

Username: Bernanke's Crossbow

✅ feedback recorded

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 for both triggers and options, bolded for triggers. Black is the internet standard for "dumb text", so don't make the the options and menus black. Blue makes sense for the options, because they're hyperlinks to other pages. I don't have a strong preference that triggers should be blue, but that's the non-black option, and bolding helps distinguish them from regular hyperlinks.
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 ("article borders + header bg (gradient)"). The TOC is part of the navigation apparatus, not the article, so it should flow into the header at top naturally (i.e., no line should divide the two). The gradient is just cool and stylish; I don't have a deep reason for why I like it.

I think I would ordinarily very much like option 9 ("outside article background (solid)") because I like large, strong margins on screen when using a desktop/laptop — I prefer it when the aesthetics emulate print. But the color change to indicate margins is almost invisible on my screen. Make it darker and my preference would switch.
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?
Black and bold. That's how Wikipedia currently represents "a hyperlink would be here, but you're already at the destination" in article body text; the navigation tools outside the article body should be consistent. Everything else is trying to reinvent the wheel, and doing it in the most ugly manner (although I can't figure out why it's ugly.)
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", by process of elimination. Hamburger is much better than a "Main Menu" dropdown, so that knocks out "Square, left." "Rectangle, center" is weird — I can't think of a single other site that puts a search box left of its logo (not even search engines like Google or DuckDuckGo). And "square, left (gradient)" makes it really hard to see the full logo, which is one of my internet pet peeves. If you have a logo, have the confidence to display it in full!
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 new colors make visited links look grayed-out, which I associate with "unavailable." Is it possible to darken them, so that their saturation is the same as non-link text? (I have the same problem with visited redlinks in the current color scheme, but it's probably too late on that.)
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 14px. The larger font size feels like the site was optimized for mobile, and doesn't know to shrink on my desktop. In general, smaller font sizes are better as long as they aren't harder to read, since they fit more information on-screen without forcing me to scroll. 14px doesn't feel hard to read the way 12px does, but 16px makes my eyes feel like they can't move fast enough to keep up with my mind.

Username:FeRDNYC

✅ feedback recorded

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.
- General question: Why are black and blue the only options being considered? A page like Brown bear is already so riddled with wikilinks that using blue for menu triggers/items just feels like it adds to the visual clutter. But black, OTOH, tends to get lost in the noise of an already content-dense page. Introducing a third color for "site chrome" accents/links (to deliberately set them apart from content links) could be exactly what's needed.
- Specific reactions to the options presented...
  1. Blue menu triggers are probably preferable to black, since they match the link coloring for the page tabs and actions.
  2. Blue menu items, OTOH, just feel like piling on to the point of overkill, when the article is already festooned with all manner of blue text.
  3. Black menu triggers feel too... "static"; the small img-down-black.svg arrow isn't sufficient to make them obviously interactive at a glance. Perhaps with a shaded background or other type of additional highlighting, black trigger text could work.
  4. Black menu items look super wrong. I finally realized it's because they're darker/heavier than their own section headings, in the menus with sections. That alone makes the whole thing feel like a giant priority inversion.
  - I do strongly prefer the menu triggers bolded, though. In either color.
- Stray Observation: I know it wasn't part of the exercise, but the collapsible sections inside the Tools menu are just confusing. Especially because clicking one dismisses the menu, which just makes the whole interaction feel broken. If that were fixed... well, I'm still not sure I'd see the point of them being collapsible, but it'd make them not so distractingly unusable, at least.
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?
- Specific notes:
1. Minimalist design is minimalist.
2. The pointless border on the right side of the page looks, IMHO, stupid. The one between the TOC sidebar and the content, OTOH, I kind of like.
3. Nope. Too blocky/boxy.
4. Ditto.
5. The header underline just feels gratuitous. It's unnecessary noise.
6. Probably a little #TOOSUBTLE on the background shading, I feel like I'm squinting to even discern it, so I can react to it.
7. Again, gratuitous.
8. Like 6, but also subtly bad. Its main function is to slightly reduce the contrast on the TOC content, which isn't doing anyone any favors. (Again, why is a shade of (slightly-greenish) blue — the worst choice for a background color to place behind lots of blue text — the only option considered?)
9. KILL IT WITH FIRE.
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?
Specific reactions:
1. Another #TOOSUBTLE, it's so easy to miss that it doesn't actually feel helpful at all.
2. The bold version, though, I quite like! It makes all the difference.
3. Another KILL IT WITH FIRE.
4. Not bad, but having the two highlights detach from each other when reading a subsection other than X.1 feels a bit "off". Slightly moreso than with the other types of highlighting, for reasons I can't really articulate.
5. I actually think this could also look really good, if the top-level highlighting used the bold styling from #2 instead of that crap KILL-IT-WITH-FIRE shading from #3.
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 1, because: 2 places "Main menu" in a text link underneath, which is clunky; 3 makes the site logo far too much of a focal point on the page, which it shouldn't be; and 4 has the menu popup cover the globe logo, which feels messy. But on all of these, the logo should link to the main page, rather than the Main Page link in the menu being the only option to get there. A site logo link that takes you to the site's landing page is one of the few web interactions that users have come to be able to rely on, and we shouldn't break that.
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?
- Well, OK, now I'm confused. The stated reason for making this change is to improve WCAG compliance, but the proposed colors are worse in that regard. Wikipedia already has issues in many places, when blue link text is placed against background colors. The proposed, lighter shade of blue is far more prone to such issues. For example:
  - Placed against the table header background color (#EAECF0), the current link color (#0645ad) scores a 7.21:1 on the WebAIM Contrast Checker, meaning it passes both the WCAG AA standard and the more stringent WCAG AAA standards. But the proposed, lighter color (#3366cc) only scores a 4.53:1, barely passing WCAG AA and utterly failing WCAG AAA.
  - Placed against the table body background color (#f8f9fa), again the current link color is a passing 8.09:1 contrast, while the proposed is a WCAG-AAA-failing 5.09:1.
  - The section-heading background used in the infobox on the sample page is a yellow shade (coded as rgb(235, 235, 210) which is #0645ad). The current link colors are rated 7.04:1 contrast when placed against that yellow, passing WCAG AAA. The proposed color only comes in at 4.43:1, failing even WCAG AA!
  - The proposed visited link color, being a much lighter shade of purple than the current one, fares even worse in the same comparisons.
If the stated goal is to improve WCAG compliance, these proposed colors seem like a complete failure on that front. Unless I'm missing something?

Edit: Ah, now I see. Based on Reading/Web/Desktop_Improvements/Fifth_prototype_testing#Link_colors, the changes are focused exclusively on the contrast between the link text and the body text. That is a huge mistake, unless contrast with the various background colors that Wikipedia links will be placed against is also taken into account. It's a balancing act, to be sure. (The difficulties inherent in making links stand out in runs of body text, for all users regardless of vision needs, are why the WCAG recommends underlining links instead of setting them apart exclusively by text color.)
- The removal of redlink styling, I vehemently object to. It makes no sense to present users with an ordinary-looking link that leads to a page with no content. I'd support disabling redlinks (making them normal, un-linked body text) before I'd support making them blue!
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 have no real objections to the 16px font size change, since it doesn't appear to affect tables and other "formatted" text layouts. It's probably a positive, since 14px can be a bit squinty on devices with smaller screens, and it can lead to overlong runs of horizontal text on larger ones.

I'm afraid I've run out of steam after only making it halfway through this, sorry! I'll try to come back and fill out the second half some other time. Hopefully half-feedback is still better than no feedback? -- FeRDNYC (talk) 11:01, 11 June 2022 (UTC)[reply]

Filled in the rest a few days later. -- FeRDNYC (talk) 23:17, 14 June 2022 (UTC)[reply]

@FeRDNYC thank you very much for this detailed feedback.

Regarding the proposed link colors: on the phab task I've noted your point about #3366cc failing the AA contrast requirement against some infobox background colors. Thanks for raising this issue. Please feel free to add any/all of your other points. (Note: our current approach is to comply with AA standards, so failing AAA, while not good, is not a problem strictly speaking).

To clarify: we will not be removing red links, they are just not part of the discussion/prototype. AHollender (WMF) (talk) 15:44, 28 June 2022 (UTC)[reply]

Taivo

✅ feedback recorded

Menus
Blue and blue is best. I did not understand, what is search menu and what is user menu.
Borders and backgrounds
Minimalist. I am minimalist myself.
Active section in the table of contents
The first version. Suits well to minimalism.
Logo in the header
Square logo on left. I like the logo as it is.
Link colors
No concerns.
Font size
No concerns.

Username: SorteKanin

✅ feedback recorded

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 strongly prefer option 1, blue triggers and blue items. Blue makes it obvious that it is something clickable. Black is especially bad for menu items in the Tools dropdown, as the items (such as "Wikinews") bleed in with the sections (such as "General").
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?
Most of the options weren't great but I'll mention a few worth noting: Option 1 (minimalist) is "okay" but the article content and its surroundings blend in with each other too much I think. Option 3 (page title underline + TOC line) makes the distinction clearer but also adds visual noise with the lines I feel like. I personally prefer option 9 (outside article background (solid)) over all the others - it highlights the article content as the most important part of the page and separates the rest in a way that is not visually clunky. Option 9 is best if you ask me.
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?
Black (1) is way too subtle and barely visible. Bold (2) is much more visible and I like it, but the problem is that it occasionally causes the text to lengthen, which then causes a line-wrap, which then causes the whole table of content beneath that point to shift down. This can be seen on the Otter page when scrolling to the section "North American river otter". The bolding makes the table of content shift. This is ugly and distracting. Both option 3 and 5 uses backgrounds - I don't like this and find it ugly. Option 4 (line w/ border) is definitely the best - it clearly highlights which section is the current one and also does not cause any shifts in the text which would cause table of contents to move around. Option 4 is best.
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, left) is best by far. There is plenty of whitespace left with option 1 - why not use it to make the logo bigger? I'm also quite sad to see the logo diminished in the other options. It doesn't look great at low resolutions due to the glyphs. To be clear, I don't think that's a problem! I really like the logo and think it should be displayed in a larger logo like option 2. So option 2 is definitely 100% the best. It also clearly shows when you are on Wikipedia vs some other wiki site.
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 have no problems with this change, seems totally fine.
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 actually like how this makes the TOC font size smaller than the article. I think it's good.

Username:AfroThundr3007730

✅ feedback recorded

Menus
Option 1, keeping both blue, but also with bold triggers would produce the best effect. Black implies a non-clickable element, which is not the desired effect here.
Borders and backgrounds
One of the options using backgrounds would produce a better effect than just using borders. We still want to differentiate the article body from the interface.
Active section in the table of contents
Option 2 is the minimalist way to do this without too much clutter, but option 4 would be the best method to create a "timeline" look.
Logo in the header
Users have gotten used to the logo being in the top left, we should keep it that way. The center should be reserved for functional elements.
Link colors
Being colorblind (deuteranopia), the second option is harder to differentiate than the original colors. We should keep this in mind for future color selections.
Font size
The original font size is fine for the majority of users. Perhaps add a toggle in the tools menu to set a cookie to change the size if they prefer.

— AfroThundr ^{(u · t · c)} 21:49, 11 June 2022 (UTC)[reply]

Username:Anachronist

✅ feedback recorded

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 3. Any trigger, blue items. The items are links so they should look like links.
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 8, because they clearly separate the article content from the wiki-function areas.
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 or 5. The rest are just ugly, and number 4 is downright confusing.
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 logo left). Tastefully understated logo with good balance to other content, and does not interfere with article body.
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 fine. Honestly my eyes don't really detect a difference.
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?
Font size "standard" of 14 px is always too small, and I routinely must use the zoom feature on my browser to make it comfortable. 16px is better but still more comfortable with one zoom step (scaling to 110% in Chrome) even with reading glasses. 18px would be best.

Username:MargaretRDonald

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 the table of contents at the left. And am absolutely gobsmacked not to be able to find a link to Wikidata. Equally annoyed that I cannot see what you have done with the taxonbar which to my mind is the most important part of any taxon page. I didn't see any of the different menu options come up and therefore cannot comment. But I hate losing functionality and the taxonbar is critical for all biota. Looks pretty but I cannot get where I want to go and where I want my readers to go MargaretRDonald (talk) 02:54, 12 June 2022 (UTC)[reply]

@MargaretRDonald to clarify: you were viewing a prototype. The Wikidata link, and any other elements you are familiar with, will still be there in production. AHollender (WMF) (talk) 16:41, 28 June 2022 (UTC)[reply]

Username:Of the universe

✅ feedback recorded

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 3. I need blue menu items, I find black extremely confusing. I don't care about menu trigger color.
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?
No preference
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 5 looks stylish.
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 1 2 and 4. I don't like it in the center. My top choice is 1 because it's unobtrusive.
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 good! The new colors are easier to see on my screen.
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?
Looks good.

User: PeachPulp

✅ feedback recorded

Menus: Blue for both menu triggers and menu items, useful visual clue for people to identify links.
Borders and backgrounds: 4 with TOC line + header underline, clear and neat outlines look best.
Active section in the table of contents: Bold looks best and is, again, a good visual clue.
Logo in the header: 2) Square, left looks best.
Link colors: The proposed colors look good.
Font size: All for the font size increase, as a regular user I usually zoom in at 110% since the regular zoom level looks too dense for me.

User: Dulken

✅ feedback recorded

Menus: same as peachpulp
Borders and backgrounds: 4th option because it seperates things with other things
ASITTOC: bold cos its a good visual clue
LITH: 1st one looks good
Link colors: Proposed colors looks neat.
Font size: increase the font size since 100% too dense

Username:Pentagon 2057

✅ feedback recorded

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, bolded. The black menu dropdowns help to differentiate between the other hyperlinks located nearby, and blue hyperlinks in the menu keeps it consistent with the rest of the hyperlinks.
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 8. Allows for ease of reading by clearly demarcating the article borders at most lighting settings while not looking like microsoft word
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 and 4 combined. Gives the page the polished look of option 4 and the ease of identifying where you are at in the article from option 2
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, logo is most visible without looking awkward
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?
New. Colour contrast is much better. In addition, I do note a red link in the current version turns blue in the proposed version.
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 concerns, although users should be given the option to choose between which font size they wish to use as both are readable, and larger fonts can require more scrolling

user: freerunnerleon

✅ feedback recorded

Menus
Blue and blue is best. I did not understand, what is search menu and what is user menu.
Borders and backgrounds
i like the borders to be a thin line
Active section in the table of contents
i like the proto type
Logo in the header
Square logo on left. I like the logo as it is.
Link colors
the colors are pretty good but i dont like that it changes color when i hover over it(can be distracting)
Font size
i woud like that the user can change it for him self like in the prototype( it starts on somthing like 15px)

Username:Automotom

✅ feedback recorded

1. Menus — Blue and Blue and bold. I hate it when clickable stuff is indistinguishable from text and textual labels. The only worse thing is when non-clickable stuff looks like clickable :)

2. Borders and backgrounds - it's good when the content and the service elements are separated. No. 6 looks fine.

3. Active section in the table of contents - 2 and 5 combined. The Bold seems nice and easy to understand, yet the line shall not be common for all section because it makes little sense for nested subsections.

4. Logo in the header - #3 (center) looks fantastic for me as long as I'm using narrow screens (a lot of zoom due to sight issues). Otherwise rectangular logo seems okay.

5. Link colors - definitely the old one. The proposed is more pale, which makes it harder to read with sight issues.

6. Font size - 16px is better, still I will be zooming like 150% :) Automotom (talk) 13:45, 12 June 2022 (UTC)[reply]

Username:IdentifierExpected

✅ feedback recorded

1. Menus: #1, blue triggers & blue menu items. Even if they aren't links, the blue makes it immediately clear it's something I can select/interact with.

2. Borders and backgrounds : I like #3, it makes it clear at a glance that the menu on the left (the ToC) is actually part of the article, not a general Wikipedia menu like the left menu used to be.

3. Active section in the table of contents: I love #5. Again, judging them all at a glance, #5 is the clearest to me. The line makes it obvious that the active heading is a sub-heading/sub-section. (By comparison, the line on #4 is too much; doesn't clearly communicate anything to me.)

4. Logo in the header: #1 all the way. Simple, classy/non-intrusive, intuitive (it's where you expect it to be).

5. Link colors: The new link colors are great. Much easier to tell which links were visited.

6. Font size: Love the increased size. Yes, please! IdentifierExpected (talk) 16:15, 12 June 2022 (UTC)[reply]

Username:Inkyrius

✅ feedback recorded

Menus:
For me the best is definitely option 3 (black trigger + blue menu items). The triggers themselves are not links to a new page, they are just dropdown buttons, thus they should not be seen as hyperlinks. They should absolutely not be bold, that just draws attention away from the actual page content.
Borders and backgrounds:
I'm leaning towards option 9 (solid outside background) probably as my favourite here, however none of the designs are really perfect. The header underline of 4, 5, and 6 is basically necessary in my opinion, and the solid background of 9 is also very important in separating the main article content from the rest of design elements. Although I said 9 was my favourite, without any modification I think 4 or 6 could be better in their current state. The sticky menu at the top when scrolling also needs the grey background from 6 and 9. The gradients are a no-go for me, I don't think they work very well at all. The article borders in 2, 5, 6, and 7 also should go all the way to the top like the TOC line in 3 and 4 rather than end in a gradient.
Active section in the table of contents:
I've got to go with option 2 (bold text) here. Though I would also like to see the thin vertical line for subsections from 5, but just to show that there is a subsection not to show the active section (keep the bold for that).
Logo in the header:
None of these really sit right with me for some reason, I don't know why. Either 1 or 2 are the best though, if I had to choose I would go with option 2 (square, left) as it is the closest to the current design. I definitely strongly dislike both 3 and 4.
Link colors:
I don't really have too strong of an opinion on the blues, I probably slightly prefer the current colours because I'm a fan of darker blues, however I understand that accessibility is important and the lighter colours don't really bother me. However I find the proposed purple colours for visited links really hard to distinguish from the not yet visited links, neither colour is great though as the current purple is a bit to similar to the regular black text.
Font size:
I lean towards preferring smaller font sizes so 14px is my favourite here, however I understand that larger font sizes are good for accessibility and I would be fine with changing to 16px instead. Is there a reason 16px was chosen over 15px, as that could work as a compromise?

A Mockup of a Borders & Background Improvement

I made a mockup for an improvement of the borders & background test found at this imgur link: https://imgur.com/a/Os5Xxtj. It's essentially option 4 with the pale grey outside background of option 9 and I think it's the best I can come up with based on the presented options. I wonder if it would also be possible to move the infoboxes outside of the main article to the right (the mirror position of where the ToC now is), however I don't have enough HTML + CSS knowledge to be able to prototype this quickly.

One Final Note: User Options

Is there any technical reason that giving users options wouldn't be viable, I'm of the opinion that user choice is nearly always the best method for accessibility. The most useful option from the things in this poll would be font size, whether it be a binary choice of 14px vs. 16px or even better, a slider. I would also love to see a dark mode option, as it can be a little annoying browsing from a system where all my other apps and social media are in dark mode, including google. An option for manually choosing regular and visited link colours would also be great, especially for colourblind users, and even as someone who isn't colourblind, just by a little testing I found I preferred the colours #3366BB and #7755AA for links over either presented option, but as they don't pass the contrast checker (2.88:1 and 2.81:1 respectively) they would never be actually chosen.

Username:Euglou

✅ feedback recorded

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. Because its easy.
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 3. Because it looks nice
O
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 1 . Dont know to be honest.
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 . Just love it.
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 its perfect
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?
... Not at all

Username:PacificDepths

✅ feedback recorded

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 trigger, blue items make it clear that it is all clickable
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) - I like that this puts focus on the main article
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 line with border (2) - seems cleaner and helps point the eye. my second favorite is 3 background
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 (but main menu as hamburger icon?) Unintuitively, the "square, left" pushes the header on the right side up
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 okay to me.
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?
Seems fine. Maybe make the page (canvas?) horizontal width shorter so that it's more block-like and easier to skim - less movement of eye from line to line.

Username:JimBob128

✅ feedback recorded

1. Menus: I like #1, blue triggers & blue menu items. Even if they aren't links, the blue makes it immediately clear it's something I can select/interact with.

2. Borders and backgrounds : I don't like any of them because none of the options makes immediately clear that the links are article headers and not general Wiki links. Out of the options presented though, the vertical gradient line and the clear separation of the {Hamburger, Wiki logo, and search bar} from {the article} via different background color and non-gradient separation line is best (#6).

3. Active section in the table of contents: All have merit except #4, which adds an unnecessary line to waste the reader's focus. I love #5. Again, judging them all at a glance, #5 is the clearest to me and draws attention in all the correct ways. The line makes it obvious that the active heading is a sub-heading/sub-section

4. Logo in the header: #1 all the way. Simple, classy/non-intrusive, intuitive (it's where you expect it to be). Just please, please, please do not use #4.

5. Link colors: The new link colors are very slightly better. As a person who sometimes has their screen brightness down so my eyes don't get holes burned through them from constant tech usage, it's very hard to differentiate "Link Already Accessed" colors from regular black text in both the old and the new color schemes.

Imo, the "Link Already Accessed" colors should not be locked to shades of blue and should instead simply be a different, higher contrast color like the color Salmon. Idc about being a conformist with other websites, higher contrast should always be the preference.

6. Font size: Love the increased size. Yes, please! I had no idea how much of a difference +2px font size would make. ABSOLUTELY switch from 14px to 16px. Most importantly, well-written paragraphs lose no readability flow with the font increase.

Overall Notes:

Gradients are far too vague and should be avoided in most cases. Subtle gradients require far too much focus to figure out what is going on, using thinking power that should instead be devoted to interpretation of the article the reader devoted for reading, not finding. To understand how the gradient is being used, the reader is forced to forget about the article, find the article headers, compare the article headers to the sidebar, see if they match, AND check the top bar (containing {Hamburger, Wiki logo, and search bar} in the same font as main text, which is problematic) to see if it's specifically related to the article (quick to figure out, but still is a significant distraction).
As Inkyrius mentioned,
- "One Final Note: User Options
  Is there any technical reason that giving users options wouldn't be viable, I'm of the opinion that user choice is nearly always the best method for accessibility [though that should not be confused with overburdening the user with too many options]. The most useful option from the things in this poll would be [a] font size~~, whether it be a binary choice of 14px vs. 16px or even better, a~~ slider. I would also love to see a dark mode option, as it can be a little annoying browsing from a system where all my other apps and social media are in dark mode, including google. An option for manually choosing regular and visited link colours would also be great, especially for colourblind users."

Username:AlexiG42

✅ feedback recorded

I am an amateur designer. Great work on the redesigns, I think they look fantastic! I have Vector 2022 set as my default style.

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 menu triggers and blue menu items). This is because the menu triggers keep you on the same page, whereas the menu items link you to different pages, so I find it more intuitive for them to be blue (like links are). In addition, I don’t feel like the triggers need to be blue for people to realise that they’re buttons, because they have drop downs and are in the ‘menu’ parts of the page.

(later edit to this section): Whoops, I forgot to comment on bold / not bold. I prefer the drop downs to not be bold, because none of the other items in that area are bold. The emphasis feels (somewhat) unnecessary and arbitrary to me.
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 (outside article background (solid)). I feel like the ones with white backgrounds are ‘harder on the eyes’ for me (which I know is subjective), and I find the darker-background ones easier to focus on and scan. However, I would prefer it if the background was even darker (for more contrast).
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 (bold), because I like how visually distinct the current section is. More than any other option, it makes it easier for my eyes to jump to the part of the contents that I’m in.
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?
My favourites are options 1 and 2.

My least favourite is option 3, and here’s why: one thing I don’t like about the redesign overall is how the top of the page when you’re scrolled to the top is very different to the sticky header that appears when you scroll down. To me, option 3 makes that problem worse, because now there’s another item appearing and disappearing, which makes it feel even less cohesive.

In addition, with option 3, when you load into the page it’s hard for a new user to know where to look first (the logo and the article title feel equally attention-grabbing, and they’re far away). I like how with the other options, the article title is the most attention-grabbing, and the somewhat-prominent logo is nearby.

I personally prefer the style of option 2 over option 4, though that’s 100% just personal preference of not liking the foggy, unclear gradient.
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 definitely like that the visited links are lighter, I think that’s a great change. I’d be fine with the links being more saturated (I think that at a glance, the purple can be mistaken for grey unless you look closely), though I’m also happy with the links in their current state.
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 like both of the font sizes. I personally find the articles faster to read at the smaller font size, but the larger font size isn’t a problem for me (I can zoom out of the page slightly if necessary).

Final note: I know this isn't one of the things you're testing in this feedback round, but I really like how you've moved the 'tools' section to that right button, I think that's a great place for it to be.

Username:CauliflowerMoon

✅ feedback recorded

Note: I currently use the Vector 2022 skin when reading Wikipedia. I am using this skin not because it's my favourite - it's not! - but because I want to see what happens to the design in the future. I perceive colours in a typical way (not colourblind or sensitive).

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 think option 1 makes the most sense. You can never go wrong by making your click targets coloured blue. Blue is good and helpful. The menu items especially are links and they should definitely be displayed in blue. This also provides a nice visual separation between the section headers in the menus.

If you do decide to go with black menu triggers, them being bold makes a huge positive difference.
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 is by far my favourite because it has the greatest visual effect. With option 1, which is currently in Vector 2022, I find that my eyes often have trouble staying looking at the article, especially with the table of contents to the left side, and these designs show that having some kind of visual separator is really important. The combination of the borders and the background change is excellent.

I dislike all of the gradient designs since they add noise and they don't solve any problems.
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 don't have a favourite. I dislike option 1 since the difference in appearance is small, and I dislike option 3 because the difference in appearance is too much.

I like the vertical and horizontal spacing of Vector 2022 better than any of these proposed designs.
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 2. The others are slightly worse but I don't mind them. I really really like how the triple line menu becomes the text "main menu" - makes it very clear what it's going to reveal. I also like how the search bar is left aligned, because when you scroll down in any of the designs, the search button changes and is always left aligned. On Vector 2022 I find myself often looking for the search button in the wrong place after scrolling. I would appreciate if you kept its horizontal location consistent.
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 feedback.
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?
Larger text is always good and the 16px version is very welcome. I hope to see this soon.

Username:General_Douglas

✅ feedback recorded

Menus: Option 3 (black menu triggers, blue menu items) - Feels normal to have approachable blue links nested inside a menu item, but making the menu item itself blue is taking it too far in my opinion.
Borders and backgrounds: Option 6 (article borders + solid header bg) - The approach taken here defines the article in the most clarifying method possible, the other options seem wrong from an organizational standpoint. I am partial to the header background as this reminds me of current Wikipedia without being too intrusive.
Active section in the table of contents: Option 2 (bold) - This is by far the best option, the others simply don't pop quite like number 2 here. This gives the reader the most immediate and clear idea as to where they are in the article relative to the ToC.
Logo in the header: Option 2 + 4 (square, left w/gradient*) - Asterisk here because while I believe Option 4 is the best concerning menu formatting (I am a fan of the hamburger), I think option 2's logo is superior as I am not liking the look of the gradient. If we could get a best of both worlds here, that would be great in my opinion.
Link colors: The proposed colors for blue links are noticeably lighter, while I am not a fan right now, I chalk this up to just having been used to the old colors for a while. They really don't seem that bad, I'm sure I'll get used to the new blue. However, I have lost visited links against the sea of black text because their purple is too dark, so the lighter violet is definitely welcomed here!
Font size: The new size isn't bad, though I prefer smaller fonts because it allows me to fit more on the page without having to scroll as much. It's not a make or break deal, the implementation of the new size won't make me want to quit the Wiki, but I do think it would be nice if there was an option to retain the smaller size. Again though, not that big a deal.

Username: takemetothelakeswhereallthepoetswenttodie

✅ feedback recorded

Menus:
1. Bolded menu triggers make it far easier to differentiate the menu triggers from other links; until I bolded the menu triggers, I genuinely didn't see what I was changing with the four options.
2. Option 3 (Black menu triggers, blue menu items) is the most readable. The black menu triggers helps separate the Tools trigger from the menu next to it:
Borders and backgrounds:
1. I heavily dislike options 7 and 8- they feel like they were made for, like, iOS6 when everything had gradients everywhere. I think we as a society are past gradients
2. Overall, option 2 was my favourite. I liked the simple separation of the left-hand menu & the articles, and it was the only option that included that separation and didn't leave the page feeling cluttered.
3. I think the second-best choice was option 6, but the header background was slightly too small vertically, and make the entire header feel squished in, and left the page feeling cluttered and disproportionate.
4. Option 9 had the same problem as option six; if you just extend the vertical size of the header, this would not be a problem.
Active section in the table of contents:
1. I felt that option 4 was clear as to where the user was, but also felt cleaner than the others. However, if you go with this one, I would highly recommend that, when a subsection is selected, it's heading is not also selected, as that was extremely confusing (in the example, when viewing Extinct Species of otters, Extinct Species and the greater Species heading were both highlighted, which was unnecessarily confusing and kept resulting in me getting lost in the page.
Logo in the header:
1. Heavily disliked option 3, mostly because the search bar was still on the far left. If you went for option 3, I would recommend putting the search bar underneath the heading, or something.
2. I Found the best option to be option 2, as it used up the gap between the title and the contents that is present in option 1, but it didn't feel like it drew too much attention and distracted me, like option 4 did.
Link colours:
1. Definitely prefer the new colours. They feel like they're more distinguishable from the text, especially the previously visited links. This shade of blue feels a lot less harsh on the eyes, and I'm glad you stuck with a similar shade, as changing it any more might make it unrecognizable as Wikipedia.
2. However, the blue and purple shades are less distinguishable from each other. You could go one shade to darker on the purple and that would solve this problem.
Font size:
1. Probably not particularly noticeable to most, but I think that it is an excellent change that results in better readability and a neater-looking page on the whole.

Username:MarioGom

✅ feedback recorded

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 have a slight preference for blue menu items (options 1 and 3), just for uniformity of blue links across the interface.
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 have a preference for the no-gradient options. For example, I prefer option 9 to option 8. For a few years, the Web has been abandoning non-functional eye candy for a good reason. Other than that, I have no strong preference for any option.
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?
Strong preference against 4, which takes more horizontal space for no functional gain. The sidebar is already too narrow for some pages as it is. Slight preference for 2 and 3 as easier to understand.
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 less space. I would be against anything that pushes the sidebar TOC down without a good reason.
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 seem to be more fatiguing. While it increases the contrast between text and links, it decreases the contrast between links and white background.
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:fullmoonsoul

✅ feedback recorded

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. first option can get a little overwhelming with multiple links. an underline is enough to denote a hyperlink. (makes me think about other blue triggers on the page, maybe except the article, all other links can be done in black.) why put it in blue and make it pop-out unless we want to user to click on it.
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?
opt #1 or #2 minimalist/article borders, no need of extra highlights/shadows/gradients. #2 - left border is useful to separate it from article index on left pane. not sure of use of right border.
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, line w border - a separate line in itself helps guide a clear line of sight, and same visual pattern on both title & sub-title makes it less distracting
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?
can't see the logo in lower res. else square, left, non-gradient, fits in perfectly, non-distracting.
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?
try a darker violet tending towards purple, farther away from blue - RGB 100-120 range for R, 60, 180
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 concerns. larger font size is a must for readability & posture.

Username:macaddct1984

✅ feedback recorded

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) - It follows the standard of blue = hyperlink/new page while keeping menus visible and not blending in with normal links
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) - The article "pops" out of the page, with nice clear delineation and framing
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 5) - The border is much clearer in nested menus than option 4. Would be nice if the menu would expand (and maybe collapse) as you scrolled through the article
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) - Keeps the logo out of the way and unobtrusive. Makes sense keeping the main menu next to the logo
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
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 opinion

Username: Silver hr (talk)

✅ feedback recorded

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 3) black (menu triggers), blue (menu items) because I associate blue pieces of text with links, and links typically take me to another page. This is a substantially different action from opening a menu, and visual indication of this difference is needed.

I also prefer Bold (menu triggers) enabled because it allows me to more easily notice menus in a visual scan, i.e. in that case only my visual system needs to be engaged to determine what is a menu, I don't need to perform additional cognitive processing.
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 4) TOC line + header underline because there are lines that visually separate the top bar, TOC section and article section. This makes navigation slightly easier since purely visual processing is faster and easier than cognitive processing. Also, option 4 doesn't waste space like some other options and minimizes visual noise. However, I would not include the line immediately below the article title because that line for me is noisy; the article title is visually distinguished enough by the font size and boldness.
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 2) bold because it allows me to notice the active section in a visual scan more easily than the other options.

I would like that this option be combined with 5) line w/ border (2) (only the line) because I think a vertical line is helpful in indicating the span and depth of a subsection without using a lot of white space to achieve the same thing. A vertical line in the root is merely noise and a waste of horizontal space.
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 1) rectangle, left because the logo does not need to be large, and also I don't think the location of the search bar should be changed. Consistency is important; change for the sake of change is an anti-pattern.
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, the Proposed colors are fine.
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 am used to the current size, and so the new size will take some getting used to, but as long as the change is informed by scientific results, and an increase in readability and comprehension is to be expected by the change, I am fine with it.

Username:CatMan 149

✅ feedback recorded

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 blue/blue because it makes it extra-clear that they do something. The bolded triggers just seems excessive to me.
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?
My preference would be the TOC line + header underline. No practical reason, I just like how it looks.
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'd choose option 5. Again, just like how it looks.
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?
In order of most to least preferred, 1. rectangle, center 2. rectangle, left 3. square, left 4. square, left (gradient)
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 visited links because the current visited links are too dark to easily tell apart from the article text. The unvisited links I feel don't need changed.
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?
The proposed size is easier to read than the current, though I wouldn't know whether the ratio of small-text-readers to big-text-readers would warrant a change or not.

My preferred skin is actually Vector legacy, so no change would really affect me at all, but everyone's opinion helps.

Username: Ganesha811

✅ feedback recorded

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 menu triggers with blue menu items (3rd option). Why? Blue hyperlinks matches precedent and is intuitive.
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?
The fifth (5), article borders + header underline. It keeps the article and ToC connected while moving the header naturally along as you scroll. It emphasizes the text without being blocky or ugly. However, one problem; when you click around in the ToC, you cannot see the section heading you just clicked because it is hidden under the page header. This is confusing.
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?
3, background, is the best.
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 and 2 are both fine. 3 and 4 are hideously ugly.
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, I think it looks fine.
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 I prefer the smaller but it's not a big deal as long as it's easy to change via settings somewhere. Ganesha811 (talk) 18:33, 13 June 2022 (UTC)[reply]

Username:Tauin

✅ feedback recorded

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, too much blue or black with the others imo while this one strikes a nice balance
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, gradients are ugly, as well as random lines going everywhere (lines should "contain" things imo, like colours or content) i also quite like the effect that it has on making the article content "pop" so to speak
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 5, makes the most sense to me and looks nice
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, anything else looks strange to me, too in your face imo
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
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

Username:gallium314

✅ feedback recorded

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. I prefer blue menu labels for the visual-grabbiness, but black menu items are easier to read for me. I'm already in the menu, so I know that I can click the things without a blue indicator.
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. I appreciate the visual separation between Wikipedia navigation, and the article. I think the background give lets you know, "this is where you find the knowledge. If you want to mess around with the website giving it to you, its up here, separate." I also appreciate the vertical border between article and navigation.
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 1. I think highlighting the current part of the article you're on is a great idea, but everything highlighting method other than a simple colour change is too distracting for me. It's visible enough that if I want to pay attention to it I am able to, and if not it fades into the "background".
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 1. I dislike having the Wikipedia logo in the center, it positions Wikipedia as an author, rather than a host. I also prefer the rectangle logo, but only because I think the square logo takes up too much of the sidebar, which has gained a huge amount of importance with this new style.
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 prefer option 2. I like the higher contrast. I might have gone with a darker blue for unvisted links (I almost think they look faded at this colour), but I understand that the current colour may provide more visual cohesion.
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 option 1. I find the bigger size to be a bit annoying, I have to do a lot more scrolling, and I feel like I'm missing context no matter which part of the article I'm on. However absolutely sympathize with the readability issue. Add a text size adjustment option in a prominent place on every article!

Username:Mndrix

✅ feedback recorded

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 blue triggers with black items. Blue usually means that I can interact with it, but once I'm inside a menu, too much blue is distracting.
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 minimalist style. The borders and background colors only add visual noise for me.
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 "line w/ border". I like how the contiguous vertical line feels like a progress bar, showing my current position within that bar.
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 "rectangle left" because it occupies the least amount of screen real estate and very has little visual noise.
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. I like the way the proposed colors have a stronger difference between visited and not-visited links.
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 greatly prefer the new, larger font size.

Username:Avelludo

✅ feedback recorded

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 + blue (menu items). It's what feels natural to me. In my mind, there's a distinction between buttons – actions within the page – and hyperlinks – which take you to another page. And, to me, their colors should be different. Hyperlinks are and have been blue, historically, so that leaves the black for the buttons. I think it fits nicely.
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). I like option (2), but on a bigger monitor, I do feel the slightly darker color of (9) is a better choice. There's a clear separation of proper article content, and the rest.
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) line with border. It's cute :) Though I do also like the background ones, so I feel any choice will be a good one in the end.
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, left. I promise I didn't look at the current design, but I was most drawn to the regular square one. The gradient option, (4), is great (and very bold!) as well, but I feel like that would clash with my previous decision on the background color outside the article. It would be my second choice, though.
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 (1) Current colors. I'm sorry. I understand accessibility is very important, but since I'm meant to voice my opinion here, I disliked the change. The colors seem too bright, and I guess too saturated/vibrant? I do understand if you decide to implement this change regardless; there's always custom CSS to tune it to my personal taste :)
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?
Option (2) 16px. Definitely a good change! My personal custom CSS already makes this exact modification.

Username:Ghastlyman

✅ feedback recorded

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 a dropdown menu trigger (ie, non-link) be black, unbolded, with a little downwards arrow, and menu items (ie, links) be blue. Bolded triggers add unnecessary visual clutter. Please note that the little downwards arrows "disappear" when using black triggers with Dark Reader browser add-on; that's a very annoying UI bug.
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; it clearly separates the article from the surrounding baggage. Works ok with Dark Reader, too.
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 vote for "option 6", which is option 3 but with the sub-menu lines from option 5. I like the background highlights, and the sub-menu lines help distinguish sub-menu contents from surrounding clutter. Option 3 otherwise, which works ok with Dark Reader (but not great).
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. I like the large logo, and it doesn't waste any article space when in the LHS column. The black text doesn't work with Dark Reader.
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 colours look nicer; definitely better for visited links.
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 don't care too much. I regularly use ctrl-+ and ctrl-- to adjust font size.

Username:Stnts256

✅ feedback recorded

Menus —Option 1) blue (menu triggers), blue (menu items): Visual aid that the menu and all the items are clickable (proposed earlier).
Borders and backgrounds — Option 2) article borders: I think the current boaders are okay. But also a dark theme for some of who prefer it during the night time and also save our phone batteries.
Active section in the table of contents — Option 2) bold: Very clear on a large and nested table of content. I like the line in option 5 (the boarder) in the nested items to highlight the hierarchy better!
Logo in the header — Option 2) square, left: I strongly prefer the bigger square logo. Maybe a tough smaller so the table of contents starts at the first line of the article text. I do like the hamburger menu from option 1 as the main menu on option 2 is not appealing and can be confused with the table of contents! The small rectangle is not necessary as no logo is shown when scrolling down.
Link colors — Proposed colors: Better differentiation between text and links and already visited links. The links are now more visible but on sites with many links the optical flow is better with the current color as it is more similar to the black text.
Font size — 16 pixel (proposed) is way better to read the most content. The headings must be increased too as they are now too similar to the bigger text!

Username:KeagenL30

✅ feedback recorded

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 (2) blue menu triggers and black menu items. I don't think these menu triggers need undue prominence by being black and bold compared with the other buttons. The black menu items look better with the black icons in the user menu.
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 (6). I like mostly white with the article borders and the added header background makes it stand out a bit more. However, I also don't mind (1) and (2) and with the outside background (9) was better than (8).
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?
Not a great help here, I like (2), (4) and (5) – maybe leaning towards (5). (2) for the more minimalist approach and the bold makes the current section nice and clear. I like the overall design of (4) and (5) but don't feel the active section in (4) stands out enough. For (5) I'm not crazy about the background for the active section but overall it is effective and has a nice aesthetic. You probably didn't go with bold for (4) and (5) for a reason but feel that the active section could stand out a little bit more.
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 think I prefer (1)? (4) looks really cool but you can't see the whole Wikipedia logo. (2) looks like the correct place but I prefer a hamburger logo for the menu rather than the dropdown menu. So (1) is a simple, nice and neat compromise, with the logo large enough to see and fitting well into the header.
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 looks good and it is meeting the standard. Visited links are much easier to see compared to current.
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 14px but I like smaller font sizes. I can understand the reasons to move to 16px and the page looks good at 16px, especially with the increased width of the content. Why not let users decide similar to the functionality on the Wikipedia mobile apps?

Username:Nux

✅ feedback recorded

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 think menu triggers should be context sensitive, so that menu don't stand out too much. But I think you could make menu items uniform as menu items are opened and are already separate.
- Icons in top bar are already black. You should keep it that way. So user menu should be more or less the same it is now.
- Language menu trigger on top bar should be black. I think you should keep it on top bar for a few reasons. One to avoid cluttering tab space. Another to avoid coloring problems. And another to have/keep languages in the sticky header. This works great because you can easily switch languages any time.
- Tools menu trigger should be blue if the tabs are kept blue.
- Triggers MUST NOT be bold because they are too distracting that way. Edit button should be the most important thing on the tab bar if anything. So you must not make anything else stand out significantly.
- I actually like that menu items are highlighted with a background change. Like in the current user menu. I think you could use that as uniform menu items. Note that this background change is also already the case for Visual Editor (header level menu, editor switch menu, special characters section, help section and all standard buttons).
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?
Here I definitely don't like languages on the right. There is a lot of space on the top bar and you should use it as I also mentioned before. But also I think It would look better in terms of layout.

Other wise I like no 9 with solid background. Maybe even a bit darker grey. I usually use light themes, but I think only main, working space should be with high contrast and other stuff should be a bit of relief for the eyes.
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?
Black as active is consistent with tabs and I like that. But I think no 4 is a great idea. It gives more sense of progress and I think would a great visual aid for color blind and on old monitors (where colors usually become pale).
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 think I got used to no 1 in V22. It looks good.
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?
Great that you are thinking about WCAG. I have some WCAG training and practice. As I mentioned above, better contrast would be great for old monitors but here, in this case, also on mobile (which I assume will get the same link colors). Mobile users even with great vision also suffer from low contrast problems e.g. when reading something in the sun. So that would definitely be good to all as Alex mentioned.
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?
The prototype is kind of broken on this article, so can't really see how this will impact articles. I mean I cannot see styles of templates. And I assume templates and some specific usages of templates will be affected. Would this font-size change be a change for all/most skins? I'm asking because that change could impact how some of the content is built. Some templates might be fine-tuned to specific font-size. Not saying it is a blocker of the change, but if you will change this only in Vector it might be harder for the communities to adjust things.

BTW I noticed there are section tags in the prototype ❤😃 --Nux (talk) 10:07, 14 June 2022 (UTC)[reply]

Username:Gugalcrom123

✅ feedback recorded

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 (menu triggers), blue (menu items) is the best, as blue now means an option is going to do something, and menus already have a dropdown
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?
outside article background (solid), because it makes it clear what is in the article and what is not. Maybe there should be an article drop shadow too.
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 w/ border (2) as it is clear which section you are in and has distinction between level 2 and level 3 headings
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 as it does not take much space, and it allows it to have a nice hamburger menu
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?
They could have a cooler and slightly darker colour, and be bold
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 concern. Actually 16px is the standard, and it looks much better

Username:Msz2001

✅ feedback recorded

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.
First of all, I'm not a fan of mixing black icons with a blue text in the user menu. Black icons seem to heavy compared to the blue text. On the other hand, I feel like the difference between dark gray headers and black text in tools and language menus is to subtle.
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 simple designs 1 or 2 that don't put unnecessary lines. Additional separation of site header and title is useless for me because there is plenty of whitespace there. I quite like the 9th design too. It's kind of similar to the mobile website.
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?
Don't use the "bold" option. Changing the font weight may cause single-line text to wrap in specific cases which distracts from the main content. I don't like the proposed backgrounds as they seem too sharp for me. Maybe with some 2px border-radius they will be softer. Variants with line are a bit inconsistent for me, because the line is placed only for one intendtion level: not for subsubsections and so on.
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?
To start, I don't like the gradient version. It feels like the designer had to put a logo somewhere but forgot about it and added it in the end. It is not as clear as it used to be. The square option is quite nice, but the "Main menu" button does not appeal to me. An advantage of the "logo at the left" version is that it can be divided with two straight lines into segments of a different use: logo, ToC, site navigation and page content. It's my favourite.
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 stand out better (especially visited links).
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?
There's nothing wrong with the 16px font size. I cannot decide if it's better in a long-term perspective but I think it may be beneficial.

MaxEnt

6. Font size

There seems to be some confusion here between px and points. The study actually recommended 18 points. There's no fixed relationship between px and points, but if you presume an underlying display resolution of 96 dpi, which was once dominant (in particular, during the formative years of CSS) then it's possible to equate 96 px per inch to 72 points per inch, giving a conversion factor of 1.33 px per point. Using this factor, the study recommendation would be closer to 24px rather than the 18px given above. Few displays these days are much less than 96 dpi, and with higher resolution displays, this estimated factor would only increase—if it changed at all. On hasty OR, it seems to be the case that CSS defines the px unit to be "exactly 1/96th of an inch in all printed output" and that modern high-resolution screens commonly fall into alignment with the printed output standard, transforming the px into a de facto constant on most modern devices. On this basis, it's unlikely that a 16px font is larger than 14 points, as previously studied, and nowhere close to the recommendations from the newer study cited here in detail. Until this confusion is further clarified, be careful not to evaluate the proposal on the basis that the chosen font size for this prototype is only modestly less than these newer font size recommendations. MaxEnt (talk) 23:56, 9 June 2022 (UTC)[reply]

@MaxEnt thank you very much for this clarification. According to https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent and https://pixelsconverter.com/pt-to-px I've re-written the paragraph as follows:

Firstly we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96^[1]^[2]. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px. So should we increase the font size to 24px? The research studied in-depth reading, however people often scan the page in order to find a certain piece of information (which is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does). Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with (we would be increasing the maximum width of the article as well, from 960px to 1050px). As a next step we will plan to conduct our own research to further study font size on Wikipedia.

Does that sound right do you? AHollender (WMF) (talk) 14:28, 16 June 2022 (UTC)[reply]

Izno

✅ feedback recorded

Menus — I don't even know why this was asked, especially when #5 is even remotely a question. WCAG has a clear answer. Links should be consistently colored and appear to be links. Would these be black anywhere else? No. Make these blue please.
Borders and backgrounds — In favor of #1 on its aesthetics only.
Active section in the table of contents — I prefer #2 to #1 to none of the others. It matches the sense of navboxes and self linking.
Logo in the header — Prefer #1 to #2 to none of the others.
Link colors — Don't see any real reason to leave a comment on this one per WCAG though I would personally prefer the visited color to be darker. This question should also consider external links, which are a 3rd color, and which differs unvisited from internal links. (And I would prefer to keep those differentiated.)
Font size — Seems fine.

In general, I prefer minimalism. The chrome should not shout or get in the way of the content.

Avis de Nemo Le Poisson

✅ feedback recorded

Voici donc un petit retour :

Menu : préférence pour le bleu comme couleur pour les items Outils et Langues, et leurs sous menu. (Si on garde le noir pour le menu utilisateurs et les outils de recherche évidemment^). Je suis habitués à ce que tous les liens cliquables soient en bleu s'ils ne sont pas stylisé autrement. Aussi, je n'aime pas trop ces boutons minimalistiques proposés, pas suffisament mis en évidences et qui ressemblent à ceux de l'interface Minerva (Article, Discussion, Lire, Modifier, Voir l'historique.)
Contours et fonds : Je n'ai pas d'avis tranché sur l'utilité d'une séparation, mais il faut que la couleur de fond du menu de gauche / du sommaire soit harmonisé avec l'en-tête. Le lecteur doit clairement voir la séparation article et éléments autours.
Couleur des liens : je préfère la nouvelle couleur des liens, surtout si elle est plus accessible.
Sommaire : je préfère que la section actuelle soit souligné en gras (option 2). Je n'aime pas le surlignage dans des rectangles.
Logo : le logo carré à l'avantage d'être plus visible, mais c'est embêtant qu'il change de place en cas de redimensionement de la fenêtre (ce n'est pas le cas sur le Vieux Vector).

Voilà . -- Nemo ^Discuter 12:56, 16 June 2022 (UTC)[reply]

nclm

✅ feedback recorded

Very glad to see this big project nearing an end, and exciting to see the visual design directions for it and be able to comment on them! I’ve been following with great interest the desktop improvements as close as I could, as both a designer by trade and Wikimedia contributor by hobby, and I’ve been appreciating all of your work very much. Fun to give feedback on the tiny details at the end! I hope it’s not too late, I somehow only see this now.

In general, I like the directions taken here, which finally brings MediaWiki’s design up to date. They would all competently do the job, so what follows are preferences and thoughts, and I tried to include what they are informed by. I bolded my favourite options for easier skimming through. On all of them by the way, I like the way the article title (and the language switcher) have been moved over what was once the tabs.

Menus
I would go for Option 3: black triggers and blue items. This isn’t because of visual preferences but because of the meaning and behaviour of the two sets. Menu triggers are interface elements that are dynamic and only open or close stuff, so they can stay black like other bits of the interface. Menu items are fundamentally just links to other pages, so it makes sense that they are blue, just like other links. That said, I could go for Option 1, everything blue, too, which makes the menu a little more discoverable. Option 2, blue triggers and black items, makes no sense at all whatsoever (: Option 4, everything black, gives a cool understated look but ends up feeling weird, like the menu items are not clickable or won’t lead anywhere.

Borders and backgrounds
This is the fun one. And I think it’s a perfect opportunity to make two choices: one for the default MediaWiki theme, one for Wikimedia projects. I always felt it was a little strange and misdirected to have Wikipedia and other Wikimedia projects using the exact same theme than default MediaWiki-powered wikis, as it results in random wikis on the Internet looking just like Wikipedia, which is probably a little confusing for visitors and maybe not helping Wikimedia projects to appear trustworthy. I understand it would be a useless resource-intensive project to split the work into developing and maintaining two different themes, but two subtle variants of same theme could be the perfect solution.

Option 1, the minimalist one, is perfect for the default MediaWiki theme. Clean and simple and functional and a great base for customisations for any wiki owners who wishes to edit their wiki’s appearance.

For Wikimedia projects, my preferences are Option 9 and Option 4, which are both elegant ways to divide the page, with a preference for the first mentioned which really puts focus onto the content (I had an unpublished unsolicited Wikipedia redesign from many years back with a similar solution, presenting the article as a white page laid over a light gray background). I’m not a fan of gradients and gradient lines that could get old visually and can be a little too techy, so that excludes Option 2 (the best of that series still), Option 5, Option 6, Option 7 and Option 8. I want to like Option 3, and I can imagine it turning into the sticky header quite smoothly, but there’s something slightly off about dividing the article’s header out from its content like that.

Active section in the table of contents
Option 1 is a little too discreet to really notice the highlight. I think Option 2 works well, besides the fact that the type is too bold, and could be made Semibold or similar instead (probably hard to do if using system fonts, but something to consider if using webfonts). The designs of Option 3 and Option 5 don’t work for me in their current state, but that’s not to say that a solution with backgrounds could not work at all, there might be something there. Option 4 is interesting and I could see it working, it’s a nice alternative to bolding and it feels more designed. It would be however good to see how it plays with the theme chosen in Borders and backgrounds and explore different variations in line thicknesses, margins, colours.

Logo in the header
At some point, we will need to come to terms with the Wikipedia globe not really working as a logo because of its level of details and take hard decisions about phasing it out for this usage. It’s such a recognisable symbol so it has to stay, but it could be as an illustration on various materials as well as on Wikipedias’ homepages, such as what the French or Japanese Wikipedias are doing for instance, but with nicer layouts and maybe with a different rendering style that is more pleasant and less techy than a gradienty 3D render.

In the meantime Option 1 is the best because it minimises the role of the globe and doesn’t push the table of contents down. I got used to it this past year while using the desktop improvements, and it works well. Option 2 is the legacy option, and it’s true that it makes Wikipedia looks like Wikipedia. That could be another instance of differentiation between Wikimedia projects and the MediaWiki default: the first using the legacy option and the second using the horizontal option. If that second option is chosen, there might be some more work to do on the visual design of the main menu trigger. Option 3 just does not work for me and feels off. It’s also strange to have a main menu icon just next to a search bar, it makes it look like one is the menu of the other. Option 4 is indeed a direction adopting the globe as an illustration only, which I welcome, but in that particular design it does not work well, looks like a mistake and takes a lot of space. Possibly integrating on a gray background around the page (like the eight or ninth option for Borders and backgrounds) some faint globe outlines with gradient fading in a larger size could be a way to have the globe as non-logo design element on all pages.

Link colors
I’m torn about this one. I’m all for consistency with the design system and well thought-off colour contrasts, so I would like to vote Option 2. But I’m afraid that if it makes links more apparent, it also makes the content less readable, because this contrast is distracting to the read. Links on Wikipedia are quite different from links on any other content: they are not meant to be all followed or meant to be unmissable. Rather, you should be able to read the content easily and only click once in a while on a few things you want to know more about. And visited links should be even less visible: those are articles you have already opened and possibly read, so you have less reasons to click on them. So I’m afraid I will vote for Option 1 which keeps the content easy to read. An in-between could be a good compromise.

Font size
Option 2 without hesitation! Texts on Wikipedia have always been too small, and I have permanent zoom settings in my browser to display Wikipedia at 110%. 16px reads so much better, so I would not even consider staying with Option 1 myself. If ever there are too divisive comments on this parameter, consider meeting in the middle: 15px would already be an improvement.

Looking forward to see this live! Keep up the excellent work :) Nclm (talk) 18:10, 16 June 2022 (UTC)[reply]

Username:Bluehill

✅ feedback recorded

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.
Any of the four options is fine, but the neatest thing that seems to me is "4) black (menu triggers), black (menu items)".
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" looks best to me.
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" or "4) line w/ border" looks best.
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" looks the cleanest.
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?
...
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?
The current font size allows you to read more text at once, but the readability is not good on low-resolution monitors. The suggested font size looks neater.

Nom d’utilisateur : Trizek

✅ feedback recorded

Menus : bleu, bleu, bleu. :) Il est plus simple d'identifier les liens. (Je découvre les outils qui restent fixes, c'est très chouette !)
Fonds et contours — minimalist est très bien : aéré agréable, sans fioritures. On a l'essentiel. Pourquoi s'ennuyer avec des fonds de couleur ?
Section active dans le Sommaire - bold ou line with border (1), sans trop savoir pourquoi. C'est un peu un choix par défaut, les autres ne me semble pas lisibles ou en phase avec les standards de design allant vers de la simplicité.
Logo dans l'entête — rectangle, left ; loin devant ! Centrer le logo sépare la barre haute en deux, ce qui rend mal pratique la lecture. L'utilisation du logo complet n'est pas souhaitable, car cela casse l'unité de la barre de haute. L'option avec un gradent ne respecte pas la charge graphique des logos !
Couleurs des liens — Proposed colors a enfin un contraste franc entre les liens visités et les liens non encore visités.
Taille de police — pour passer à 16px ! Wikipédia est zoomé par défaut dans mon navigateur, sinon c'est illisible.

Trizek ^{from FR} 13:06, 18 June 2022 (UTC)[reply]

Username:Mastrocom

✅ feedback recorded

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 the option 1 because it's good to have different colors between the active item and the others, but imho it's useless to mark the main trigger too

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 number 8, I'm not a fan of lines and it's a good compromise to divide sectors in the page staying pretty minimal

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 the option 2, with bold style you can see immediatly the difference with the other sections

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 both number 1 and 4, both options respect the current style. I absolutely don't like number 2 because the main menu wouldn't be so immediate to find in the page

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, current colors are fine

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'd switch to 16px

Username: Mohammad ebz

✅ feedback recorded

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) But provided that the user menu entries are black.
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 2) first and option 7) in the next step are desirable.
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?
A combination of options 2) and 5) would be desirable, meaning bolding would be used in option 5 instead of highlighting.
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 1) because it has better compatibility, coordination and beauty.
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 select the "Proposed colors" option, but still the color difference is not very obvious.
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 agree with changing the font size and I think 16 pixels is appropriate, but it also depends on the type of font and language, and these should be taken into account.

Username:SuperDragonXD

✅ feedback recorded

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. For the languages menu, it makes sense, because you are actively linking to the language (which means it's a different wiki) and there's no icon in them. Otherwise, if it has a black icon, the text should be too for consistency (like the user menu). The tools menu "menu links" should be blue, since it's a tool and all tools have blue, and the tools "menu opener" should be black. Alongside that, blue signifies "clickability" and it signifies whether you clicked it or not; black looks "clean"
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 kinda prefer 6, it feels a lot "Wikipedia" and is also the design of the mobile view
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. It looks clean and modern, but not too distracting.
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 strongly prefer 1. 2 seems okay/nostalgic because of the old UI (doesn't fit in well though...), and 3 (center) is just bad since this. 4 looks weird for me.
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 kinda notice that the colors become "paler" or lighter, but it's okay. Navboxes look paler and the change is more or less noticeable on them. Otherwise, it's fine.
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 more readable for me (it is also my preferred font size)

Username:Hgzh

✅ feedback recorded

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.
Menu items should be blue for consistency with other links. Menu triggers should be black as they don't link to another page but expand the current UI.
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) article borders + header bg (solid) and 9) outside article background (solid) I like the most. Slightly preferring 6). Reason: because of the background color, the header elements are visually better connected than with borders and the user links in the upper right corner don't look so lost like they do surrounded only with whitespace. 6) does that better than 9) and I dont like the centered search bar. Both bring in at least some other background than white everywhere. I prefer the solid background over the gradients, they bring too much early 2000's vibe IMO. 4) has too many borders, 3) looks weird with the big whitespace above the page title.
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 1) black, it's the least disturbing solution.
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?
Only 1) rectangle, left really fits the design IMO
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?
Change is okay, I don't see something else related that has to be done before.
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, but font sizes should be almost consistent between text and boxes.

-- hgzh 16:42, 23 June 2022 (UTC)[reply]

↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
↑ PT to PX converter

Username: thegreenstripe

✅ feedback recorded

Menus — Number 1, blue menu triggers and blue menu items. The consistency of the color makes it easier to know what is clickable at a glance. From a design system perspective, keeping text link colors and hover states consistent makes the most sense. Some of the menus with black text may look better on the page visually, but from a usability perspective, it feels like a consistent blue color treatment would work better.
Borders and backgrounds — I think number 1 minimalist or number 3 page title underline + TOC line are the most successful because of the way the rules are being used to structure the content on the page in a way that clearly delineates TOC from article nav from article body. The content is nicely framed without the design getting too in the way of the rest of the elements on the page. The other directions feel a little off because of the gradient treatment of the vertical rule. Having two or more treatments for rules on the page feels like an unnecessary detail. In direction number 1 or number 3, I think unifying the treatment of rules/strokes (like in the info box and rules below section headlines) across the page would look better. If I had to pick between 1 or 3, I think I would pick 3 with a suggestion to remove the vertical rule to the left of the article body when the TOC is hidden. Right now, it feels kind of odd to have that rule there when the page to the left of the rule is empty. If options 1 and 3 are feeling too minimal, perhaps adding the gradient nav from number 7 would help. It’s a nice callback to the previous Vector design.
Active section in the table of contents — I like number 3 with the background color. I don’t think you need to change the color of the text to black though since highlighting the text and changing its color are two different moves away from the initial state of the type. It feels like a single move like the highlight, while keeping the text blue, would work better. It communicates that the item is a link while also communicating that it is active.
Logo in the header — I think number 1 rectangle left works the best because you’re keeping the global nav elements anchored to the top of the page, which gives you more flexibility with the TOC and article nav/body should further iteration on the design need to happen in the future.
Link colors — I think the proposed change looks good, it’s pretty subtle, so I don’t think any further refinement would be necessary.
Font size — 16 pixels is a lot more comfortable to read and is the standard for body copy on most sites on the web. Since most articles on Wikipedia are mostly text with little or no images in the body, 16 pixels will be easier to read for a longer time, and will also be easier to scan.

Ім'я користувача: Богдан Панчук

✅ feedback recorded

Меню — відкрийте прототип у новій вкладці: https://di-visual-design-menus.web.app/%D0%92%D0%B5%D0%B4%D0%BC%D0%B5%D0%B4%D0%B5%D0%B2%D1%96?uk Якій опції ви віддаєте перевагу і чому? Будь ласка, уважно перевірте меню пошуку, меню користувача, меню мови й меню інструментів.
"Синя кнопка, сині елементи". По-перше, колір інструментів має якось відрізнятися від кольору тексту статті, а по-друге гармонія кольорів кнопки й елементів. "Жирний (кнопка)" - щось не зрозумів, що це - неактивно. --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]
Рамки і тло — відкрийте прототип у новій вкладці: https://di-visual-design-borders-bgs.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk Якій опції ви віддаєте перевагу і чому?
Або мінімалістично, або "рамка статті". Користувачам і так буде зрозуміло, де стаття і шапка при цьому не повинна привертати зайвої уваги. --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]
Активний розділ у змісті — відкрийте прототип у новій вкладці: https://di-visual-design-toc-active.web.app/%D0%A2%D0%B8%D0%B3%D1%80?uk Якій опції ви віддаєте перевагу і чому?
Мені до вподоби більше "Жирний" варіант. Просто і помітно. --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]
Лого в шапці — відкрийте прототип у новій вкладці: https://di-visual-design-header-logo.web.app/%D0%90%D0%BB%D1%8C%D0%B1%D0%B0%D1%82%D1%80%D0%BE%D1%81%D0%BE%D0%B2%D1%96?uk Якій опції ви віддаєте перевагу і чому?
Важко відповісти. Однак, точно не останній варіант з градієнтом: Вікісфера має бути видимою у будь-якому разі. --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]
Кольори посилань — відкрийте прототип у новій вкладці: https://di-visual-design-link-colors.web.app/%D0%9C%D0%BE%D0%BB%D1%8E%D1%81%D0%BA%D0%B8?uk Чи треба, на вашу думку, зробити якусь додаткову роботу, менш ніж ми зробимо цю зміну?
Щодо звичайних і відвіданих посилань - претензій немає, однак повинні виділятися і посилання на неактивні сторінки. Якщо не червоним кольором, як зараз, то якимось інакшим, що був би помітним при читанні. --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]
Розмір шрифту — відкрийте прототип у новій вкладці: https://di-visual-design-font-size.web.app/%D0%9F%D1%82%D0%B0%D1%85%D0%B8?uk Чи є у вас застереження щодо пропонованого розміру шрифту?
Мені подобається 16px --Богдан Панчук (talk) 18:02, 25 June 2022 (UTC)[reply]

Username:Eric.LEWIN

✅ feedback recorded

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.
My preferred : bold black for menu triggers, blue for menu items.

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?
NB: I haven't been able to see the differences between 5 & 6, apart when being at the top of the page, the collapsable bar with the WP logo, for which I prefer 6, aesthetically. But it seems to me such a minute subject of importance.

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?
efficient and discrete ; when I look at them, since I know how they (should/would) appear, I do not much care. Minute preferences : "bold" seems to me a bit too "visible", somehow polluting the page… "Line with border + background" is a (very small) bit "too much". "Line with border" (choice 4) seems to me rather modern, I like it. To the "minimal" side (I guess), choice 1 is very okay, and choice 3 (background) is fine too.

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 really and quite firmly appreciate the 1st choice, "rectangular left". I do well know the logo. It is necessary, as a reminder (quick look), and as a link to the welcome, somehow central (as a start), page ; but it needs not to be that big (square, or even worse, square gradient), nor in the middle on the page.

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 new proposition is somewhat better than the current one. Agreed for me.

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?
Being rather visually impaired, I use to use much the zoom feature of my browser with keyboard shortcuts. Therefore, with no zoom, 18px-size quite minimum ; though I can read, I am not confortable with this (therefore I zoom :-))

Nom d’utilisateur :Manjiro5

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
Je trouve que la meilleure option est la première car je trouve que la nouvelle interface est trop noire
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
Je préfère l'option n°1 car les traits rendent le site moins aéré.
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
Je préfère l'option 4 car je la trouve plus esthétique et dynamique.
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
Je préfere l'option 1 car elle est moderne et ne casse pas la mise en page
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
Il faudrait travailler sur l'accessibilité, j'arrive plus à lire les liens actuels que les proposés
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
Je trouve que la taille de police est trop grosse, il faudrait faire entre les deux.

Nom d’utilisateur : Ayack

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
Pas vraiment de préférence entre les options proposées. L'ancien emplacement était plus intuitif.

Cependant, si l'option 3 ou 4 était choisie, il faudrait que l'icône soit également en noir.
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
L'option 7 est à bannir, le dégradé est horrible. Plutôt pour les contours de l'article mais sans qu'ils soient trop marqués. Je choisirai la version 5 mais sans le trait sous le titre de l'article.
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
Pas fan des options avec fond. Le concept de ligne est intéressant mais la mise en oeuvre est à retravailler : le trait noir est trop "noir". Par ailleurs, je ne comprends pas les espaces entre les titres : pourquoi y a-t-il un saut avant "Populations et menaces" mais pas après ?
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
Les options 3 et 4 sont inversées dans le prototype. Fortement contre le dégradé à nouveau. Le logo au centre sort la recherche de l'article donc à éviter également. Après entre le 1 et le 2, petite préférence pour le 1.
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
Liens proposés trop pâles. Rendent la lecture plus fatigante pour les yeux.
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
Police beaucoup trop grande. Ne fait pas sens sur un écran HD/retina. J'ai déjà du changer mon css sur Wikipedia pour réduire la police actuelle.

Username: Glafoululle des Alpes

✅ feedback recorded

Menus — I like the idea blue = active links attached, so I would choose #1.
Borders and backgrounds — I choose #4 and #9, the article and menus are clearly marked, but #4 is more elegant for me.
Active section in the table of contents — I like #1, but it turns out that it is not readable when one has already selected menu items (since they become dark blue); the #2 is probably more readable.
Logo in the header — I find the solution #2 the most attractive. The logo in the middle of the page feels very uncomfortable.
Link colors — The proposed colours are excellent, they are much more contrasted than the current ones.
Font size — I love when there is a maximum of text on my screen, so I would prefer not to have a larger font size.

Nom d’utilisateur : Xavier Combelle

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
j'ai fait que le menu des langues, qui était illustré dans la page d'où je viens, je ne comprend juste pas qu'on puisse cliquer sur un truc noir dans wikipedia
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
...
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
...
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
...
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
...
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
...

Nom d’utilisateur : Epok

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
4 : blue is for encyclopedic content, black can be the color of the menus.
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
8 : gives a clear visual clue about the content area, without adding any lines restricting it.
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
4 : gives the idea of a continuity in the content.
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
2 : clearly visible symbol.
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
Difference is very subtle, it should probably be easily deployed, virtually no one would notice...
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
2 : 16px makes the content more visible. Actually, is seem to match the text size on the zoom level (120%) I usually apply on WP.

Username : saeedmohsenii

✅ feedback recorded

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)
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? 7) article borders + header bg (gradient)
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
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) square, left (gradient)
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 colors
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)

Username:DSwissK

✅ feedback recorded

Menus — not really sure about this one
Borders and backgrounds — #8 or #1
Active section in the table of contents — I really like #4, or #5
Logo in the header — #1 is the best.
Link colors — the new colors look better
Font size — 16px is nicer, much more readable

Username:Wikinade

✅ feedback recorded

Menus — #1 (when in black, I don't guess they are links)
Borders and backgrounds — #9 (visible delimitation of the article itself)
Active section in the table of contents — #5 (more clear)
Logo in the header — #2 (without hesitation)
Link colors — New colors (more visible)
Font size — 16px (more readable)

Username:WikiLuke

✅ feedback recorded

Menus — I prefer the blue-blue option because in this way it is consistent with the other buttons and clickable objects in the webpage.
Borders and backgrounds - I prefer the outside background (both gradient or solid) because it lets you focus more on the content of the article. In second place I would put the article borders (2nd option in the menu) because it separates in a nice way the ToC from the article content.
Active section in the table of contents — I like the two line w/border options but I would modify both of them in order to satisfy better my tastes. In the first "line w/border" option I would like to have the line of the sub-paragraphs moved under the first letter of the main paragraph (just like it is in "line w/border (2)) beacuse IMO this design would help to understand better at which point of the page we are (two bold segments inline could be a bit confusing). In the "line w/border (2)" option I would like to have the main paragraphs in bold instead of having them highlighted with a background color, IMO this design would be more refined.
Logo in the header — I simply love the "square, left" option (the one without the gradient). IMO the big logo it is simply too iconic to be abandoned. And I also love the fact that the main menu would be easier to find, I think that a lot of people (i.g. elderly people, people not so used to three-line menus design, ...) could benefit from this design.
Link colors — I would like a bit more contrast between the blue links and the white background beacuse I find them to be a bit evanescent. Also, the color of the visited links is definitely too similar to the one of the links still to be visited. I am happy that the red color stays as it is.
Font size — My main concern is the dispersion of the information. The fixed width and the bigger font size would multiply the number of lines in each paragraph making the article and the paragraphs themselves much longer. For these reasons it would be more difficult to have an overall view of the paragraphs in order to find what you are looking for and it would also require to scroll more through the article.

Nome utente: NicknEma

✅ feedback recorded

Menu — apri il prototipo in un nuovo tab: https://di-visual-design-menus.web.app/Ursus_arctos?it Quale opzione preferisci e perché? Per favore, assicurati di aver verificato il menu della ricerca, il menu utente, il menu delle lingue e il menu degli strumenti.
...
Bordi e sfondi — apri il prototipo in un nuovo tab: https://di-visual-design-borders-bgs.web.app/Canis_lupus?it Quale opzione preferisci e perché?
...
Sezione attiva nell'Indice — apri il prototipo in un nuovo tab: https://di-visual-design-header-logo.web.app/Ailuropoda_melanoleuca?it Quale opzione preferisci e perché?
Escluderei la 1) per questioni di accessibilità (non sono un esperto, ma ho paura che il semplice cambio di colore sia difficile da notare per chi ci vede poco). Tra le restanti, la 5) è quella che preferisco di meno, in quanto la segnalazione è diversa a seconda di sezioni e sottosezioni, e a me piace la coerenza nello stile. Le opzioni rimanenti mi piacciono tutte e tre.
Logo nell'header — apri il prototipo in un nuovo tab: https://di-visual-design-toc-active.web.app/Oceano_Indiano?it Quale opzione preferisci e perché?
Preferisco i loghi quadrati. Il 'logo rettangolare sulla sinistra' crea uno spazio bianco subito sotto, prima dell'indice, che è fuori posto. Il logo rettangolare al centro è semplicemente diverso da come è strutturata la maggior parte dei siti web. Di solito il logo è a sinistra, e la barra di ricerca è al centro.
P.S. I loghi 3) e 4) sono scambiati, cliccando su uno mi fa vedere l'altro.
Colore dei link — apri il prototipo in un nuovo tab: https://di-visual-design-link-colors.web.app/Salmonidae?it Pensi che sia necessaria qualche messa a punto ulteriore prima di fare questo cambiamento?
Preferisco il nuovo colore, le due tonalità proposte di viola e di blu si distinguono molto meglio dal nero.
Dimensione del carattere — apri il prototipo in un nuovo tab: https://di-visual-design-font-size.web.app/Trochilidae?it Hai delle perplessità riguardo alla dimensione del carattere proposta?
Preferisco la versione più piccola (14px). La versione più grande occupa molto dello spazio sullo schermo e, soprattutto chi ha un monitor molto grande potrebbe fare più fatica ad arrivare in fondo alla riga.

Nome utente: Albpasqua

✅ feedback recorded

Menu — 1) is more readable
Bordi e sfondi — 5) is the best, graphically speaking, 1) is too "mobilish", also 9) is very good for readability
Sezione attiva nell'Indice — 3) is the best, from my point of view, but also 4) good; 1) is not so readable because of the small change of color; I do not really like the colored backgrounds, but they are still better than 1)
Logo nell'header — 2) but I do not like the tools button under the logo
Colore dei link — I feel like I prefer the old unclicked link and the new clicked one, I think the new colors are too bright.
Dimensione del carattere — I like the larger page. If read fullscreen, I prefer smaller font, since the other one makes the page more dispersive; if i stretch the window, I prefer the larger font for better readability.

Nom d’utilisateur :wladek92 /FR

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
option3 : garder la différence de couleur; le noir pour le statique le bleu pour les feuilles
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
option7: pretty gradient at top and vertical separation line is OK. Left column too wide.
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
option 3: fond en grisé bien discret; j'aime le sommaire flottant et les parties repliables du TOC, cest pratique.
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
option 1: logo minimal llaisse de la place sur la page.
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
option 2 couleur des liens proposée; on voit mieux les liens non parcourus.
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
option 2: 16 px laisse plus de place a larticle.

Nome utente:GabriSpree

✅ feedback recorded

Menu: modulo scelto è il 2). i trigger dovrebbero restare blu per sottolineare il fatto che, come con i link, schiacciandoli succede qualcosa. lasciare i trigger di colore nero potrebbe creare confusione all'utente, non sapendo bene se succede qualcosa e/o mettendoci magari di piu a trovare le funzioni fornite da quei trigger non avendoli gia evidenziati. gli argomenti pertanto dovrebbero essere in nero cosi da restare nello stile della pagina. se gli argomenti fossero in blu si potrebbe far pensare all'utente che magari schiacciando (per esempio la lingua desiderata) la pagina verrebbbe ricaricata o altro. visto che ogni dropdown è delimitato da un contorno separando cosi gli argomenti dal resto della pagina, non serve evidenziarli in blu visto che il box/dropdown sta gia svolgendo tale funzione.
Bordi e sfondi: modulo scelto è il 7). lo sfondo dell'header (sfumato) da l'impressione che la pagina sia una cascata, che comincia dal titolo e il logo "Wikipedia", e che scende giu verso il contenuto, è piu carino e piu chiaro per l'utente, potrà cosi avere piu facilità a capire visivamente dove guardare per primo. se lo sfondo dell'header non fosse sfumato, l'intero header potrebbe dare l'impressione di far parte delle informazioni che si vogliono mostrare e illustrare, separandolo cosi con l'effetto sfumato si separa per bene l'header e il resto della pagina (che viene letto prevalentemente di piu che l'header, essendo la ragione maggiore per qui si apre la pagina). i bordi (della voce) sono utili per suddivedere correttamente le informazioni e la loro gerarchia (titolo, crediti, contenuto, etc..).
Logo nell'header: modulo scelto è il 4). questo logo adatta wikipedia alla modernità e non altera negativamente il resto del layout della pagina come tutti gli altri tre loghi. è semplice, minimalistico, piu pulito/visibilmente semplice.
Sezione attiva nell'Indice: modulo scelto è il 2). Troppi dettagli nel menu laterale potrebbero farlo distaccare troppo dalla pagina e dal layout predefinito della pagina in se. con il grassetto si evidenzia il titolo di una sezione, separandola dal resto e non da troppo nell'occhio.
Colore dei link: modulo scelto è "colori proposti", un colore chiaro per i link è esteticamente migliore di uno scuro molto simile al testo attorno.
Dimensione del carattere: modulo scelto è 16px. piu leggibile. se un utente preferisce avere il testo piu piccolo puo dezoomare sul suo browser, ma questo gruppi di utenti che sceglierebbe una font piu piccola sarà sempre una minorità.

Nome utente:A7N8X

✅ feedback recorded

Menu — 3, si naviga meglio, meno confondente, più intuitivo
...
Bordi e sfondi — 9, focalizza meglio il contenuto, permette di separare meglio le varie sezioni, senza essere pesante alla vista
...
Sezione attiva nell'Indice — 1, compatto, intuitivo, ben visibile
...
Logo nell'header — 2, si vede meglio, più intuitivo
...
Colore dei link — 1, preferisco il modo corrente
...
Dimensione del carattere — 2, preferisco i 16px
...

Username:Bluetpp

✅ feedback recorded

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.
Both blue (Option 1). I think because they need to be blue so that people can know they are something that is able to be clicked on (i.e links). I clicked bold the menu triggers but it didn't bold, so...
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?
Outside article background (gradient) (Opt.8) is the best but there is something bugging me. If I choose Outside article background (solid) (Opt.9), the header also has a solid grey background, but if I choose gradient, there is a background for only the TOC? I want background for everything outside of the main article content, so if you can do it gradient, I will choose gradient, but if you can only do solid, then I'll choose solid. Reason: It separates everything else from the most important part: article content.
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. Um, on the why, I think it's because it's the most normal choice? Other choices are also, um, kinda okay, but they all seem unusual? Not the normal way?
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?
God, Rectangle, left (Opt.1). Please don't be anything else. Every other option is just too... outrageous.
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 new one, because science says it's better? Honestly, I'm using my laptop at night and also turning the blue light filter on, so this color question is kind of hard for me to answer. Should the blue light filter be considered?
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?
Omg yes, 16, please. I think it's better for (1) the old and (2) the shortsighted.

Username:ThiênĐế98

✅ feedback recorded

Menus — 3, because it follows the traditional blue link, but also clearly separates the items and trigger.
Borders and backgrounds — 8, I don't want Wikipedia pages to look like book pages, which look old to the
Active section in the table of contents — 2, I choose the clearly (bold) because I think that helps readers know where they are in our articles, but also not focus on the decorations of the table of contents
Logo in the header — 3, due to its look more modern than the previous versions.
Link colors — 1, I prefer to keep the old ones.
Font size — No switch to 24 points, due to the fact that the paragraph looks longer and can reduce the interest of readers

Username: Charele

✅ feedback recorded

Menus — 2 Le déclencheur en bleu respecte la couleur implicite des déclencheurs sur internet.
Borders and backgrounds — 1 contours et fonds minimaliste ne détournent pas l'attention.

Active section in the table of contents — 2 L'usage du gras est la seule option qui ne déplace pas le texte et le changement de contraste aide au repérage.

Logo in the header — 1 pourquoi changer la position du logo qui avec le temps est devenue une marque de l'encyclopédie ?

Link colors — 1 La couleur bleue est devenue un signe de reconnaissance universel pour les liens, pourquoi changer ?

Font size — 2 16 px is more comfortable.

Username: NguoiDungKhongDinhDanh

✅ feedback recorded

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.
Other than language menu trigger/items and tool menu items, I prefer black text. In general, text should be in sync with their corresponding icons. I would also like to see some links stylized as pseudo-buttons (e.g. darker background, no underline when hovering), especially user menu items. That being said, I like none of them.
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?
First and foremost, I really dislike option 3; it reveals a huge blank on the top of TOC. Option 4 looks good but is a bit rough. Option 6 clearly separate headers and body content, but did not touch the sticky header, which doesn't look really nice. Gradient is, in my opinion, so last-decade. In general, I prefer option 6 and a bit of option 9 as they makes body content more prominent.
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 – very modern. I would also like to see active headers (in TOC) bolded recursively, not just the first (<h2>) and last (<hx>). <h4>s and lower can stay font-weight: normal; while <h2>s should be bolder (or bigger) than <h3>s.
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 and (ltr) left. Option 3 is my least-preferred since it makes the search bar much smaller and further from a right-handed user like me (also, when active, it overlaps with menu button). Option 2 is, to be honest, quite a surprise. However, without TOC, it (and option 4) looks ridiculous.
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?
Yes: Make visited external links and visited internal links look different if you're about to use this color.
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?
From a non-content editor's point of view: Waaaay too big. Make it an option in our preferences and let us decide which size we prefer.

NguoiDungKhongDinhDanh (talk) 18:16, 29 June 2022 (UTC)[reply]

Also, next time, please make different questions (i.e. q5) really stand out from others. NguoiDungKhongDinhDanh (talk) 18:21, 29 June 2022 (UTC)[reply]

Username:Thingofme

✅ feedback recorded

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.
Menu 2 is more preferred to me (as we have the same color)
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 is more preferred for me as it creates contrast in the article.
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 5 is more preferred for me as it could scroll quickly into the content of the page and it also adjusts which section I am viewing (helpful in long sections/subsections or discussions).
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 - it's ok for me (I don't want the Wikipedia logo to be adjusted as center or takes the TOC contents)
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 don't know but I would like to use the new one (but viewed link should not be colored purple), and I think interwiki links or external links should be colored the same as wikilinks.
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 have serious concern with the font size as it's hard to get around with discussions and having navboxes or references box. (Also tables are a concern for me)

Username:Đức Anh

✅ feedback recorded

Menu: option 1
--- tôi thấy cả 4 option trong nguyên mẫu đều hơi thô, chưa đẹp. Option tốt nhất có thể chọn là option 1.
Viền & nền: option 1 (nhưng cần thay đổi thêm)
--- nên đi theo hướng tối giản trong option 1, nhưng viền cần được tối giản hơn nữa, nó trông rất rối mắt.
TOC: option 5
--- option 5 khá tuyệt vời, nhưng nguyên mẫu chỉ biểu diễn 2 cấp độ đề mục, nếu mục lục có nhiều cấp độ đề mục thì phải làm thế nào?
Logo: option 3 (nhưng cần thay đổi thêm)
--- tôi khá thích ý tưởng việc đặt logo ở trung tâm của option 3, nhưng nguyên mẫu hơi nhàm chán và cần thay đổi thêm.
Màu link: option 2
--- màu link ở option 2 sáng hơn và giúp mọi người dễ nhận biết hơn option 1, nhưng hình như chưa có màu cho red link?
Cỡ font: option 2
--- tôi thích 16px hơn, 14px trông hơi nhỏ

Lâm Đức Anh (talk) 05:25, 30 June 2022 (UTC)[reply]

Nome utente:Ciaurlec

✅ feedback recorded

Menu — apri il prototipo in un nuovo tab: https://di-visual-design-menus.web.app/Ursus_arctos?it Quale opzione preferisci e perché? Per favore, assicurati di aver verificato il menu della ricerca, il menu utente, il menu delle lingue e il menu degli strumenti.
3-trigger neri e argomenti in blu, mi pare più chiaro quando ho un iperlink che punta verso l'esterno
Bordi e sfondi — apri il prototipo in un nuovo tab: https://di-visual-design-borders-bgs.web.app/Canis_lupus?it Quale opzione preferisci e perché?
NP, praticamente la visualizzazione sembra tutta uguale, (WINDOWS10, VGA 1280x1024)
Sezione attiva nell'Indice — apri il prototipo in un nuovo tab: https://di-visual-design-header-logo.web.app/Ailuropoda_melanoleuca?it Quale opzione preferisci e perché?
2-logo quadrato in sx (PS le visualizzazioni 3 e 4 sono invertite): amo avere barre funzioni concentrate su un unico lato dello schermo
Logo nell'header — apri il prototipo in un nuovo tab: https://di-visual-design-toc-active.web.app/Oceano_Indiano?it Quale opzione preferisci e perché?
5-linea con bordo 2; avendo problemi con visibilità sfondi la riga aiuta a tenere la posizione nell'indice dell'articolo
Colore dei link — apri il prototipo in un nuovo tab: https://di-visual-design-link-colors.web.app/Salmonidae?it Pensi che sia necessaria qualche messa a punto ulteriore prima di fare questo cambiamento?
2-tutti i link sono decisamente più brillanti
Dimensione del carattere — apri il prototipo in un nuovo tab: https://di-visual-design-font-size.web.app/Trochilidae?it Hai delle perplessità riguardo alla dimensione del carattere proposta?
NP un po' perplesso l'idea è buona e la leggibilità migliora, ma mi pare che molte delle formattazioni originali (liste, template, didascalie, debbano essere messe a punto per tener conto di questo cambio) il risultato finale è più confuso

Username:Meiko21

✅ feedback recorded

1. Menu: option 1

--- Mình thấy nó đẹp với cả dễ nhìn và phân chia so với 3 cái còn lại.

2. Viền & nền: option 1

--- Nhìn nó được đẹp và rối với cả không tạo những khoảng cách thừa.

3. TOC: option 1

--- Dễ nhìn phân biêt được các mục lục

4. Logo: option 2

--- Logo to nhận diện được thương hiệu và đẹp.

5. Màu link: option 2

--- Màu ở cái lựa chọn này nó nhạt và đẹp dễ nhìn.

6. Cỡ font chữ: option 2

--- Cỡ chữ to dễ đọc ở nhưng mà ở các thiết bị đời cũ nếu mà chữ bị phóng to sẽ bị xấu, nên cần cân nhắc!

Meiko21 (talk) 05:24, 1 July 2022 (UTC)[reply]

Username:Yokaotoko7

✅ feedback recorded

Menus — 1
Borders and backgrounds — 8
Active section in the table of contents — 4
Logo in the header — 5
Link colors — new
Font size — 16px

Yokaotoko7 (talk) 05:48, 1 July 2022 (UTC)[reply]

Username:Koreller

✅ feedback recorded

Menus
1) blue trigger, blue items. bold.

Blue because it is the classic way of indicating to the readership an internal link, and in my opinion this affordance always works well.

Bold, but I can't explain why...
Borders and backgrounds
1) minimalist or 9) outside article background (I am hesitating, maybe more the option 1).

Those two allow to focus on the content, others options add irrelevant visual distractions.
Active section in the table of contents
2) bold.

Because I think it's a very simple and straightforward way of finding your way around, if you're looking for where you are, you need strong feedback, and writing in bold allows you to do that better than any other in my opinion.
Logo in the header
1) rectangle logo left.

From far this option because it's consistent with the style of the header line; the logo is expected to be on the top left; it makes the interface more minimalist and everything is in line with the focus on content. The large size of the logo does not add anything, so for me it is not necessary to have a large logo.
Link colors
2) proposed link colors.

I am in favour of having a contrast that makes information accessible to all. I am for this change without hesitation.
Font size
16px. I think it is relevant to increase to 16px, but I think this choice really needs to be discussed (and voted on) in the community as I think it is very divisive.

It's a pity you can't increase the font size to 24px (in steps of 2) on your prototype.

Koreller (talk) 10:18, 1 July 2022 (UTC)[reply]

Nom d’utilisateur : AdaHephais

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
.option 2 en changeant le noir par un gris moins agressif (par exemple : code couleur Lavender qui est très élégant). Le bleu de départ est très bien, rentre dans les standards du web

Par ailleurs, la propriété soulignée (underligne) n'est pas très jolie visuellement et ne me semble pas utile Petit dysfonctionnement : quand on passe de la barre latérale au menu déroulant, i'item du sous-menu sélectionné perd le focus et redevient bleu

Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
Toutes ces options sont tellement agréables visuellement que je les mettrais bien dans les préférences afin que l'utilisateur puisse personnaliser son profil
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
J'hésite entre l'option 4 et l'option 5 qui permettent de se repérer très facilement
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
L'option 2 est très simple et rentre dans les standards habituels

Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
Le changement ne me semble pas pertinent
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
C'est ce que je met comme taille sur mon smartphone pour travailler, alors oui, 16 pixels est parfait pour moi

Merci beaucoup --AdaHephais (talk) 09:30, 2 July 2022 (UTC)[reply]

Username:AramilFeraxa

✅ feedback recorded

1. Menu – 3

2. Borders and backgrounds – 6

3. Active section in the table of contents – 2

4. Logo in the header – 4

5. Link colors – 2

6. Font size – 2

AramilFeraxa (talk) 18:19, 2 July 2022 (UTC)[reply]

Nazwa użytkownika: KujKuń

✅ feedback recorded

Uważam, że najlepiej byłoby wprowadzić zakładkę "ustawienia czcionki" w których użytkownik mógłby dostosować i zapisywać zmiany swojego wyglądu Wikipedii. Uniknęłoby to wielu pewnych problemów i komplikacji oraz nieporozumień między zarządem Wikipedii, a różnymi grupami użytkowników, którzy forsowali by chęć do ponownego wprowadzania swoich zmian.

Dzięki opcji ustawień czcionki na swoim komputerze lub urządzeniu mobilnym pozwoliłoby to wyeliminować wiele komplikacji i podziałów i uważam, że to rozwiązanie byłoby dobre, niż wprowadzanie czegoś co byłoby nie fajne dla wszystkich. KujKuń (talk) 20:09, 2 July 2022 (UTC)[reply]

BeNoWan

✅ feedback recorded

Menus — Option 1 : bleu/bleu, tout élément de texte cliquable doit être en bleu
Fonds et contours — Option 6 : les séparations sont présentes, mais sobres
Section active dans le Sommaire - Option 4 : c'est la plus structurée
Logo dans l'entête — Option 1 : rectangulaire à gauche, moins envahissant que le carré, et sa place est à gauche, car au milieu ça ne ressemble à rien
Couleurs des liens — Le nouveau motif est plus agréable
Taille de police — 16px est plus lisible, mais prend beaucoup de place sur un écran 17 pouces

Nom d’utilisateur : Nimmzo

✅ feedback recorded

Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Ours_brun?fr Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
option 1 : déclencheur bleu, élément de menu bleu parce qu'un hyperlien est bleu. Même si le soulignement est interrompu au niveau du jambages des consonnes, il a l'effet inverse de celui souhaité car il diminue la lisibilité du menu sélectionné.
Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Z%C3%A8bre?fr Quelle option préférez-vous et pourquoi ?
option 5 : ligne du sommaire + titre de la page souligné. Parce que l'icône de WP est la plus petite. Cela permet d'afficher une ligne de plus de l'éditorial. Le titre de la page souligné ne sert à rien. Less is more.
Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Loutre?fr Quelle option préférez-vous et pourquoi ?
option 5 : la ligne avec contour (2) mange moins la marge gauche que l'option 4 et ne souligne que la feuille de l'arbre par un trait vertical.
Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda_g%C3%A9ant?fr Quelle option vous préférez et pourquoi ?
Pour éviter le copier-coller de chaque URL, il faut rendre hyperlien le thème de chaque point à ouvrir dans une nouvelle page du navigateur. Le popup d'aide ne se ferme pas sur clic de la croix de fermeture. Il faut recoller et valider l'URL dans la barre de navigation pour fermer ce popup qui donne accès aux options. Le libellé des options 3 et 4 semble inversé.

Finalement, c'est l'option 1 dit "rectangulaire" c-à-d icône la + petite qui permet d'avoir le sommaire le plus haut possible et cache mieux le trou du globe au pôle nord.
Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Saumon?fr Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
Le travail supplémentaire est à faire sur la suppression du soulignement à cause de l'exception du jambage. Le changement de couleur réduit le contraste en offrant une couleur acceptable pour un lien visité. If suffit de proposer par défaut cette option dans le profil utilisateur et calculer le nombre de restauration à la couleur actuelle.
Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Trochilidae?fr Avez-vous des doutes ou remarques concernant la taille de police proposée ?
☑ 16px : probablement la meilleure suggestion d'amélioration de la lisibilité. Tous les encarts (infobox, image) ne sont pas concernés par cette améliorations qui risqueraient de casser la mise en forme. Le titre de l'infobox "Trochilidae" a la barre horizontale du T majuscule sans empattement qui "touche" le r minuscule : c'est illisible même en 16px. Il faut au moins mettre la page du navigateur à 110% pour observer le détachement. Heureusement, l'éditorial n'a pas ce problème.

Les titres de la page "Trochilidae" et de premier niveau, --racines dans l'arbre du sommaire--, bénéficient d'une police avec empattement (Serif). Le 16px autoriserait une généralisation à l'ensemble de l'éditorial : mener l'enquête.

Au-delà du choix de la police, l'élément déterminant sur la lisibilité, la compréhension et la rapidité de lecture est l'espace entre les lignes. Il faudrait mener une autre enquête sur l'augmentation de l'interlignage notamment au niveau du chapitre d'introduction qui reste le texte le plus lu dans chaque page.

Finalement selon WP:CLAIR, « Vous pouvez mettre une emphase sur un mot ou un passage en le composant en italique. N’en abusez pas ; l’italique attire l’œil, et trop d’emphase tue l’emphase. » Cependant, Alien sentences or french staging/blocking didascalies fully in italic are an aberration.

Nimmzo (talk) 10:28, 3 July 2022 (UTC)[reply]

Salamandar3500

✅ feedback recorded

Menus — option 4) Blue is too connoted for inline links and "go to another url".

Fonds et contours — options 8), 3) and 6)

Section active dans le Sommaire - option 4)
The line is simple and explicit. It looks like a scrollbar too, that's a common design pattern. (would be nice to actually use it like a scrollbar :D) It's also the only option (with 5) that does not change the text disposition when changing: "bold" options change the text width thus creating weird disposition changes.

Logo dans l'entête — option 1) Clearly there's no contest here! 2 might be OK too but 1 is more "modern".
The logo should be visible on the top bar when scrolling (logo and article title should be at the same horizontal position than when you're at the top of the page)

Couleurs des liens — I strongly prefer the current color. The future color just makes it harder to read on light backgrounds

Taille de police — OK for me !

Nome utente:Asþont

✅ feedback recorded

Menu — 3) trigger nero (grassetto), argomenti in blu
Bordi e sfondi — 9) sfondo esterno della voce (pieno)
Sezione attiva nell'Indice — 2) grassetto
Logo nell'header — 1) Logo rettangolare sulla sinistra
Colore dei link — Colori proposti
Dimensione del carattere — 14px (attuali)

Asþont (talk) 17:08, 4 July 2022 (UTC)[reply]

wladek92 : already answered under nb 133 (....? )

see 133

Username:Sakretsu

Menu — apri il prototipo in un nuovo tab: https://di-visual-design-menus.web.app/Ursus_arctos?it Quale opzione preferisci e perché? Per favore, assicurati di aver verificato il menu della ricerca, il menu utente, il menu delle lingue e il menu degli strumenti.
Opzione 1, tutto blu. Cambiare colore non aiuta l'accessibilità.
Bordi e sfondi — apri il prototipo in un nuovo tab: https://di-visual-design-borders-bgs.web.app/Canis_lupus?it Quale opzione preferisci e perché?
Opzione 1, a questo punto mi manterrei sul semplice.
Sezione attiva nell'Indice — apri il prototipo in un nuovo tab: https://di-visual-design-toc-active.web.app/Oceano_Indiano?it Quale opzione preferisci e perché?
Non mi fa impazzire nessuna delle alternative proposte. Proverei con l'opzione 1 o l'opzione 2, sperando che il grassetto dinamico non distragga troppo.
Logo nell'header — apri il prototipo in un nuovo tab: https://di-visual-design-header-logo.web.app/Ailuropoda_melanoleuca?it Quale opzione preferisci e perché?
Preferisco l'opzione 1. Sono affezionato al logo classico quadrato (opzione 2), ma risulta fuori luogo nell'header della nuova interfaccia.
Colore dei link — apri il prototipo in un nuovo tab: https://di-visual-design-link-colors.web.app/Salmonidae?it Pensi che sia necessaria qualche messa a punto ulteriore prima di fare questo cambiamento?
No, mi sembra che i nuovi colori vadano bene.
Dimensione del carattere — apri il prototipo in un nuovo tab: https://di-visual-design-font-size.web.app/Trochilidae?it Hai delle perplessità riguardo alla dimensione del carattere proposta?
16px è veramente troppo grande. Al massimo si potrebbe provare con 15px, altrimenti lasciare la grandezza attuale.

Username:Quiddity

Menus
1. Blue and Blue. Links/buttons should clearly be differentiated from plain text, otherwise everything is ambiguous.
Borders and backgrounds
4. TOC line + header underline. This minimizes the (subjectively to me) superfluous lines, whilst cleanly delineating the distinct elements. However, the TOC line should intersect with the TOC-scrollbar (when present), and not have an extra gap between the two (screenshot).
Active section in the table of contents
1 or 4. Minimal animation (which can be distracting) whilst remaining clear.
Logo in the header
2 or 1. I still really like the way Winter handled it (like option 2).

But I can also imagine that technique working well with option 1, i.e. keeping the MainMenu button and Logo (but not wordmark) in the sticky-header [followed by the full-width search bar, with the current-page-title used as the search's placeholder text].
Link colors
Proposed colors. I often have a hard time seeing the 'visited-links' current purple color, and have so for years.
Font size
(Hesitantly) Proposed size. (or 15px as a compromise?). 10 years ago I would've said the other, but "as we get older, things look smaller" is starting to hit me. I zoom-in to 110% or 120% on a small but growing percentage of websites I regularly visit.

On the other hand, I deeply appreciate being able to see / skim a lot of information without scrolling (or minimal scrolling), so I lean towards 15px.

[1] Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"

[2] PT to PX converter

[1]

[2]