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

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

Por favor, tenha em mente:


 * 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:
 * 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?
 * What if we do as little as possible, and take a super minimalist approach similar to the original Wikipedia interface?

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



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.

Primeiramente, precisamos converter a medida utilizada pelos pesquisadores (pontos) na medida que os navegadores acabam por render (px). A conversão é: 1px = 72pt / 96. Portanto, a faixa estudada na pesquisa (10-26 pontos) é equivalente a 13,3-34px. Sua conclusão, 18 pontos, é igual a 24px.

Então devemos aumentar o tamanho da fonte para 24px? A pesquisa estudou em profundidade a leitura, entretanto as pessoas frequentemente vasculham a página a fim de encontrar uma certa informação. Este é um comportamento de leitura diferente, que se beneficia indiscutivelmente de um tamanho de fonte menor do que a leitura em profundidade. Nossa proposta conservadora, levando em conta esse comportamento, é aumentar o tamanho da fonte para 16px, para começar. (Estaríamos aumentando a largura máxima do artigo também, de 960px para 1050px.) Como próximo passo, planejamos conduzir nossa própria pesquisa para estudar melhor o tamanho da fonte nos wikis da Wikimedia.

Annotated bibliography of typography and readability research

Link para protótipo com tamanho de fonte proposta: https://di-visual-design-font-size.web.app/Hummingbird

Feedback

 * Reading/Web/Desktop Improvements/Fifth prototype testing/Feedback