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

From mediawiki.org
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 99% complete.
Outdated translations are marked like this.

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

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.

Ver também

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