Jump to content

Leitura/Web/Melhorias da Área de Trabalho/Recursos/Cabeçalho fixo

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 84% complete.
Outdated translations are marked like this.
Languages:
Rastreado no Phabricator
Tarefa T283505

Como parte do projeto de Melhorias da Área de Trabalho, estamos alterando as ferramentas normalmente utilizadas que se encontravam no topo da página. A nova função permitirá acessar essas ferramentas ao longo da página através do cabeçalho fixo. Nosso objetivo é facilitar o acesso a essas ferramentas para leitores e editores. No momento, eles precisam rolar até o topo da página para acessá-las.

História e objetivos

Atualmente, vários funções das páginas wiki só estão disponíveis aos usuários no topo da página, ou na barra à esquerda. Isto se torna problemático em páginas mais extensas, onde passar dos primeiros parágrafos significa que o usuário precisaria rolar até o topo para ter acesso a suas ferramentas e outros recursos novamente. Nosso método proposto de abordar isto é deixar o cabeçalho "fixo". Isto significa que estará sempre no topo da tela (acima do conteúdo) mesmo se rolar a página para baixo.

Além disto, atualmente oferecemos pouca orientação na página a nossos leitores e editores. Isto dificulta distinguir entre uma página e outra.

Nossos objetivos são:

  • Oferecer funcionalidade e contexto ao longo da página.
  • Reduzir o número de vezes que os leitores e editores precisam rolar a página até o topo para continuar navegação.

Exemplos de usos

  • Como leitor, quero saber qual artigo estou lendo a todo momento, assim posso me orientar com mais facilidade dentro do site.
  • Como editor, quero a habilidade de acessar funções importantes (como editar, visitar o histórico ou a discussão da página) de qualquer lugar na página, assim não perco tempo retornando ao topo.
  • Como leitor multilíngue, quero a habilidade de trocar de idioma a qualquer momento durante minha leitura, assim posso mudar de idioma assim que me deparar com uma palavra ou sentença estranha.

Descrição do recurso e requisitos

Um cabeçalho fixo irá aparecer no topo da página assim que o usuário rolar para longe do cabeçalho atual.

  • Para usuários anônimos, o cabeçalho contém o seguinte:
    • Logo da wiki
    • Barra de pesquisa
    • Nome da página
    • Nome da seção
  • Para usuários registrados, o cabeçalho contém o seguinte:
    • Logo da wiki
    • Menu de ferramentas do usuário (ver página de menu do usuário)
    • Barra de pesquisa
    • Nome da página
    • Noma da seção
    • Ligação para página de discussão
    • Ligações para histórico da página
    • Ligação para edição (código fonte ou visual) da página (de acordo com preferência da wiki)
    • Seletor de idiomas

O comportamento do cabeçalho deve se adaptar às necessidades dos usuários registrados

  • Nota: estamos atualmente testando vários comportamentos de rolagem e ativação, incluindo permitir que o cabeçalho apareça ao rolar para cima e ao trocar de abas. Iremos também explorar exibir o cabeçalho de maneira persistente

O cabeçalho deve estar adaptado para resoluções inferiores (de até 500px)

Diretrizes de design e requisitos

Protótipo

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

Usuários anônimos

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

Protótipo do cabeçalho fixo proposto para usuários anônimos das wikis da Wikimedia

Usuários registrados

Protótipo do cabeçalho fixo proposto para usuários registrados das wikis da Wikimedia

Teste qualitativo

Testes de usuário

Página principal: Sticky Header and Table of Contents User Testing

Realizamos testes de usuário do cabeçalho fixo com leitores e editores de três locais e idiomas diferentes com o objetivo de determinar quais funções eram as mais importantes para podermos adicioná-las no cabeçalho. 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. Também testamos a usabilidade de nosso protótipo atual.

Os resultados dos testes foram utilizadas na iteração das ligações disponíveis dentro do cabeçalho, assim como o comportamento do cabeçalho. Ver os resultados integrais deste teste.

Teste com protótipo

Em maio de 2021, realizamos um teste do protótipo com usuários registrados dentro de 30 wikis. O teste foi criado para gerar comentários sobre a usabilidade e funções do cabeçalho fixo e do menu do usuário.

Nossos resultados iniciais mostraram que uma grande maioria dos participantes tiveram uma experiência positiva com o cabeçalho fixo. Participantes mencionaram que gostaram da habilidade de acessar funções importantes de qualquer lugar da página.

Entretanto, um número extenso de participantes (~20%) indicaram problemas com a aparência do cabeçalho fixo. A maioria desses participantes indicaram que prefeririam se o cabeçalho estivesse sempre visível, ao invés de somente através de certos ativadores. Alguns dos participantes indicaram que, apesar de gostarem da aparência do cabeçalho ao ser ativado, comentaram sobre problemas que tiveram onde ele aparecia/desaparecia rápido demais.

Para a próxima etapa, iremos revisar os ativadores que permitem que o cabeçalho apareça ou desapareça. Estamos também planejando experimentar manter o cabeçalho fixo sempre visível. Estas mudanças irão aparecer na primeira versão a ser implantadas em nossas wikis com implementação antecipada.

Teste quantitativo

Nós estaremos monitorando o uso das ligações no cabeçalho fixo antes e depois em nossas wikis de implementação antecipada após nossa implantação inicial. Esperamos ver um aumento pequeno mas significante de acesso a algumas dessas ligações, principalmente, para as páginas de discussão e histórico.

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. 

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].

Ver também

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/pt-br&oldid=6347188"