Reading/Web/Desktop Improvements/Repository/First Prototype Feedback Report/pt-br

Em dezembro, publicamos um protótipo dos primeiros recursos do projeto para feedback da comunidade. O protótipo apresentou uma versão recolhível da barra lateral, uma restrição de largura máxima no conteúdo e uma localização mais proeminente para o alternador de idioma.

Recebemos feedback detalhado e atencioso de mais de 200 usuários conectados, em cinco idiomas. O feedback é principalmente positivo, com a maioria dos usuários vendo as mudanças como uma melhoria em relação ao design atual.

No entanto, havia também algumas áreas de preocupação. Muitos dos problemas levantados foram devido a bugs no protótipo (particularmente com o menu de troca de idioma). Com relação a outros problemas expostos, iremos iterar sobre eles e/ou ficar de olho durante o desenvolvimento. Este relatório destaca os principais pontos levantados, tanto positivos quanto negativos, e nossos planos para o futuro em resposta a esse feedback.

Método de feedback
O protótipo foi mostrado para usuários logados usando um aviso central nas seguintes wikis:



As respostas foram coletadas por meio de um formulário pré-preenchido com perguntas especializadas sobre as alterações apresentadas. Também pedimos ideias e opiniões gerais sobre as mudanças no protótipo. Os respondentes também tiveram a opção de enviar suas ideias por e-mail. Os resultados apresentados contêm os comentários que recebemos na página e também por e-mail.

Recebemos muitos comentários relacionados a bugs no protótipo. Em particular, eles estavam relacionados à funcionalidade de troca de idioma e ao Seletor de Idioma Universal (ULS, em inglês). Pedimos desculpas por não fornecer informações suficientes sobre o protótipo em si e por não detectar esses problemas antes.

Resumo dos resultados
Um total de 230 usuários logados nos deram feedback sobre o protótipo. A maioria das respostas foi em inglês (180), seguida de francês (38) e hebraico (7).

Positiva


 * A maioria dos usuários conectados preferiu o novo menu de idioma em vez da implementação atual na barra lateral.
 * A maioria dos editores gostou da capacidade de reduzir a barra lateral. Especificamente, a visualização de leitura mais focada que resulta da barra lateral sendo recolhida e uma restrição de largura máxima no conteúdo.

Espaço para melhorias


 * Houve uma série de preocupações levantadas com o alternador de idioma. A maioria deles estava relacionada à troca de idioma, exigindo dois cliques em vez de um, pois o novo alternador de idioma era muito proeminente, e questões sobre a internacionalização dos nomes dos idiomas na lista.
 * Houve algumas preocupações em torno da quantidade de espaço em branco introduzido com uma barra lateral recolhível e restrição de largura máxima no conteúdo.

Solicitações de recursos


 * Modo escuro/noturno
 * Torne o índice sempre disponível na página

Positiva
No geral, a maioria dos usuários preferiu o novo local do seletor de idioma. Eles relataram que era mais fácil de encontrar do que o local anterior. As pessoas que usaram o seletor de idioma frequentemente relataram que seria mais rápido para elas trocar de idioma. Vários usuários também relataram que o novo local é mais intuitivo, pois segue um padrão usado por outros sites multilíngues.

Espaço para ideias de melhoria e iteração

 * Mudança de idioma com um clique: atualmente você pode mudar para outra wiki ou idioma com um único clique. Dependendo da altura da tela, alguma rolagem também pode ser necessária. No protótipo, são necessários dois cliques para alternar os idiomas (além da possibilidade de rolar também). Muitas pessoas notaram que a nova posição do alternador de idioma era mais fácil de encontrar. Eles também expressaram preocupação em ter um clique extra para trocar de idioma. Foi especialmente importante para os casos em que as pessoas esperam mudar com frequência. Existem duas maneiras de pensar sobre isso:
 * Estaremos coletando dados de uso e realizando testes A/B em nossas wikis de teste. Dessa forma, determinaremos se a troca de idioma aumenta, diminui ou permanece relativamente igual. Esperamos que, apesar do clique extra, o aumento da proeminência do alternador de idioma leve a uma maior capacidade de descoberta e, por fim, a mais alternância de idioma.
 * Elaboramos uma opção que inclui links para alternar os idiomas diretamente na página, adjacente ao seletor geral de idioma:04_-_DIP_-_Language_links_in_article_title_bar_alt.png

A mudança de idioma não é relevante para todas as pessoas. Teríamos que descobrir quando mostrar esses links diretos. Caso contrário, eles podem ser uma distração. Talvez eles possam aparecer quando alguém mudou de idioma uma vez, ou se acharmos que é provável que mude de idioma. Isso pode ser causado por uma incompatibilidade entre o idioma do sistema operacional e o idioma da wiki. Ainda não escolhemos nossa abordagem. Pretendemos revisitar essa ideia assim que a implementação inicial da troca de idioma estiver em vigor. Qualquer feedback sobre este ou os modelos acima seria muito apreciado.


 * Problemas para encontrar um determinado idioma no Seletor de Idioma Universal (ULS): Muitos usuários gostaram da posição do novo seletor de idioma, mas expressaram preocupação com o próprio seletor.
 * Algumas dessas preocupações giram em torno da dificuldade de encontrar um determinado idioma no seletor. Em parte, isso se deveu aos seguintes bugs no próprio protótipo: a lista de idiomas sugeridos e usados ​​com frequência estava faltando, a pesquisa de idioma estava quebrada e o menu estava sendo renderizado muito pequeno.
 * Também havia preocupações com a ordem dos idiomas por região e com o espaçamento entre os itens no seletor, levando a muita rolagem.

Iremos priorizar as sugestões e problemas e esperamos trabalhar com a equipe Language para fazer algumas melhorias no Seletor de Idioma Universal. Atualizaremos mais sobre isso em breve.


 * Localização & proeminência: As seguintes preocupações foram expressas sobre a localização do alternador de idioma no protótipo:
 * Algumas pessoas preferiram o local atual ao novo, por vários motivos. O tema principal parecia ser a dificuldade de usar o Seletor de Idioma Universal e a perda de acesso com um clique. Ambos são abordados abaixo.
 * O novo local é muito proeminente, pois muitas pessoas nunca trocam de idioma. Um objetivo principal deste projeto é aumentar a proeminência das funcionalidades usadas com frequência.  Atualmente, os links de mudança de idioma são os links mais usados ​​na barra lateral. Além disso, acreditamos que permitir que usuários multilíngues mudem de idioma é uma forma crucial de promover idiomas menos difundidos. Devido à localização atual, muitos não sabem que alternar entre os idiomas é possível.
 * A nova localização é boa, mas o botão é muito grande. Nós esboçamos várias outras opções para o tratamento de botão, mostradas abaixo:Showing four treatments for the interlanguage links menu.png
 *  Looks like a translation:  De acordo com alguns usuários, os leitores casuais podem pensar que, ao trocar de idioma, estão apenas visualizando uma tradução do artigo, em vez de trocar para uma wiki diferente. Esses usuários acreditam que isso pode ser causado pela colocação do seletor de idioma na visualização do artigo. É importante esclarecer a relação entre as wikis de diferentes idiomas. Estamos conduzindo testes com usuários para investigar isso e entender se essa confusão está ocorrendo e até que ponto isso seria um problema para os leitores.

Outras notas

 * Houve alguns pedidos de exibição de nomes de idiomas em inglês, além do nome nativo (ou seja, exibindo bengali e বাংলা, em vez de apenas বাংলা).
 * Tradução da palavra “language”. Vários usuários mencionaram que a palavra “language” deve ser traduzida para o idioma da wiki. Isso foi um erro do protótipo. A interface será traduzida para o idioma da wiki na versão final.
 * Algumas pessoas mencionaram a adição de algum tipo de indicador na barra lateral que aponta as pessoas para a nova localização do alternador de idioma. Esperamos explorar isso.
 * Algumas pessoas estão se perguntando como será a aparência do alternador de idioma em artigos sem outros idiomas disponíveis. O esboço virá em breve.

Positiva
A maioria dos usuários que forneceram feedback gostou da barra lateral recolhida para uso pessoal e, especialmente, para fins de leitura. As pessoas mencionaram que ela remove as distrações e torna a leitura mais agradável. Um usuário com deficiência de leitura mencionou que remover a barra lateral torna mais fácil para eles se concentrarem no conteúdo.

Espaço para ideias de melhoria e iteração

 * Não recolher por padrão para usuários desconectados: Alguns usuários não gostaram da ideia de a barra lateral ser recolhida por padrão para usuários desconectados. Eles expressaram preferência pelo estado atual. O raciocínio deles era que os itens da barra lateral poderiam aumentar o interesse na edição e no funcionamento interno dos projetos da Wikimedia. Reconhecemos que, com a barra lateral recolhida, há menos pontos de entrada para editar/contribuir com páginas relacionadas. Isso inclui as mudanças recentes. No entanto, esperamos que, ao reduzir o número de links na página, os que permanecem (Editar, Discussão, Histórico, etc.) sejam mais perceptíveis. Esperançosamente, veremos mais engajamento. Não planejamos repetir o design atual com base neste feedback. No entanto, estaremos testando cliques A/B em links para comparar como uma barra lateral recolhível se compara a uma não recolhível. Também monitoraremos se as alterações da barra lateral têm algum efeito na criação da conta (como um proxy para a conversão de leitores em editores).
 * Recolher por padrão para todos: Por outro lado, vários usuários mencionaram que prefeririam que a barra lateral recolhida fosse o padrão para leitores e editores. Muitos sugeriram remover a barra lateral por completo. Atualmente, não temos planos de seguir nenhuma dessas ideias. Aceitamos comunidades individuais para discutir mais os links da barra lateral e sua utilidade.
 * Mude e/ou reposicione o ícone de abrir e fechar o menu: Muitas pessoas comentaram que o ícone escolhido não era uma forma intuitiva de abrir/fechar o menu. Apenas um dos mais de 220 usuários que escreveram não conseguiu abrir a barra lateral quando solicitado (link para o feedback). As duas sugestões mais comuns foram: 1) quando a barra lateral está aberta, o ícone deve mudar para algo como um “X” ou “<<”, e 2) tente mover o ícone para mais perto do próprio menu, em vez de colocá-lo no cabeçalho do site. Os esboços dessas duas ideias estão abaixo.


 * Não esconda o aleatório: Alguns usuários mencionaram que o link da página aleatória é importante para os leitores e uma parte central da experiência wiki. Concordamos que esta é uma ideia interessante. Estamos explorando a movimentação do link para fora da barra lateral e para a barra de pesquisa.Search with random article button.png
 * Recolha as seções na barra lateral também ou reduza o número de links na barra lateral: Atualmente, a barra lateral contém muitos links que não são usados ​​com frequência. Algumas pessoas temem que, ao reduzir a barra lateral, estejamos ignorando o maior desafio: remover os links não usados ​​da barra lateral. Alguns sugeriram tornar as seções da barra lateral recolhíveis. Others have suggested cleaning up the links. Os links na barra lateral são determinados em cada wiki individualmente. Concordamos que as comunidades devem remover links desnecessários da barra lateral.

Perguntas abertas, novas ideias e outras notas

 * Para onde foram o botão de edição e as categorias? Alguns usuários mencionaram que não conseguiram acessar o botão de edição e a lista de categorias dentro do protótipo. Esse era um bug do protótipo. Pedimos desculpas por não mencioná-lo nas instruções.

Contexto
Um dos bugs do protótipo era que o conteúdo tinha uma restrição de largura máxima apenas quando a barra lateral era fechada. Muitas pessoas comentaram sobre como isso era estranho e quanto o conteúdo saltou pela página quando você fechou a barra lateral. Isso foi um erro, não como pretendíamos que fosse. Por favor, veja este protótipo atualizado para entender como a restrição de largura máxima funcionará: https://di-collapsible-sidebar-5.firebaseapp.com/Tea

Positiva
A maioria das pessoas respondeu positivamente ao layout de largura máxima. Foi observado que resultou em uma experiência de leitura mais confortável. Várias pessoas mencionaram que ter margens em torno do conteúdo facilita o foco. Para eles, comprimentos de linha mais curtos eram melhores para a leitura. Isso é consistente com a pesquisa profissional que foi conduzida.

Feedback geral e outras ideias de recursos

 * Crie um modo noturno: Uma parte significativa dos usuários solicitou a inclusão do modo escuro/noturno no escopo do projeto. Não estávamos considerando isso no escopo inicial. Percebemos que essa é uma solicitação que vimos várias vezes no passado também. No momento, estamos discutindo se podemos adicionar o modo escuro ao escopo do projeto e como isso pode afetar nosso cronograma. Atualizaremos assim que soubermos mais.
 * O índice deve permanecer sempre em vista: Many people commented that having access to the table of contents regardless of how far down the page they had scrolled would be (“extremely helpful”). We are planning to explore this functionality as part of this project.
 * Build a sticky header: A lot of users expressed interest in having constant access for commonly used actions at the top of the page. Users requested to have access to commonly used pages and actions (talk, history, edit) as well as other functionality such as the search bar. A similar request was the need to return to the top of the page and/or to switch sections in a quick manner. We plan on exploring this option as a part of this project. We would like to introduce a sticky header with commonly used actions as well as a persistent table of contents. Below are some examples of our ideas so far.   We’d appreciate any feedback around this you might have.


 *  Clean up the top bar:  There were some thoughts and ideas around cleaning up the links at the top of the page by collapsing them or moving them under dropdowns. This is also something we’re considering for the project. Consolidated_user_tools_prototype_for_Desktop_improvements_project.gif
 * The logo is too small.

Research
The primary objective is to improve readability of Wikimedia wiki pages. We decided to work on the width of the content area. There are research-based recommendations on this issue.


 * English Wikipedia article on Line length provides a good overview.
 * So does the essay by Professor Laura Franz.
 * The research study is more rigorous.

The popular recommendation is that there should be between 40 and 75 characters per line. The findings of multiple studies conclude that "short line lengths are easier to read". Regarding learning and information retention: "Subjects reading the narrow paragraphs had better retention than those reading the wide paragraphs".

Popular sites with limited width
One can find many popular sites that conform to these guidelines.
 * Articles on the online science journal Nature have a max-width resulting in ~76 characters per line.
 * New York Times articles are ~64 characters per line.
 * Times of India articles are ~100 characters (Hindi).
 * Oxford Academic journal articles are ~75.
 * Articles on the World Health Organization’s website are ~96 (Latin alphabet), ~46 (Chinese alphabet), and ~85 (Cyrillic alphabet).
 * When using reading mode in Safari or Firefox text is rendered at ~73 and ~77 characters per line respectively (Latin alphabet).

Comparison with Wikimedia wikis
Currently, an English Wikimedia wiki page on a browser window at 1280px has a character count of ~170 characters per line. That’s at the small end of the screen size spectrum.

On Wikimedia wiki the character count per line grows as the screen width grows. So on the second most popular screen-size, 1920px (21% of users), the character count per line is ~262, more than three times the recommended value.

Why not to choose "the simplest" solution
Based exclusively on the recommended line length, it seems like somewhere around 700px is reasonable. Why not limit the width such that we achieve the recommended line length, as other online content sites seem to?

Because our pages are different, and therefore people read them differently.


 * Wikimedia wiki pages are very long, contain a large amount of information, and they are not uniform from one page to the next. As a result, people have a need to skim and search within pages. This is different than linear reading a typical online article or book. This is supported by our research around reading time on Wikipedia.
 * The more narrow we make the content, the longer the page gets. Perhaps the more difficult scanning becomes as well, because it involves more scrolling, etc. For more information regarding different types of online reading, please see this 2006 study conducted by the Nielsen Norman Group.
 * Additionally, it is not straightforward to achieve a specific number of text characters per line. That is because Wikimedia wiki pages contain many elements that are floated inline alongside text.

Our design must take into account these distinctions.
 * We should limit the width by some amount to accommodate focused/engaged reading. This means shorter line lengths, and less density.
 * At the same time, we should still enable readers to skim and search around, obtaining a visual map of the page without having to scroll too much This is an argument for longer line lengths, and more density.

How do we do that?

Our solution
There are two common experiences we might want to consider.


 * 1) The top of an article, a paragraph of text situated next to an infobox
 * 2) The middle of an article, a paragraph with no elements interrupting it

We can consider these two experiences at various widths, counting the character length per line for each: At 1000px wide an uninterrupted paragraph of text is ~154 characters long, just about double the upper limit of the recommended range. Sometimes there are floated elements that are wider than infoboxes, resulting in more narrow columns of text next to them. Also there has not been a max-width. While some editors might edit on narrower screens (or check how pages look on narrower screens) there’s likely content on pages that won’t look great at a narrower width (yet), because it might not have been a consideration (e.g. large tables).

Another approach is thinking about a grid-based layout. This is an approach that aims for both visual harmony on the page, and making decisions about spacing, widths, etc. easier. The Vector skin does not currently use a grid. Something we could do is think about the width of the infobox as a grid column (since they are such common elements), and then use a multiple of that to determine the content width.

Establishing a common reading experience
Introducing a max-width would work towards establishing a common experience. Hopefully, it would be helpful to editors when making decisions about page layouts.

Note: 1024px is mentioned as a minimum size to consider in the WP:Manual of Style/Layout page. That’s not quite the same thing, though.

Currently, an editor might be editing a page at a width of 1500px, while a reader reads it at a width of 1200px. By implementing a max-width, we don’t remove this difference completely. There would still be variation below the fixed-width, for people with narrower screens. However, we would be greatly limiting the range of variation.

Conclusion
After thinking all of that through we’ve come to two conclusions:


 * 1) It seems that a max-width in the range of 800–1000px is a sensible starting point. We will center the content on the page to ensure that it looks good with the sidebar both open and closed.
 * 2) It seems worthwhile to conduct a study focusing on the readability of Wikipedia articles specifically. We hope to be able to find the resources to do this.

Additional notes
 A note on breaking templates / content / special pages / etc. 

Part of what makes Wikipedia, and other Wikimedia wikis, a powerful tool for sharing knowledge is that there are very few constraints on how information is presented. The result of this is a wide variety of different elements on the pages: tables, image galleries, diagrams, panoramic images, graphs, forms, maps, category boxes, and more. We have dealt with the challenges of designing the mobile site, and got the content to look good. This is why we do recognize that there are going to be some situations where page content doesn’t look great given the max-with. Our plan currently is:


 * Work with our test wiki communities to identify issues and discuss solutions using template styles or other existing tools.
 * Not to implement the max-width on Special pages. Special pages are not intended for “reading”. They often function more as lists or dashboards. Until we have time to work through the details about more responsive layouts for these pages, we will be leaving them alone. Here is an initial prototype of how this would work. You can switch between "View history" and "Read" to get a sense for it: https://di-collapsible-sidebar-5.firebaseapp.com/Tea

 Previous conversations 

This topic has been discussed in the past.


 * 2014 – discussion from the Typography Refresh project

Please feel free to add additional links to past conversations here.