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

Ci piacerebbe ricevere un feedback su alcune decisioni riguardanti il visual design per il tema Vector 2022. Con “visual design” intendiamo lo stile del testo, dei pulsanti, dei bordi, degli sfondi e della spaziatura.

Istruzioni
Per favore tieni presente che:
 * 1) Consulta questa pagina per il contesto
 * 2) Crea una nuova sezione su questa pagina utilizzando il modulo qui sotto (si autocompletarà con le domande alle quali devi rispondere).
 * 3) Aggiungi i tuoi commenti riguardanti il prototipo nella nuova sezione che si è creata.
 * Questi sono prototipi, la maggioranza dei link non funziona davvero e che potresti incappare in altri bug o difetti.
 * Il modulo per creare una nuova sezione purtroppo non è compatibile con il VisualEditor (VE). Se stai utilizzando l'interfaccia di modifica visuale (senza wikisintassi), per favore crea manualmente una nuova sezione e copia incolla le domande di feedback (elencate qui sotto).
 * Non è necessario che esamini tutte le sezioni; concentrati su quelle che ti interessano di più.
 * Il design, e soprattutto il visual design, ha una componente soggettiva. Nonostante tutti abbiamo diritto ad avere le nostre opinioni, ti chiediamo di fare del tuo meglio per spiegarci le tue ragioni, e in che modo esse siano compatibili con i nostri obiettivi di semplicità e usabilità.
 * Potresti non trovare qui alcune valide opzioni. Sentiti libero di suggerirci qualcosa di diverso se pensi che funzionerebbe meglio delle opzioni presentate. Se sei a tuo agio con la grafica e/o con il codice sentiti pure libero di includere dei modellini o dei prototipi delle tue idee (ma non è richiesto). I file del design: Figma, Sketch, Google Drawing. Prototipo: GitHub.
 * Se vuoi renderci partecipe delle tue proprie idee per favore non modificare questa pagina; scrivile nel modulo per il feedback.
 * Apprezziamo i grafici non professionisti e rispettiamo il punto di vista dei grafici esperti. Esamineremo tutti i feedback e le idee, e alla fine ci affideremo al giudizio di designer esperti per prendere le decisioni finali.
 * ⓘ Se preferisci mandare il tuo feedback via email, per favore contatta Olga Vasileva all'indirizzo [mailto:Olga@wikimedia.org olga@wikimedia.org].

Anteprima delle domande per il feedback

 * 1) Menu — apri il prototipo in un nuovo tab: https://di-visual-design-menus.web.app/Brown_bear. 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.
 * 2) Bordi e sfondi — apri il prototipo in un nuovo tab: https://di-visual-design-borders-bgs.web.app/Zebra. Quale opzione preferisci e perché?
 * 3) Sezione attiva nel Sommario — apri il prototipo in un nuovo tab: https://di-visual-design-toc-active.web.app/Otter. Quale opzione preferisci e perché?
 * 4) Logo nell'header — apri il prototipo in un nuovo tab: https://di-visual-design-header-logo.web.app/Panda. Quale opzione preferisci e perché?
 * 5) Colore dei link — apri il prototipo in un nuovo tab: https://di-visual-design-link-colors.web.app/Salmon. Pensi che sia necessaria qualche messa a punto ulteriore prima di fare questo cambiamento?
 * 6) Taglia del font — apri il prototipo in un nuovo tab: https://di-visual-design-font-size.web.app/Hummingbird. Hai delle perplessità riguardo alla taglia del font proposta?

Sfondo e contesto
Negli lutimi due anni abbiamo apportato vari cambiamenti strutturali all'interfaccia. Abbiamo spostato la barra della ricerca, il selettore delle lingue, e il Sommario. Abbiamo organizzato alcuni link e strumenti nei menu. E abbiamo limitato la larghezza del contenuto, aggiunto l'header fisso, e spostato il titolo della pagina sopra la barra degli strumenti della pagina. Adesso che tutti questi elementi sono posizionati nell'interfaccia aggiornata stiamo spostando la nostra attenzione sull'aspetto globale. Alcune delle domande iniziali che si è posto il nostro team sono: Storicamente il nostro approccio è sempre stato semplice e funzionale. Lo stile degli elementi HTML è minimo (se non addirittura nullo), il che semplifica l'interfaccia sia per chi la usa sia per chi la progetta e la costruisce. Ciò significa anche che il nostro visual design è pressoché senza tempo. Non seguiamo le mode e non abbiamo bisogno di fare cambiamenti ogni due anni. Guardando gli screenshot qui sotto possiamo vedere come Monobook e il Legacy Vector usano il visual design con parsimonia (principalmente bordi e colori di sfondo).
 * Come possiamo migliorare l'interfaccia attraverso il visual design?
 * Pensiamo che sia utile per il tema avere un aspetto più deciso (le linee blu e la sfumatura del Legacy Vector) ?
 * A che punto diventa troppo, tanto da diventare una fonte di distrazione o rendere l'interfaccia confusa?
 * E se invece facessimo il meno possibile, adottando un approccio iperminimalista come quello adottato dall'interfaccia delle origini di Wikipedia?

Menu
Usiamo svariati menu nella nostra interfaccia. Fino ad ora, il nostro approccio allo stile dei menu non è stato coerente. Abbiamo l'opportunità, con Vector 2022, di sviluppare un approccio allo stile dei nostri menu più accessibile e coerente. Ridotti all'osso, i menu hanno due componenti: un trigger di menu (traducibile come innesco, attivatore) e gli argomenti del menu. Stiamo considerando i colori blu vs. nero (sia per il trigger che per le opzioni di menu), e i caratteri normali vs. in grassetto (per il trigger del menu).

Link al prototipo con le opzioni: https://di-visual-design-menus.web.app/Brown_bear.

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

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

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

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

Logo in the header
Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

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

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

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

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

In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:

"Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points." Users often scan the page in order to find a certain piece of information. This, however, wasn't included in the study. To accommodate this, we are recommending a font size of 16px instead of their conclusion of 18px. We would be increasing the maximum width of the article as well, from 960px to 1050px.

Annotated bibliography of typography and readability research

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

MaxEnt's note to the team and other editors: 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.