읽기/웹/데스크톱 개선/기능/고정 헤더

This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 100% complete.

데스크톱 개선 프로젝트의 일부로서 우리는 이전에 페이지의 최상단에서만 사용할 수 있던, 공통적으로 사용되는 도구들을 변경할 예정입니다. 이 새 기능은 "고정" 헤더를 통해 페이지 어디에 있든 이 도구들에 접근할 수 있게 해줍니다. 우리의 목적은 독자와 편집자가 이 도구를 더 쉽게 사용할 수 있게 하는 것입니다. 우리는 해당 사용자들이 종종 페이지 최상단으로 스크롤해야 한다는 것을 이제서야 알게 되었습니다.

배경 및 목표

현재 위키 페이지의 수많은 기능들은 페이지 최상단에서나 페이지의 왼쪽 패널을 통해서만 사용이 가능합니다. 이는 내용이 긴 문서에서 문제가 되는데, 처음 몇 문단을 스크롤하다가 사용자가 도구와 그 밖의 리소스에 다시 접근하려면 다시 위로 스크롤해야 합니다. 이를 해결하기 위해 우리가 제안하는 방식은 사이트 헤더를 고정시키는 것입니다 이는 페이지를 스크롤 업, 다운을 할 때 헤더가 화면 최상위(내용 상단)에 고정이 된다는 것을 의미합니다.

게다가 저희는 현재 페이지 내 지향점을 독자와 기자에게 거의 제공하지 못합니다. 이는 페이지와 다른 페이지 간의 구별을 어렵게 합니다.

우리의 목표는 다음과 같습니다:

  • 페이지 어디에서든 기능과 컨텍스트를 모두 제공합니다.
  • 독자와 편집자가 둘러보기 목적으로 페이지를 스크롤 업, 다운을 하는데 들이는 시간을 줄입니다.

용례

  • 독자로서 저는 사이트 안에 제 자신의 위치를 쉽게 파악할 수 있도록 언제든지 제가 무슨 문서를 읽고 있는지를 알고 싶습니다.
  • 편집자로서 저는 스크롤을 위로 올리는데 시간을 낭비하지 않도록 문서 내 어느 곳에서든 중요 기능에 접근하는 기능(예: 문서 역사나 토론 문서로 이동)을 원합니다.
  • 다언어 독자로서 저는 혼동이 되는 단어나 문장을 발견한 직후 언어를 전환할 수 있도록 제가 읽는 지점에서 언어를 전환하는 기능을 원합니다.

기능 설명 및 요건

고정 헤더는 사용자가 현재의 페이지 헤더를 지나치며 스크롤할 때 페이지 최상단에 표시됩니다.

  • 익명 사용자의 경우 헤더는 다음을 포함하게 됩니다:
    • 위키 로고
    • 검색
    • 문서 이름
    • 문단 이름
  • 로그인한 사용자의 경우 헤더는 다음을 포함하게 됩니다:
    • 위키 로고
    • 사용자 도구 메뉴 (사용자 도구 문서 참고)
    • 검색
    • 문서 이름
    • 문단 이름
    • 토론 문서 링크
    • 역사 문서 링크
    • 원본 및 편집 링크 (위키 자체의 환경 설정에 따라)
    • 언어 전환 기능

헤더의 스크롤링 동작은 로그인한 사용자의 요구에 순응해야 합니다

  • 참고: 페이지의 스크롤을 위로 올릴 때와 탭을 전환할 때 헤더가 보이도록 허용하는 것을 포함하여 현재 다양한 스크롤링과 트리거링 행동을 테스트하고 있습니다. 우리는 일정한 방식으로 헤더를 표시하는 것도 탐구하고 있습니다

헤더는 더 낮은 화면 해상도(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.


개발자를 위한 연동 참고서

제 틀이 고정된 요소를 사용합니다. 이것들을 고정 헤더에 어떻게 작동시킵니까?

고정 헤더의 하단에 고정하기를 원하는 요소에 .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); }' );

같이 보기