Reading/Web/Desktop Improvements/Fifth prototype testing/pt-br

Nós adoraríamos o seu feedback em algumas decisões sobre o design visual para Vector 2022. Por visual design nós queremos dizer o estilo dos textos, botões, molduras, background e espaçamento.

Instruções
Por favor, tenha em mente:
 * 1) Revise essa página para contexto
 * 2) Crie uma nova seção nesta página usando o formulário abaixo (ele será previamente preenchido com as questões para você responder).
 * 3) Preencha com a sua opinião sobre o protótipo na seção criada.
 * Estes são protótipos, a maioria das ferramentas não funcionam, e pode haver outros "bugs" ou caprichos com os quais você se deparará.
 * O "formulário da nova seção" infelizmente não é compatível com o VisualEditor (VE). Se você estiver usando o VisualEditor, crie manualmente uma nova seção e copie e cole as perguntas de feedback (listadas abaixo).
 * Você não precisa rever cada seção; concentre-se naquelas que são mais interessantes para você.
 * Design, especialmente design visual, pode ser algo subjetivo. Embora todos tenhamos direito a nossas próprias opiniões, pedimos que você faça o melhor para explicar as suas, e como elas se relacionam com nossos objetivos de simplicidade e usabilidade de projeto.
 * Podem haver boas opções que não estão representadas aqui. Sinta-se à vontade para sugerir outra coisa se você acha que funcionaria melhor do que as opções apresentadas. Se você estiver confortável com design e/ou codificação, sinta-se à vontade para incluir maquetes ou protótipos de suas ideias (isto não é necessário). Arquivos de Designs: Figma, Sketch, Google Drawing. Prototype: GitHub.
 * Se você estiver enviando suas próprias ideias, por favor não edite esta página; inclua-as em seu formulário de feedback.
 * Apreciamos os designers amadores e respeitamos os designers experientes. Analisaremos todos os comentários e ideias e, em última instância, contaremos com o julgamento de projetistas experientes para tomar as decisões finais.
 * Se preferir enviar sua opinião por email, por favor envia para [mailto:Olga@wikimedia.org olga@wikimedia.org].

Previsão das Questões de Avaliação

 * 1) Menus''' - abrir protótipo em uma nova aba: https://di-visual-design-menus.web.app/Brown_bear. Qual opção você prefere e porque? Certifique-se de verificar o menu de busca, menu de usuário, menu de idiomas e menu de ferramentas.
 * 2) Borders and backgrounds'' - abra o protótipo em uma nova aba: https://di-visual-design-borders-bgs.web.app/Zebra. Qual opção você prefere e porque?
 * 3) Seção ativa no índice — open prototype in a new tab: https://di-visual-design-toc-active.web.app/Otter. Qual opção você prefere e porque?
 * 4) Logotipo no cabeçalho'' - abra o protótipo em uma nova aba: https://di-visual-design-header-logo.web.app/Panda. Qual opção você prefere e porque?
 * 5) Cores de link" - abra o protótipo em uma nova aba: https://di-visual-design-link-colors.web.app/Salmon. Há algum trabalho adicional que você acha que precisa ser feito antes de fazermos esta mudança?
 * 6) Tamanho da Fonte - abra o protótipo em uma nova aba: https://di-visual-design-font-size.web.app/Hummingbird. Você tem alguma preocupação referente ao tamanho de fonte proposto?

Antecedentes e contexto
Durante os últimos dois anos, fizemos várias mudanças estruturais na interface. Nós mudamos a caixa de busca, a mudança de língua, e o menu de conteúdo. Nós organizamos certos links e ferramentas em menus. E nós limitamos a largura do conteúdo, adicionamos um cabeçalho fixo, e movemos o título da página acima da barra de ferramentas da página. Agora, com todos estes vários elementos situados na interface atualizada, estamos voltando nossa atenção para a aparência geral. Algumas das questões iniciais que o nosso time considerou foram: Historicamente, nossa abordagem tem sido simples e funcional. Há pouco estilo (se houver) nos elementos HTML, o que simplifica a interface tanto para as pessoas que a utilizam quanto para as que a projetam e constroem. Isso também significa que nosso projeto visual é bastante intemporal. Não perseguimos as tendências e não precisamos fazer mudanças a cada par de anos. Olhando as telas abaixo, podemos ver como Monobook e Legacy Vector usam o design visual com moderação (principalmente bordas e cores de fundo).
 * Como podemos usar o design visual para melhorar a interface?
 * Achamos que há valor na skin ter alguma personalidade adicional (como as linhas azuis e gradientes em Legacy Vector)?
 * Em que ponto há muito disso, de tal forma que pode distrair ou tornar a interface confusa?
 * E se fizermos o mínimo possível, e adotarmos uma abordagem super minimalista, semelhante à [UShttps://web.archive.org/web/20030409042752/http://www.wikipedia.org/wiki/Biology interface original da Wikipédia]?

Menus
Utilizamos vários menus em nossa interface. Até o momento, nossa abordagem de estilo de menus não tem sido consistente. Temos uma oportunidade, com o Vector 2022, de desenvolver uma abordagem mais acessível e consistente para o estilo de nossos menus. Em sua forma mais simples, os menus têm dois elementos: um gatilho de menu, e itens de menu. Estamos considerando azul vs. preto (tanto para o gatilho do menu, quanto para as opções do menu), e negrito vs. não negrito (para o gatilho do menu).

Link para protótipo com opções: https://di-visual-design-menus.web.app/Brown_bear

Bordas e Fundo
Devemos acrescentar fronteiras e fundos para ajudar a dividir as regiões da interface e, em caso afirmativo, como elas devem ficar? Como mencionamos na seção de fundo e contexto acima, tanto Monobook e Vector usam fundos e bordas para separar a interface do conteúdo. Antecedentes e fronteiras também podem acrescentar personalidade à interface. Entretanto, é difícil saber o quão funcionais ou necessários eles são. Criamos várias opções com fronteiras e fundos progressivamente mais escuros/escuros.

Link para protótipo com opções: https://di-visual-design-borders-bgs.web.app/Zebra

Seção ativa no índice
O índice está agora no lado (esquerdo) do artigo, e está fixada no lugar para que permaneça visível enquanto você percorre a página. Uma novidade é que o índice indica qual seção do artigo você está lendo atualmente (chamamos isto de "seção ativa"). Atualmente, seguindo um padrão usado nas abas do Artigo/Fale, a seção ativa no índice é preta, e as seções "não-ativas" são azuis. Gostamos deste padrão porque é simples, não distrai, e é usado em outros lugares. Poderíamos também usar um estilo adicional para indicar a seção ativa.

Link para protótipo com opções: https://di-visual-design-toc-active.web.app/Otter

Logo no cabeçalho
Monobook e Legacy Vector apresentam ambos um logotipo quadrado da Wikipédia com um grande globo. Dadas as várias mudanças no Vector 2022, um logotipo menor e retangular no canto pode se ajustar melhor ao layout. No entanto, queríamos ter certeza de tentar várias opções. Lembre-se de experimentar estas opções em vários tamanhos de tela, pois o equilíbrio do layout muda de acordo com o tamanho de sua tela.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

Cores dos links
O World Wide Web Consortium (W3C) tem Web Content Accessibility Guidelines. Estas diretrizes definem um nível mínimo de contraste para os links: "Para usabilidade e acessibilidade, os links devem ser sublinhados por padrão. Caso contrário, o texto do link deve ter pelo menos 3:1 de contraste com o texto do corpo circundante, e deve apresentar um indicador sem cor (tipicamente sublinhado) no mouse hover e no foco do teclado". Como não sublinhamos os links por padrão, nossa escolha de cor de link deve atender ao requisito de contraste 3:1. A fim de verificar o contraste de nossos links com nosso corpo de texto, podemos usar o verificador de contraste fornecido por WebAIM.

Além disso, a cor do link azul proposto já faz parte do Wikimedia Design Style Guide, e é usada em nossos websites móveis, bem como em vários logotipos de projetos, de modo que estaríamos ganhando consistência.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

Font size
A missão do nosso movimento é fornecer todo o conhecimento do mundo ao maior número de pessoas possível. Atualmente, a maioria do conhecimento que oferecemos está na forma de texto. Pesquisas têm mostrado que configurações tipográficas (tais como tamanho da fonte, comprimento da linha e altura da linha) influenciam a experiência de leitura, tanto em termos de conforto geral (ou seja, tensão ocular e fadiga), quanto em termos de compreensão e retenção. Portanto, é importante para nós utilizarmos configurações tipográficas ideais em nossa interface. Um fator importante a ter em mente ao determinar o que é ótimo para nossos projetos é que as pessoas se envolvam tanto na leitura em profundidade, quanto na leitura de texto.

Em uma fase anterior do projeto, lemos estudos de pesquisa sobre o comprimento da linha e concluímos que entre 90-140 caracteres por linha é ótimo para nossos projetos (link to writeup). Recentemente, passamos algum tempo lendo estudos de pesquisa sobre o tamanho da fonte. A pesquisa mais convincente, e diretamente aplicável, que encontramos até agora é um estudo de 2016 que utilizou o rastreamento ocular para avaliar os efeitos do tamanho da fonte e do espaçamento entre linhas para as pessoas que lêem a Wikipédia:

"Usando um design de medidas híbridas, comparamos a legibilidade e compreensão objetiva e subjetiva dos artigos para tamanhos de fonte que variam de 10 a 26 pontos, e espaçamentos de linha que variam de 0,8 a 1,8 (fonte: Arial). Nossos resultados comprovam que a legibilidade, medida através da duração média da fixação, aumentou significativamente com o tamanho da fonte. Além disso, as perguntas de compreensão tiveram respostas significativamente mais corretas para os tamanhos de fonte 18 e 26. Estas descobertas fornecem evidências de que os sites com textos pesados devem usar fontes de tamanho 18 ou maiores e usar espaçamento de linha padrão quando o objetivo é tornar uma página da web fácil de ler e compreender. Nossos resultados diferem significativamente das recomendações anteriores, presumivelmente, porque este é o primeiro trabalho a cobrir tamanhos de fontes acima de 14 pontos." Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px. So should we increase the font size to 24px? The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. Estaríamos aumentando a largura máxima do artigo também, de 960px para 1050px. As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.

Annotated bibliography of typography and readability research

Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird

Referências
<!-- This prototype has various options for how menu triggers and menu items are styled. (Menu triggers are the things you click on to open the menus, and menu items are the items within the menu). Please make sure to check the search menu, user menu, language menu, and tools menu. Use the options panel in the bottom corner to try the different options.

This prototype has various options for borders and backgrounds. Borders and backgrounds can divide up the regions of the interface, and frame the content. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes. (Reminder: all of these options would get additional fine tuning.)

This prototype has various options for how the active section in the table of contents is styled. Scroll down the page to see the active section change. You may want to visit a few different pages to see a range of tables of contents. Use the options panel in the bottom corner to try the different options.

This prototype has various options for how the logo is displayed in the header. Please keep in mind that all of these options would get additional fine tuning the spacing. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes.

We are planning on updating the link colors so that they meet the WCGA contrast requirement. The change is quite subtle. Use the options panel in the bottom corner to view the updated link colors. The third and last links in the lead paragraph are automatically rendered as visited links.

We are proposing increasing the font size for article text from 14px to 16px. Use the options panel in the bottom corner to switch between the current font size and the proposed font size. -->