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

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 95% complete.

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

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ư.

Integration notes for developers

My templates use sticky elements. How do I get them to work with the sticky header?

Add the .mw-sticky-header-element class to any elements that you want to stick to the bottom of the sticky header.

How do I add links to the sticky header

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); }' );

Xem thêm