Đọc/Web/Cải thiện phiên bản máy tính/Tính năng/Giới hạn chiều rộng nội dung

Tổng quan

Chức năng

Lưu trữ

CHTG

« Trước

Tiếp theo »

Theo dõi trên Phabricator
Việc T246420

Một trong những mục tiêu chính của dự án là làm cho Wikipedia và các wiki khác của Wikimedia thân thiện hơn với người dùng mới. Một cách mà chúng tôi nhắm đến để có thể thực hiện được điều này là khiến cho trải nghiệm đọc các bài viết trở nên thoải mái hơn.

Nhưng, trải nghiệm đọc thoải mái (hoặc không thoải mái) có nghĩa là gì? Theo nghiên cứu, có một số yếu tố góp phần vào việc này, mà một yếu tố chủ yếu chính là độ dài của dòng. Nghiên cứu Độ dài dòng văn bản trên máy tính ảnh hưởng đến việc đọc và học của Peter Orton, Ph.D. tại Trung tâm Học tập Nâng cao của IBM, kết luận rằng dòng chữ càng dài thì người đọc càng khó đọc, và do đó khó có thể học hỏi và ghi nhớ thông tin văn bản. Một số nghiên cứu liên quan khác có thể được tìm thấy trên bài viết Wikipedia Độ dài dòng, tất cả đều khuyến nghị rằng mỗi dòng nên có từ 40 đến 75 ký tự.

Mặc dù không dễ để đạt được độ dài dòng khuyến nghị trên các wiki của Wikimedia nhưng chúng tôi sẽ giới hạn độ rộng của nội dung bằng cách sử dụng một độ rộng tối đa để phần lớn văn bản trên wiki có độ dài của dòng gần với khuyến nghị hơn.

Bạn có thể tìm hiểu thêm chi tiết về các nghiên cứu liên quan đến tính năng này.

Mô tả và yêu cầu của tính năng

Chức năng chính của tính năng này là giới hạn chiều rộng của nội dung bài viết. Tuy nhiên, để đảm bảo rằng các yếu tố khác trên trang (cụ thể là thanh bên và tiêu đề) không trôi quá xa khỏi nội dung, chúng tôi đã thêm hai vùng chứa bổ sung. Vùng chứa thứ hai đảm bảo rằng thanh bên vẫn ở gần với nội dung. Sau đó, để giúp tiêu đề không trôi quá xa so nội dung và thanh bên, có một vùng chứa thứ ba hạn chế chiều rộng tối đa của tiêu đề.

Từ góc độ kỹ thuật: nội dung trên hầu hết các trang được đặt bên trong một vùng chứa nội dung với chiều rộng tối đa là 960px. Có hai vùng chứa bổ sung giúp quản lý độ rộng của các phần khác của giao diện, chẳng hạn như tiêu đề và thanh bên: vùng chứa không gian làm việc (độ rộng tối đa 1440px) và vùng chứa trang (1650px). Dưới đây là các sơ đồ minh họa cách các vùng chứa này hoạt động. Có một số trang nhất định có nội dung không bị hạn chế bởi vùng chứa nội dung bao gồm các trang Lịch sử, Thay đổi gần đây và các trang loại nhật ký tương tự khác.

• 
  Sơ đồ hiển thị bố cụ ba vùng chứa, với thanh bên đã đóng
• 
  Sơ đồ hiển thị bố cục ba vùng chứa, với thanh bên đang mở
• 
  Sơ đồ hiển thị bố cục ba vùng chứa, với một trang đặc biệt

Yêu cầu và hướng dẫn thiết kế

Đây là một GIF minh họa sự khác biệt giữa bố cục hiện tại và bố cục được cập nhật với các giới hạn chiều rộng khác nhau được mô tả ở trên:

Ảnh GIF so sánh bố cục hiện tại với bố cục giới hạn chiều rộng nội dung mới

Hạn chế

Vấn đề chính ở đây là một số trang nhật ký nhất định, chẳng hạn như Lịch sử và Thay đổi gần đây, trở nên khó đọc hơn khi màn hình hẹp đi do bị ngắt dòng. Vì vậy, chúng tôi đã quyết định xử lý các trang này theo một cách riêng, giới hạn chiều rộng của chúng bằng vùng chứa không gian làm việc (1440px) thay vì vùng chứa nội dung (960px). Đây là ảnh GIF của nguyên mẫu thể hiện sự khác biệt giữa trang bài viết và trang lịch sử của bài viết đó:

Ảnh GIF hiển thị chiều rộng của trang bài viết với trang lịch sử trên bố cục Vector mới

Thử nghiệm người dùng với biên tập viên

Chúng tôi đã tiến hành một vòng phản hồi với nguyên mẫu có độ rộng nội dung hạn chế với các biên tập viên trên nhiều wiki. Các biên tập viên đã được mời khám phá nguyên mẫu và cung cấp phản hồi của họ bằng biểu ngữ thông báo trung tâm. Có nhiều ý kiến khác nhau về tính năng này: nhiều biên tập viên đánh giá cao việc cho ngắn dòng lại và đồng ý rằng tính năng này tạo ra trải nghiệm đọc thoải mái hơn. Một số biên tập viên thì lại không thích khoảng trắng xung quanh nội dung và cảm thấy rằng đó là khoảng trống lãng phí. Chúng tôi đang cân bằng tất cả phản hồi đó với các nghiên cứu sâu rộng hiện có về độ dài dòng và sự thoải mái khi đọc.

Mục tiêu và động lực

Readability

Research

The primary objective is to improve readability of Wikimedia wiki pages. We decided to work on the width of the content area. There are research-based recommendations on this issue.

• English Wikipedia article on Line length provides a good overview.
• So does the essay by Professor 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."

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". Regarding learning and information retention: "Subjects reading the narrow paragraphs had better retention than those reading the wide paragraphs".

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

Popular sites with limited width

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.
• Articles on the World Health Organization’s website are ~96 (Latin alphabet), ~46 (Chinese alphabet), and ~85 (Cyrillic alphabet).
• When using reading mode in Safari or Firefox text is rendered at ~73 and ~77 characters per line respectively (Latin alphabet).

Comparison with Wikimedia wikis

Currently, an English Wikimedia wiki page on a browser window at 1280px has a character count of ~170 characters per line. That’s at the small end of the screen size spectrum.

On Wikimedia wiki the character count per line grows as the screen width grows. So on the second most popular screen-size, 1920px (21% of users), the character count per line is ~262, more than three times the recommended value.

Why not choose "the simplest" solution

Based exclusively on the recommended line length, it seems like somewhere around 700px is reasonable. Why not limit the width such that we achieve the recommended line length, as other online content sites seem to?

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 need to skim and search within pages. This is different than linear reading a typical online article or book. This is supported by our research around reading time on Wikipedia.
• The more narrow we make the content, the longer the page gets. Perhaps the more difficult scanning becomes as well, because it 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, it is not straightforward to achieve a specific number of text characters per line. That is because Wikimedia wiki pages contain many elements that are floated inline alongside text.

Moon article at 550px wide, uninterrupted paragraph with a character count per line of ~83

Moon article at 750px wide, paragraph next to infobox with a character count per line of ~72

Our design must take into account these distinctions.

• We should limit the width by some amount to accommodate focused/engaged reading. This means shorter line lengths, and less density.
• At the same time, we should still enable readers to skim and search around, obtaining a visual map of the page without having to scroll too much This is an argument for longer line lengths, and more density.

How do we do that?

Our solution

There are two common experiences we might want to consider.

1. The top of an article, a paragraph of text situated next to an infobox
2. The middle of an article, a paragraph with no elements interrupting it

We can consider these two experiences at various widths, counting the character length per line for each:

Content width	Paragraph next to an infobox	Uninterrupted paragraph
600px	~30 characters per line	~94 characters per line
700px	~59	~109
800px	~76	~125
900px	~89	~142
1000px	~105	~154

At 1000px wide an uninterrupted paragraph of text is ~154 characters long, just about double the upper limit of the recommended range. Sometimes there are floated elements that are wider than infoboxes, resulting in more narrow columns of text next to them. Also there has not been a max-width. While some editors might edit on narrower screens (or check how pages look on narrower screens) there’s likely content on pages that won’t look great at a narrower width (yet), because it might not have been a consideration (e.g. large tables).

Another approach is thinking about a grid-based layout. This is an approach that aims for both visual harmony on the page, and making decisions about spacing, widths, etc. easier. 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

Establishing a common reading experience

Introducing a max-width would work towards establishing a common experience. Hopefully, it 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. That’s not quite the same thing, though.

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

Showing content with a max-width of 960px (sidebar collapsed)

Showing content with a max-width of 960px (sidebar open)

Additional notes

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.

Công cụ chuyển đổi chiều rộng đầy đủ

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 (Bật chế độ giới hạn chiều rộng nội dung). 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.