MediaWiki

Đọc/Web/Cải thiện phiên bản máy tính/Tính năng/Thanh đầu trang dính

< Reading‎ | Web‎ | Desktop Improvements‎ | Features
This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 96% complete.
Outdated translations are marked like this.
Languages:
Tracked in Phabricator
Task T283505

Với tư cách là một phần của dự án Cải thiện phiên bản máy tính, chúng tôi sẽ thay đổi các công cụ được sử dụng phổ biến mà trước đây chỉ có sẵn ở trên cùng của trang. Chức năng mới sẽ cho phép tiếp cận những công cụ này xuyên suốt trang thông qua một thanh đầu trang "dính", hay có thể hiểu là "cố định". Mục tiêu của chúng tôi là giúp người đọc và biên tập viên tiếp cận những công cụ này một cách dễ dàng hơn. Giờ chúng tôi nhận ra rằng, họ phải thường xuyên cuộn tít lên trên đầu trang.

Khái quát và Mục tiêu

Hiện tại, nhiều chức năng trên trang wiki chỉ có sẵn cho người dùng ở trên đầu trang, và/hoặc ở thanh bên trái trang. Việc này trở nên rắc rối ở những trang dài hơn, khi cuộn qua một vài đoạn văn đầu có nghĩa là người dùng sẽ phải cuộn ngược trở lên để có thể tiếp cận lần nữa những công cụ và tài nguyên khác. Phương pháp chúng tôi đề xuất để giải quyết vấn đề này là khiến thanh đầu trang trở nên "dính". Điều này có nghĩa là nó được giữ cố định ở trên cùng màn hình (phía trên phần nội dung) khi bạn cuộn trang xuống hoặc lên.

Thêm nữa, hiện tại chúng ta cung cấp rất ít định hướng bên trong trang cho người đọc và người đóng góp. Điều này khiến việc phân biệt một trang và những cái khác trở nên khó khăn.

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

  • Cung cấp cả các chức năng lẫn bối cảnh xuyên suốt trang.
  • Giảm thời gian mà người đọc và biên tập viên phải dành ra để cuộn trang lên xuống để định hướng.

Trường hợp sử dụng

  • Là một người đọc, tôi muốn biết tôi đang đọc bài viết gì vào mọi lúc, để tôi có thể định hướng bản thân bên trong trang web một cách dễ dàng hơn.
  • Là một biên tập viên, tôi muốn có thể tiếp cận các chức năng quan trọng (như sửa đổi, xem lịch sử hoặc trang thảo luận của bài viết) từ bất cứ đâu trong trang, để tôi không phải phí phạm thời gian cuộn lên.
  • Là một người đọc đa ngôn ngữ, tôi muốn có thể chuyển đổi ngôn ngữ ở bất cứ thời điểm nào trong lúc đọc, để tôi có thể chuyển đổi trực tiếp khi thấy một từ hoặc câu khó hiểu.

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

Một thanh đầu trang dính/cố định sẽ xuất hiện ở trên cùng của trang sau khi người dùng cuộn quá thanh đầu trang hiện tại của trang.

  • Đối với những người dùng ẩn danh, thanh đầu trang sẽ chứa những thứ sau:
    • Logo wiki
    • Tìm kiếm
    • Tên trang
    • Tên đoạn
  • Đối với người dùng đã đăng nhập, thanh đầu trang sẽ chứa những thứ sau:
    • Logo wiki
    • Menu công cụ người dùng (xem trang công cụ người dùng)
    • Tìm kiếm
    • Tên trang
    • Tên đoạn
    • Liên kết đến trang thảo luận
    • Liên kết đến trang lịch sử
    • Liên kết đến nguồn và/hoặc sửa đổi (theo tùy chọn của bản thân các wiki)
    • Chức năng chuyển đổi ngôn ngữ

Hành vi cuộn của thanh đầu trang sẽ phải tương ứng với nhu cầu của người dùng đã đăng nhập

  • Ghi chú: chúng tôi hiện tại đang thử nghiệm một loạt các hành vi cuộn và phát sinh khác nhau bao gồm việc cho phép thanh đầu trang xuất hiện khi cuộn lên và khi chuyển tab. Chúng tôi cũng sẽ khám phá việc hiển thị thanh đầu trang theo một cách cố định

Thanh đầu trang phải tương ứng được với độ phân giải màn hình thấp hơn (xuống tới 500px)

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

Nguyên mẫu

https://people.wikimedia.org/~jdrewniak/dip/p4.html#/en/wiki/Moon

Người dùng vô danh

Note: for the first iteration of the sticky header, the header will only be available for logged-in users

 
Nguyên mẫu của chức năng thanh đầu trang "dính" được đề xuất trên các wiki Wikimedia cho người dùng ẩn danh

Người dùng đăng nhập

 
Nguyên mẫu của chức năng thanh đầu trang "dính" được đề xuất trên các wiki Wikimedia cho người dùng đã đăng nhập

Kiểm tra chất lượng

Thử nghiệm người dùng

Main page: Sticky Header and Table of Contents User Testing

Chúng tôi đã thực hiện thử nghiệm người dùng đối với thanh đầu trang dính với những người đọc và biên tập viên ở ba địa điểm và ngôn ngữ với mục đích quyết định xem chức năng nào có độ ưu tiên cao nhất để cho vào bên trong thanh đầu trang dính. For the first iteration of the sticky header, we will be removing triggering behavior and making the sticky header persistent as per request of a number of the editors involved in the user testing. We will then evaluate the change once live. Chúng tôi cũng đã thử nghiệm tính khả dụng của nguyên mẫu hiện tại của chúng tôi.

Kết quả của cuộc thử nghiệm được sử dụng để thử nghiệm các liên kết có sẵn bên trong thanh đầu trang cũng như việc phát sinh và sự ổn định của thanh đầu trang. Xem kết quả đầy đủ của cuộc thử nghiệm này.

Thử nghiệm nguyên mẫu

Vào Tháng 5 năm 2021, chúng tôi đã thực hiện thử nghiệm nguyên mẫu với người dùng đã đăng nhập trên 30 wiki. Thử nghiệm được thiết kế để thu thập phản hồi về độ khả dụng và chức năng của thanh đầu trang dính và menu người dùng.

Các kết quả sơ bộ của chúng tôi cho thấy một phần lớn những người tham gia thử nghiệm có trải nghiệm tích cực với thanh đầu trang dính. Những người tham gia nói rằng họ thấy thích thú với khả năng tiếp cận những chức năng quan trọng từ bất kỳ đâu trong trang.

Tuy nhiên, một lượng lớn người tham gia (~20%) chỉ ra các vấn đề với diện mạo của bản thân thanh đầu trang dính. Phần lớn những người tham gia chỉ ra rằng họ mong muốn thanh đầu trang xuất hiện vĩnh viễn trên trang thay vì bởi một loạt các cách kích phát khác nhau. Một số người tham gia chỉ ra rằng, tuy họ thích thú với diện mạo của thanh đầu trang khi nó hiện ra nhưng họ lại gặp phải vấn đề với việc thanh đầu trang xuất hiện/biến mất quá nhanh.

Bước tiếp theo, chúng tôi sẽ xem xét lại các nguồn kích hoạt việc thanh đầu trang xuất hiện hay biến mất. Chúng tôi cũng lên kế hoạch tiếp tục thử nghiệm với việc thanh đầu trang dính xuất hiện liên tục trên trang. Những thay đổi này được kỳ vọng sẽ xuất hiện trong phiên bản thử đầu tiên của thanh đầu trang dính được triển khai tại các wiki triển khai sớm của chúng tôi.

Kiểm tra chất lượng

Chúng tôi sẽ theo dõi việc sử dụng trước và sau của các liên kết được đặt trong thanh đầu trang dính trên các wiki triển khai sớm sau khi triển khai ban đầu. Chúng tôi kỳ vọng thấy một sự tăng tuy nhỏ nhưng quan trọng trong việc tiếp cận một vài trong số những liên kết này, cụ thể là trang thảo luận và lịch sư.

Results from A/B test on pilot wikis

From Jan 5 to Jan 31, 2022, we ran an A/B test to assess the impact of deploying the sticky header. The test ran on 22 of our pilot wikis. Logged-in users who were assigned to the treatment group with the new skin version saw the sticky header while users in the control group saw the old feature.

The primary goal of the AB test was to test the hypothesis that the sticky header decreases the need to stroll to the top of the page. We also studied following two questions:

  • What is the clickthrough rate (per pageview or per session) of each item on the sticky header?
  • What is the ratio of clicks of sticky header items to the corresponding items at the top of the page?

Overall, there was an average 15% decrease in scrolls per session by logged-in users on the 15 pilot wikis in the treatment group (with the new sticky header), compared to the control group (without the sticky header). This indicates that our hypothesis was correct - adding the sticky header to the page reduced the need to scroll to the top of the page significantly.

The full report is available at this link.

Results from A/B test for edit button in the sticky header

To evaluate the impact of introducing an "edit" button within the sticky header, we ran two A/B tests. These two A/B tests were designed to help us learn how the new edit button within the sticky header impacted the likelihood:

  1. People would publish the edits they started
  2. The edits people published would get reverted

What follows are the conclusions we're drawing from these A/B tests and details about the Wikipedias that participated in them:

  1. People were more likely to complete the edits they start using the sticky header
    Of all the edits people initiated throughout both A/B tests, there was a 2.8% and a 6.8% increase in the percent of people who were able to successfully complete at least one edit using the edit button within the sticky header, in AB Test Experiment #1 and #2 respectively. This is in comparison to edits people started using other edit buttons present on the page.
  2. Edits people initiated and published using the sticky header were less likely to be reverted
    Of all the edits people published throughout both A/B tests, the edits people started using the new edit button within the sticky header were less likely to be reverted than edits started using other edit buttons present on the page.

Note: We are able to confirm that edits published using the sticky header were less likely to be reverted than edits publishing using other edit buttons present on the page. Hovewer, we are unable to confirm and share a specific percentage decrease in revert rates because of a relatively high margin of error. Learn more in the test report.

The first test ran between 6 July and 8 August 2022 on 15 Wikipedias. At these projects, 50% of people included in the A/B test were shown the sticky header without an edit button within it and 50% of people were shown the sticky header with an edit button within it.

The second test ran between 16 August and 1 September 2022 on two Wikipedias: Vietnamese and Indonesian. At these projects, there were three equally-sized test groups:

  1. A control group that did not see or have access to the new sticky header
  2. A treatment group that saw the new sticky header without an edit button within it
  3. A treatment group that saw the sticky header with an edit button within it.

Những câu hỏi thường gặp

Các bản mẫu của tôi sử dụng các yếu tố dính. Phải làm sao để đảm bảo nó không đè lên thanh đầu trang dính?

Thêm class .mw-sticky-header-element vào bất cứ yếu tố nào mà bạn muốn dính vào phần dưới cùng của thanh đầu trang dính.

Làm thế nào để tôi có thể thêm liên kết vào menu thả của thanh đầu trang dính?

mw.util.addPortletLink('p-personal-sticky-header', '#', 'test', 'myfeatureid')
mw.util.addCSS('.mw-ui-icon-vector-gadget-myfeatureid:before { background-image: url(/w/resources/lib/ooui/themes/wikimediaui/images/icons/code.svg); }' );

Làm cách nào để them icon vào thanh đầu trang dính?

Chúng tôi hiện tại chưa chính thức hỗ trợ việc mở rộng thanh đầu trang dính theo cách này.

Tại sao không có nút ngôn ngữ nào ở thanh đầu trang dính của tôi

Đi đến tùy chọn và đánh dấu vào ô "Sử dụng danh sách ngôn ngữ ngắn gọn chỉ có các ngôn ngữ quan trọng đối với bạn." để bật chức năng chuyển đổi ngôn ngữ trong thanh đầu trang dính.

Tại sao thanh đầu trang dính không hiển thị trên một trang nào đó?

Thanh đầu trang dính hiện chỉ hiển thị đối với người dùng đã đăng nhập trên các trình duyệt hiện đại đối với các hoạt động được cho phép và không gian tên được cho phép khi người dùng cuộn xuống trang. Tại thời điểm viết bài này, nó chỉ được kích hoạt trên các không gian tên: Trang chính, Thảo luận trang Chính, Thành viên, Thảo luận thành viên, Wikipedia, Bản mẫu, Trợ giúp, Thể loại, Cổng thông tin, Mô đun [1] và không xuất hiện ở phiên bản cũ, khác biệt giữa bản sửa đổi, lịch sử hoặc chỉnh sửa trang [2].

The sticky header is currently only visible to logged in users using modern browsers on allowed actions and allowed namespaces when the user has scrolled down the page. At time of writing it is only enabled on namespaces: Main, Main talk, User, User talk, Wikipedia, Template, Help, Category, Portal, Module[3] but not old revisions, diffs, history or edit pages[4].

Xem thêm

Tham khảo

  1. ↑ https://github.com/wikimedia/Vector/blob/master /resources/skins.vector.es6/stickyHeader.js#L535
  2. ↑ https://github.com/wikimedia/Vector/blob/master/resources/ skins.vector.es6/stickyHeader.js#L548
  3. ↑ https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L535
  4. ↑ https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L548
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Sticky_Header/vi&oldid=6351054"