Leitura/Web/Melhorias da Área de Trabalho/Recursos/Limitando a largura do conteúdo

Visão geral

Recursos

Repositório

Perguntas frequentes

« Anterior

Seguinte »

Rastreado no Phabricator
Tarefa T246420

Um dos objetivos principais do projeto é deixar a Wikipédia, e outras wikis da Wikimedia, mais atraentes para novatos. Uma maneira que pretendemos atingir este objetivo é deixar a leitura de artigos mais confortável.

O que significa ter uma experiência de leitura confortável (ou desconfortável)? De acordo com pesquisas, existem vários fatores que contribuem, e um dos mais importantes é a largura das linhas. O estudo Largura das linhas de texto em computadores afeta leitura e aprendizado, por Peter Orton, doutor no Centro de Aprendizado Avançado da IBM, chegou à conclusão de que quanto mais longa a linha, maior a dificuldade de leitura e, assim, de aprendizado e retenção da informação. Vários outros estudos relacionados podem ser encontrados no artigo da Wikipédia sobre largura da linha (em inglês), todos os quais recomendam entre 40 e 75 caracteres por linha.

Apesar de não ser particularmente fácil atingir as larguras recomendadas nas wikis da Wikimedia, estaremos limitando a largura do conteúdo utilizando uma largura máxima para que a maioria do texto das wikis estejam dentro do recomendado.

Você pode ler mais detalhes sobre a pesquisa e considerações por detrás deste recurso.

Descrição do recurso e requisitos

A função mais importante deste recurso é a limitação da largura do conteúdo do artigo. Entretanto, para garantir que os outros elementos da página (como a barra lateral e o cabeçalho) não fiquem distante demais do conteúdo, adicionar dois containers a mais. O segundo container garante que a barra lateral permaneça próxima ao conteúdo. Então, para impedir que o cabeçalho fique longe demais tanto do conteúdo quanto da barra lateral, existe um terceiro container que limita a largura máxima do cabeçalho.

De um ponto de vista técnico: o conteúdo da maioria das páginas é colocado dentro de um container de conteúdo com uma largura máxima de 960px. Existem dois containers adicionais que ajudam a manter a largura de outras partes da interface, tais como o cabeçalho e a barra lateral: container da área de trabalho (largura máx. de 1440px) e container da página (1650px). Abaixo estão diagramas que ilustram como os containers funcionam. Existem certas páginas cujo conteúdo não será limitado pelo container de conteúdo, incluindo histórico, mudanças recentes e outras páginas de registro.

• 
  Diagrama exibindo três camadas de containers, com a barra lateral fechada
• 
  Diagrama exibindo três camadas de containers, com a barra lateral aberta
• 
  Diagrama exibindo três camadas de containers, em uma página especial

Diretrizes de design e requisitos

Aqui está um GIF que ilustra a diferença entre o layout atual e o layout atualizado, com as várias limitações de largura descritas acima:

Um GIF comparando o layout atual e o atualizado que limita a largura do conteúdo

Limitações

O problema principal aqui é que certas páginas de registro, como o histórico e as mudanças recentes, ficam mais difíceis de serem lidas quanto mais estreita for a tela devido à quebra de linha. Portanto, decidimos tratar estas páginas de maneira especial, limitando elas somente ao container da área de trabalho (1440px), ao invés do container de conteúdo (960px). Aqui está um GIF de um protótipo que mostra a diferença entre uma página de conteúdo e sua página de histórico:

Um GIF exibindo a largura de uma página de conteúdo em comparação à página de histórico no novo layout do Vector

Teste com editores

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.

Goals and motivation

Legibilidade

Pesquisa

O objetivo principal é melhorar a legibilidade das páginas da Wikimedia. Decidimos trabalhar na largura da área de conteúdo. Existem recomendações baseadas em pesquisas sobre este assunto.

• O artigo da Wikipédia em inglês sobre Comprimento da linha fornece uma boa visão geral.
• O mesmo acontece com o ensaio da Professora Laura Franz.
• Optimal Line Length in Reading - A Literature Review (2005), from the peer reviewed journal Visible Language – "studies concluded that moderate line length in between 50 to 70 cpl [characters per line] are the easiest to read and users do not prefer extreme line lengths (very short or very long) while reading from screen. There was no significant effect of line length found on comprehension, though fast readers benefit from narrow columns with short lines due to specific reading patterns (with one contradictory finding)".
• Effects of Surrounding Information and Line Length on Text Comprehension from the Web (2002), from Canadian Journal of Learning and Technology – "Comprehension was affected by whitespace; participants had better comprehension for information surrounded by whitespace than for information surrounded by meaningless information", which is more likely to happen if the text stretches to the edge of the browser.
• The influence of reading speed and line length on the effectiveness of reading from screen (2001), from International Journal of Human-Computer Studies – "A line length of 55 cpl appears to support e!ective reading in terms of both rate and comprehension. However, as the line lengths used in this study were spread across a wide range, there may be a more optimal setting than this. By varying the range and extremes of line lengths in future research, it may be possible to more precisely identify an optimal format and to explore the relative contributions of mechanical and cognitive factors."
• Shorter Lines Facilitate Reading in Those Who Struggle (2013), from PLOS One – "short lines reduce the number of regressions, and generally improve reading speed and comprehension, simply by reducing the probability that crowded text in locations previously fixated can be perceived."
• The Effects of Line Length on Children and Adults' Online Reading Performance (2002), from Software Usability Research Laboratory (SURL) at Wichita State University – "This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl)".
• The Effects of Line Length on Children and Adults' Perceived and Actual Online Reading Performance (2003), from Proceedings of the Human Factors and Ergonomics Society Annual Meeting – "No differences were found for either reading time or efficiency for either adults or children. However, adults preferred shorter line lengths to full-screen line lengths." and "The narrowest line length condition was perceived as promoting the highest amount of reader concentration, while the medium line-length condition was considered to be the most optimally presented length for reading."
• Reading Online Text: A Comparison of Four White Space Layouts (2004), unclear if this was peer reviewed – "Results from this study showed that the manipulation of the Margin white space affected both reading speed and comprehension; participants read the Margin text slower, but comprehended more than the No Margin text. In general, the results favored the use of Margins."

A recomendação popular é que deve haver entre 40 e 75 caracteres por linha. Os resultados de vários estudos concluem que "comprimentos de linha curtos são mais fáceis de ler". Com relação ao aprendizado e retenção de informações: "Os sujeitos que leram os parágrafos estreitos tiveram melhor retenção do que aqueles que leram os parágrafos amplos".

Web Content Accessibility Guidelines (WCAG)

• The Web Accessibility Initiative (WCAG) guideline 1.4.8 states that, in order to be accessible to all users, lines of text should be 80 or fewer characters (or 40 or fewer characters if the text is Chinese, Japanese, or Korean)."

Sites populares com largura limitada

É possível encontrar muitos sites populares que estão em conformidade com essas diretrizes.

• Os artigos da revista científica online Nature têm largura máxima de aproximadamente 76 caracteres por linha.
• Os artigos do New York Times têm aproximadamente 64 caracteres por linha.
• Os artigos do Times of India têm cerca de 100 caracteres (hindi).
• Os periódicos da Oxford Academic possuem ~75.
• Os artigos da Organização Mundial da Saúde são ~96 no alfabeto latino, ~46 no chinês e ~85 em alfabeto cirílico.
• Ao usar o modo de leitura no Safari ou Firefox, o texto é renderizado em ~73 e ~77 caracteres por linha, respectivamente (alfabeto latino).

Comparação com wikis da Wikimedia

Atualmente, uma página wiki da Wikimedia em uma janela do navegador com 1280px tem aproximadamente 170 caracteres por linha. Isso está na pequena extremidade do espectro do tamanho da tela.

Na wiki da Wikimedia, a contagem de caracteres por linha aumenta conforme a largura da tela aumenta. Portanto, no segundo tamanho de tela mais popular, 1920px (21% dos usuários), a contagem de caracteres por linha é de aproximadamente 262, mais de três vezes o valor recomendado.

Por que não escolher a solução "mais simples"

Com base exclusivamente no comprimento de linha recomendado, parece que algo em torno de 700px é razoável. Por que não limitar a largura de forma que alcancemos o comprimento de linha recomendado, como outros sites de conteúdo online parecem fazer?

Porque nossas páginas são diferentes e, portanto, as pessoas as lêem de maneira diferente.

• As páginas wiki da Wikimedia são muito longas, contêm uma grande quantidade de informações e não são igualmente uniformes. As a result, people have a need to skim and search within pages. Isso é diferente da leitura linear de um artigo ou livro online típico. Isso é apoiado por nossa pesquisa sobre o tempo de leitura na Wikipédia.
• Quanto mais estreito formos o conteúdo, mais longa será a página. Talvez a digitalização também se torne mais difícil, porque envolve mais rolagem, etc. Para obter mais informações sobre os diferentes tipos de leitura online, consulte este estudo de 2006 conduzido pelo Nielsen Norman Group.
• Além disso, não é fácil obter um número específico de caracteres de texto por linha. Isso ocorre porque as páginas wiki da Wikimedia contêm muitos elementos que são inseridos junto com o texto.

Artigo da Lua com 550px de largura, parágrafo ininterrupto com uma contagem de caracteres por linha de ~83

Artigo da Lua com 750px de largura, parágrafo próximo à infobox com uma contagem de caracteres por linha de ~72

Nosso design deve levar em consideração essas distinções.

• Devemos limitar a largura em alguma quantidade para acomodar a leitura focada/engajada. Isso significa comprimentos de linha mais curtos e menos densidade.
• Ao mesmo tempo, devemos permitir que os leitores percorram e pesquisem, obtendo um mapa visual da página sem ter que rolar muito Este é um argumento para comprimentos de linha mais longos e mais densidade.

Como fazemos isso?

Nossa solução

Existem duas experiências comuns que devemos considerar.

1. A parte superior de um artigo, um parágrafo de texto situado próximo a uma infobox
2. No meio de um artigo, um parágrafo sem elementos que o interrompam

Podemos considerar essas duas experiências em várias larguras, contando o comprimento de caracteres por linha para cada uma:

Largura do conteúdo	Parágrafo próximo a uma infobox	Parágrafo ininterrupto
600px	~30 caracteres por linha	~94 caracteres por linha
700px	~59	~109
800px	~76	~125
900px	~89	~142
1000px	~105	~154

Com 1000px de largura, um parágrafo de texto ininterrupto tem ~154 caracteres, quase o dobro do limite recomendado. Às vezes, há elementos flutuantes que são mais largos do que infoboxes, resultando em colunas de texto mais estreitas. Além disso, não houve uma largura máxima. Embora alguns editores possam editar em telas mais estreitas (ou verificar como as páginas ficam em telas mais estreitas), é provável que haja conteúdo em páginas que não ficarão bem em uma largura mais estreita (ainda), porque pode não ter sido uma consideração (por exemplo, grandes tabelas).

Another approach is thinking about a grid-based layout. Esta é uma abordagem que visa tanto a harmonia visual na página quanto a tomada de decisões sobre espaçamentos, larguras, etc. com mais facilidade. The Vector skin does not currently use a grid. Something we could do is think about the width of the infobox as a grid column (since they are such common elements), and then use a multiple of that to determine the content width.

India article with content at 3x infobox width

India article with content at 4x infobox width

Estabelecendo uma experiência de leitura comum

A introdução de uma largura máxima funcionaria no sentido de estabelecer uma experiência comum. Esperançosamente, seria útil para os editores na tomada de decisões sobre layouts de página.

Observação: 1024px é mencionado na Wikipédia em inglês como um tamanho mínimo a ser considerado. Isso não é exatamente a mesma coisa, no entanto.

Atualmente, um editor pode estar editando uma página com uma largura de 1500px, enquanto um leitor a lê com uma largura de 1200px. Ao implementar uma largura máxima, não removemos essa diferença completamente. Ainda haveria variação abaixo da largura fixa, para pessoas com telas mais estreitas. No entanto, estaríamos limitando muito a faixa de variação.

Conclusão

Depois de pensar tudo isso, chegamos a duas conclusões:

1. Parece que uma largura máxima na faixa de 800-1000px é um ponto de partida sensato. Vamos centralizar o conteúdo na página para garantir que fique bem com a barra lateral aberta e fechada.
2. Parece valer a pena conduzir um estudo com foco na legibilidade de artigos da Wikipédia, especificamente. Esperamos encontrar os recursos para fazer isso.

Mostrando conteúdo com largura máxima de 960px (barra lateral recolhida)

Mostrando conteúdo com largura máxima de 960px (barra lateral aberta)

Notas adicionais

A note on 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. We have dealt with the challenges of designing the mobile site, and got the content to look good. This is why we do 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 intended for “reading”. They often function more as lists or dashboards. Until we have time to work through the details about 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: https://di-collapsible-sidebar-5.firebaseapp.com/Tea

Previous conversations

This topic has been discussed in the past.

• 2014 – discussion from the Typography Refresh project

Please feel free to add additional links to past conversations here.

Full-width toggle

The fullscreen toggle

Until October 2022, logged-in users were only able to switch between the limited and full content width using gadgets. According to the English Wikipedians, this was insufficient. We decided to build a toggle. (On the right, you can see a screenshot of this toggle.) It needed to be visible and available to both logged-out and logged-in users. As a result, we have:

1. Built a preference for logged-in users. It allows for the width to be set across pageviews and wikis. The preference is available in the appearance section of the preferences page (Ativar modo de largura limitada). It may also be set as a global preference.
2. Built a toggle for logged-in and logged-out users. The toggle is available on every page if the width of the screen is larger than 1400px. Selecting the toggle increases the width of the content area.
   • For logged-in users, the toggle also controls the preference mentioned in 1 above. For example, if you click the toggle on the page and visit your preferences page, you will notice that the enable limited width mode checkbox is unchecked.
   • For logged-out users, initially, the toggle set the width on a per-page basis. This means that after refreshing the page or opening a different page the width would return to the default (limited) state.
   • After making our skin the default on English Wikipedia, we heard concerns about the setting for logged-out users. After coordinating with many teams, we made a change. Since February 2023, all users see the width setting of their choice despite refreshing pages or opening new ones.

Why did the toggle work on a per-page basis initially? This was because in principle, preferences are not available for logged-out users. The lack of preferences for logged-out users doesn't only apply to this skin. (You may learn more about the technical limitations.) We have managed to find a short-term bypass. We have more work to do to make sure this solution may be maintained. We might use a better solution in the future. This could be applied to settings such as font size or dark mode.

References