Reading/Web/Desktop Improvements/Features/Page tools/vi

Một trong những mục tiêu chính của dự án cải tiến máy tính để bàn là giúp người dùng sử dụng trực quan tất cả các liên kết và công cụ trong giao diện của chúng tôi dễ dàng hơn.

Hiện tại, giao diện của chúng ta không có sự phân biệt giữa các liên kết và công cụ có liên quan đến trang web và các liên kết và công cụ có liên quan đến chính trang bài viết đó. Trang chính, trang ngẫu nhiên, hay thay đổi gần đây nằm trong nhóm đầu tiên. Các liên kết đến đây, thay đổi liên quan, hoặc trích dẫn trang này thuộc về nhóm thứ hai. Sự trộn lẫn này dễ gây nhầm lẫn cho những người đọc mới. Ngoài ra, các biên tập viên mới cũng không quen thuộc với tác dụng của mỗi liên kết. Việc trộn lẫn các nhóm này khiến mọi người ít có khả năng khám phá các công cụ này một cách tự nhiên hơn.



Bối cảnh và Mục tiêu
Chúng tôi muốn xem lại cách chúng tôi hiển thị các công cụ trang của mình để:


 * Giúp dễ dàng phân biệt công cụ nào dành cho từng trang và công cụ nào dành cho toàn bộ trang web
 * Giúp dễ dàng hiểu mục đích của từng liên kết một cách trực quan mà không cần phải tương tác với nó
 * Tiếp tục cung cấp quyền truy cập liên tục vào các công cụ này

thử nghiệm nguyên mẫu thứ ba của chúng tôi với mục lục đã làm nổi bật tầm quan trọng của các công cụ của chúng tôi và tầm quan trọng của các menu liên tục. Khi thiết kế tính năng này, chúng tôi đã tập trung vào việc đảm bảo truy cập dễ dàng cho những người cần nó. Điều quan trọng nữa là không làm cho nó cản trở hoặc xâm phạm trải nghiệm đọc.



Các trường hợp sử dụng

 * Là một độc giả hoặc biên tập viên, tôi muốn nhanh chóng phân biệt giữa công cụ trang và công cụ toàn cầu để tôi có thể hiểu rõ hơn về cấu trúc của trang
 * As a reader or editor, I want quick access to page tools and global tools so that I don’t spent a lot of time finding the tool I need
 * Với tư cách là người đọc hoặc biên tập viên, tôi muốn có khả năng chọn những công cụ mình muốn xem vào mọi thời điểm, để trải nghiệm của tôi được phục vụ theo nhu cầu của tôi



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

 * 1) Một menu mới được tạo chỉ chứa các công cụ bài viết
 * 2) Menu mới được đặt ở một nơi trực quan hơn cho các công cụ bài viết, tạo một mối liên kết trực quan giữa vị trí của các liên kết và mục đích của chúng
 * 3) Mọi người có tùy chỉnh cho các công cụ toàn trang hoặc công cụ bài viết luôn xuất hiện để phù hợp với nhu cầu đọc hoặc chỉnh sửa của họ
 * 4) Menu công cụ toàn trang và công cụ bài viết luôn có sẵn theo mặc định cho người dùng đã đăng nhập
 * 5) Các công cụ toàn trang và công cụ bài viết không có lựa chọn xuất hiện liên tục cho người dùng ẩn danh



Nghiên cứu và Thiết kế


Mối quan hệ với mục lục
Một trong những thay đổi mà chúng tôi thích thú nhất đó chính là việc di chuyển mục lục sang một bên của trang và làm cho nó luôn xuất hiện trên trang khi bạn cuộn trang xuống. Qua nghiên cứu và thử nghiệm, chúng tôi đã biết được rằng thay đổi này sẽ mang lại lợi ích cho mọi người bằng cách cho phép họ xem tổng quan về trang ngay khi truy cập vào trang đó và sẽ giúp họ điều hướng trang dễ dàng hơn trong suốt trải nghiệm đọc của mình.

Phần lớn các phản hồi là tích cực. Hầu hết các thành viên cộng đồng thích vị trí và chức năng mới của mục lục, đồng thời nhìn chung là ủng hộ việc thay đổi. Như với hầu hết các thay đổi đối với giao diện, việc di chuyển mục lục đi kèm với một số thách thức. Thách thức chính mà các thành viên cộng đồng đưa ra là: chúng tôi nên đặt menu thanh bên ở đâu, khi mà ban đầu nó nằm tại không gian mà chúng tôi đang di chuyển mục lục tới? Dưới đây, chúng tôi giải thích đề xuất của mình để giải quyết thách thức này, đây cũng là chủ đề của vòng thử nghiệm nguyên mẫu tiếp theo của chúng tôi.



Giải pháp ngắn hạn của chúng tôi
We decided that as a short term solution, the entire sidebar would remain available in its current location. It would remain collapsible, and the state (i.e. open vs. collapsed) of the sidebar would continue to persist between pages. (So if you open it, it would stay open as you navigate around the site.) What was to be changed: when it was to be open, it would push the table of contents down the page. Here is a screen recording of how it would work:



We didn’t think this was the optimal solution. It was more like a quick fix that would allow us to release the table of contents and keep moving forward. And we understand how this might have felt like a step backwards to some, because after the change, the table of contents was further down the page than it had been previously.

Our long-term solution
A few things we learned from community feedback, and from data collection, are informing our proposal:


 * 1) Most editors like the new location of the table of contents
 * 2) For some editors it is important to have page tools (e.g. What links here, Related changes, Wikidata item, etc.) available as soon as they land on a page
 * 3) Most of the global navigation items in the main menu (e.g. Current events, Contents, etc.) are used infrequently
 * 4) Some editors have large screens and would like the interface to make better use of the space on the far side of the page

Additionally, something that we’ve been trying to accomplish throughout this project is moving things into logical places. We think it makes sense for all of the page tools to be in one area, rather than the current situation where some of them are in the sidebar and others are in the toolbar above the content of the page.

There are two main parts of our proposal:


 * 1) Splitting the sidebar into two menus: a main menu with global links, and an page tools menu with page-specific links
 * 2) Moving the page tools to the far side of the page, so that they are near the other page tools (History, Edit, Move, etc.)

Here is a visualization of those two parts:

Step 1: Splitting into two menus



Step 2: Moving page tools



The updated interface would look something like this:



Here is a screen recordings showing some of the possible configurations of the updated interface:



Prototype testing with editors
In December 2021, we ran prototype testing of our table of contents across 30 wikis. The results of this prototype testing were crucial to the development of the page tools menu. Please see the results of our ToC prototype testing and our ideas for next steps for details.

In April 2022 we tested a prototype where the page tools were separated from the main menu, and moved to the opposite side of the page. The prototype also placed the page title above the page toolbar.

Feedback summary:


 * We received feedback from 244 editors in over 15 different languages.
 * ✅ The majority of people support separating the page tools from the main menu, and moving them to the opposite side of the page
 * ✅ The majority of people support moving the page title above the page toolbar
 * ⚖️ The feedback was split pretty evenly between the two menus being open vs. closed by default
 * 😀 Many people mentioned how much they like having the table of contents on the side of the page, and available as they scroll down the page
 * The most detailed feedback was regarding the behavior for hiding and showing the main menu, table of contents, and tools menu. The main points were:
 * When you hide a menu it should hide completely (without having to click a second time)
 * When you hide a menu it should be more obvious where it has gone
 * The hamburger menu icon should disappear when the main menu is moved to the sidebar
 * The labels for hiding/moving the menus should be better (or use icons instead)
 * The tools menu, if it has been moved to the sidebar, should remain visible as you scroll down the page
 * The tools menu, table of contents, and main menu should hide automatically when the screen gets narrow
 * You should be able to collapse the table of contents manually, at any screen size

We've attempted to address all of the points above in this updated prototype. Keep in mind that the prototype is not perfect. Hopefully it is sufficient to communicate the main ideas: Deutsch · English · Nederlands · Tiếng Việt · Español · Français · Italiano · Polski · Svenska · Pусский · Yкраїнська · فارسی · 中文 · 日本語

See also the updated prototype.

Gadget compatibility
Information on gadget compatibility is available in this Phabricator ticket. The following gadgets have been tested and should work with the page tools menu without issues:


 * Twinkle (the TW menu should insert itself after the page tools menu)
 * MoreMenu (The "Page" menu is inserted before the Page Tools menu. The "User" menu, only visible on user pages, is also inserted before the Page Tools menu.)
 * ProseSize
 * RTRC
 * Add a toolbox link to reload the current page with the system message names exposed

We were able to maintain compatibility for a few reasons:


 * 1) The Page Tools menu is rendered server-side, which maintains the expected JS execution order (i.e. the expected HTML menu exists when the gadget JS executes).
 * 2) We maintain the same IDs that were previously used to target this menu by gadgets.
 * 3) When we move the menu, we maintain the JS behaviour and events that have already been bound to the HTML elements by gadgets.

We also tested the Page Tools persistence feature with gadgets and did not notice any loss of functionality. The only noticeable difference is that, when the menu is pinned by default, you can sometimes see the addition of new links after the page loads. This could potentially cause a layout-shift, but that would only be an issue if the Page Tools was pinned by default for anonymous users and a gadget that adds a link was also enabled for anonymous users (unlikely).