Reading/Web/Desktop Improvements/Features/Limiting content width/fr

L'un des principaux objectifs de ce projet est de rendre Wikipédia, et les autres projets Wikimédia, plus accueillants pour les novices. L'une des façons d'atteindre ce but est de rendre l'expérience de lecture des articles plus confortable.

Comment évalue-t-on si une expérience de lecture est confortable (ou inconfortable) ? Selon les recherches effectuées dans ce domaine, plusieurs facteurs y contribuent, en particulier la longueur des lignes. Dans une étude intitulée Computer text line lengths affect reading and learning (La longueur des lignes sur ordinateur affecte la lecture et l'apprentissage, Peter Orton, professeur au IBM Center for Advanced Learning, conclue que plus une ligne est longue, plus il est difficile de lire, et par conséquent d'apprendre et de retenir, des informations textuelles. Plusieurs autres études peuvent être trouvées dans les sources de l'article Wikipédia anglophone Line length, qui recommandent toutes entre 40 et 75 caractères par ligne.

Quoiqu'il ne soit pas simple d'aboutir aux largeurs recommandées sur les wikis Wikimédia, nous limiterons la largeur du contenu grâce à une largeur maximale afin de contenir l'essentiel du texte plus près de ces recommandations.

Vous pouvez explorer plus de détails sur les recherches et les considérations qui ont motivé cette fonctionnalité.

Plan de déploiement
Nous avons commencé à déployer les premiers changements en mai 2020 sur Office Wiki et Test Wiki, et avons depuis commencé à les déployer sur nos wikis primo-adoptants. Voir notre page principale sur les Fonctionnalités pour plus de détails.

Description et prérequis de la fonctionnalité
La principale fonction de cette fonctionnalité est de limiter la largeur du contenu des articles. Cependant, afin de nous assurer que les autres éléments de la page (en particulier la barre latérale et l'entête) ne s'éloignent pas trop du contenu, nous avons ajouté deux conteneurs supplémentaires. Le deuxième conteneur permet de s'assurer que la barre latérale reste proche du contenu. Puis pour empêcher l'entête de trop s'éloigner de ces deux éléments, un troisième conteneur contraint la largeur maximum de l'entête.

D'un point de vue technique : le contenu de la plupart des pages est placé à l'intérieur d'un conteneur de contenu d'une largeur maximale de 960px. Deux conteneurs additionnels permettent de gérer la largeur d'autres parties de l'interface telles que l'entête et la barre latérale : le conteneur espace de travail (laargeur maximale 1440px) et le conteneur page (1650px). Ci-dessous, vous pouvez voir des schémas qui illustrent le fonctionnement de ces conteneurs. Sur certaines pages, la largeur du contenu ne sera pas contrainte, notamment pour l'Historique, les Modifications récentes, et autres pages du type suivi. Pour explorer une démo interactive de cette fonctionnalité, vous pouvez tester ce prototype.

Prérequis et recommandations visuelles
Voici un GIF qui illustre la différence entre l'ancienne mise en page actuelle et la version actualisée en prenant en compte les diverses limitations de largeur décrites précédemment :

Contraintes
La principale complication est que certaines pages de suivi de modifications, telles que l'Historique et les Modifications récentes, deviennent plus difficiles à lire quand l'écran est plus étroit à cause du retour à la ligne. Nous avons donc décidé de traiter ces pages séparément, en ne les contraignant qu'à l'intérieur du conteneur d'espace de travail (1440px) au lieu du conteneur de contenu (960px). Voici un GIF d'un prototype qui montre la bascule entre une page d'article et la page d'historique associée :

User testing with editors
We performed a feedback round with a prototype of the limited content width with editors across multiple wikis. Editors were invited to explore the prototype and provide their feedback using a central notice banner. There were mixed feelings about the feature: many editors appreciated the shorter line lengths and agreed that the feature created a more comfortable reading experience. Some editors disliked the whitespace around the content and felt that it was wasted space. We are balancing all of that feedback with the extensive existing research about line-lengths and reading comfort.

Readability
The primary reason is to improve readability of Wikimedia wiki pages. So perhaps the first question is: how can we know what the optimal width of the content area is? There are research-based recommendations regarding optimal line lengths for readability of text, so we should probably start there. But then again Wikimedia wiki articles are different from common articles or web pages in certain ways. They are unique both in how long they are and in the variability of layout from one article to the next. Both of these factors may lead to a larger than usual need for scanning and searching for content (rather than linear reading). Our design must take into account these distinctions. We need to therefore ask, are Wikimedia wiki pages unique enough to warrant a line-length different from what is generally recommended? Below we explain how we’ve arrived at our design recommendation for what the max-width should be.

Without studying readability of Wikimedia wiki pages directly we can’t know what is optimal, but in an attempt to make an educated guess we start with the research on optimal line length for readable text. The research and recommendations in this area seem to be well established. The Wikipedia page on Line Length provides a good overview, as does the essay Size Matters: Balancing Line Length And Font Size In Responsive Web Design by Professor Laura Franz. The research study Computer text line lengths affect reading and learning by By Peter Orton, Ph.D. IBM Center for Advanced Learning is a more rigorous, academic study. The popular recommendation is that there should be between 40 and 75 characters per line. The findings of multiple studies conclude that "short line lengths are easier to read", and furthermore regarding learning and information retention "Subjects reading the narrow paragraphs had better retention than those reading the wide paragraphs". One can find many popular sites that conform to these guidelines. Articles on the online science journal Nature have a max-width resulting in ~76 characters per line, New York Times articles are ~64 characters per line, Times of India articles are ~100 characters (Hindi), Oxford Academic journal articles are ~75, and articles on the World Health Organization’s website are ~96 (Latin alphabet), ~46 (Chinese alphabet), and ~85 (Cyrillic alphabet). It is also worth noting that when using reading mode in Safari or Firefox text is rendered at ~73 and ~77 characters per line respectively (Latin alphabet).

In comparison, a Wikimedia wiki page on a browser window at 1280px* has a character count of ~170 characters per line, and that’s at the small end of the screen size spectrum. (*The most common computer screen size, accounting for 22% of users, is 1366px wide according to StatCounter; imagining a browser window at nearly full width you end up with ~1280px). Then factor in that on Wikimedia wiki the character count per line grows as the screen width grows (whereas on the other sites mentioned the character count per line remains the same, the result of max-width constraints). So on the second most popular screen-size, 1920px (21% of users), the character count per line is ~262 (again assuming a browser window at nearly full-width), more than three times the recommended value. So as a starting point we know that for paragraphs of uninterrupted text we are well over the recommended limit.

The question then becomes: why not limit the width of Wikimedia content such that we achieve the recommended line length, as other online content sites seem to? The short answer is: because our pages are different, and therefore people read them differently. Wikimedia wiki pages are very long, contain a large amount of information, and they are not uniform from one page to the next. As a result, people have a greater need to skim and search within pages than they would when reading a typical online article or book (this is supported by our research around reading time on Wikipedia). So while the line length recommendations provide a good starting point, we also must consider that the more narrow we make the content, the longer the page gets, and perhaps the more difficult scanning becomes (involves more scrolling, etc.) (for more information regarding different types of online reading please see this 2006 study conducted by the Nielsen Norman Group). Additionally, because Wikimedia wiki pages contain many elements that are floated inline alongside text it is not straightforward to achieve a specific number of text characters per line.

Establishing a common reading experience
The second reason we think introducing a max-width could be beneficial to the reading experience is because it would work towards establishing a common experience, which hopefully would be helpful to editors when making decisions about page layouts (note: 1024px is mentioned as a minimum size to consider in the WP:Manual of Style/Layout page, though that’s not quite the same thing). Currently an editor might be editing a page at a width of 1500px, while a reader reads it at a width of 1200px. By implementing a max-width we don’t remove this discrepancy completely (because there would still be variation below the fixed-width, for people with narrower screens), however we would be greatly limiting the range of variation.

Conclusion
After thinking all of that through we’ve come to two conclusions:


 * 1) It seems that a max-width in the range of 800–1000px is a sensible starting point. We will center the content on the page to ensure that it looks good with the sidebar both open and closed.
 * 2) It seems worthwhile to conduct a study focusing on the readability of Wikipedia articles specifically. We hope to be able to find the resources to do this.

Breaking templates / content / special pages / etc.
Part of what makes Wikipedia, and other Wikimedia wikis, a powerful tool for sharing knowledge is that there are very few constraints on how information is presented. The result of this is a wide variety of different elements on the pages: tables, image galleries, diagrams, panoramic images, graphs, forms, maps, category boxes, and more. Having dealt with the challenges of designing the mobile site, and getting the content to look good, we recognize that there are going to be some situations where page content doesn’t look great given the max-with. Our plan currently is:


 * Work with our test Wiki communities to identify issues and discuss solutions using template styles or other existing tools.
 * Not to implement the max-width on Special pages. Special pages are not necessarily intended for “reading”, they often function more as lists or dashboards, and until we have time to work through the intricacies of more responsive layouts for these pages we will be leaving them alone. Here is an initial prototype of how this would work — you can switch between "View history" and "Read" to get a sense for it.

Previous conversations
This topic has been discussed in the past. Please feel free to add additional links to past conversations here.
 * 2014 – discussion from the Typography Refresh project