읽기/웹/데스크톱 개선/기능/고정 헤더
데스크톱 개선 프로젝트의 일부로서 우리는 이전에 페이지의 최상단에서만 사용할 수 있던, 공통적으로 사용되는 도구들을 변경할 예정입니다. 이 새 기능은 "고정" 헤더를 통해 페이지 어디에 있든 이 도구들에 접근할 수 있게 해줍니다. 우리의 목적은 독자와 편집자가 이 도구를 더 쉽게 사용할 수 있게 하는 것입니다. 우리는 해당 사용자들이 종종 페이지 최상단으로 스크롤해야 한다는 것을 이제서야 알게 되었습니다.
배경 및 목표
현재 위키 페이지의 수많은 기능들은 페이지 최상단에서나 페이지의 왼쪽 패널을 통해서만 사용이 가능합니다. 이는 내용이 긴 문서에서 문제가 되는데, 처음 몇 문단을 스크롤하다가 사용자가 도구와 그 밖의 리소스에 다시 접근하려면 다시 위로 스크롤해야 합니다. 이를 해결하기 위해 우리가 제안하는 방식은 사이트 헤더를 고정시키는 것입니다 이는 페이지를 스크롤 업, 다운을 할 때 헤더가 화면 최상위(내용 상단)에 고정이 된다는 것을 의미합니다.
게다가 저희는 현재 페이지 내 지향점을 독자와 기자에게 거의 제공하지 못합니다. 이는 페이지와 다른 페이지 간의 구별을 어렵게 합니다.
우리의 목표는 다음과 같습니다:
- 페이지 어디에서든 기능과 컨텍스트를 모두 제공합니다.
- 독자와 편집자가 둘러보기 목적으로 페이지를 스크롤 업, 다운을 하는데 들이는 시간을 줄입니다.
용례
- 독자로서 저는 사이트 안에 제 자신의 위치를 쉽게 파악할 수 있도록 언제든지 제가 무슨 문서를 읽고 있는지를 알고 싶습니다.
- 편집자로서 저는 스크롤을 위로 올리는데 시간을 낭비하지 않도록 문서 내 어느 곳에서든 중요 기능에 접근하는 기능(예: 문서 역사나 토론 문서로 이동)을 원합니다.
- 다언어 독자로서 저는 혼동이 되는 단어나 문장을 발견한 직후 언어를 전환할 수 있도록 제가 읽는 지점에서 언어를 전환하는 기능을 원합니다.
기능 설명 및 요건
고정 헤더는 사용자가 현재의 페이지 헤더를 지나치며 스크롤할 때 페이지 최상단에 표시됩니다.
- 익명 사용자의 경우 헤더는 다음을 포함하게 됩니다:
- 위키 로고
- 검색
- 문서 이름
- 문단 이름
- 로그인한 사용자의 경우 헤더는 다음을 포함하게 됩니다:
- 위키 로고
- 사용자 도구 메뉴 (사용자 도구 문서 참고)
- 검색
- 문서 이름
- 문단 이름
- 토론 문서 링크
- 역사 문서 링크
- 원본 및 편집 링크 (위키 자체의 환경 설정에 따라)
- 언어 전환 기능
헤더의 스크롤링 동작은 로그인한 사용자의 요구에 순응해야 합니다
- 참고: 페이지의 스크롤을 위로 올릴 때와 탭을 전환할 때 헤더가 보이도록 허용하는 것을 포함하여 현재 다양한 스크롤링과 트리거링 행동을 테스트하고 있습니다. 우리는 일정한 방식으로 헤더를 표시하는 것도 탐구하고 있습니다
헤더는 더 낮은 화면 해상도(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
로그인한 사용자
양적 테스트
사용자 테스트
고정 헤더 안에 어느 기능을 가장 높은 우선 순위에 두어야 하는지 결정하기 위한 목표를 가지고 세 지역과 언어의 독자와 편집자와 함께 고정 헤더의 사용자 테스트를 수행하였습니다. 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. 우리의 현 프로토타입의 유용성도 테스트했습니다.
테스트 결과는 헤더의 일정한 동작을 발생시키는 것뿐 아니라 헤더 안에 사용 가능한 링크에 반복 적용하기 위해 사용되었습니다. 이 테스트의 전체 결과를 확인하세요.
프로토타입 테스트
2021년 5월, 우리는 30개 위키에 걸쳐 로그인된 사용자와의 프로토타입 테스트를 수행했습니다. 이 테스트는 고정 헤더와 사용자 메뉴의 유용성과 기능의 피드백을 수집하기 위해 설계되었습니다.
예비 결과에 따르면 상당히 많은 테스트 참가자들이 고정 헤더에 관해 긍정적인 경험을 보고했습니다. 참가자들은 문서의 어느 위치에서든지 중요 기능에 접근하는 기능을 즐겨 사용했다고 언급했습니다.
그러나 많은 수의 참가자들(~20%)은 고정 헤더 자체의 외관의 문제를 지적했습니다. 이 참가자들 중 대부분은 다양한 트리거에 의해서가 아니라, 헤더가 영속적으로 페이지에 표시되기를 소원했습니다. 참가자들 중 일부는 트리거 동작 시 헤더가 표시되는 점에는 만족했으나 헤더가 너무 빠르게 표시되거나 사라지는 문제를 경험했습니다.
다음 단계로 우리는 헤더가 표시되고 사라지는 트리거를 검토할 예정입니다. 또, 우리는 페이지에 영속적으로 표시되는 고정 헤더의 추가 실험을 계획에 두고 있습니다. 이 변화는 우리의 파일럿 위키에 적용되는 고정 헤더의 1단계 기간 내에 등장할 것으로 예상됩니다.
양적 테스트
우리의 최초 적용에 따라 우리의 파일럿 위키의 고정 헤더에 포함된 링크의 전후 사용 실태를 모니터링할 예정입니다. 이 링크들 중 일부, 특히 토론 문서와 역사 문서의 접근에 대해 사소하지만 중요한 상승을 보길 기대합니다.
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:
- People would publish the edits they started
- 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:
- 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.
- 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:
- A control group that did not see or have access to the new sticky header
- A treatment group that saw the new sticky header without an edit button within it
- A treatment group that saw the sticky header with an edit button within it.
FAQ
제 틀이 고정된 요소를 사용합니다. 이것들을 고정 헤더에 어떻게 작동시킵니까?
고정 헤더의 하단에 고정하기를 원하는 요소에 .mw-sticky-header-element 클래스를 추가하십오.
고정 헤더에 링크를 추가하는 방법
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].
같이 보기