MediaWiki

Leitura/Web/Melhorias para o Desktop/Quinto teste do protótipo

< Reading | Web | Desktop Improvements
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 82% complete.
Outdated translations are marked like this.
Languages:

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 [$1 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).

Comparative interfaces
 
Captura de tela da Wikipédia Hindi com skin de Monobook
 
Screenshot da Wikipédia japonesa com Legacy Vector skin

Mudanças consideradas

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

1) gatilho em azul, intens em azul

 

2) gatilho em azul, itens em preto

 

2) gatilho em preto, itens em preto

 

2) gatilho preto, itens em preto

 

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

1) minimalista

 

2) bordas do artigo

 

3) bordas do artigo + sublinhado do cabeçalho

 

4) linha do índice + sublinhado do cabeçalho

 

5) linha do índice + sublinhado do título da página

 

6) bordas do artigo + fundo do cabeçalho (sólido)

 

7) bordas do artigo + fundo do cabeçalho (gradiente)

 

8) fundo exterior do artigo + fundo do cabeçalho (sólido)

 

9) fundo exterior do artigo (sólido)

 

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

1) minimalista

 

2) bold

 

3) fundo

 

4) linha com borda

 

5) linha com borda (2)

 

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

1) Logotipo retangular à esquerda

 

2) Logotipo quadrado à esquerda

 

3) Logotipo quadrado à esquerda (gradiente)

 

4) Logotipo retangular no centro

 

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".[1] 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.

Cor atual dos links
Cor Contraste com o corpo do texto #202122 Resultado do teste Link para o resultado do teste
links azuis #0645ad 1.89:1 ❌ Falha link to results
links visitados <código>#0b0080</código> 1.01:1 ❌ Falha link to results
Cor de links propostos
Cor Contrast with body text #202122 Resultado do teste Link para o resultado do teste
links azuis #3366cc 3:1 ✅ Pass link to results
links visitados #795cb2 3.06:1 ✅ Pass link to results

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

Cor atual dos links

 

Cores propostas

 


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.[2][3][4][5] 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.[6][7]

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

Primeiramente, precisamos converter a medida utilizada pelos pesquisadores (pontos) na medida que os navegadores acabam por render (px). A conversão é: 1px = 72pt / 96.[9][10] 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

Referências

  1. ↑ Contraste e Acessibilidade de Cores, Entendendo o WCAG 2 Contraste e Requisitos de Cores: "Identificação de links somente por cor".
  2. ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "fatores de legibilidade da web que afetam os usuários de todas as idades". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. ↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
  4. ↑ Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
  5. ↑ Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
  6. ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Anais do 15º Simpósio Internacional sobre Colaboração Aberta.
  7. ↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
  8. ↑ Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
  9. ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
  10. ↑ PT to PX conversor
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/pt-br&oldid=6728016"