Reading/Web/Desktop Improvements/Features/Sticky Header/ko

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 58% complete.
Outdated translations are marked like this.

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

배경 및 목표

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

In addition, we currently offer very little in-page orientation to our readers and contributors. 이는 페이지와 다른 페이지 간의 구별을 어렵게 합니다.

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

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


  • As a reader, I want to know what article I’m reading at all times, so that I can easily orient myself within the site.
  • As an editor, I want the ability to access important functionality (e.g. edit, go to the history page or the talk page of the article) from anywhere in the page, so that I do not waste time when scrolling up.
  • As a multilingual reader, I want the ability to switch languages at any point of my reading, so that I can switch directly after I find a confusing word or sentence.

Feature description and requirements

A sticky/fixed header will appear at the top of the page once a user scrolls past the current header on the page.

  • 익명 사용자의 경우 헤더는 다음을 포함하게 됩니다:
    • 위키 로고
    • 검색
    • 문서 이름
    • 문단 이름
  • 로그인한 사용자의 경우 헤더는 다음을 포함하게 됩니다:
    • 위키 로고
    • 사용자 도구 메뉴 (사용자 도구 문서 참고)
    • 검색
    • 문서 이름
    • 문단 이름
    • 토론 문서 링크
    • 역사 문서 링크
    • Link to source and/or edit (following the preferences of the wikis itself)
    • 언어 전환 기능

The scrolling behavior of the header must adapt to the needs of logged-in users

  • Note: we are currently testing a variety of scrolling and triggering behavior including allowing the header to appear upon scrolling up the page and when switching tabs. We will also be exploring displaying the header in a persistent manner

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

Design requirements and guidelines


익명 사용자

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

Prototype of proposed "sticky" header functionality on Wikimedia wikis for anonymous users

로그인한 사용자

Prototype of proposed "sticky" header functionality on Wikimedia wikis for logged-in users

양적 테스트

사용자 테스트

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. 이 테스트의 전체 결과를 확인하세요.

프로토타입 테스트

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.

같이 보기

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