Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wiad interface-acessivel-educacao-distancia-5dias

162 views

Published on

Interface acessível para educação à distância em 5 dias.
Apresentação realizada no WIADRIO 2017.

O Desafio:
Aluna deficiente visual total com dificuldade para acessar o Ambiente Virtual de Aprendizagem.
Plataforma com tecnologias antigas.
Componentes com falhas de acessibilidade.
Pouca flexibilidade para melhorias de acessibilidade e arquitetura da informação.
Prazo: 5 dias.

O QUE "SER" ACESSIBILIDADE WEB ?

Published in: Design
  • Be the first to comment

Wiad interface-acessivel-educacao-distancia-5dias

  1. 1. AI/ UX/ DEV/ Interface acessível para educação à distância em 5 dias DIOGO GALVÃO JONATHAS SCOTT WIADRIO 2017
  2. 2. WIAD 2017 - Interface acessível para educação à distância em 5 diasQUEM SOMOS - ONDE SOMOS
  3. 3. WIAD 2017 - Interface acessível para educação à distância em 5 dias ● Aluno deficiente visual total com dificuldade para acessar o Ambiente Virtual de Aprendizagem. ● Plataforma com tecnologias antigas. ● Componentes com falhas de acessibilidade. ● Pouca flexibilidade para melhorias de acessibilidade e arquitetura da informação. ● Prazo: 5 dias. O DESAFIO
  4. 4. WIAD 2017 - Interface acessível para educação à distância em 5 dias COMO UM DEFICIENTE VISUAL USA A INTERNET? Lucas Radaelli (NINJA) demonstrando NVDA Fonte: https://www.youtube.com/watch?v=ujHTn6Cuc5E Horácio, Lêda, Maq - Acesso Digital 47 cliques no (*tab) Áudio velocidade incomum Fonte: https://www.youtube.com/watch?v=zNVrNo7MxsA
  5. 5. WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER? O QUE SER ACESSIBILIDADE WEB ? para deficientes visuais
  6. 6. WIAD 2017 - Interface acessível para educação à distância em 5 diasACESSIBILIDADE ● Designers Daltônicos ● Deficientes Visuais (óculos) ● Deficientes motores ● etc
  7. 7. WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER? Corrigir os bugs e conformidade E-MAG e WCAG ou Projetar a Experiência repensando a Arquitetura
  8. 8. WIAD 2017 - Interface acessível para educação à distância em 5 diasNORTEADORES ● Desenvolver uma interface alternativa para Mural e Fórum. ● Foco na experiência por meio de leitores de tela. ● Reorganização das informações. ● Níveis de navegação reduzidos. ● Interações humanizadas. ● Design sem identidade visual.
  9. 9. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ? CONCEITOS: Goal-driven design, Responsive design, Progressive Enhancement, Iterações e Entregas Constantes (lean), Usabilidade e UX. PRÁTICAS: ● Grupo de foco interno, ● Persona (usuário real), ● Benchmark, ● Desconstrução do fórum para chegar a um modelo conceitual, ● Análise de tarefa em par, ● Rascunho-o-grama, ● Protótipos navegáveis em HTML, ● Análise de acessibilidade, ● Avaliação qualitativa. HEURÍSTICAS: controle, consistência, correspondência com o modelo mental, reconhecimento
  10. 10. WIAD 2017 - Interface acessível para educação à distância em 5 diasGRUPO DE FOCO + PERSONA (real) Grupo de foco: (desenvolvedor, designer, acompanhamento pedagógico, gestor) Persona: NOME: Acessilinda da Web SITUAÇÃO: Deficiente visual total COMO: Utiliza NVDA HÁBITOS: Navega sozinha em sites de notícias, redes sociais e estuda pela internet.
  11. 11. WIAD 2017 - Interface acessível para educação à distância em 5 diasBENCHMARK
  12. 12. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ? STAKEHOLDERS (os que fazem + os que querem feito) + USUÁRIOS GOAL DRIVEN DESIGN
  13. 13. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ? GOAL DRIVEN/ TAREFA do usuário. objetivos requisitos atividades meio FÓRUM OUVIR, ESCOLHER, COMENTAR, RESPONDER, EDITAR/MODIFICAR OUVIR AVISOS, CRIAR AVISO MURAL / AVISOS
  14. 14. WIAD 2017 - Interface acessível para educação à distância em 5 diasFLUXO DIAGRAMA/NINJA
  15. 15. WIAD 2017 - Interface acessível para educação à distância em 5 dias Muitas decisões de ux, arquitetura e acessibilidade foram definidas nas conversas em par, com protótipos HTML para testes em par e grupo de foco. *Tudo isso na mesa do desenvolvedor, claro!
  16. 16. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ? ● Wireframe? ● Inventário de Conteúdo ? ESTRATÉGIA TORNA-SE VAZIA SEM CLAREZA DO OBJETIVO
  17. 17. WIAD 2017 - Interface acessível para educação à distância em 5 diasOS PASSOS
  18. 18. WIAD 2017 - Interface acessível para educação à distância em 5 diasO RESULTADO ETHAN MARCOTTE - 2010 FORM FOLLOWS FUNCTION “ BAUHAUS - 1919 ” SCOTT JEHL - 2008
  19. 19. Humanizar o processo e maximizar a sensação de controle, através de clareza/eficiência nas tarefas, para o cumprimento do objetivo da aluna. Melhorar o Design Visceral (satisfação) e Comportamental (eficiência + eficácia) “ ”
  20. 20. WIAD 2017 - Interface acessível para educação à distância em 5 dias COMO PERMITIR O “ESCANEAR” NA AUDIÇÃO?
  21. 21. Página de entrada ● Nome do sistema é o prefixo do título de todas as páginas.
  22. 22. Página de entrada ● Título da página atual tem prioridade no título da aba. ● O número da versão é o que acontece quando deixam o programador escrever na interface.
  23. 23. Ao entrar ● Estrutura de frames e ferramentas abrindo em janelas separadas são inconveniências para leitores de tela. ● Além do aumento na carga cognitiva e dificuldades comportamentais. Mais ainda para deficientes visuais.
  24. 24. Ao entrar ● Mensagem de êxito no acesso é a primeira informação a ser lida. ● Itens do menu têm teclas de atalho. ● O uso do <TAB> foca um link oculto para pular direto para o conteúdo principal e também tem uma tecla de atalho. ● Mural é o conteúdo inicial.
  25. 25. Mural ● Muitos <TABs> até chegar ao conteúdo.
  26. 26. Mural ● Títulos começam com a data, pois percebemos como informação determinante para continuar ouvindo ou pular para o próximo.
  27. 27. Postagem no Mural ● A ferramenta Mural precisa ser acessada pelo menu principal. ● Uma janela do Mural é aberta, separada da página inicial. ● Botões de ação com rótulos genéricos.
  28. 28. Postagem no Mural ● Ao salvar, usuário não recebe confirmação. ● Usuário retorna para tabela com as postagens no mural. ● A visualização das postagens exige interação para acionar e fechar cada uma delas.
  29. 29. Postagem no Mural ● Botão de ação com rótulo específico.
  30. 30. Postagem no Mural ● Foco direto na nova postagem. ● Primeira frase a ser lida é a mensagem de sucesso. ● Humanização temporal, relevância cronológica. ● Leitura sequencial.
  31. 31. Fóruns ● Relação de fóruns em tabela.
  32. 32. Fóruns ● O título de cada fórum começa com a data de atualização.
  33. 33. Lendo um Fórum Hierarquia: ● Fórum ○ Mensagens ■ Comentários
  34. 34. Lendo um Fórum Hierarquia: ● Fórum ○ Mensagens ■ Comentários Entendemos que as mensagens se beneficiaram de um identificador numérico antes do título para indexá-las no fórum. Já os comentários de cada mensagem eram melhor categorizados apenas pelo autor.
  35. 35. Respondendo um Fórum ● Formulário em outra janela. ● Desconectado do contexto. ● Bug: usuário de teclado fica preso no campo de texto, sem conseguir dar TAB. ● Botão de ação com rótulo genérico.
  36. 36. Respondendo um Fórum ● Ao salvar, usuário não recebe confirmação. ● Usuário retorna para início do fórum.
  37. 37. Respondendo um Fórum ● Formulário junto ao contexto do fórum. ● Botão de ação com rótulo específico.
  38. 38. Respondendo um Fórum ● Foco direto na resposta postada. ● Primeira frase a ser lida é a mensagem de sucesso. ● Links para comentar remetem ao número da mensagem a que se referem.
  39. 39. Modificando Mensagem no Fórum ● Janela aberta a partir de botão genérico: “Editar”. ● Aviso de sucesso exige confirmação. ● Usuário retorna para início do fórum.
  40. 40. Modificando Mensagem no Fórum ● A partir do link contextual “Editar minha mensagem”. ● Disponível apenas por 15 minutos após o envio. ● Ao confirmar, foco retorna para a própria mensagem editada e um aviso de sucesso é lido.
  41. 41. Comentando uma Mensagem ● Janela aberta a partir de botão genérico: “Editar”. ● Formulário desconectado do contexto. ● Botão de ação com rótulo genérico.
  42. 42. Comentando uma Mensagem ● Ao salvar, usuário não recebe confirmação. ● Usuário retorna para início do fórum.
  43. 43. Comentando uma Mensagem ● A partir do link contextual “Comentar nª mensagem”. ● Botão de ação com rótulo contextual.
  44. 44. Comentando uma Mensagem ● Foco direto no novo comentário postado. ● Primeira frase a ser lida é a mensagem de sucesso.
  45. 45. Modificando Comentário de Mensagem ● Edição realizada em janela separada. ● Aviso de sucesso exige confirmação. ● Usuário retorna para início do fórum.
  46. 46. Modificando Comentário de Mensagem ● A partir do link contextual “Editar meu comentário”, disponível apenas por 15 minutos após o envio. ● Ao confirmar, foco retorna para comentário editado e um aviso de sucesso é lido.
  47. 47. WIAD 2017 - Interface acessível para educação à distância em 5 diasE SE ? RESULTADO A nova interface, com fluxos e hierarquia/estruturação da informação repensada para a aluna deficiente visual, gerou uma interface melhor para todos os usuários. Uma interface inclusiva e democrática.
  48. 48. WIAD 2017 - Interface acessível para educação à distância em 5 diasQUAL ERA O NOSSO GOAL ? Melhorar o Design Visceral (satisfação) e Comportamental (eficiência + eficácia) para nosso persona.
  49. 49. WIAD 2017 - Interface acessível para educação à distância em 5 diasRESULTADO “Fiquei bastante feliz, pois agora consigo compreender melhor a plataforma e ter acesso aos avisos disponíveis no mural e aos fóruns que penso ser o fundamental para minha participação no curso...” “Super fácil. Acho que a plataforma ficou bastante intuitiva...” “Bom, até o momento não senti falta de nada. A navegação está bastante simplificada, o que facilita o acesso do deficiente visual...” Acessilinda da Web (deficiente visual total)
  50. 50. E é isso... Obrigado aos responsáveis pelo WIADRIO pela oportunidade, e por todos vocês que aguentaram até aqui! JONATHAS SCOTT + DIOGO GALVÃO

×