Evolução de acessibilidade em um produto existente
Decisões orientadas à inclusão, acessibilidade e agilidade
Contexto
O produto possuía uma base HTML com diversas limitações para leitores de tela, problemas de hierarquia semântica e ausência de padrões claros de acessibilidade.
Além disso, o projeto exigiu aprendizado prático de acessibilidade ao longo da execução, já que não havia histórico ou diretrizes consolidadas no time naquele momento.
Conflito
Objetivo
A votação existente dependia de elementos que não funcionavam com leitores de tela, e a arquitetura da informação não era fluida para navegação por teclado. Era essencial garantir que todos os usuários pudessem participar de forma independente, rápida e eficiente.
Corrigir problemas estruturais de acessibilidade em um produto já em uso, sem comprometer agilidade, estabilidade ou prazos de entrega.
Objetivo
Melhorar significativamente a experiência de usuários que utilizam leitores de tela e navegação assistiva, priorizando correções de maior impacto com mínimas alterações estruturais.
Problema
Quão animado(a) você está para a Copa do Mundo?
Muito animado(a)
Neutro(a)
Desanimado(a)
Visão Geral
Papel
UX Designer
Envolvidos diretos
1 PO + 2 DEVs
Duração
4 meses
Jul 2022 - Out 2022
Ferramentas
Figma, Notion e Maze
Possibilidades
No início do projeto, meu conhecimento sobre acessibilidade era limitado, o que exigiu um aprofundamento intenso (+ 160h de estudo) e aplicado ao contexto real do produto.
Esse aprendizado permitiu identificar os principais pontos de melhoria: ajustes no HTML e na arquitetura da informação, garantindo uma navegação mais fluida para leitores de tela e teclado. Esses estudos me levaram a 2 opções:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
Decisão
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Ver Resultado Parcial
Publicidade
scroll automático
Antes
Depois
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Publicidade
Normal
Ruim
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
scroll automático
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Resultados
O que melhorou
Navegação fluida e compreensível com leitores de tela
Hierarquia mais clara e consistente
Possibilidade de completar o fluxo de votação de forma autônoma
Criação de uma base prática de acessibilidade aplicada ao produto
Feedback do teste de usabilidade em produção
100% das 5 pessoas cegas participantes completaram sem dificuldade o fluxo de identificação e seleção da opção de voto
Feedback positivo sobre clareza e rapidez do novo fluxo com leitores de tela
Limitações fora do escopo do time (ex.: página de resultados) afetaram a autonomia completa em alguns casos
Impacto além da entrega
Me tornei referência em acessibilidade na minha gerência
Apoiei outros designers na aplicação de práticas acessíveis
Estruturei a base da cultura de acessibilidade no time
Veja mais projetos
Vamos transformar desafios em soluções?
bruzacaanna@gmail.com
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
Evolução de acessibilidade em um produto existente
Decisões orientadas à inclusão, acessibilidade e agilidade
Contexto
O produto possuía uma base HTML com diversas limitações para leitores de tela, problemas de hierarquia semântica e ausência de padrões claros de acessibilidade.
Além disso, o projeto exigiu aprendizado prático de acessibilidade ao longo da execução, já que não havia histórico ou diretrizes consolidadas no time naquele momento.
Conflito
Objetivo
A votação existente dependia de elementos que não funcionavam com leitores de tela, e a arquitetura da informação não era fluida para navegação por teclado. Era essencial garantir que todos os usuários pudessem participar de forma independente, rápida e eficiente.
Corrigir problemas estruturais de acessibilidade em um produto já em uso, sem comprometer agilidade, estabilidade ou prazos de entrega.
Objetivo
Melhorar significativamente a experiência de usuários que utilizam leitores de tela e navegação assistiva, priorizando correções de maior impacto com mínimas alterações estruturais.
Problema
Quão animado(a) você está para a Copa do Mundo?
Muito animado(a)
Neutro(a)
Desanimado(a)
Visão Geral
Papel
UX Designer
Envolvidos diretos
1 PO + 2 DEVs
Duração
4 meses
Jul 2022 - Out 2022
Ferramentas
Figma, Notion e Maze
Possibilidades
No início do projeto, meu conhecimento sobre acessibilidade era limitado, o que exigiu um aprofundamento intenso (+ 160h de estudo) e aplicado ao contexto real do produto.
Esse aprendizado permitiu identificar os principais pontos de melhoria: ajustes no HTML e na arquitetura da informação, garantindo uma navegação mais fluida para leitores de tela e teclado. Esses estudos me levaram a 2 opções:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
Decisão
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Ver Resultado Parcial
Publicidade
scroll automático
Antes
Depois
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Publicidade
Normal
Ruim
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
scroll automático
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Resultados
O que melhorou
Navegação fluida e compreensível com leitores de tela
Hierarquia mais clara e consistente
Possibilidade de completar o fluxo de votação de forma autônoma
Criação de uma base prática de acessibilidade aplicada ao produto
Feedback do teste de usabilidade em produção
100% das 5 pessoas cegas participantes completaram sem dificuldade o fluxo de identificação e seleção da opção de voto
Feedback positivo sobre clareza e rapidez do novo fluxo com leitores de tela
Limitações fora do escopo do time (ex.: página de resultados) afetaram a autonomia completa em alguns casos
Impacto além da entrega
Me tornei referência em acessibilidade na minha gerência
Apoiei outros designers na aplicação de práticas acessíveis
Estruturei a base da cultura de acessibilidade no time
Veja mais projetos
Vamos transformar desafios em soluções?
bruzacaanna@gmail.com
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
Evolução de acessibilidade em um produto existente
Decisões orientadas à inclusão, acessibilidade e agilidade
Contexto
O produto possuía uma base HTML com diversas limitações para leitores de tela, problemas de hierarquia semântica e ausência de padrões claros de acessibilidade.
Além disso, o projeto exigiu aprendizado prático de acessibilidade ao longo da execução, já que não havia histórico ou diretrizes consolidadas no time naquele momento.
Conflito
Objetivo
A votação existente dependia de elementos que não funcionavam com leitores de tela, e a arquitetura da informação não era fluida para navegação por teclado. Era essencial garantir que todos os usuários pudessem participar de forma independente, rápida e eficiente.
Corrigir problemas estruturais de acessibilidade em um produto já em uso, sem comprometer agilidade, estabilidade ou prazos de entrega.
Objetivo
Melhorar significativamente a experiência de usuários que utilizam leitores de tela e navegação assistiva, priorizando correções de maior impacto com mínimas alterações estruturais.
Problema
Quão animado(a) você está para a Copa do Mundo?
Muito animado(a)
Neutro(a)
Desanimado(a)
Visão Geral
Papel
UX Designer
Envolvidos diretos
1 PO + 2 DEVs
Duração
4 meses
Jul 2022 - Out 2022
Ferramentas
Figma, Notion e Maze
Possibilidades
No início do projeto, meu conhecimento sobre acessibilidade era limitado, o que exigiu um aprofundamento intenso (+ 160h de estudo) e aplicado ao contexto real do produto.
Esse aprendizado permitiu identificar os principais pontos de melhoria: ajustes no HTML e na arquitetura da informação, garantindo uma navegação mais fluida para leitores de tela e teclado. Esses estudos me levaram a 2 opções:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
Decisão
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Ver Resultado Parcial
Publicidade
scroll automático
Antes
Depois
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Publicidade
Normal
Ruim
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
scroll automático
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
A escolha foi baseada em um teste não moderado que avaliou rapidez, completude e compreensão do fluxo. A alternativa mais próxima da experiência anterior teve desempenho ligeiramente superior, mantendo praticidade e familiaridade.
Como não foi possível testar com leitores de tela nesse momento, a decisão foi complementada por maior rigor na documentação de acessibilidade e na implementação técnica.
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Resultados
O que melhorou
Navegação fluida e compreensível com leitores de tela
Hierarquia mais clara e consistente
Possibilidade de completar o fluxo de votação de forma autônoma
Criação de uma base prática de acessibilidade aplicada ao produto
Feedback do teste de usabilidade em produção
100% das 5 pessoas cegas participantes completaram sem dificuldade o fluxo de identificação e seleção da opção de voto
Feedback positivo sobre clareza e rapidez do novo fluxo com leitores de tela
Limitações fora do escopo do time (ex.: página de resultados) afetaram a autonomia completa em alguns casos
Impacto além da entrega
Me tornei referência em acessibilidade na minha gerência
Apoiei outros designers na aplicação de práticas acessíveis
Estruturei a base da cultura de acessibilidade no time
Veja mais projetos
Vamos transformar desafios em soluções?
bruzacaanna@gmail.com
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
Vídeo do novo fluxo completo:
Vídeo e áudio do leitor de tela:
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.
A. Tela separada para o captcha
O que fiz: Após escolher a opção, o usuário é levado para uma tela que mostra apenas a seleção e o captcha.
Objetivo: Reduzir informações na mesma tela, tornando mais claro o que foi selecionado e o próximo passo (conclusão do captcha).
Ponto de atenção: O usuário poderia se incomodar com a necessidade de navegar para outra tela para mudar sua escolha, o que poderia afetar a rapidez da interação.
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Ruim
Normal
Mudar opção
Resolva o captcha para confirmar seu voto na opção:
Delicioso
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Gostoso
Normal
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a opção Delicioso. Confirme que você é humano através do captcha para validar seu voto.
Publicidade
Ver Resultado Parcial
Publicidade
Que nota você dá para o bolo de cenoura da Ana Maria?
A dancinha mais querida vai ser ensinada no Jornal Nacional
Delicioso
Normal
Ruim
Você selecionou a nota 5. Confirme que você é humano através do captcha para validar seu voto.
2
Ver Resultado Parcial
Publicidade
B. Scroll para o captcha na mesma tela
O que fiz: Após a seleção da opção, a tela scrolla para exibir a opção escolhida e o captcha, mantendo no topo a seleção destacada com a cor da editoria.
Objetivo: Tirar o captcha de dentro da opção selecionada, sem tirar o contexto do usuário sobre sua escolha.
Ponto de atenção: Possível desconforto com o scroll automático ou risco de o usuário esquecer a opção selecionada se não ler o texto auxiliar.