MediaWiki

مطالعه/وب/بهبودهای دسکتاپ/ویژگی‌ها/سربرگ چسبنده

< 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 68% complete.
Languages:
Tracked in Phabricator
Task T283505

به عنوان یکی از بخش‌های پروژه بهبودهای دسکتاپ، ابزارهای متداول را که قبلاً فقط در بالای صفحه در دسترس بوده‌اند را تغییر می‌دهیم. عملکرد جدید امکان دسترسی به این ابزارها را در سرتاسر صفحه از طریق سربرگ چسبنده یا ثابت فراهم می‌کند. هدف ما این است که دسترسی خوانندگان و ویراستاران را به این ابزارها آسان کنیم. ما متوجه شده‌ایم که در حال حاضر، کاربران اغلب نیاز دارند تا به بالای صفحه بروند.

پیش‌زمینه و اهداف

در حال حاضر، بسیاری از عملکردهای صفحات ویکی فقط برای کاربران در بالای صفحه و/یا در نوار سمت چپ صفحه در دسترس است. این امر در صفحات طولانی‌تر مشکل ساز می‌شود و وقتی که از چند پاراگراف اول عبور کنید، برای دسترسی دوباره به ابزارها باید دوباره به بالا برگردید. روش پیشنهادی ما برای پرداختن به این موضوع این است که وبگاه دارای یک سربرگ چسبنده باشد این بدان معناست که با بالا یا پایین رفتن صفحه، این سربرگ همواره در بالای صفحه (بالای محتوا) ثابت می‌ماند.

علاوه بر این، در حال حاضر جهت‌گیری بسیار کمی در صفحه به خوانندگان و مشارکت‌کنندگان خود ارائه می‌دهیم. این امر تمایز بین یک صفحه و صفحه دیگر را دشوار می‌کند.

هدف ما این است که:

  • هم عملکرد و هم محتوا را در سراسر صفحه ارائه دهیم.
  • مدت زمانی را که خوانندگان و ویراستاران برای پیمایش بالا و پایین صفحه برای ناوبری صرف می کنند، کاهش دهیم.

موارد استفاده

  • به عنوان یک کاربر، می‌خواهم بدانم که دقیقا در حال خواندن کدام مقاله هستم تا بتوانم مسیرم در وبگاه را راحت‌تر پیدا کنم.
  • به عنوان یک ویرایشگر، من می‌خواهم توانایی دسترسی به عملکردهای مهم (به عنوان مثال ویرایش، رفتن به صفحه تاریخچه یا صفحه بحث مقاله) را از هر نقطه در صفحه داشته باشم و وقت خوم را برای پیمایش به بالا هدر ندهم.
  • به عنوان یک خواننده چند زبانه، من می‌خواهم توانایی تغییر زبان در هر نقطه از خواندن را داشته باشم، به طوری که بتوانم مستقیماً پس از یافتن یک کلمه یا جمله گیج‌کننده، تغییر زبان دهم.

شرح امکانات و الزامات آن

هنگامی که کاربر از سربرگ فعلی صفحه عبور کند، یک سرصفحه چسبناک/ثابت در بالای صفحه ظاهر می‌شود.

  • برای کاربران ناشناس، سربرگ شامل موارد زیر است:
    • لوگوی ویکی
    • جستجو
    • نام صفحه
    • نام بخش
  • برای کاربران واردشده به سامانه، سربرگ شامل موارد زیر است:
    • لوگوی ویکی
    • نوار ابزارهای کاربر (صفحه ابزارهای کاربر را ببینید)
    • جستجو
    • نام صفحه
    • نام بخش
    • پیوند به صفحه بحث
    • پیوند به صفحه تاریخچه
    • پیوند به منبع و/یا ویرایش (مطابق با ترجیحات درون ویکی)
    • تغییر زبان

رفتار پیمایش سرصفحه باید با نیازهای کاربران وارد شده منطبق باشد

  • توجه: ما در حال آزمایش انواع رفتارهای پیمایش و راه‌اندازی از جمله اجازه دادن به نمایش سربرگ هنگام پیمایش صفحه و هنگام تغییر زبانه‌ها هستیم. We will also be exploring displaying the header in a persistent manner

The header must be adaptable at lower screen resolutions (down to 500px)

الزامات طراحی و رهنمودها

نمونه اولیه

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

کاربران ناشناس

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

 
نمونه اولیه از ویژگی‌های سربرگ «چسبنده» پیشنهادی در ویکی‌مدیا برای کاربران ناشناس

کاربران واردشده به سامانه

 
نمونه اولیه از ویژگی‌های سربرگ «چسبنده» پیشنهادی در ویکی‌مدیا برای کاربران وارد شده به سامانه

آزمایش کیفی

آزمایش کاربر

Main page: Sticky Header and Table of Contents User Testing

We performed user testing of the sticky header with readers and editors in three locations and languages with the goal of determining which functionality was highest priority in order to include within a sticky header. 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. We also tested the usability of our current prototype.

The results of the test were used to iterate on the links available within the header as well as the triggering and persistent behavior of the header. See the full results of this test.

Prototype testing

In May 2021, we performed prototype testing with logged-in users across 30 wikis. The test was designed to gather feedback on the usability and functionality of the sticky header and user menu.

Our preliminary results show that an overwhelming majority of test participants reported positive experience with a sticky header. Participants mentioned they enjoyed the ability to access important functionality from any part of the page.

However, a large number of participants (~20%) indicated issues with the appearance of the sticky header itself. The majority of these participants indicated that they wished for the header to appear on the page permanently rather than by a variety of triggers. Some of the participants indicated that while they enjoyed the appearance of the header on trigger, they experienced issues with the header appearing/disappearing too quickly.

As next steps, we will be reviewing the triggers that allow the header to appear and disappear. We are also planning on further experimentation with the sticky header appearing persistently on the page. These changes will be expected to appear within the first iteration of the sticky header deployed to our pilot wikis.

آزمایش کمّی

We will be monitoring the before and after usage of the links included in the sticky header on our pilot wikis following our initial deployments. We expect to see a small but significant rise in access to some of these links, in particular, to the talk page and history page.

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.

FAQ

My templates use sticky elements. How do make sure they do not overlap 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 dropdown menu?

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

How do I add icons to the sticky header

We currently do not officially support extending the sticky header in this way.

Why is there no language button in my sticky header

Go to preferences, and tick the box "Use a compact language list, with languages relevant to you." to enable languages in the sticky header.

Why is the sticky header not showing on a certain page?

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 [1] but not old revisions, diffs, history or edit pages [2].

جستارهای وابسته

References

  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
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Sticky_Header/fa&oldid=5722051"