Pesquisa de desejos comunitários 2021/Pré-visualização em tempo real para wikitexto
Olá a todos e obrigado por terem vindo para ler mais detalhes sobre Visualização em tempo real. Este foi o quarto desejo na pesquisa de desejos da comunidade 2021. Este artigo irá delinear nossa abordagem para construir uma solução para esse desejo. Solicitamos seus comentários e percepções para que possamos fazer a melhor melhoria possível.
This page documents a project the Wikimedia Foundation's Community Tech team has worked on or declined in the past. Technical work on this project is complete.
We invite you to join the discussion on the talk page.
Realtime Preview for Wikitext Wish Team  | |
|---|---|
| Allow 2010 wikitext editors to preview the page while editing | |
| Grupo: | Community Tech |
| Equipe: | Nicolas Ayoub, Harumi Monroy, MusikAnimal, Emanuele Leoni, Sam Wilson, Szymon Grabarczuk |
| Líder: | Natalia Rodriguez (product owner) |
| Atualizações: | Updates |
Resumo do objetivo do desejo: Permita que os editores do Wikitexto visualizem a página em tempo real durante a edição.
Contexto & problemas
NOTA: Para evitar confusão, renomeamos o título do desejo e o nome do projeto de Visualização ao vivo para Visualização em tempo real. Isso ocorre porque já existe um recurso diferente chamado Visualização ao vivo.
Wikitexto é uma linguagem de edição wiki. Isso é usado por muitos usuários para formatação em wikis. Parece diferente do que os leitores veem. Trabalhando com o wikitexto, pode ser difícil prever como seria o resultado final. É por isso que muitos editores usam a funcionalidade de visualização antes de publicar a alteração. No entanto, isso requer uma etapa extra separada do processo de escrita do wikitexto.
Em um alto nível, podemos resumir o problema do desejo original da seguinte forma:
Como os editores garantem que as mudanças que estão fazendo produzam o resultado que desejam?
Do ponto de vista do artigo, permitir que os editores visualizem o resultado final em tempo real poderia:
- Melhore a experiência do editor reduzindo o número de etapas extras (cliques) dentro da jornada de edição
- Permita que os editores detectem erros de digitação, revisem o wikitexto e corrijam-no imediatamente, mantendo a qualidade das wikis
Soluções propostas
Requisitos de concepção
A seguir está um conjunto de designs que podem fornecer aos editores uma maneira de visualizar seu conteúdo.
Como um usuário que edita em wikitexto usando uma tela do tamanho de um desktop, posso:
- Tem a opção de visualizar o resultado do wikitexto
- Torne a pré-visualização rolável para que eu possa visualizar facilmente o resultado final sem ocupar a tela inteira
Escopo e restrições
O botão de visualização em tempo real estará disponível para/em:
- Ferramentas de edição baseadas em wikitexto. Não mudaremos o Editor Visual.
- Edição em computador.
- Telas com mais de 1200px para o modo paisagem (layout horizontal). Essa é a largura padrão para ajustar todos os elementos da página sem ser confusa. A largura mínima pode mudar. No modo retrato (layout horizontal), isso estará disponível por padrão.
Pesquisa de dados
Estamos trabalhando para responder às seguintes perguntas, que ajudarão a aprofundar nossa compreensão do problema:
- Quantos editores visualizam suas alterações?
- A visualização das alterações leva a menos reversões?
- Quantos editores usam telas do tamanho sugerido para editar nas wikis?
- O layout vertical faz sentido ser padronizado?
Por que e como aceitamos esse desejo?
Esse desejo teve uma pontuação elevada em nosso processo de priorização para 2021. Foi muito popular em termos de número de votos, impactante em termos de benefício para a comunidade e teve uma estimativa de complexidade relativamente baixa. Leia sobre nosso processo completo aqui.
Release Timeline
| Item | Status | Actual Date | Target Date | Notes |
|---|---|---|---|---|
| Deploy to test wiki for user testing purposes | Complete | 2022-03-30 | 2022-03-30 | |
| Enable on Beta cluster – Beta English Wikipedia and Wikisource only, since Realtime Preview changes the UI slightly for everyone even when you don't have it turned on | Complete | 2022-03-30 | 2022-03-30 | |
| Merge MVP for QA to Review | Complete | 2022-04-26 | 2022-04-08 | |
| Confirm MVP Top Priority tasks merged and QAd | Complete | 2022-04-26 | 2022-04-08 | |
| Get a final greenlight from Design QA | Complete | 2022-05-19 | 2022-04-15 | |
| Train w work deployed to Polish Wiki | Complete | 2022-04-26 | 2022-04-27 | Designer to schedule user video calls to observe users and design accordingly |
| First pilot wiki as an opt-out beta feature: plwiki | Complete | 2022-04-26 | 2022-04-27 | |
| Announcement on project page & any tool-specific pages | Complete | 2022-08-17 | 2022-04-30 | |
| Pilot wikis as an opt-in beta feature: huwiki, fiwiki | Complete | 2022-05-26 | 2022-05-24 | |
| Pilot wikis with Vector-2022, as an opt-in beta feature: cawiki, viwiki, fawiki | Complete | 2022-06-14 | 2022-06-14 | After phab:T307725 is complete |
| Get greenlight from Performance Review | Complete | 2022-10-17 | 2022-05-24 | |
| Announcement in WMF internal #release-announcements Slack channel | Not Started | |||
| Bugs identified and cut | In Progress | Should happen as soon as we release to the first wiki | ||
| Bugs triaged | In Progress | Should happen as soon as we release to the first wiki | ||
| Announcement in Tech/News | Complete | To be done when releasing to all wikis: | ||
| Release to group 0 as opt-in Beta (T314150) | Complete | 2022-08-02 | 2022-08-02 | |
| Release to group 1 as opt-in Beta (T314182) | Complete | 2022-08-23 | 2022-08-17 | |
| All wikis as opt-in Beta | Complete | 2022-08-31 | 2022-08-31 | |
| Graduate Beta Feature to feature for all | Complete | 2023-01-12 | 2023-01-09 |
Atualizações
Aug 17, 2022: Available as an opt-in beta feature for most wikis
After gathering feedback from the pilot wikis (cawiki, viwiki, fawiki, plwiki, huwiki, and fiwiki – thank you all!) we have released this feature to group 0 and group 1 as an opt-in beta feature. We plan to release to group 2 this August 31st as an opt-in beta feature. We plan to let it sit behind the Beta feature tab for 6-8 weeks, listening to feedback and improving the feature if any bugs arise. After that time window, we plan on graduating it from a beta feature to a feature for all 2010 Wikitext Editor users. To enable this feature from inside your beta preferences, be sure that the Realtime feature is enabled, and that the New Wikitext mode is disabled.
We would love to hear about how you enjoy using this tool and any other feedback from all of you in the Talk page!
May 3, 2022: Launching to partner projects
We have launched a version of the Realtime preview feature to Polish Wikipedia. Its community has agreed to partner with us and give us feedback on how to improve it before we launch to the rest of the users. Please find our complete Release Plan.
This feature touches one of the most used editors (Wikitext 2010) across wiki projects. We've thus decided to roll it out as a Beta Feature before we release the feature to everyone. This will allow us to collect feedback and make improvements before we release to everyone.
We are partnering with users early on to understand behavior on the new tool and make improvements. Depending on the user’s connection, we are aiming to observe and evaluate patterns regarding the automatic and manual reloads of the preview pane, as follows:
- Automatic reload: Debounce time. When the preview pane is automatically reloading, is our debounce time sufficient to provide a fluid experience?
- Automatic reload: Discoverability of the manual reload button. When the preview pane is automatically reloading, is the manual reload button that appears while hovering over the preview pane easy to find?
and/or
- Manual reload: Discoverability/Display time of the manual reload status bar. When the preview pane is NOT reloading automatically, the user will see a status bar inviting them to manually reload. Is the discoverability of the bar sufficient? Is the status bar obstructive to the users’ workflows?
We will aim to observe both of these scenarios for users with stable high-speed internet connections. In both cases, we will be performing the test on two pages: one short article without images (for faster reload time) and another one with a large content and multimedia assets (for slower reload time).
Aside from our main investigation, we will also be observing the following during our screen-sharing sessions with users:
- Discoverability of the overall feature: although users will be notified of the existence of the realtime preview feature, and the potential relationship between the latter and the "Show preview" feature.
- User screen sizes- This data could be helpful to understand how useful the Realtime Preview is for folks with a smaller screen. Does this make their experience too crowded?
- Usage of syntax highlighting/Code Mirror
- Understanding that both panes do not have a synced scrolling behavior.
If you would like to give us any feedback on any of the open questions above, please reach out to us in the talk page as we are eager to hear about the usability of this new feature. Thanks for building with us!
November 2, 2021: Findings from user testing of designs
Hello everyone,
Many thanks for your support and great feedback on the proposed designs. Thank you for comments on the talk page, as well as the latest "Talk to Us" video call. We have learned more about how experienced users edit.
Also, we have conducted usability testing on the usertesting.com platform. 5 editors took part. Below you will find some of the findings and insights:
- Half of the users found the new "Preview" button in the toolbar. One of the reasons for this could be behavioral patterns developed over the existing "Show preview" button in the footer of the editor box. We are designing a low-friction pulsating dot with a guide popup. We hope this will make it easier to notice the new feature.
- All users found the existing "show preview" button.
- All users understood the difference between both buttons. One could be used while editing (offering a quick glimpse at the output). The other could be more helpful for proofreading before publishing the changes.
- One user reported that it might always be easy to understand the relationship between the Wikitext input and the preview output. To mitigate this, we are exploring ways to highlight the text in both panes and align the scrolling or editing behavior.
Acknowledgments:
- Not all of these editors are experienced users. Although this wish is intended to be helpful for every user – we assume that less experienced editors will tend to use the Visual Editor over the wikitext editor. This will make the new feature less relevant for them.
- We are also working on improving the scaling of both panes. We want to allow for optimal support to both small and ultra-wide displays alike.
Again, thanks so much for your feedback!
14 de setembro de 2021: Próximas etapas sobre o design
Obrigado pelo seu comentário
Olá a todos, estamos de volta com uma atualização dos designs propostos para este desejo. Obrigado por todos os seus comentários na página de discussão. Ouvimos o que você disse e sintetizamos o feedback da seguinte maneira:
- O botão para visualizar o resultado do wikitexto deve ser mais intuitivo, a pessoa que clica nele deve saber o que ele faz.
- O botão para visualizar o texto deve estar na barra de ferramentas.
Em seguida, fizemos uma segunda tentativa de criar o seguinte conjunto de designs. Estamos propondo que um novo botão apareça na barra de ferramentas:
Estamos propondo que, quando o usuário visualizar o conteúdo, o botão de visualização permanecerá "azul" para indicar que o estado de visualização está ativado:
O botão de visualização voltaria a ficar preto se os usuários clicarem e a visualização desapareceria.
Horizontal vs Vertical
Observe que esses projetos propostos são ilustrativos. Incluímos apenas uma versão vertical porque estamos investigando se a capacidade de ter uma tela ampla ainda será uma opção, dado o trabalho planejado nas melhorias na área de trabalho, que limitará as páginas em 960px de largura, tornando assim muito confuso a visualização.
Perguntas abertas: Queremos ouvir você!
- O novo posicionamento do botão parece mais intuitivo para os trabalhos na barra de ferramentas?
- No layout proposto atual há espaço suficiente para visualizar o wikitexto e o resultado final?
Muito obrigado por seus comentários na página de discussão!
27 de agosto de 2021: Feedback inicial do projeto
Designs propostos
Layout horizontal no computador
Um novo botão aparecerá. Isso dá aos editores a opção de visualizar o texto na lateral em tempo real:
Observação: a caixa rosa acima é apenas para chamar a atenção para o botão, ela não aparecerá para os usuários.
Os editores poderão clicar no botão destacado acima. Se eles fizerem isso, o layout a seguir permitirá que eles visualizem o resultado em um contêiner fixo rolável:
Layout vertical no computador
O novo elemento de interface do usuário a seguir aparecerá quando um usuário tiver uma tela vertical:
Observação: a caixa rosa acima é apenas para chamar a atenção para o botão, ela não aparecerá para os usuários.
Os editores poderão clicar no botão destacado acima. Se eles fizerem isso, o layout a seguir permitirá que eles visualizem o resultado em um contêiner fixo rolável:
Os engenheiros começaram a trabalhar nessas mudanças. Estamos introduzindo as mudanças dentro do núcleo do MediaWiki. Adoraríamos ouvir sua opinião sobre nossos designs propostos. Gostaríamos especialmente de receber feedback sobre:
- Tornando a colocação de cópias e botões intuitiva
- A sensação geral dos designs propostos
Estamos ansiosos para ouvir sua opinião sobre nossos designs propostos e quaisquer outras considerações!
Perguntas abertas: Queremos ouvir você!
As soluções acima são propostas e em estágios iniciais. Adoraríamos ouvir seus comentários na página de discussão. Sua visão pode nos ajudar a entender outras abordagens, riscos e soluções.
Estas são as nossas perguntas para você:
- Como você acha que isso influenciará a maneira como você edita?
- O ícone no botão de expansão prepara os editores para entender o que ele faz? É perturbador?
Links relevantes
- Visualização ao vivo (NÃO o que estamos fazendo)
- Desejo original
- Wikitexto