Đọc/Web/Cải thiện phiên bản máy tính

< Reading‎ | Web
This page is a translated version of the page Reading/Web/Desktop Improvements and the translation is 99% complete.
Outdated translations are marked like this.

Giao diện Wikimedia mặc định trước đó (Vector) được triển khai vào năm 2010. Qua thập kỷ tiếp theo, giao diện này đã được làm phong phú thêm với các phần mở rộng, tiện íchscript người dùng. Hầu hết chúng đều không được phối hợp về mặt thị giác hoặc liên-wiki. Đồng thời, thiết kế web cũng như sự kỳ vọng của độc giả và biên tập viên đã phát triển hơn nhiều. Đã đến lúc biến một số những ý tưởng này trở thành trải nghiệm mặc định cho tất cả người dùng, tại tất cả wiki, theo một cách thống nhất và ngăn nắp.

Mục tiêu của chúng tôi là khiến các wiki Wikimedia trở nên thân thiện hơn và làm tăng tính tiện ích đối với người đọc và duy trì tính tiện ích cho những biên tập viên đang có. Chúng tôi đã tính toán sự gia tăng niềm tin và tình cảm tích cực đối với trang của chúng tôi, cũng như tính tiện ích của trang (việc sử dụng các hành vi phổ biến ví dụ như tìm kiếm và thay đổi ngôn ngữ).

Hiện tại, ở hầu hết wiki, chỉ các người dùng đã đăng nhập mới có khả năng chọn tham gia. Tuy nhiên, ở ngày càng nhiều wiki, sự thay đổi của chúng tôi được triển khai cho tất cả theo mặc định, và các người dùng đã đăng nhập có khả năng chọn không tham gia. Chúng tôi đang gia tăng số lượng các wiki có Vector 2022 đặt mặc định, cho tới khi sự cải thiện của chúng tôi trở thành mặc định trên mọi wiki.

Cập nhật

tháng 11 2023: Visual changes, more deployments, and shifting focus

 
Before (?vectorzebradesign=0)
 
After (?vectorzebradesign=1)

New styling inspired by Zebra prototype

As part of Zebra #9 prototype, which we wrote about in the last two updates, we introduced two kinds of visual changes: color-based area separation, and other CSS modifications. As we reported previously, the A/B test didn't prove that the color-based separation was an improvement. We focused on the other CSS modifications instead, and we're implementing these changes now. To preview the difference, you may use URL parameters: ?vectorzebradesign=0 (without the changes) and ?vectorzebradesign=1 (with the changes). The changes are:

  • Dropdown menus (the sidebar, table of contents, user menu, and tools menu when not pinned) have a lighter outline and drop-shadow.
  • The "chuyển sang thanh bên"/ "ẩn" buttons in the dropdown menus have a gray background instead of the square brackets.
  • The main menu no longer has a gray background when it is placed in the side column (when it's pinned). Instead, all menus have the same appearance when placed in the side columns.
  • The left and right columns have equal width.
  • Due to the change above, the content width gets slightly narrower when menus are pinned in both columns.
  • The gap between the table of contents and content area is smaller.

In mid-November, we shipped these changes to the following Wikipedias: French, Catalan, Hebrew, Polish. We are planning on introducing these changes across all the wikis within 2-3 weeks. These will enable future modifications, like the Accessibility for reading menu.

Continuing deployments of the Vector 2022 skin

A video about Vector 2022

Since our last update, we have changed the default skin on a few Wikipedias: Dutch, Hindi, Hungarian, Norwegian (bokmål), and Swedish. We have also released a short video about the skin. In addition, after receiving all logos from our Design team, we were also ready to continue the wide-scale deployments on sister projects.

  • The Vector 2022 skin is now the default on all non-English Wikibooks, Wikinews, Wikiquotes, Wikiversity, as well as on Meta-Wiki.
  • We are continuing conversations and scheduling deployments to the remainder of sister projects, beginning with non-English Wikisource, Wiktionary, and Wikivoyage.

Some of these projects may need adjustments, like default settings for limited/full-width at namespaces unique to Wikisource. Gadgets or user scripts may need to be updated, too. We gladly make fixes or assist in making them, depending on whether changes need to be made in the skin itself or a community-controlled code. Reach out to us on the Desktop Improvements talk page or write directly to SGrabarczuk (WMF) if you have any questions or requests for further changes.

Focusing on further desktop and mobile readability improvements

The team has shifted focus onto the Accessibility for reading project. We will work on improvements in typography and introduce dark mode to the Vector 2022 and Minerva skins. Please visit the project page for more details and information on how to get involved.

tháng 9 2023: Results from the Content separation (Zebra #9) A/B test

In June 2023, we ran an experiment which compared different content separation layouts of the interface.

This prototype shows the tested design; we're calling it "Zebra". The goal was to improve readability and focus on the content of the page. The experiment tested the prototype design and compared it to the current all-white Vector 2022 design. The results of the experiment showed:

  1. A 3% increase in pageviews per session in the treatment group attributed to Zebra
  2. A 3.4% decrease in edits per session in the treatment group attributed to Zebra
  3. A 17% decrease in the click rate of the table of contents
  4. An 87% increase in the page tool pins per session

After reviewing the settings of our test, we did not find any issues that would result in data inconsistencies. Next, we studied other factors which might affect the results of the test. We noticed that a significant amount of the decrease in edits and pageviews came from screen sizes narrower than 1200 px. We combined these results with the results of our user tests.

These did not indicate significant differences in readability between the test and control designs.

Our conclusion was that the prototype did not, in its tested form, improve readability and could negatively affect edits.

We decided not to proceed with the deployment of this prototype in its tested form. Instead, we plan to improve readability and focus on the content through the following:

  1. Introducing changes to the typography, focused on improving readability and content comprehension. This is the goal of the new project, Accessibility for reading
  2. Introducing improvements to Zebra, optimizing for narrower screens, and repeating the tests.

Mục tiêu của chúng tôi là gì?

Hãy hình dung một cái tủ quần áo

Trước đó, giao diện...

...không đạt được như kỳ vọng. ...bừa bộn và không có tính trực giác. ...không làm nổi bật phía cộng đồng. ...không thống nhất với phiên bản điện thoại.

  1. Giao diện máy tính không đạt được như kỳ vọng được tạo ra bởi các nền tảng web hiện đại. Nó đem lại cảm giác mất phương hướng và mất kết nối. Việc định hướng và các liên kết liên wiki bị sắp xếp một cách vô tổ chức.
  2. Có những đám lộn xộn làm phân tâm người đọc khỏi mục đích mà họ tới. Người đọc khó có thể tập trung được vào nội dung. Họ không thể thay đổi ngôn ngữ, tìm kiếm nội dung hay tùy chỉnh cài đặt chế độ đọc theo trực giác. Các biên tập viên mới cũng không thể sử dụng trực giác của mình để cài đặt tài khoản, mở trình sửa đổi hay học cách sử dụng các trang không phải bài viết.
  3. Chỉ một số lượng nhỏ người đọc hiểu cách mà các wiki Wikimedia hoạt động. Nhiều người đọc không biết rằng nội dung mà họ đang đọc được viết và cập nhật thường xuyên bởi các tình nguyện viên, hay rằng chính họ cũng có thể đóng góp cho bài viết.
  4. Sự khác biệt lớn trong trải nghiệm giữa giao diện máy tính, app và web điện thoại khiến việc kết nối các sản phẩm của chúng ta trở nên khó khăn hơn. Còn thiếu một sự thống nhất trong concept của các trang Wikimedia.

Các thay đổi được tạo ra như thế nào

Nguyên tắc

Chúng tôi không đụng vào nội dung. Chúng tôi không loại bỏ bất cứ tính năng nào. Chúng tôi không chạm vào bất cứ skin nào khác ngoài Vector. Chúng tôi được truyền cảm hứng bởi các tiện ích đang sẵn có. Chúng tôi thực hiện những thay đổi lớn theo từng bước.

  1. Chúng tôi chỉ làm việc với giao diện. Chúng tôi sẽ không thay đổi gì đối với các bản mẫu kiểu, cấu trúc của nội dung trang, hỗ trợ bản đồ, hay các bản mẫu liên wiki.
  2. Các skin khác ngoài Vector nằm ngoài phạm vi điều chỉnh của chúng tôi. Chúng tôi đã đóng băng Vector thành phiên bản Vector cũ, và bắt đầu triển khai các tính năng của chúng tôi như là một phần của Vector mặc định mới.
  3. Mặc dù những thay đổi của chúng tôi khá dễ dàng chú ý thấy nhưng chúng tôi đang thực hiện một cách tiếp cận mang tính tiến hóa và muốn trang tiếp tục có cảm giác quen thuộc với người đọc và biên tập viên. Mỗi tính năng đều được thảo luận, phát triển và triển khai một cách riêng biệt nhau.
  4. Chúng tôi đã thử nghiệm các cải thiện mình với sự hợp tác của một bộ rất đa dạng các wiki tình nguyện "triển khai sớm" (cả Wikipedia và các dự án chị em).
  5. Cả trước khi phát triển và sau khi triển khai, chúng tôi đều thu thập dữ liệu (thông qua thử nghiệm A/B, các vòng phản hồi nguyên mẫu, v.v). Trong trường hợp có kết quả tiêu cực một cách đáng kể, chúng tôi cam kết sẽ lùi sửa đổi của mình.
  6. Chúng tôi đã phân tích nhiều wiki và chú ý thấy nhiều tiện ích hữu dụng. Một số chúng chắc chắn xứng đáng được đưa lên bề mặt và trở thành một phần của trải nghiệm mặc định.
  7. Các yếu tố của giao diện đã di chuyển từ nơi này sang nơi khác, nhưng tất cả các mục điều hướng và các tính năng khác trước đó đang có sẵn theo mặc định đều đã được giữ nguyên.


Kế hoạch và dòng thời gian triển khai

Giao diện giờ đã sẵn sàng để trở thành mặc định trên bất kỳ wiki nào.

The timeline

Danh sách các wiki triển khai sớm (wiki thử nghiệm) 

Nhóm wiki đầu tiên (được đánh dấu là ※ trong dòng thời gian ở trên):

Nhóm wiki thứ hai (được đánh dấu là † trong dòng thời gian ở trên):

Nhóm wiki thứ ba (được đánh dấu là ‡ trong dòng thời gian ở trên):

Nhóm wiki thứ tư (được đánh dấu là § trong dòng thời gian ở trên):

Nhóm wiki nhỏ đầu tiên (được đánh dấu là ¶ trong dòng thời gian ở trên): 

Tham gia và Liên hệ

  • Đăng ký nhận bản tin
  • Biên dịch: giúp chúng tôi biên dịch các trang liên quan:
Các bản dịch ưu tiên 

TOP3

  1. Đọc/Web/Cải thiện phiên bản máy tính
  2. Đọc/Web/Cải thiện phiên bản máy tính/Các câu hỏi thường gặp
  3. Đọc/Web/Cải thiện phiên bản máy tính/Tính năng

Các bản dịch ưu tiên khác

  1. Template:Reading/Web/Desktop Improvements/Talk page intro
  2. Template:Reading/Web/Desktop Improvements/Features/Navigation
  3. Template:Reading/Web/Desktop Improvements/Header
  4. Đọc/Web/Cải thiện phiên bản máy tính/Cập nhật
  5. Đọc/Web/Cải thiện phiên bản máy tính/Lưu trữ
  6. Template:Reading/Web/Desktop Improvements/Office hours announcement

Liên kết trực tiếp tới mọi bản dịch


Tính năng nào đã được thêm